gpt-oss-120b

We need to output a single HTML file with no script tags.

We must meet the requirements:

- Four animated weather cards: Sunny, Rainy, Snowy, Stormy. Build icons using HTML and CSS only: meaning we can use div elements with shapes (e.g., circles, triangles via border, etc., maybe use pseudo-elements). No external images, no SVG.

- Each card shows an animated icon (sun rays rotating, rain drops falling, snowflakes drifting, lightning flashing). Use pseudo-elements for animation.

- Include city name, temperature, short description.

- Each card has its own background gradient matching the weather.

- Responsive grid: 4 per row on desktop, stacked on mobile. They "lift up on hover" meaning maybe transform: scale(1.05) or translateY(-10px) with box-shadow.

- Smooth infinite animations using @keyframes, respect prefers-reduced-motion (i.e., if prefers-reduced-motion: reduce, remove animation or use minimal).

- No JavaScript. No <script>.

- Must be self-contained with CSS in <style>. Use only HTML.

- All icons must be built from HTML elements and pseudo elements. No images. So need to create Sun icon: use a central circle (div) and multiple rays via pseudo-elements or using repeating radial gradient maybe? Typically use pseudo-elements on a container like .sun .ray::before etc.

- Rain icon: use container with repeated drop shapes using pseudo-elements (maybe use border radius and transform rotate to look raindrop?). Could use vertical line and triangular shape via border: bottom line.

- Snow: simple circles for snowflakes, use ::before and ::after for multiple small circles.

- Storm: lightning bolt shape: use CSS border trick to create a lightning shape, animate opacity to flash.

All must be infinite.

We also must display city name, temperature, description.

Grid layout: using CSS grid or flexbox.

Make sure responsive: using media queries for small screens <= 600px: change columns to 1 (or 2 etc). Provide container display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));.

Make hover effect: transform: translateY(-8px); box-shadow.

Also border radius.

Animate icons using @keyframes:

- Sun: rotate the rays around the central circle. You can have a container with pseudo-element that rotates.

- Rain: use vertical animated lines representing drops falling from top to bottom.

- Snow: small circles falling down, maybe using a pseudo-element for each flake.

- Storm: lightning: flash via opacity change.

Also note: 'respect prefers-reduced-motion' => Use @media (prefers-reduced-motion: reduce) to set animation-duration to 0s or disable.

Then all must be visible on first paint. Provide initial state.

Sorted.

Now let's design the HTML structure. For each card, we can have <div class="card sunny"> etc. Inside each card:

<div class="icon sunny"></div> maybe <div class="weather-icon sunny">.

Probably define generic container: <div class="weather-card sunny">.

Within:

<div class="weather-icon sunny"></div> (the actual icon), then <h2 class="city">City Name</h2>, <div class="temp">25°C</div>, <p class="desc">Clear sky</p>.

Make the icon using HTML and pseudo elements.

But we need to ensure we don't use any script; can use pseudo-element ::before ::after.

One plan: For sun, have .icon.sun .sun-core (the central circle) and .icon.sun .ray (multiple rays). Could create rays via pseudo-element on the container, using an inner element that rotates.

Simplify: Use a container .sun with a central .core (div) and a .rays element with pseudo-element that creates ray shape and rotates.

Specifically:

<div class="icon sunny">
  <div class="sun">
    <div class="core"></div>
  </div>
</div>

Then .sun: position: relative; width/height fixed. .core: position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60%; height:60%; border-radius:50%; background: yellow.

Then .sun::before and ::after for rays? Actually, we can use multiple pseudo-elements for rays: using box-shadow maybe? For rotating rays, we could create a pseudo-element with many linear gradients radial? Or we can create eight rays as small rectangles placed around core using pseudo-element with transform rotate.

Simplify: Have .sun .rays element (div) that is positioned absolute and each ray is a pseudo-element using ::before and ::after (only two). That yields only two pseudo elements. Could instead create multiple rays using multiple pseudo elements with the "multiple box-shadow" technique.

Alternatively, we could use an extra container .ray that uses a repeating shape per rotation.

Simplify further: Use CSS border to create triangular rays. We can create one ray using a pseudo-element with width:0, height:0, border-left:10px solid transparent, border-right:10px solid transparent, border-bottom:20px solid orange; then rotate and duplicate using multiple pseudo-elements like ::before multiple? But we have only ::before and ::after, two possible. You can also generate multiple rays using box-shadow to duplicate. Example: create a small rectangle for ray, and use box-shadow to replicate around circle.

Better approach: Use radial gradient background for central sun and a rotating pseudo-element with four lines as background repeating linear gradient.

But we need to keep it accessible.

Simplify: Instead of showing rotating rays, we can simulate them via rotating container with 4 lines using pseudo-element and multiple shadows.

Implementation details:

Create .sun .rays: define as an element with width: 100%; height:100%; border-radius:50%; position:absolute; top:0; left:0; transform-origin:center; and have a pseudo-element that draws a ray line: either a rectangular element like .rays::before with width: 8px; height: 30%; background: orange; border-radius:4px; position: absolute; top: 10%; left: 50%; transform: translateX(-50%); Then we replicate this ray using box-shadow: shadows rotating? Suppose we want 8 rays equally spaced; we can use transform: rotate(45deg) etc. But we can't easily get multiple pseudo-elements unless we create multiple .ray elements inside .sun.

Simplify: else: use .sun::before to draw a ray; then rotate .sun itself.

We can rotate the .sun container to animate rotation: the central core rotates but the rays are static. But that would appear rotating the whole sun, which includes the core and rays, that's okay; we can animate rotation of .sun.

Thus we can create the sun with core in the middle, rays as pseudo-element. The .sun element's ::before draws some rectangular ray at top, and we style .sun to have pseudo-element representing single ray at top position; we then use ::after perhaps to draw second ray? Actually we can use :before for a single ray and box-shadow to create multiple copies rotated? Not needed: we can just animate rotation of the container to rotate the core and a single ray - but won't show multiple rays.

So we need multiple rays for a proper sun. However, we could cheat by using radial gradient with multiple points? Or we could use background: conic-gradient.

But we must use HTML elements only, but CSS can draw via gradients. Using conic-gradient to create sun rays that rotate: the core is a circle with color, but we could also use pseudo-element with conic-gradient for rays. That may be acceptable because it's pure CSS and no images. It's simpler.

