Nemotron 3.5 Super VL (free)

The user wants a self-contained HTML file with four animated weather cards using only HTML and CSS. No JS, no images, no SVG, no icon fonts. Icons must be built from HTML elements and pseudo-elements.

Requirements:
- 4 cards: sunny, rainy, snowy, stormy
- Each card: animated icon, city name, temperature, short description
- Each card: own background gradient
- Responsive grid: 4 per row desktop, stacked mobile
- Lift on hover
- Smooth infinite animations using @keyframes
- Respect prefers-reduced-motion
- No <script> tags, no inline event handlers
- Must look right in 1280x800 and down to 375px wide, no horizontal scrollbar
- Something meaningful visible on first paint (automatic screenshot after 3s) - animations should be running immediately
- No keyboard needed really, but since it's a demo, just CSS animations are fine

Let me design:

HTML structure:
- Container div with class "cards"
- 4 card divs, each with:
  - .card-inner
  - .weather-icon containing elements for the icon
  - .city
  - .temp
  - .desc

CSS:
- Reset, box-sizing
- Body: flex or grid center, min-height 100vh, font-family sans-serif, margin 0
- .cards: display grid, grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)), gap: 1.5rem, padding: 1.5rem, max-width: 1200px, margin: 0 auto
- On mobile: auto-fit handles stacking when width < 260px approx. But maybe explicitly @media (max-width: 600px) { grid-template-columns: 1fr; }
- .card: background gradient, border-radius 16px, padding, color white, box-shadow, transition transform 0.3s, hover: translateY(-8px)
- Each card specific gradient:
  - Sunny: linear-gradient(135deg, #f5af19, #f12711) or yellow/orange
  - Rainy: blue/gray gradient
  - Snowy: light blue/white gradient
  - Stormy: dark purple/gray gradient

Icons built with HTML + CSS:

Sunny:
- .sun: circle, box-shadow for glow
- .rays: multiple spans or use pseudo-elements + child elements rotating around. Since no JS, can use multiple .ray divs positioned absolutely around sun, each rotated, with animation rotating them? Actually if rays are children of .sun and .sun rotates, they rotate too but stay fixed relative to sun? No, if child is positioned at top and parent rotates, child rotates around center. That works.
- Let's make .sun rotate infinite linear. Inside .sun, 8 .ray spans positioned at top, left, etc., transformed to radiate out.
- Also maybe sun rays rotate opposite to cancel? Actually we want rotating sun rays. If .sun rotates, the rays rotate with it. That's fine.

Rainy:
- Cloud: .cloud made with border-radius or multiple boxes
- Rain drops: .drop elements absolutely positioned inside card or icon area, with animation falling down and fading/resetting.
- Use multiple .drop children of .rain-container with different left positions, animation delays.

Snowy:
- Cloud similar
- Snowflakes: small white circles with fall and drift animation (side to side).

Stormy:
- Dark cloud
- Lightning: .bolt made with border or clip-path? No SVG. Can use a div with borders to create a jagged lightning bolt? Or multiple boxes. A simple way: a .bolt div with `border-left` and `border-bottom` creating a zigzag? Hard.
- Alternative: lightning is a flash of background + a simple bolt shape made from two rotated rectangles overlapping to form a zigzag.
- Let's make .bolt using a wrapper with overflow hidden, inner element with linear-gradient or box-shadow? Actually simplest: use a div with `clip-path: polygon(...)`? clip-path is CSS, allowed. No SVG. clip-path polygon can make a lightning bolt shape. That's pure CSS. Is clip-path allowed? It's CSS, not SVG. Yes.
- Flash animation: opacity or background color flash on card or cloud.

Let's detail each icon:

Common structure:
<div class="icon">
  ...
</div>

Sunny:
<div class="icon sunny">
  <div class="sun"></div>
  <div class="rays">
    <div class="ray"></div> x8
  </div>
</div>
CSS:
.sun: width 40px height 40px background #ffd700 border-radius 50% position absolute top 50% left 50% transform translate(-50%,-50%) box-shadow 0 0 30px rgba(255,215,0,0.6)
.rays: position absolute top 50% left 50% transform translate(-50%,-50%) width 80px height 80px animation spin 10s linear infinite
.ray: position absolute top 50% left 50% width 2px height 12px background #ffd700 transform-origin center? Wait if rays container rotates, rays positioned at center need to extend outward. Better: .ray: width 2px height 20px background #ffd700; position absolute; top: -10px; left: 50%; transform: translateX(-50%); then rotate each ray around center using transform rotate(n*45deg) translateY(-20px)? Hmm.

Simpler robust approach: each ray is absolutely placed around the sun using transform: rotate(Xdeg) translateY(-30px). Then parent rotates.

.sun {
  position: relative; width 40 height 40; bg; border-radius 50%;
}
.sun::before, .sun::after can make some rays but we need 8. Let's just use 8 child divs.
.ray {
  position: absolute;
  top: 50%; left: 50%;
  width: 2px; height: 18px;
  background: #ffd700;
  transform: translate(-50%, -50%) rotate(var(--r)) translateY(-22px);
}
But CSS variables in transform rotate are fine. However inline style for var(--r) would be inline HTML attribute, which is okay (not inline event handler). But user said "No JavaScript". Inline styles are allowed? Usually yes but better avoid for cleanliness. We can use nth-child with fixed rotations in CSS.

.ray:nth-child(1){transform: translate(-50%,-50%) rotate(0deg) translateY(-22px);}
etc. That's fine.

Then animate .sun { animation: spin 8s linear infinite; } But if .sun rotates, rays rotate too. Good.
Actually if .sun rotates, the circle looks same, rays rotate. Good.

Rainy:
Cloud:
.cloud { width: 100px; height: 40px; background: white; border-radius: 40px; position: relative; }
.cloud::before, .cloud::after: circles to make puffy cloud.
Rain:
.rain { position: absolute; top: 40px; left: 0; right: 0; overflow: hidden; height: 60px; }
.drop { position: absolute; width: 2px; height: 12px; background: rgba(255,255,255,0.6); animation: fall 1s linear infinite; }
Drop positions: left: 10%, 30%, 50%, 70%, 90% with animation delays.
@keyframes fall { to { transform: translateY(80px); opacity: 0; } }

Snowy:
Cloud light blue maybe. Snowflakes:
.flake { width: 4px; height: 4px; background: white; border-radius: 50%; position: absolute; animation: snow 3s linear infinite; }
@keyframes snow { 0% { transform: translateY(0) translateX(0); } 25% { transform: translateY(20px) translateX(10px); } 50% { transform: translateY(40px) translateX(-10px); } 75% { transform: translateY(60px) translateX(10px); } 100% { transform: translateY(80px) translateX(0); opacity: 0; } }
Maybe simpler: translateY and slight translateX sinusoidal? Keyframes fine.

Stormy:
Cloud dark gray.
Lightning bolt: .bolt { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 40px solid #ffd700; } That's a triangle, not lightning.
Better: use clip-path polygon on a div.
.bolt {
  width: 20px; height: 40px; background: #ffd700;
  clip-path: polygon(50% 0%, 60% 40%, 100% 40%, 40% 80%, 30% 80%, 50% 100%);
  position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%);
  animation: flash 2s infinite;
}
@keyframes flash { 0%, 90%, 100% { opacity: 0.2; } 92%, 95% { opacity: 1; } }
Also cloud may flash background? Not needed.

City, temp, desc:
Typography with text-shadow for readability.

Responsive:
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; padding: 1rem; }
@media (max-width: 900px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .cards { grid-template-columns: 1fr; } }
Or use auto-fit: repeat(auto-fit, minmax(240px, 1fr)) which naturally stacks. But 4 per row desktop means minmax around 250px. On 1280px, 4*250=1000 + gaps fits. Good. Let's use auto-fit and also explicit media query for stacked mobile? auto-fit will stack when width < ~240px * number. At 375px, minmax(240px,1fr) gives 1 column. At 600px, 2 columns. At 1280, 4 columns. Perfect. No media queries needed for grid but we can add for safety.

prefers-reduced-motion:
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
Or simply set animation: none. Need to be careful not to break hover. Let's do:
@media (prefers-reduced-motion: reduce) {
  .sun, .rays, .drop, .flake, .bolt { animation: none; }
  .card:hover { transform: none; }
}

No horizontal scrollbar: ensure box-sizing border-box, container max-width, no overflowing elements. Use overflow hidden on body? Not necessary if careful. But rain drops might overflow card if card overflow hidden? We need card overflow hidden to contain drops, or allow visible. Let's set .card overflow: hidden and border-radius. Then position drops inside card.

Layout inside card:
.card { position: relative; overflow: hidden; ... }
.icon { position: absolute; top: 1rem; right: 1rem; width: 80px; height: 80px; } Or top center. Let's put icon top center, text below.
Actually nicer: icon at top, text centered below.

.card-content { text-align: center; padding-top: 80px; } if icon is absolute top. Or flex column.

Let's make:
.card { display: flex; flex-direction: column; align-items: center; padding: 1.5rem 1rem; position: relative; overflow: hidden; }
.icon { position: absolute; top: 1rem; left: 50%; transform: translateX(-50%); width: 60px; height: 60px; z-index: 2; }
.city { font-size: 1.2rem; font-weight: 600; margin: 0.5rem 0 0.25rem; text-shadow: 0 1px 2px rgba(0,0,0,0.3); }
.temp { font-size: 2rem; font-weight: 700; margin: 0; }
.desc { font-size: 0.9rem; opacity: 0.9; margin: 0.25rem 0 0; text-shadow: 0 1px 2px rgba(0,0,0,0.3); }