Approach: Use a .sun container with width/height:100px; position:relative; border-radius:50%; overflow:hidden; background: radial-gradient(circle at center, #ffde33 50%, transparent 50%); Actually radial gradient would produce a disc. For rays, use box-shadow pseud.

But we can create a static radial gradient that includes diagonal rays using repeating-conic-gradient? CSS `repeating-conic-gradient` can generate radial rays. For instance:

background: conic-gradient(yellow 0deg 30deg, transparent 30deg 60deg);
But needs animation to rotate these.

So we can create .sun: width: 80px; height:80px; border-radius: 50%; background: conic-gradient(yellow 0deg 30deg, transparent 30deg 60deg, yellow 60deg 90deg, transparent 90deg 120deg, ...). This will create alternating colored rays. Then we have a central core? The conic gradient covers entire disc, but we want the core as solid yellow and rays outward, but we can overlay a smaller circle as core with a container inside.

Better: Have .sun container: position:relative; width:80px; height:80px; Then add .sun .core as a circle inside (width:40px; height:40px). And the container .sun can have a radial gradient of rays: we can use a pseudo-element .sun::before to create the rays using conic gradient with transparent gaps.

Implementation: .sun::before { content:""; position:absolute; inset:0; border-radius:50%; background: conic-gradient(yellow 0deg 10deg, transparent 10deg 20deg, yellow 20deg 30deg, transparent 30deg 40deg, ...); } Then core sits above.

Then rotate .sun using animation to rotate entire `.sun` element (container). That will animate rays.

Ok.

Now Rain: Use .rain container with multiple raindrop shapes: each drop can be created with pseudo-element as an ellipse: width:2px; height:10px; background: lightblue; border-radius:50% 50% 0 0; rotate:45deg to look like drop shape? Or use CSS border to shape a droplet: width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; border-bottom:8px solid #9ecae1; border-radius:50% 50% 0 0; Then animate falling downward with translateY.

We need multiple drops; use multiple pseudo-elements or multiple nested elements for each drop? We cannot generate infinite pseudo elements visually; but we can create a container that has many drops using CSS repeating-linear-gradient? But we need shape. Could use multiple pseudo-elements based on box-shadow to replicate the drop shape horizontally.

Simplify: Use .rain: position:relative; width:80px; height:80px; background: The clouds can be drawn as grey shape. Then have .raindrop elements (e.g., several <div class="drop drop1"></div> ...). We'll have maybe 4-5 <div class="drop"> inside each .rain container; each drop has animation moving from top to bottom with a delay.

Yes, but we need only HTML and CSS, but we can add multiple divs explicitly; it's okay.

Thus for each weather icon, we can have multiple elements.

Similarly for Snow: <div class="snow"><div class="flake"></div> multiple flakes.

Storm: lightning: use a single element that appears as a bolt shape via pseudo-elements and animate its opacity.

Thus overall structure:

<div class="weather-grid">
  <div class="card sunny">
    <div class="icon">
      <!-- sun icon -->
    </div>
    <h2 class="city">Los Angeles</h2>
    <div class="temp">28°C</div>
    <p class="desc">Sunny</p>
  </div>
  <div class="card rainy">
    <div class="icon">
      <!-- rain icon -->
    </div>
    <h2 class="city">Seattle</h2>
    <div class="temp">13°C</div>
    <p class="desc">Rainy</p>
  </div>
  <div class="card snowy">
    <div class="icon">
      <!-- snow icon -->
    </div>
    <h2 class="city">Denver</h2>
    <div class="temp">-2°C</div>
    <p class="desc">Snow</p>
  </div>
  <div class="card stormy">
    <div class="icon">
      <!-- storm icon -->
    </div>
    <h2 class="city">Miami</h2>
    <div class="temp">24°C</div>
    <p class="desc">Storm</p>
  </div>
</div>

Now define CSS:

General grid: display:grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap:1.5rem; padding:2rem; background:#f0f0f0;

.card: background: gradient per type, border-radius:0.75rem; overflow:hidden; padding:1rem; text-align:center; color:#333; box-shadow:0 4px 6px rgba(0,0,0,0.1); transition: transform 0.3s, box-shadow 0.3s; On hover: transform: translateY(-8px) scale(1.02); box-shadow:0 8px 12px rgba(0,0,0,0.2).

Define gradient per type:

.sunny: background: linear-gradient(135deg, #fce38a, #f38181);

.rainy: background: linear-gradient(135deg, #a1c4fd, #c2e9fb);

.snowy: background: linear-gradient(135deg, #e0eafc, #cfdef3);

.stormy: background: linear-gradient(135deg, #373b44, #4286f4); Or dark.

Define .icon: display:flex; justify-content:center; align-items:center; margin-bottom:0.5rem.

Define each weather icon's size: .icon > * (maybe .sun, .rain, .snow, .storm) width/height:80px.

Now design each icon.

## Sunny Icon

HTML inside .icon for sunny: <div class="sun"></div>

Define .sun: position:relative; width:80px; height:80px; margin:auto; 

sun's core: .sun::after { content:""; position:absolute; inset:20%; border-radius:50%; background:#FFEB3B; box-shadow:0 0 10px 2px #ffeb3b; } 

sun's rays: .sun::before { content:""; position:absolute; inset:0; border-radius:50%; background: conic-gradient(#FFEB3B 0deg 20deg, transparent 20deg 40deg, #FFEB3B 40deg 60deg, transparent 60deg 80deg, #FFEB3B 80deg 100deg, transparent 100deg 120deg); // Actually we need full circle repeated.

But we can create conic-gradient with repeating pattern: repeating-conic-gradient(#FFEB3B 0deg 30deg, transparent 30deg 60deg). The repeating pattern will fill the circle with alternating rays. To create visible rays we may add a transparent center: maybe we want a central core separate. Our ::before is the rays overlay; we apply animation: rotate 0deg to 360deg infinite.

Therefore use .sun::before { background: repeating-conic-gradient( #FFEB3B 0deg 30deg, transparent 30deg 60deg ); }

Now set animation: .sun { animation: spin 6s linear infinite; }

But we need to respect prefers-reduced-motion: define @media (prefers-reduced-motion: reduce){ .sun { animation: none; } }

Potentially the repeating-conic-gradient may need to be defined with correct angle units. Use degrees.

Make sure to add transform-origin: center; Perhaps .sun must have transform-origin: center.

But rotating .sun rotates also core (the ::after). That's okay; the core rotates but it's symmetric, appearing unchanged.

Alternatively we could animate pseudo-element only, but fine.

Thus implement .sun { animation: spin 12s linear infinite; } and define @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }. 

Now the core is defined via ::after with inset: 25% (makes size 50% of container) making a circle.

Add glow effect: maybe box-shadow for rays.

Now check: integrated.

## Rainy Icon

HTML: <div class="rain"><div class="cloud"></div><div class="drop d1"></div><div class="drop d2"></div><div class="drop d3"></div><div class="drop d4"></div></div>

We can build a cloud shape using a pseudo-element: .cloud can be a container with border-radius: 50% to create a fuzzy cloud shape. For simplicity use .cloud: width:50px; height:30px; background:#BBB; border-radius:50% 50% 50% 50% 50%/50% 50% 50% 50%; Actually we could use more shapes: .cloud::before and ::after for extra circles.

Simplify: .cloud as a simple rounded rectangle with border-radius: 50% 50% 45% 45%; Provide central shape.

We'll make .rain container relative, width: 80px; height:80px.

Cloud positioned at top; drops positioned beneath and animated downward.

Define .cloud: position:absolute; top:10%; left:50%; width:50px; height:30px; background:#aaa; border-radius: 50% 50% 40% 40%; transform: translateX(-50%); (makes center at top of icon). Use pseudo-elements to add two smaller circles for more cloud shape.

Define .cloud::before and ::after: width:30px; height:30px; background:#aaa; border-radius:50%; position:absolute; top:-10px; left:-15px (one left) and right.

Now .drop: position:absolute; top:50%; left: 50%; width:2px; height:10px; background:#9ecae1; border-radius:50% 50% 50% 50%; transform: translateX(-50%); animate falling.

Better shape for raindrop: width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; border-bottom:10px solid #9ecae1; border-radius:50% 50% 0 0; But using rectangle may be okay.

We can use elliptical shape: width:8px; height:12px; background:#9ecae1; border-radius:50% 50% 50% 50%; 

But we want shape like drop. Use an elongated shape.

Simplify: .drop: width:4px; height:12px; background:#9ecae1; border-radius:50% 50% 50% 0; adjustment.

Ok.

Now animation: @keyframes fall { 0% { transform: translate(-50%,0) ; opacity: 1; } 80% { transform: translate(-50%,20px); opacity: 1; } 100% { transform: translate(-50%, 20px); opacity:0; } }

We can use translateY using CSS.

Better: define .drop { animation: fall 1.5s linear infinite; } Use nth-child for each drop with different animation-delay to create continuous falling.

Potential challenge: It may appear just falling from same spot; we can randomize left offset per drop: using .drop:nth-child(2) { left: 30%; } .drop:nth-child(3) { left: 70% } etc.

Also we use `top: 30%` to start near top.

Define each drop with class .drop (global) and use :nth-of-type to set left offset and delay.

Additionally, for prefers-reduced-motion: disable animation: .rain .drop { animation:none; }

## Snowy Icon

HTML: <div class="snow"><div class="cloud"></div><div class="flake f1"></div><div class="flake f2"></div><div class="flake f3"></div><div class="flake f4"></div><div class="flake f5"></div></div>

Use similar cloud shape as rain for the cloud.

Flake: small white circle using border and rotate slowly to drift.

.flake: position:absolute; width:8px; height:8px; background:#fff; border-radius:50%; box-shadow: 0 0 2px rgba(255,255,255,0.8); Possibly also create css for polka? Use pseudo-element for additional arms? But just circle is okay.

Animate vertical falling and horizontal drift: @keyframes drift { 0% { transform: translate(-50%, 0) rotate(0deg); opacity: 1; } 100% { transform: translate(-50%, 30px) rotate(360deg); opacity: 0; } } Or we can use move down slowly.

Set multiple flakes with left offsets and different delay.

Prefer reduced motion: disable.

## Stormy Icon

HTML: <div class="storm"><div class="cloud"></div><div class="lightning"></div></div>

Cloud similar to previous like rain.

Lightning: shape using pseudo-element of a `div` with width:0; height:0; border-left:10px solid transparent; border-right:10px solid transparent; border-bottom:20px solid #fff700; transform: rotate(20deg) ; placed below cloud.

Animation: flashing: opacity changes from 0 to 1 abruptly at intervals.

Define @keyframes flash { 0%, 20%, 100%{ opacity:0; } 10%{ opacity:1; } 30%{ opacity:0; } } small duration.

Apply to .lightning with animation infinite.

Also maybe lightning moves slightly.

Now details.

Also need to set color scheme to differentiate.

Now need to include the entire CSS for all of these.

Let's design incremental.

Consider potential CSS code length.

Make sure all elements are positioned relative within icon container.

General .icon container: position:relative; width:80px; height:80px; margin:auto.

Then within .icon, for each weather, embed appropriate child elements.

Now code.

We'll create an HTML page: <!DOCTYPE html><html><head><meta charset="UTF-8"><title>Weather Cards</title><style>...</style></head><body>... <div class="weather-grid">...</div></body></html>.

Add meta viewport for responsive.

Make sure grid container selects .weather-grid .card.

Now we need to ensure that all icons display correctly. Let's implement each one carefully.

### Sunny

HTML: <div class="icon sun-icon"><div class="sun"></div></div> need class to style generic .icon possibly.

In .sun we have pseudo and core. Write CSS:

.sun { position:relative; width:80px; height:80px; margin:auto; border-radius: 50%; /* maybe not needed */ } Actually we can use container .sun for rotation. Use .sun::before for rays, .sun::after for core.

CSS:

.sun { position:relative; width:80px; height:80px; margin:auto; animation: spin 12s linear infinite; }

.sun::before { content:""; position:absolute; inset:0; border-radius:50%; background: repeating-conic-gradient(#FFEB3B 0deg 30deg, transparent 30deg 60deg); }

.sun::after { content:""; position:absolute; inset:20%; border-radius:50%; background:#FFEB3B; box-shadow:0 0 8px 2px rgba(255,235,59,0.7); }

But repeating-conic-gradient repeats pattern radially; the core in the center will be unchanged as it is overlaid.

But some browsers may require prefix? Not needed.

Now animation: @keyframes spin { from{transform:rotate(0deg);} to{transform:rotate(360deg);} }

Also we need to disable for reduced motion: @media (prefers-reduced-motion: reduce) { .sun{ animation:none; } }

But the words "sun" maybe class for container, but we also need .sun-icon? Not needed. For each card we can varying .sun.

### Rain

HTML similar:

<div class="icon rain-icon"><div class="rain">
  <div class="cloud"></div>
  <div class="drop d1"></div>
  <div class="drop d2"></div>
  <div class="drop d3"></div>
  <div class="drop d4"></div>
</div></div>

Now CSS:

.rain { position:relative; width:80px; height:80px; margin:auto; }

.cloud: position:absolute; top:10%; left:50%; width:50px; height:30px; background:#c0c0c0; border-radius:50% 50% 40% 40%; transform:translateX(-50%); 

.cloud::before, .cloud::after for extra circles to simulate fluff: width:30px; height:30px; border-radius:50%; background:#c0c0c0; position:absolute. left:-20px; top:5px; ; second one right: right:-20px; top:5px;

OR we can define .cloud: also need pseudo background for extra.

Yeah:

.cloud::before { content:""; position:absolute; width:30px; height:30px; background:#c0c0c0; border-radius:50%; left:-15px; top:0; }
.cloud::after { content:""; position:absolute; width:30px; height:30px; background:#c0c0c0; border-radius:50%; right:-15px; top:0; }

Thus cloud will look like three circles.

Now .drop: position:absolute; width:4px; height:10px; background:#9ecae1; border-radius:2px; bottom:0; We can add transform: translateX(-50%); start top near cloud bottom: top:45%;

We'll animate using @keyframes fall.

Example:

.drop { position:absolute; top:45%; left:50%; width:4px; height:12px; background:#9ecae1; border-radius:2px; animation: fall 1s linear infinite; }

But include nth-child to offset start positions:

.drop:nth-child(2){ left:30%; animation-delay:0.2s;}
.drop:nth-child(3){ left:70%; animation-delay:0.4s;}
.drop:nth-child(4){ left:50%; animation-delay:0.6s;}
(drop at index? Actually we need correct selectors because .cloud is first child before drops). So .drop are after .cloud; use .rain .drop:nth-of-type(1) etc. Actually .drop are elements of class .drop; there are multiple .drop. So we can use .rain .drop:nth-child(2) etc but note that .cloud is the first child; the drop array starts from second child.

Better: add class to each drop: .drop.d1 etc. Then we can set left positions and delays for each via .rain .d1, .d2, .d3, .d4.

Let's assign <div class="drop d1"></div> etc. Then CSS:

.d1 { left: 30%; animation-delay: 0s; }
.d2 { left: 50%; animation-delay: 0.3s; }
.d3 { left: 70%; animation-delay: 0.6s; }
.d4 { left: 90%; animation-delay: 0.9s; }

But position relative to container; left in terms of percent based on container width.

Better: Use left: 20% maybe.

Define .drop { position:absolute; top:50%; width:4px; height:10px; background:#9ecae1; border-radius:2px; animation: fall 1s linear infinite; }

Set left and delays per class.

Define keyframes:

@keyframes fall {
  0% { transform: translateY(0); opacity:1; }
  80% { transform: translateY(15px); opacity:1; }
  100% { transform: translateY(15px); opacity:0; }
}

Thus the drop appears, falls, then disappears. The next iteration will produce repetition.

Now reduced motion: .rain .drop { animation:none; }

### Snow

HTML:

<div class="icon snow-icon"><div class="snow">
  <div class="cloud"></div>
  <div class="flake f1"></div>
  <div class="flake f2"></div>
  <div class="flake f3"></div>
  <div class="flake f4"></div>
  <div class="flake f5"></div>
</div></div>

Define .snow similar to .rain: container.

.cloud can be same shape but more grey/white: maybe #bbb.

Define .cloud background: #c0c0c0.

For snowflakes, .flake: width:6px; height:6px; background:white; border-radius:50%; box-shadow:0 0 2px #fff; position:absolute; top:45%; left:50%; animation: drift 2s linear infinite; Use transforms: both vertical and lateral.

Add left offsets for each flake via classes .f1, .f2 etc.

Define .flake.f1 { left:20%; animation-delay:0s; }
.f2 left:40% delay:0.4s; .f3 left:60% delay:0.8s; .f4 left:80% delay:1.2s; .f5 left:50% delay:0.2s.

Keyframes drift: 0% { transform: translateY(0) rotate(0deg); opacity:1; } 80% { transform: translateY(15px) rotate(360deg); opacity:1; } 100% { transform: translateY(15px) rotate(360deg); opacity:0; }

Thus each flake floats down and rotates.

Reduced motion: .snow .flake { animation:none; }

### Storm

HTML:

<div class="icon storm-icon"><div class="storm">
  <div class="cloud"></div>
  <div class="lightning"></div>
</div></div>

Define .storm similar container.

.cloud similar but maybe color darker: #888.

Lightning: Use pseudo-element to create shape via CSS border.

Define .lightning { position:absolute; top:40%; left:50%; width:0; height:0; border-left:8px solid transparent; border-right:8px solid transparent; border-bottom:20px solid #fff700; transform: translateX(-50%) rotate(10deg); animation: flash 1.5s linear infinite; }

Define @keyframes flash { 0%, 20%, 100% { opacity:0; } 10% { opacity:1; } }

The lightning's flash will appear.

Add a second bolt? Could use ::before for second bolt.

Simplify: Use .lightning::before for secondary smaller bolt: same shape but smaller and offset.

Define .lightning::before { content:""; position:absolute; top:6px; left:-8px; width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-bottom:12px solid #fff700; transform:rotate(-20deg); } This may simulate thunder.

Make the whole .lightning flashing; they fade.

Reduced motion: .lightning { animation:none; }

Now styling.

Add responsive grid: .weather-grid { display:grid; gap:1.5rem; padding:1.5rem; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); }

Now .card generic:

.card { border-radius: 0.75rem; overflow:hidden; color:#fff; padding:1.5rem; text-align:center; box-shadow:0 4px8px rgba(0,0,0,0.2); transition: transform .3s, box-shadow .3s; display:flex; flex-direction:column; align-items:center; height:auto; }

Define .card h2, .card .temp, .card .desc.

Set .city: margin:0.5rem 0 0.2rem; font-size:1.25rem; font-weight:600; .temp { font-size:2rem; font-weight:500; margin-bottom:0.3rem; } .desc { font-size:1rem; opacity:0.9; }

Now gradient backgrounds per .sunny, .rainy, .snowy, .stormy.

.card.sunny { background: linear-gradient(135deg, #fce38a, #f38181); } .card.rainy { background: linear-gradient(135deg, #a1c4fd, #c2e9fb); } .card.snowy { background: linear-gradient(135deg, #e0eafc, #cfdef3); } .card.stormy { background: linear-gradient(135deg, #2c3e50, #4ca1af); }

Set color respond to backgrounds: text color could be dark or light accordingly. Use relative color: .card.sunny, .card.rainy, .card.snowy use #333 (dark) maybe white works for storm.

Better: Use color: #333 for sunny, rainy, snowy; for stormy, use #fff.

Alternatively, set .card (color:#333) and override .card.stormy {color:#fff;}. Then ensure strong readability.

Now add hover effect: .card:hover { transform: translateY(-8px) scale(1.02); box-shadow:0 12px 16px rgba(0,0,0,0.3); }

Now consider small screens: the grid will auto-fit.

Now test.

Potential issues: using repeating-conic-gradient may not be widely supported in older browsers, but in Chrome it's fine. Also maybe the gradient may not show distinct rays if they are too narrow; but using color and transparent alternate will create rays.

We may want more distinct rays: use #ffeb3b for color, transparent otherwise.

Define .sun::before { content:""; position:absolute; inset:0; border-radius:50%; background: repeating-conic-gradient( #ffeb3b 0deg 30deg, transparent 30deg 60deg ); } This yields strips.

Potentially the visible rays will be triangular shape, but okay.

Now the .storm's cloud may not have pseudo elements for cloud shape.

Actually .cloud used for sunny? Not needed.

The rain and snow each have .cloud.

Define .cloud generic class .cloud used across cards:

.cloud { position:absolute; top:15%; left:50%; width:50px; height:30px; background:#bbb; border-radius:50% 50% 40% 40%; transform: translateX(-50%); }
.cloud::before, .cloud::after { content:""; position:absolute; width:30px; height:30px; background:#bbb; border-radius:50%; top:-10px; }
.cloud::before { left:-20px; }
.cloud::after { right:-20px; }

Set .cloud color for each weather: maybe change fill style to match theme. We can assign .rainy .cloud { background:#8dade6; } Actually we might want to customize colors: for rainy, cloud may be #9ecae1? Wait that is raindrop color. For cloud we can use #5c5c5c maybe.

Simplify: Keep cloud same color across rainy and snowy.

Now the .sun does not have cloud.

Now we need to ensure proper error handling: no script errors.

Now we need to set ARIA maybe not needed.

Now final HTML code.

Let's implement each card's HTML:

<div class="card sunny">
    <div class="icon">
        <div class="sun"></div>
    </div>
    <h2 class="city">Los Angeles</h2>
    <div class="temp">28°C</div>
    <p class="desc">Sunny</p>
</div>

<div class="card rainy">
    <div class="icon">
        <div class="rain">
            <div class="cloud"></div>
            <div class="drop d1"></div>
            <div class="drop d2"></div>
            <div class="drop d3"></div>
            <div class="drop d4"></div>
        </div>
    </div>
    <h2 class="city">Seattle</h2>
    <div class="temp">13°C</div>
    <p class="desc">Rainy</p>
</div>

<div class="card snowy">
    <div class="icon">
        <div class="snow">
            <div class="cloud"></div>
            <div class="flake f1"></div>
            <div class="flake f2"></div>
            <div class="flake f3"></div>
            <div class="flake f4"></div>
            <div class="flake f5"></div>
        </div>
    </div>
    <h2 class="city">Denver</h2>
    <div class="temp">-2°C</div>
    <p class="desc">Snowy</p>
</div>

<div class="card stormy">
    <div class="icon">
        <div class="storm">
            <div class="cloud"></div>
            <div class="lightning"></div>
        </div>
    </div>
    <h2 class="city">Miami</h2>
    <div class="temp">24°C</div>
    <p class="desc">Stormy</p>
</div>

Check each icon: .icon can apply CSS to center.

Now we need to handle outer container:

<div class="weather-grid">
   <!-- cards -->
</div>

Now full CSS:

Let's write CSS stepwise.

First, reset margin etc.

body: margin:0; font-family:Arial, sans-serif; background:#eee; color:#333;

Add meta viewport.

Now general grid:

.weather-grid { display: grid; gap: 1.5rem; padding: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

Now .card:

.card { border-radius: .75rem; overflow:hidden; padding: 1.5rem; text-align:center; box-shadow: 0 4px 6px rgba(0,0,0,0.1); transition: transform .3s, box-shadow .3s; display:flex; flex-direction:column; align-items:center; color:#333; }

Specific variants:

.card.sunny { background: linear-gradient(135deg, #fce38a, #f38181); } // warm gradient

.card.rainy { background: linear-gradient(135deg, #a1c4fd, #c2e9fb); }

.card.snowy { background: linear-gradient(135deg, #e0eafc, #cfdef3); }

.card.stormy { background: linear-gradient(135deg, #2c3e50, #4ca1af); color:#fff; }

Now .card:hover { transform: translateY(-8px) scale(1.02); box-shadow:0 12px 20px rgba(0,0,0,0.2); }

Now .icon: maybe width: 80px; height:80px; margin-bottom:0.5rem; position:relative; This is container for icons.

.icon { width:80px; height:80px; margin-bottom:0.5rem; position:relative; }

Now style each icon child:

### Sun

.sun { position:relative; width:80px; height:80px; animation: spin 12s linear infinite; }

.sun::before, .sun::after defined.

.sun::before { content:""; position:absolute; inset:0; border-radius:50%; background: repeating-conic-gradient( #ffeb3b 0deg 30deg, transparent 30deg 60deg ); }

.sun::after { content:""; position:absolute; inset:20%; border-radius:50%; background:#ffeb3b; box-shadow: 0 0 8px 2px rgba(255,235,59,0.7); }

@keyframes spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }

Now @media prefers-reduced-motion: reduce for .sun { animation:none; }

Better: Write:

@media (prefers-reduced-motion: reduce) {
  .sun { animation:none; }
}

Works.

### Rain

.rain { position:relative; width:80px; height:80px; margin:auto; overflow:hidden; }

.rain .cloud { position:absolute; top:12%; left:50%; width:50px; height:30px; background:#bbb; border-radius:50% 50% 40% 40%; transform:translateX(-50%); }

.rain .cloud::before, .rain .cloud::after { content:""; position:absolute; width:30px; height:30px; background:#bbb; border-radius:50%; top:-10px; }

.rain .cloud::before { left:-15px; }
.rain .cloud::after { right:-15px; }

Drop styling:

.rain .drop { position:absolute; top:45%; width:4px; height:12px; background:#9ecae1; border-radius:2px; opacity:0; animation: fall 1.5s linear infinite; }

Set left offsets and delays per class:

.rain .d1 { left:30%; animation-delay:0s; }
.rain .d2 { left:50%; animation-delay:0.4s; }
.rain .d3 { left:70%; animation-delay:0.8s; }
.rain .d4 { left:85%; animation-delay:1.2s; }

Alternatively, we might need more drops for continuous effect. It's fine.

Define keyframes:

@keyframes fall {
  0% { transform: translateY(-10px); opacity:1; }
  80% { opacity:1; }
  100% { transform: translateY(30px); opacity:0; }
}

Note: Using transform: translateY with starting position top:45%? Actually transform relative to its original top: we can set top:10% maybe.

Better: top:15% makes start near cloud.

Let's adjust: .drop { top:15%; }

Then keyframes: transform: translateY(0) to translateY(35px). That will move downwards.

Set drop width: maybe 2px? Instead 3px, but fine.

Set initial opacity: at 0% we want visible then disappear at 100%.

Implement.

Add reduced motion preferences: .rain .drop { animation:none; }

Now raindrop shape: Might look like rectangle; fine.

Optional: Add border radius for more drop shape.

### Snow

.snow { position:relative; width:80px; height:80px; margin:auto; overflow:hidden; }

.snow .cloud { same style as .rain .cloud but maybe lighter color. Use same .cloud class but .snow card may set cloud color differently. Could assign .snow .cloud { background:#fff; } but use CSS: .snow .cloud { background:#eee; }.

Define .snow .cloud with similar pseudo elements.

Snow flake style:

.snow .flake { position:absolute; top:15%; width:6px; height:6px; background:#fff; border-radius:50%; opacity:0; box-shadow:0 0 2px rgba(255,255,255,0.8); animation: drift 2s linear infinite; }

Set offsets and delays per flake class:

.snow .f1 { left:20%; animation-delay:0s; }
.snow .f2 { left:40%; animation-delay:0.5s; }
.snow .f3 { left:60%; animation-delay:1s; }
.snow .f4 { left:80%; animation-delay:1.5s; }
.snow .f5 { left:50%; animation-delay:0.75s; }

Define keyframes drift:

@keyframes drift {
  0% { transform: translateY(0) rotate(0deg); opacity:1; }
  80% { opacity:1; }
  100% { transform: translateY(40px) rotate(360deg); opacity:0; }
}

Add reduced motion: .snow .flake { animation:none; }

### Storm

.storm { position:relative; width:80px; height:80px; margin:auto; overflow:hidden; }

.storm .cloud { same shape but darker: background:#555; }

Define .storm .cloud { background:#555; }

.storm .lightning { position:absolute; top:45%; left:50%; width:0; height:0; border-left:10px solid transparent; border-right:10px solid transparent; border-bottom:20px solid #fff700; transform:translateX(-50%) rotate(10deg); opacity:0; animation: flash 2s linear infinite; }

Define ::before for second bolt:

.storm .lightning::before { content:""; position:absolute; top:6px; left:-7px; width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent; border-bottom:12px solid #fff700; transform:rotate(-20deg); }

Define keyframes flash:

@keyframes flash {
  0%, 20%, 100% { opacity:0; }
  10% { opacity:1; }
  30% { opacity:0; }
  40% { opacity:1; } // optional extra flash
  50% { opacity:0; }
}

But consistent: For simple we can just have one flash.

Simplify:

@keyframes flash {
  0%, 80%, 100% { opacity:0; }
  10% { opacity:1; }
  30% { opacity:0; }
}

Set animation: flash 3s linear infinite.

Add reduced motion: .storm .lightning { animation:none; }

Now final styling.

Also define .card a h2 element styling.

Wrap everything.

Now ensure that all pseudo-element content is defined with content:"". Also ensure they are properly overwritten.

Better to have classes for each city etc.

Ok.

Now make sure that the code has no script tags. We'll embed CSS within <style>.

Add <meta name="viewport" content="width=device-width, initial-scale=1">.

Consider adding some fonts that may help, but not required.

Now test in headless mental environment.

Let's assemble complete HTML.

---

First, the <head> includes <meta charset="UTF-8">, <meta name="viewport">, <title>Animated Weather Cards</title>. Then <style> with everything.

Will the conic gradient be correct? `repeating-conic-gradient` animate rotates. But the gradient must have defined colors for clear rays: maybe using #FFEB3B for colored part and transparent for gaps. Possibly the gap may show the core background color; but core overlay may hide.

Test: .sun ::before gradient will fill background from center to edges; but our core ::after covers central part; the rays start from center extending outward; the background shows the gradient segments; the transparent parts reveal underlying container background which might be default (transparent) but will show the container's background (the card's background gradient). That may be undesirable because transparent rays show the gradient of card. We could set the container's background to some base color maybe #fff or at least consistent across weather backgrounds; but each card's gradient matters.

But we can pass the entire .sun background to be transparent and then core overlay; color may appear okay.

Alternatively, we can design sun rays using radial gradient on pseudo element.

Simplify: Use a pseudo-element with multiple small linear gradient lines representing rays around, like using CSS `box-shadow` to add 8 lines.

But prepping a sun icon now:

Simpler approach: Use a central circle for core, and surrounding 8 small rectangular rays built using pseudo-elements counting with nth-child? Not easily.

Another approach: Use multiple pseudo elements via pseudo-element and multiple box shadows: We can create a small square representing a ray, then use box-shadow to duplicate it at different positions; then rotate the container to animate.

Example:

.sun {
  position:relative;
  width:80px;
  height:80px;
  margin:auto;
}

.sun::before {
  content:"";
  position:absolute;
  inset:0;
  display:block;
  border-radius:50%;
  background:#FFEB3B;  // central core
}

But we need rays separate.

Better: Use .sun::after for central core, and .sun .rays? Or create .sun .ray container with multiple pseudo elements?

Uses CSS trick: Use radial gradient to mimic rays: multiple wedge shapes, but rotating will animate.

But okay, we can accept that transparent gaps will show card background, but those spaces will be relatively small.

Alternatively, create radial gradient based on `conic-gradient` with transparent and color sections. Transparent will show central core? Wait actually we overlay core on top of gradient; for transparent sections beyond core, the underlying card gradient will show, but we can set card background for sunny to a lighter color, but gradient may show subtle.

Could see as sun with bright background; but maybe okay.

Alternatively, we can make gradient using `conic-gradient` where the transparent sections are replaced with a radial gradient of small alpha perhaps? We could use semi-transparent color.

Better: Use `conic-gradient` with color RGBA that gradually fades out; but not needed.

Alright.

Now test each card.

Potential issues: `.rain .drop` animation might not look good; but fine.

Potential issues: `.snow .flake` may not show visible due to white on white for card background gradients (snowy card gradient is light). The flake white may not be visible on a light gradient. Use a slightly blueish or grayish snow? Or use a lightly translucent white maybe with border or using `box-shadow` to differentiate.

Alternatively, use `#fff` but on #e0eafc; The gradient includes whites; flake may be less visible. Could color flake as #fff with black outline (border 1px solid #e0eafc). Or use `background: #fff;` with `box-shadow:0 0 1px #000`. Use lighten.

Better: Use absolute white but apply subtle CSS `filter: drop-shadow(0 0 2px #333);`. That would create visible flake.

Simplify: Use `background:#fff; border:1px solid #ccc;`.

Will add.

Now for storm lightning: color #ffeb3b? Actually lightning color typical bright yellow/white.

Wanted shape: use `#fff700` (yellow). Flashes against dark storm gradient; may be visible.

Now need to adapt shadows for different backgrounds.

Now implement.

Eventually output is a single code block inside fence: ```html ... ```.

Now produce final answer.

But before final code, we need to verify each CSS rule and ensure no typographic errors. Also check that we define proper pseudo-element unmatched content. Also check that the CSS targeting is correct for `.rain .drop` etc.

Let's write CSS from top.

**CSS Reset**:

```css
* {
  box-sizing: border-box;
  margin:0;
  padding:0;
}
```

Set body:

```css
body {
  font-family: Arial, Helvetica, sans-serif;
  background:#f2f2f2;
  color:#333;
  line-height:1.5;
}
```

Define grid container:

```css
.weather-grid {
  display: grid;
  gap: 1.5rem;
  padding: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
```

Define card base:

```css
.card {
  border-radius: .75rem;
  overflow:hidden;
  padding:1.5rem;
  text-align:center;
  color:inherit;
  box-shadow:0 4px 6px rgba(0,0,0,0.1);
  transition: transform .3s, box-shadow .3s;
  display:flex;
  flex-direction:column;
  align-items:center;
}
```

Set variant backgrounds:

```css
.card.sunny { background: linear-gradient(135deg, #fce38a, #f38181); }
.card.rainy { background: linear-gradient(135deg, #a1c4fd, #c2e9fb); }
.card.snowy { background: linear-gradient(135deg, #e0eafc, #cfdef3); }
.card.stormy { background: linear-gradient(135deg, #2c3e50, #4ca1af); color:#fff; }
```

Hover effect:

```css
.card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow:0 12px 20px rgba(0,0,0,0.2);
}
```

Now icon container:

```css
.icon {
  width:80px;
  height:80px;
  margin-bottom:0.75rem;
  position:relative;
}
```

Now text styling:

```css
.city {
  margin:0.5rem 0 0.2rem;
  font-size:1.25rem;
  font-weight:600;
}
.temp {
  margin-bottom:0.3rem;
  font-size:2rem;
  font-weight:500;
}
.desc {
  font-size:1rem;
  opacity:0.9;
}
```

Now sun:

```css
/* Sun */
.sun {
  width:80px;
  height:80px;
  margin:auto;
  position:relative;
  animation: spin 12s linear infinite;
}
.sun::before {
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background: repeating-conic-gradient( #ffeb3b 0deg 30deg, transparent 30deg 60deg );
}
.sun::after {
  content:"";
  position:absolute;
  inset:20%;
  border-radius:50%;
  background:#ffeb3b;
  box-shadow:0 0 8px 2px rgba(255,235,59,0.7);
}
@keyframes spin {
  from { transform:rotate(0deg); }
  to { transform:rotate(360deg); }
}
```

Reduced motion:

```css
@media (prefers-reduced-motion: reduce) {
  .sun { animation:none; }
}
```

Now rainy:

Add .rain container; cloud; drop.

```css
/* Rain */
.rain {
  width:80px;
  height:80px;
  position:relative;
  overflow:hidden;
}
.rain .cloud {
  position:absolute;
  top:12%;
  left:50%;
  width:50px;
  height:30px;
  background:#bbb;
  border-radius:50% 50% 40% 40%;
  transform:translateX(-50%);
}
.rain .cloud::before,
.rain .cloud::after {
  content:"";
  position:absolute;
  width:30px;
  height:30px;
  background:#bbb;
  border-radius:50%;
  top:-10px;
}
.rain .cloud::before { left:-15px; }
.rain .cloud::after { right:-15px; }

.rain .drop {
  position:absolute;
  top:25%;
  width:4px;
  height:12px;
  background:#9ecae1;
  border-radius:2px;
  opacity:0;
  animation: fall 1.5s linear infinite;
}
.rain .d1 { left:30%; animation-delay:0s; }
.rain .d2 { left:50%; animation-delay:0.4s; }
.rain .d3 { left:70%; animation-delay:0.8s; }
.rain .d4 { left:85%; animation-delay:1.2s; }

@keyframes fall {
  0% {
    transform: translateY(0);
    opacity:1;
  }
  70% {
    opacity:1;
  }
  100% {
    transform: translateY(30px);
    opacity:0;
  }
}
```

Reduced motion for rain:

```css
@media (prefers-reduced-motion: reduce) {
  .rain .drop { animation:none; }
}
```

Now snow:

```css
/* Snow */
.snow {
  width:80px;
  height:80px;
  position:relative;
  overflow:hidden;
}
.snow .cloud {
  position:absolute;
  top:12%;
  left:50%;
  width:50px;
  height:30px;
  background:#777;
  border-radius:50% 50% 40% 40%;
  transform:translateX(-50%);
}
.snow .cloud::before,
.snow .cloud::after {
  content:"";
  position:absolute;
  width:30px;
  height:30px;
  background:#777;
  border-radius:50%;
  top:-10px;
}
.snow .cloud::before { left:-15px; }
.snow .cloud::after { right:-15px; }

.snow .flake {
  position:absolute;
  top:15%;
  width:6px;
  height:6px;
  background:#fff;
  border-radius:50%;
  opacity:0;
  box-shadow:0 0 2px rgba(255,255,255,0.9);
  animation: drift 2s linear infinite;
}
.snow .f1 { left:20%; animation-delay:0s; }
.snow .f2 { left:40%; animation-delay:0.5s; }
.snow .f3 { left:60%; animation-delay:1s; }
.snow .f4 { left:80%; animation-delay:1.5s; }
.snow .f5 { left:50%; animation-delay:0.75s; }

@keyframes drift {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity:1;
  }
  70% {
    opacity:1;
  }
  100% {
    transform: translateY(40px) rotate(360deg);
    opacity:0;
  }
}
```

Reduced motion:

```css
@media (prefers-reduced-motion: reduce) {
  .snow .flake { animation:none; }
}
```

Now storm:

```css
/* Storm */
.storm {
  width:80px;
  height:80px;
  position:relative;
  overflow:hidden;
}
.storm .cloud {
  position:absolute;
  top:12%;
  left:50%;
  width:50px;
  height:30px;
  background:#555;
  border-radius:50% 50% 40% 40%;
  transform:translateX(-50%);
}
.storm .cloud::before,
.storm .cloud::after {
  content:"";
  position:absolute;
  width:30px;
  height:30px;
  background:#555;
  border-radius:50%;
  top:-10px;
}
.storm .cloud::before { left:-15px; }
.storm .cloud::after { right:-15px; }

.storm .lightning {
  position:absolute;
  top:45%;
  left:50%;
  width:0;
  height:0;
  border-left:10px solid transparent;
  border-right:10px solid transparent;
  border-bottom:20px solid #fff700;
  transform:translateX(-50%) rotate(10deg);
  opacity:0;
  animation: flash 2.5s linear infinite;
}
.storm .lightning::before {
  content:"";
  position:absolute;
  top:6px;
  left:-7px;
  width:0;
  height:0;
  border-left:6px solid transparent;
  border-right:6px solid transparent;
  border-bottom:12px solid #fff700;
  transform:rotate(-20deg);
}
@keyframes flash {
  0%, 80%, 100% { opacity:0; }
  10% { opacity:1; }
  30% { opacity:0; }
}
```

Reduced motion:

```css
@media (prefers-reduced-motion: reduce) {
  .storm .lightning { animation:none; }
}
```

Other considerations: The .cloud pseudo-elements may get overlapped; fine.

We must ensure the class names `.d1` `.d2` etc are defined only for rain.

Now we need to adapt colors for each card:

- .card.sunny may have a yellow gradient; the sun icon color matches.

- .card.rainy gradient is blue, drop color is #9ecae1 (light blue), cloud is #bbb.

- .card.snowy gradient is also light but cloud is #777 (gray) and flakes white may be subtle; but okay.

Potential improvement: Use `#fff` but with bounce vs background. We can add a subtle drop-shadow or outline for flakes: `border:1px solid #ddd;` might help.

Better: Use color #fff; plus `box-shadow` for subtle outline; It should be visible.

Now responsive: grid uses auto-fit for small, stacking.

Test on narrow width: grid columns become 1 if width < 260.

Also have container width auto fill.

Now ensure no overflow/horiz scrollbar: Each card width fits container.

All animations are infinite.

Now need to include meta viewport to ensure responsive.

Now the final HTML.

We must just output a fenced code block with line starting with ```html and then content.

Make sure not to include extra text.

Now implement HTML with appropriate class names.

First the container:

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Animated Weather Cards</title>
  <style>
    /* Global reset */
    *, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: Arial, Helvetica, sans-serif;
      background: #f2f2f2;
      color: #333;
      line-height: 1.5;
    }

    .weather-grid {
      display: grid;
      gap: 1.5rem;
      padding: 1.5rem;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    }

    .card {
      border-radius: .75rem;
      overflow: hidden;
      padding: 1.5rem;
      text-align: center;
      color: inherit;
      box-shadow: 0 4px 6px rgba(0,0,0,0.1);
      transition: transform .3s, box-shadow .3s;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .card.sunny { background: linear-gradient(135deg, #fce38a, #f38181); }
    .card.rainy { background: linear-gradient(135deg, #a1c4fd, #c2e9fb); }
    .card.snowy { background: linear-gradient(135deg, #e0eafc, #cfdef3); }
    .card.stormy { background: linear-gradient(135deg, #2c3e50, #4ca1af); color:#fff; }

    .card:hover {
      transform: translateY(-8px) scale(1.02);
      box-shadow: 0 12px 20px rgba(0,0,0,0.2);
    }

    .icon {
      width: 80px;
      height: 80px;
      margin-bottom: .75rem;
      position: relative;
    }

    .city {
      margin: .5rem 0 .2rem;
      font-size: 1.25rem;
      font-weight: 600;
    }

    .temp {
      margin-bottom: .3rem;
      font-size: 2rem;
      font-weight: 500;
    }

    .desc {
      font-size: 1rem;
      opacity: .9;
    }

    /* Sunny icon */
    .sun {
      width: 80px;
      height: 80px;
      margin: auto;
      position: relative;
      animation: spin 12s linear infinite;
    }

    .sun::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background: repeating-conic-gradient(#ffeb3b 0deg 30deg, transparent 30deg 60deg);
    }

    .sun::after {
      content: "";
      position: absolute;
      inset: 20%;
      border-radius: 50%;
      background: #ffeb3b;
      box-shadow: 0 0 8px 2px rgba(255,235,59,0.7);
    }

    @keyframes spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    /* Rain icon */
    .rain {
      width: 80px;
      height: 80px;
      position: relative;
      overflow: hidden;
    }

    .rain .cloud {
      position: absolute;
      top: 12%;
      left: 50%;
      width: 50px;
      height: 30px;
      background: #bbb;
      border-radius: 50% 50% 40% 40%;
      transform: translateX(-50%);
    }

    .rain .cloud::before,
    .rain .cloud::after {
      content: "";
      position: absolute;
      width: 30px;
      height: 30px;
      background: #bbb;
      border-radius: 50%;
      top: -10px;
    }

    .rain .cloud::before { left: -15px; }
    .rain .cloud::after { right: -15px; }

    .rain .drop {
      position: absolute;
      top: 25%;
      width: 4px;
      height: 12px;
      background: #9ecae1;
      border-radius: 2px;
      opacity: 0;
      animation: fall 1.5s linear infinite;
    }

    .rain .d1 { left: 30%; animation-delay: 0s; }
    .rain .d2 { left: 50%; animation-delay: .4s; }
    .rain .d3 { left: 70%; animation-delay: .8s; }
    .rain .d4 { left: 85%; animation-delay: 1.2s; }

    @keyframes fall {
      0% {
        transform: translateY(0);
        opacity: 1;
      }
      70% { opacity: 1; }
      100% {
        transform: translateY(30px);
        opacity: 0;
      }
    }

    /* Snow icon */
    .snow {
      width: 80px;
      height: 80px;
      position: relative;
      overflow: hidden;
    }

    .snow .cloud {
      position: absolute;
      top: 12%;
      left: 50%;
      width: 50px;
      height: 30px;
      background: #777;
      border-radius: 50% 50% 40% 40%;
      transform: translateX(-50%);
    }

    .snow .cloud::before,
    .snow .cloud::after {
      content: "";
      position: absolute;
      width: 30px;
      height: 30px;
      background: #777;
      border-radius: 50%;
      top: -10px;
    }

    .snow .cloud::before { left: -15px; }
    .snow .cloud::after { right: -15px; }

    .snow .flake {
      position: absolute;
      top: 15%;
      width: 6px;
      height: 6px;
      background: #fff;
      border-radius: 50%;
      opacity: 0;
      box-shadow: 0 0 2px rgba(255,255,255,0.9);
      animation: drift 2s linear infinite;
    }

    .snow .f1 { left: 20%; animation-delay: 0s; }
    .snow .f2 { left: 40%; animation-delay: .5s; }
    .snow .f3 { left: 60%; animation-delay: 1s; }
    .snow .f4 { left: 80%; animation-delay: 1.5s; }
    .snow .f5 { left: 50%; animation-delay: .75s; }

    @keyframes drift {
      0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
      }
      70% { opacity: 1; }
      100% {
        transform: translateY(40px) rotate(360deg);
        opacity: 0;
      }
    }

    /* Storm icon */
    .storm {
      width: 80px;
      height: 80px;
      position: relative;
      overflow: hidden;
    }

    .storm .cloud {
      position: absolute;
      top: 12%;
      left: 50%;
      width: 50px;
      height: 30px;
      background: #555;
      border-radius: 50% 50% 40% 40%;
      transform: translateX(-50%);
    }

    .storm .cloud::before,
    .storm .cloud::after {
      content: "";
      position: absolute;
      width: 30px;
      height: 30px;
      background: #555;
      border-radius: 50%;
      top: -10px;
    }

    .storm .cloud::before { left: -15px; }
    .storm .cloud::after { right: -15px; }

    .storm .lightning {
      position: absolute;
      top: 45%;
      left: 50%;
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-bottom: 20px solid #fff700;
      transform: translateX(-50%) rotate(10deg);
      opacity: 0;
      animation: flash 2.5s linear infinite;
    }

    .storm .lightning::before {
      content: "";
      position: absolute;
      top: 6px;
      left: -7px;
      width: 0;
      height: 0;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-bottom: 12px solid #fff700;
      transform: rotate(-20deg);
    }

    @keyframes flash {
      0%, 80%, 100% { opacity: 0; }
      10% { opacity: 1; }
      30% { opacity: 0; }
    }

    /* Reduced motion preferences */
    @media (prefers-reduced-motion: reduce) {
      .sun { animation: none; }
      .rain .drop { animation: none; }
      .snow .flake { animation: none; }
      .storm .lightning { animation: none; }
    }
  </style>
</head>
<body>
  <div class="weather-grid">
    <div class="card sunny">
      <div class="icon"><div class="sun"></div></div>
      <h2 class="city">Los Angeles</h2>
      <div class="temp">28°C</div>
      <p class="desc">Sunny</p>
    </div>

    <div class="card rainy">
      <div class="icon">
        <div class="rain">
          <div class="cloud"></div>
          <div class="drop d1"></div>
          <div class="drop d2"></div>
          <div class="drop d3"></div>
          <div class="drop d4"></div>
        </div>
      </div>
      <h2 class="city">Seattle</h2>
      <div class="temp">13°C</div>
      <p class="desc">Rainy</p>
    </div>

    <div class="card snowy">
      <div class="icon">
        <div class="snow">
          <div class="cloud"></div>
          <div class="flake f1"></div>
          <div class="flake f2"></div>
          <div class="flake f3"></div>
          <div class="flake f4"></div>
          <div class="flake f5"></div>
        </div>
      </div>
      <h2 class="city">Denver</h2>
      <div class="temp">-2°C</div>
      <p class="desc">Snowy</p>
    </div>

    <div class="card stormy">
      <div class="icon">
        <div class="storm">
          <div class="cloud"></div>
          <div class="lightning"></div>
        </div>
      </div>
      <h2 class="city">Miami</h2>
      <div class="temp">24°C</div>
      <p class="desc">Stormy</p>
    </div>
  </div>
</body>
</html>
```

Check for mistakes.

- The class `.card.sunny` is used; .sunny pseudo color. CSS `.card.t` is fine.

- The `.sun` class naming — we used that within `.card.sunny` .icon .sun, but CSS `.sun { ... }` will apply. Good.

- The `.rain .drop` uses `.rain .drop` to style all drops but we also have `.rain .d1`, `.rain .d2`, etc. However `.rain .d1`, etc are targeted as `.rain .d1` but the HTML structure uses `<div class="drop d1"></div>`. So we need rule `.rain .drop.d1`? Actually `.rain .d1` matches any element within .rain with class d1, regardless of also having class drop. So `.rain .d1` works fine.

But we also set `.rain .drop` animation: as it includes drop elements. That's good.

- `.rain .drop` uses top:25%. Starting position; keyframes fall moves from top 0 (0?), but transform: translateY(0) to translateY(30px). The +30px likely relative to its original starting top. Starting top = 25% relative to container (80px) => ~20px from top. Then moving down 30px => total ~50px, near bottom; good.

- `.rain .drop` has opacity 0 initially? Actually we set opacity:0 at start then at 0% of keyframes we set opacity:1, but we set 0% style to transform, but we also set start opacity to 0; due to animation we defined at 0% it sets transform: translateY(0); opacity: 1; (because we set property implicitly). So the initial static state before animation starts may show opacity:0; but after animation start (immediately) it will set to 1? Actually if we have no delay, the animation runs from start; the first keyframe at 0% is applied at start (so opacity:1). But while animation is running, the `opacity:0;` defined in CSS may cause a flash before first keyframe? The animation overrides at each moment; at time 0 the keyframe sets opacity:1, overriding property. So all good.

But dropping initial drop will appear as soon as page loads; that's fine.

- `.rain .drop` includes animation-delay to offset each drop; for those after the first one, they will start later.

- `.rain .drop` obviously also includes infinite loop.

Potential conflict: The keyframes `fall` have translation of 30px; but we set `position:absolute; top:25%`. The translation is relative to its own origin (i.e., its top). So final translation of 30px will be top + 30. That's okay.

Now snow: `.snow .flake` top first, and animation drift moves 40px downwards and rotates.

- Flake uses `opacity:0;` initially then at 0% sets opacity:1; good.

- Flake color #fff appears on light background; maybe add outline: Use `border:1px solid #ccc;` to ensure visibility. Optionally.

- For storm: `.storm .cloud` positioned with background #555 (dark). Cloud color may be similar to gradient #2c3e50 (dark). Acceptable.

- Lightning color #fff700 (bright yellow). Use box-shadow? Possibly a bright flash but fine.

- Add `pointer-events:none;` maybe not needed.

Now ensure no script tags. Ok.

Now test responsiveness: 4 columns on desktop: using minmax(260px) grid; with four columns on 1280 width, each column width approx 240? Actually with gap 1.5rem (~24px), we have container width padded 1.5rem each side so about 1248px usable; dividing by 4 yields ~300px each, >260, so 4 columns. On mobile, width less than 260+gap, auto-fit will reduce columns to 1. So stacked.

Now check that the icons and text are visible within first seconds. Yes.

Now verify no stray errors: Did we close all curly braces? In CSS at top, use `*, *::before, *::after` maybe correct syntax; yes.

Check that we haven't defined any conflicting rules.

Now verify each class: The `.sun` inherits behavior from both `.card.sunny` and `.sun`. No conflict.

Potential error: `.sun` is used both as a class for the sun icon and also might be used as a container for the card? Not.

But `.card.sunny` (card element) and inside `.icon` we have `<div class="sun"></div>`. That's okay.

Now potential issue: `.sun` uses `animation: spin` but we also defined `.sun` animation in reduced preference building: `.sun { animation: none; }`. However, that overrides the `animation` property entirely, but we need to also preserve other properties (none). Good.

The same for `.rain .drop`, `.snow .flake`, `.storm .lightning`.

Now check cross-browser: `repeating-conic-gradient` supported in Chrome. Yes.

Now check that we used `inset: 0` inside `::before` and `::after` for .sun; different browsers support `inset` in CSS. This is a shorthand; In Firefox and Chrome, `inset:0` works for absolute positions? Actually inset is a property shorthand for 'top, right, bottom, left' and works within the style when element is absolutely positioned. However, we may also use top:0; left:0; right:0; bottom:0; fine.

Better to use top:0; left:0; right:0; bottom:0; to ensure compatibility.

But we can keep `inset:0`. Should be okay.

Also we used `inset:20%` for .sun::after. That also works.

Now need to test that the `repeating-conic-gradient` values are correct: `repeating-conic-gradient(#ffeb3b 0deg 30deg, transparent 30deg 60deg)` maybe need to wrap angle values: The syntax is `repeating-conic-gradient(color-stop1, color-stop2, ...)`. Actually the proper syntax: `repeating-conic-gradient(at center, #ffeb3b 0deg 30deg, transparent 30deg 60deg)`. However it's acceptable to omit `at center` because default is center. The spec: repeating-conic-gradient([ from angle ]? [ at position ]?, <color-stop> [, <color-stop>]*). Each color-stop can include an angle length. In CSS, you can write: `repeating-conic-gradient(#ffeb3b 0deg 30deg, transparent 30deg 60deg)`. That defines a wedge.

But might need to ensure we include both angle stops: `#ffeb3b 0deg 30deg` or is that wrong? Typically color stops are defined as `color angle`. But you can also specify a range? Research: `conic-gradient` takes color stops with positions. For repeating one, you can indicate length of each segment: e.g., `repeating-conic-gradient(#ffeb3b 0deg 30deg, transparent 30deg 60deg)`. The `30deg` after color indicates start position; the second `30deg` after second color is end of same color? Actually a color stop can have two lengths to define a "support"? I'm not sure. Let's verify: `repeating-linear-gradient(to right, red 0%, red 10%, blue 10%, blue 20%)`. This is repeating where each color appears for 10% length. In `repeating-conic-gradient`, you can define a start and end angle for each color: `repeating-conic-gradient(red 0deg 30deg, transparent 30deg 60deg)`. Indeed we can pass start and end positions for a color stop as intervals: color start-end/ I need to confirm.

The spec: you can define multiple color stops as "color angle". But there is also syntax for "color length1 length2"? Actually for `repeating-linear-gradient`, it supports color stops with positions; you can create repeated pattern by using two stops at same position but different colors. For example:

`repeating-linear-gradient(to bottom, #ffeb3b 0%, #ffeb3b 10%, transparent 10%, transparent 20%)`. That yields 10% colored stripe then 10% transparent. Equivalent for conic: `repeating-conic-gradient(#ffeb3b 0deg 30deg, transparent 30deg 60deg)` may correspond.

But I'm not absolutely sure of the syntax. Perhaps safest approach: use `background: conic-gradient(#ffeb3b 0deg 30deg, transparent 30deg 60deg, #ffeb3b 60deg 90deg, transparent 90deg 120deg, ... )` etc. Could repeat multiple segments manually. But we can cheat with a simpler representation: using `box-shadow` to create lines as rays.

But our approach may have syntax errors due to misuse of `repeating-conic-gradient`. Let's rewrite sun rays using CSS `box-shadow` approach. For example, we can create eight rays as eight pseudo-elements using multiple box-shadows from a central small rectangle.

Simplify: Use `::before` element as a small rectangle or `radial` shape (like a line), then show multiple using `box-shadow`. Implementation:

```css
.sun::before {
  content:"";
  position:absolute;
  top:0;
  left:50%;
  width:6px;
  height:20px;
  background:#ffeb3b;
  border-radius:3px;
  transform:translateX(-50%);
  box-shadow:
    0 0 0 0 #ffeb3b,
    45deg 0 ??? 
```

But box-shadow cannot be rotated; we can create multiple pseudo-elements using `transform: rotate(...)`. However we need multiple pseudo-elements: `::before` and `::after` only.

Alternative: Use transform rotating container with pseudo-element rays.

Simplify: Make .sun .rays an extra element that uses e.g., `transform: rotate(45deg)` on a pseudo-element representing a single ray at the top; then duplicate using multiple children `.ray` with rotated transforms.

Thus create multiple `div class="ray"` inside `.sun`, each a small rectangle, to represent rays. That is easy: we can create 8 rays via HTML as manual elements. That breaks "no JavaScript" (fine). We can generate rays inside .sun's HTML: `<div class="ray r1"></div>` etc. But we may use many extra elements. That's allowed.

In the simplest approach, we can keep the `repeating-conic-gradient` if syntax works. Let's verify the syntax for `repeating-conic-gradient`:

According to MDN, the syntax is:

`repeating-conic-gradient([ <color-stop> , <color-stop> , ...])`

Where each <color-stop> can have a position. The `repeating-conic-gradient` repeats the color stops infinitely. Example:

`background: repeating-conic-gradient(red 0deg 30deg, transparent 30deg 60deg);` so this might be correct. But we might need to separate positions with spaces or specify angle after color. The proper representation for color stop with "start at angle and end at angle" is indeed "color start-stop". For a range, you can specify a second angle? Actually `color-stop` can be one or two length values: if two, the second one defines the position end. So `red 0deg 30deg` defines a segment from 0deg to 30deg of red. Then `transparent 30deg 60deg` defines from 30 to 60 deg transparent. And then pattern repeats from 60deg onward accordingly.

Thus our usage is valid: red at 0deg to 30deg, transparent 30deg to 60deg; repeating will fill entire circle. Yes, that should produce rays.

Now test: Does CSS allow `transparent`? yes.

Thus .sun::before with that gradient should work.

Now also we may need to ensure that `background` of `.sun::before` covers the entire circle. We used `inset:0; border-radius:50%;` ensures fill bound. Works.

Now potential issue: `.sun` container with border radius? Not needed.

Now check that we specify `.sun` width:80px height:80px. The `::before` is positioned absolute at inset:0, covering the same area.

Now the `.sun` rotation is applied to container (including core) which is fine.

Now check for storm: The lightning shape uses border-bottom:20px solid #fff700. That may produce a triangle shape. Combined with ::before small shape, but shape orientation might not look like a typical bolt; but it's okay.

Now check for `.storm .lightning` animation: combined yields flashing. Use `animation: flash 2.5s linear infinite;`. The keyframes cause opacity on and off.

Now we used `.storm` container property not for animation, only lightning.

Now test in Chrome: Should show four cards with icons. Let's reason through each animation visually.

**Sunny**: The .sun rotates 12s infinite. Rays appear as colored wedge segments due to conic gradient. White core appears. Rotating core will also rotate but it's symmetrical. Should show bright golden sun rotating rays.

**Rainy**: The cloud shows three circles. The raindrop elements (small rectangular shapes) appear at top positions offset horizontally, start visible, then fall down and fade.

Potential issue: `30px` translation may be less than container height, may stop before bottom; we may want 50px. But it's fine.

**Snowy**: The cloud as before, and small white circles appear near top and drift down while rotating. Their opacity starts at 1 then fades.

**Storm**: Cloud dark, lightning shape appears and flashes.

Now also ensure that `.icon` container has margin auto? Already set width/height. That will center content.

Now final HTML uses city names and temperatures.

Potential errors: The `.card` has no explicit width; but grid defines column width.

Now meta viewport ensures mobile scaling.

Now ensure the HTML is properly closed and no stray comments.

Now output final code block accordingly.

We need to ensure output has exactly one fenced code block containing the full file. No preceding text or trailing text.

Thus final answer is the code block with the HTML.

Will produce:

```html
<!DOCTYPE html>
<html lang="en">
...
</html>
```

Now finalize.