Gradients:
.sunny: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%) maybe lighter so text readable? Better dark text? User said each card own background gradient matching weather. Text color can be dark on light gradients or white on dark. Let's make text white on all with text-shadow for readability. Gradients can be vibrant.
- Sunny: linear-gradient(135deg, #f6d365 0%, #fda085 100%)
- Rainy: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)? That's light blue. Maybe more gray-blue: linear-gradient(135deg, #2c3e50 0%, #4ca1af 100%)
- Snowy: linear-gradient(135deg, #e0eafc 0%, #cfdef3 100%) - light, white text might not show. Use dark text for snowy? Inconsistent. Let's keep all text white but add strong text-shadow. Snowy gradient: linear-gradient(135deg, #bdc3c7 0%, #2c3e50 100%)? Hmm snowy should be light. Maybe white text with shadow works on light too if shadow is dark.
- Stormy: linear-gradient(135deg, #2c3e50 0%, #000000 100%)

Let's define text color: white for all, text-shadow: 0 2px 4px rgba(0,0,0,0.4). That works.

First paint meaningful: animations start immediately. Good.

No script tag. Must ensure no inline event handlers (onclick etc).

Let's write the HTML.

Structure:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Weather Cards</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body { font-family: system-ui, -apple-system, sans-serif; background: #f0f4f8; min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 1.5rem; overflow-x: hidden; }
  h1 { margin-bottom: 1rem; color: #333; text-align: center; }
  .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; width: 100%; max-width: 1200px; }
  .card { position: relative; overflow: hidden; border-radius: 20px; padding: 2rem 1rem 1.5rem; display: flex; flex-direction: column; align-items: center; color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,0.4); transition: transform 0.35s ease, box-shadow 0.35s ease; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
  .card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.15); }
  .card .city { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.25rem; z-index: 2; position: relative; }
  .card .temp { font-size: 2.5rem; font-weight: 800; margin: 0 0 0.5rem; z-index: 2; position: relative; }
  .card .desc { font-size: 0.95rem; opacity: 0.9; z-index: 2; position: relative; }
  
  .icon { position: absolute; top: 1rem; left: 50%; transform: translateX(-50%); width: 70px; height: 70px; z-index: 2; }
  
  /* Sunny */
  .sunny { background: linear-gradient(135deg, #ffd25c 0%, #ff9a5a 100%); }
  .sun { width: 44px; height: 44px; background: #ffd700; border-radius: 50%; position: relative; box-shadow: 0 0 25px rgba(255, 215, 0, 0.6); animation: spin 10s linear infinite; }
  .sun .ray { position: absolute; top: 50%; left: 50%; width: 2px; height: 16px; background: #ffd700; transform-origin: center; transform: translate(-50%, -50%); }
  .sun .ray:nth-child(1) { transform: translate(-50%, -50%) rotate(0deg) translateY(-24px); }
  ... up to 8
  
  Actually if .sun rotates, .ray positioned absolutely inside .sun will rotate around .sun center. Since .ray is centered at top then translated up, yes.
  
  @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
  
  /* Rainy */
  .rainy { background: linear-gradient(135deg, #3a6073 0%, #16222a 100%); }
  .cloud { width: 60px; height: 24px; background: #eef2f5; border-radius: 12px; position: relative; }
  .cloud::before, .cloud::after { content: ''; position: absolute; background: #eef2f5; border-radius: 50%; }
  .cloud::before { width: 28px; height: 28px; top: -14px; left: 8px; }
  .cloud::after { width: 34px; height: 34px; top: -18px; left: 22px; }
  .rain { position: absolute; top: 52px; left: 0; right: 0; height: 50px; overflow: hidden; pointer-events: none; }
  .drop { position: absolute; width: 1.5px; height: 14px; background: rgba(255,255,255,0.5); animation: fall 1.2s linear infinite; }
  .drop:nth-child(1) { left: 15%; animation-delay: 0s; }
  ...
  @keyframes fall { to { transform: translateY(64px); opacity: 0; } }
  
  /* Snowy */
  .snowy { background: linear-gradient(135deg, #e6eef7 0%, #b8c6db 100%); } but text white? Maybe okay with shadow.
  Cloud color maybe #f0f4f8.
  .snow { position: absolute; top: 52px; left: 0; right: 0; height: 50px; overflow: hidden; pointer-events: none; }
  .flake { position: absolute; width: 4px; height: 4px; background: #fff; border-radius: 50%; animation: snow 3s linear infinite; opacity: 0.8; }
  positions and delays.
  @keyframes snow {
    0% { transform: translateY(0) translateX(0); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(70px) translateX(15px); opacity: 0; }
  }
  
  /* Stormy */
  .stormy { background: linear-gradient(135deg, #2c3e50 0%, #000000 100%); }
  Cloud dark gray: background #7f8c8d; ::before/after same.
  Lightning: .bolt wrapper.
  .bolt { width: 14px; height: 36px; background: #f1c40f; clip-path: polygon(50% 0, 60% 35%, 100% 35%, 40% 70%, 30% 70%, 50% 100%); position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); animation: flash 2s infinite; opacity: 0.3; filter: drop-shadow(0 0 6px rgba(255,255,0,0.6)); }
  @keyframes flash { 0%, 88%, 92%, 100% { opacity: 0.2; } 90% { opacity: 1; } }
  
  Maybe add rain under storm? Not necessary.
  
  /* Reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .sun, .rays, .drop, .flake, .bolt { animation: none !important; }
    .card:hover { transform: none !important; }
  }
  
  /* Responsive tweaks */
  @media (max-width: 480px) { body { padding: 1rem; } h1 { font-size: 1.5rem; } .card { padding: 1.5rem 1rem 1rem; } }
  
</style>
</head>
<body>
<h1>Weather Conditions</h1>
<div class="cards">
  <!-- Sunny -->
  <article class="card sunny">
    <div class="icon">
      <div class="sun">
        <div class="ray"></div> ... 8 times
      </div>
    </div>
    <h2 class="city">Cairo</h2>
    <p class="temp">32°</p>
    <p class="desc">Clear skies</p>
  </article>
  
  <!-- Rainy -->
  ...
</div>
</body>
</html>

Need to ensure no horizontal scrollbar at 375px. Body padding 1rem, cards max-width 1200, grid gap. auto-fit minmax 250px means at 375px one column ~355px wide. Fine.

The icon cloud/rain etc positioned absolute top:1rem left:50% translateX(-50%). Card content below. Since card overflow hidden, drops inside rain container might be clipped if they fall outside .rain but inside card? .rain height 50px at top 52px, so bottom is 102px. Card height is dynamic. Drops animate translateY(64px) so they end at 116px from top. That's within card. Text starts below icon maybe around 100px? Card padding top 2rem = 32px. Icon top 1rem (16px) height 70px => bottom ~86px. Text margin top? We need space. Since .icon is absolute, text flow starts at top of card. We should add padding-top to card enough to clear icon, e.g., padding-top: 110px? But we want text centered vertically maybe.

Better layout: .card { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 260px; text-align: center; padding: 1rem; } Icon absolute top 1rem. Then city temp desc flow naturally with some margin-top to clear icon? If icon absolute, it doesn't affect flow. So text starts at top of card, overlapping icon unless we add margin-top to .city.

Add .city { margin-top: 90px; } or .card-content { margin-top: 90px; }. Let's wrap text in .text { margin-top: 95px; z-index: 2; position: relative; } That ensures space. Or set .card padding-top: 110px and padding bottom normal. But on mobile card height grows. Let's do:

.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding: 100px 1rem 1.5rem;
  min-height: 300px;
}
Then icon absolute top: 1rem. City is first child, no overlap.

Alternatively use grid: .card { display: grid; place-items: center; } and icon area. But absolute is fine.

Let's refine text: .city { margin: 0; font-size: 1.2rem; font-weight: 700; } .temp { font-size: 3rem; margin: 0.25rem 0; } .desc { margin: 0; opacity: 0.9; }

Sun ray positions:
I'll write 8 rays:
.ray:nth-child(1) { transform: translate(-50%, -50%) rotate(0deg) translateY(-26px); }
.ray:nth-child(2) { transform: translate(-50%, -50%) rotate(45deg) translateY(-26px); }
...
.ray:nth-child(8) { transform: translate(-50%, -50%) rotate(315deg) translateY(-26px); }

But wait: if .sun rotates, the transform order matters. In CSS, transforms are applied right-to-left? Actually transform: translate(-50%,-50%) rotate(0deg) translateY(-26px). The ray element is first translated to center (-50%, -50%) of itself relative to parent? Hmm position absolute top 50% left 50% puts its top-left corner at center. Then translate(-50%,-50%) centers the element itself at parent center. Then rotate(0deg) rotates around its center. Then translateY(-26px) moves it up (in rotated coordinate system? Since translateY comes after rotate in transform list, the translation is in the rotated coordinate system? CSS transform functions compose left-to-right? Actually the matrix is computed as product of functions in order listed. The rightmost transform is applied first to the point coordinates. Let's recall: transform: rotate(45deg) translateY(-20px); means first translate then rotate? No, in CSS, transforms are applied in order they appear, from left to right? Let's verify mentally: `transform: translate(100px) rotate(45deg);` translates the element, then rotates the translated coordinate system? Actually I think it's right-to-left in terms of coordinate transformations? Let's not risk it. Simpler: position each ray absolutely using fixed top/left rather than transform rotation.

Alternative ray positioning without rotate on each ray:
.ray {
  position: absolute;
  top: 50%; left: 50%;
  width: 2px; height: 16px;
  background: #ffd700;
  transform: translate(-50%, -50%);
}
Then position them with `top` and `left` percentages? No, they would overlap at center.

Better: place each ray at edge using `top: 0; left: 50%; transform: translateX(-50%) rotate(45deg) translateY(-26px);` Wait if parent .sun rotates, the whole group rotates. Each ray just needs to radiate outward from center at fixed angle. We can achieve by setting `transform-origin: center bottom`? Let's do:

.sun { position: relative; width:44px; height:44px; ... animation: spin 10s linear infinite; }
.ray {
  position: absolute;
  top: 50%; left: 50%;
  width: 2px; height: 20px;
  background: #ffd700;
  transform-origin: bottom center; /* rotates around bottom center? No, transform-origin default is center. */
}
If we set transform-origin: 50% 100% (bottom center), and rotate each ray by n*45deg, then the ray pivots around its bottom center which is at parent center if positioned at top 50% left 50% and translated? Let's simplify: Put bottom of ray at center of sun.

.ray {
  position: absolute;
  top: 50%; left: 50%;
  width: 2px; height: 20px;
  background: #ffd700;
  transform: translate(-50%, -100%); /* moves bottom to center? top 50% places top edge at center; translateY(-100%) moves up by its own height, so bottom edge at center. */
  transform-origin: bottom center; /* rotate around bottom (center of sun) */
}
Then .ray:nth-child(1) { transform: translate(-50%, -100%) rotate(0deg); }? Wait transform origin affects rotation but translate is separate. Actually if we use transform: translate(-50%, -100%) rotate(0deg); with transform-origin bottom center, the rotation is around bottom center, but translate moves element. Order matters again.

Maybe simplest: don't rotate the sun container. Instead animate each ray's opacity/rotation? We want rotating rays. Could rotate .sun and have rays as `::before`/`::after` but only two. We need 8. Could use `box-shadow` on sun to fake rays? `box-shadow: 0 -20px 0 -4px #ffd700, 20px 0 0 -4px #ffd700, ...` That creates static rays. Then animate `box-shadow`? Can't animate box-shadow list easily? Actually you can animate box-shadow but not individual offsets in a list? You can animate the whole box-shadow property between two states with different shadow positions? That would be a morph, not rotation.

Okay, let's just use transform correctly. The common pattern for a rotating clock hand:
.hand {
  position: absolute;
  top: 50%; left: 50%;
  width: 2px; height: 50%;
  background: ...;
  transform-origin: top center;
  transform: rotate(0deg);
}
This works because top 50% left 50% positions top-left corner at center. translate(-50%, -50%) centers the element itself. But if we omit translate(-50%,-50%) and set height 50%, top edge at center, then rotate around top center (transform-origin: top center) pivots around center point. So:

.ray {
  position: absolute;
  top: 50%; left: 50%;
  width: 2px; height: 18px;
  background: #ffd700;
  transform-origin: top center; /* pivot at the point (50%,50%) of parent */
  transform: translateX(-50%) rotate(0deg); /* center horizontally at parent center, rotate around top center */
}
Then .ray:nth-child(1){ transform: translateX(-50%) rotate(0deg); }
.ray:nth-child(2){ transform: translateX(-50%) rotate(45deg); }
...
Then parent .sun rotates: animation spin. Since each ray is rotated relative to parent, and parent rotates, total rotation adds. Good. The ray pivots around its top center which is at parent center. translateX(-50%) centers the 2px width horizontally. So rays radiate outward from center. Perfect.

If parent .sun rotates, rays rotate with it. Great.

Cloud: .cloud width 60 height 24 radius 12. ::before width 28 height 28 top -14 left 8. ::after width 34 height 34 top -18 left 20. Background color white for rainy/snowy, #95a5a6 for stormy.

Rain container: .rain { position: absolute; top: 55px; left: 0; right: 0; height: 45px; overflow: hidden; }
Drop:
.drop {
  position: absolute;
  width: 1.5px; height: 12px;
  background: rgba(255,255,255,0.6);
  animation: fall 1.4s linear infinite;
  top: -12px;
}
@keyframes fall { to { transform: translateY(60px); opacity: 0; } }
Positions left: 12%, 28%, 45%, 62%, 78%, 90%. Delays 0s, 0.2s, 0.4s, 0.6s, 0.8s, 1s.

Snow:
.flake {
  position: absolute;
  width: 5px; height: 5px;
  background: #fff;
  border-radius: 50%;
  opacity: 0.7;
  animation: snow 3.5s linear infinite;
  top: -5px;
}
@keyframes snow {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateY(65px) translateX(12px); opacity: 0; }
}
Positions left: 10%, 25%, 40%, 55%, 70%, 85%. Delays.

Stormy cloud dark: .cloud { background: #7f8c8d; } ::before/after same color.
Bolt:
.bolt {
  width: 16px; height: 40px; background: #f1c40f;
  clip-path: polygon(50% 0%, 70% 35%, 100% 35%, 40% 70%, 25% 70%, 50% 100%);
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  animation: flash 2s infinite;
  opacity: 0.25;
  filter: drop-shadow(0 0 8px rgba(255,242,0,0.7));
}
@keyframes flash {
  0%, 89%, 93%, 100% { opacity: 0.2; transform: scale(1); }
  91% { opacity: 1; transform: scale(1.05); }
}

Card gradients:
.sunny: linear-gradient(135deg, #ffd25c 0%, #ff9a5a 100%);
.rainy: linear-gradient(135deg, #2c3e50 0%, #4ca1af 100%); maybe more blue.
.snowy: linear-gradient(135deg, #e0eafc 0%, #cfdef3 100%); white text with dark shadow okay.
.stormy: linear-gradient(135deg, #2c3e50 0%, #000000 100%);

Add `h1` visible. Ensure something on first paint: h1 and cards appear immediately with animations.

Prevent horizontal scroll: body overflow-x: hidden; but that can hide content if overflow. Better ensure no overflow. Add `max-width: 100%` to images? none. Cards have border-radius and overflow hidden. Drops inside .rain which is inside .card overflow hidden, so clipped. Good.

Use `min-height: 260px` on card to keep uniform. On mobile with tall content maybe fine.

Check for any <script>: none. Inline event handlers: none.

Prefer-reduced-motion: set animation: none on moving elements and card hover transform none.

Let's write full code carefully.

Potential issue: `filter: drop-shadow` on .bolt might be okay.

One thing: `.sun .ray` transform: translateX(-50%) rotate(0deg); The parent .sun rotates, but the ray's transform-origin is top center. Does rotate on parent affect children's transform-origin? Yes children rotate around parent center. Good.

Let's test mentally: Sun size 44px. Ray top 50% left 50% => top-left at (22,22). translateX(-50%) => center x at 22. transform-origin top center => pivot at (22,22) relative to sun? Actually element's top edge is at y=22 (parent center), x centered at 22. Pivot at top center of element = (22,22). Rotating around that point makes it sweep around center. Height 18px extends downward from center if rotate 0. So at 0deg ray points down. At 90deg points left. Fine. It radiates.

Maybe offset height 20px to extend beyond sun circle (44px diameter => radius 22). Height 20 extends to y=42 from top? Wait top edge at center y=22, extends downward to y=42, which is 20px from center, less than radius 22, so inside sun. We want rays outside sun. Set height: 26px so extends to y=48, 26px from center, just outside. Good.

Or set height 24 and box-shadow on sun gives glow. Fine.

Let's finalize code.

Make sure to include `<meta name="viewport" content="width=device-width, initial-scale=1.0">`.

No external resources.

I will produce exactly one fenced code block with ```html.

Let's write all HTML content for four cards:

Sunny: city Cairo, temp 32°, desc Clear & bright.
Rainy: city London, temp 16°, desc Light showers.
Snowy: city Oslo, temp -4°, desc Gentle snow.
Stormy: city Miami, temp 27°, desc Thunderstorm.

All good.

Check 375px width: body padding 1rem, h1, cards grid auto-fit minmax 250px => one column 355px wide. Card padding 100px top might be tall but fine. Icon absolute. No overflow.

Add `@media (max-width: 480px) { .card { padding-top: 90px; min-height: 260px; } .temp { font-size: 2.2rem; } }` optional.

Ensure `box-sizing: border-box` on all.

Write final code.

One more detail: `overflow-x: hidden` on body is okay but might prevent needed scroll? Page fits. Use `overflow-x: hidden` to guarantee no horizontal scrollbar.

Also `.cards` width 100% max-width 1200px margin 0 auto.

Let's produce.