Nemotron 3 Ultra (free)

The user wants four animated weather cards using only HTML and CSS. No JavaScript, no images, no SVG, no icon fonts. Everything must be built with HTML elements and CSS pseudo-elements.

Key requirements:
1. Four cards: sunny, rainy, snowy, stormy
2. Animated icons using CSS only
3. Each card has city name, temperature, description
4. Background gradients matching weather
5. Responsive grid: 4 per row desktop, stacked mobile
6. Hover lift effect
7. Infinite animations with @keyframes
8. Respect prefers-reduced-motion
9. No JS at all

Let me design each weather icon:

Sunny: A circle with rotating rays
Rainy: Cloud with falling drops
Snowy: Cloud with drifting snowflakes
Stormy: Cloud with flashing lightning

I'll use a grid layout with CSS Grid, responsive with media queries or auto-fit.

For animations:
- Sunny: rotate rays continuously
- Rainy: drops fall from cloud, loop
- Snowy: snowflakes drift down and sway
- Stormy: lightning flashes intermittently

Prefers-reduced-motion: wrap animations in @media (prefers-reduced-motion: no-preference)

Hover lift: transform: translateY(-8px) with transition

Let me structure the HTML:
- Container div with class "weather-grid"
- Four article elements with class "weather-card" and specific weather class
- Each card: icon container, city name, temperature, description

For icons, I'll use a main div with pseudo-elements for the shapes.

Let me write the CSS carefully.

Sunny icon:
- Central circle (sun)
- Rays: multiple elements or pseudo-elements rotated around center
- Can use ::before and ::after for rays, but need multiple rays. Could use multiple child divs, but requirement says HTML elements and pseudo-elements. I can use multiple spans for rays, or use a single element with conic-gradient for rotating rays? But conic-gradient animation might be heavy. Better: create 8 ray elements (spans) and rotate the container.

Actually, to minimize HTML, I can use a single element for rays and animate its rotation. But need multiple rays. Could use a repeating conic-gradient as background and rotate the background? Or use multiple pseudo-elements? Only two pseudo-elements per element.

Better: In HTML, for sunny, have a div.sun with 8 span.ray elements. That's acceptable - HTML elements styled with CSS.

Similarly for rain: cloud div with multiple drop spans.

Snow: cloud with multiple snowflake spans.

Storm: cloud with lightning bolt (can be made with CSS polygon or multiple elements).

Let me plan the HTML structure for each card:

```html
<article class="weather-card sunny">
  <div class="icon sunny-icon">
    <div class="sun">
      <span class="ray"></span>
      <span class="ray"></span>
      ... 8 rays
    </div>
  </div>
  <h2 class="city">Los Angeles</h2>
  <p class="temp">28°C</p>
  <p class="desc">Sunny</p>
</article>
```

But the requirement says "every weather icon is built from HTML elements and pseudo-elements styled with CSS." So using spans for rays is fine.

For rain: cloud shape using border-radius on a div, with ::before and ::after for puffs. Then multiple drop spans animated.

For snow: similar cloud, with snowflake spans (could be simple dots or asterisks using text content? But no icon fonts. Could use CSS to create snowflake shape with pseudo-elements on each span. Or just use small white circles with animation.

For storm: cloud with lightning bolt. Lightning can be a polygon using clip-path or a div with transformed pseudo-elements.

Let me keep it simple but effective.

I'll create a unified icon container for each, with specific inner structure.

Responsive grid: 
```css
.weather-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;
}
```
This will give 4 columns on desktop (1280px / 280 ≈ 4.5), stacked on mobile.

Hover lift:
```css
.weather-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.weather-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}
```

Animations with prefers-reduced-motion:
```css
@media (prefers-reduced-motion: no-preference) {
  .ray { animation: rotate 20s linear infinite; }
  .drop { animation: fall 1s linear infinite; }
  .snowflake { animation: drift 3s ease-in-out infinite; }
  .lightning { animation: flash 3s ease-in-out infinite; }
}
@keyframes rotate { to { transform: rotate(360deg); } }
@keyframes fall { to { transform: translateY(100px); opacity: 0; } }
@keyframes drift { ... }
@keyframes flash { ... }
```

Need to stagger animations for rain drops and snowflakes using animation-delay on each child.

I'll use nth-child for delays.

Now, let me write the complete HTML/CSS.

I'll put everything in one HTML file with style block.

Let me design each icon in detail:

1. Sunny:
   - Container: .sunny-icon (relative, fixed size)
   - .sun: absolute centered circle, yellow/orange gradient
   - .ray: 8 spans, absolute positioned from center, rotated 45deg each, with gradient background, extending outward. Actually, rays can be simple rectangles rotated around center.
   - Better: .sun has ::before and ::after for two sets of rays? But need 8 rays. Use 8 spans inside .sun.
   - Each ray: width: 2px, height: 40px, positioned at top: -50px (from center), left: 50%, transform-origin: bottom center, rotated by index*45deg.
   - Animate .sun rotation? Or animate rays container. If I rotate the .sun, the rays rotate with it. But the sun circle would rotate too (not visible). So rotate .sun.

2. Rainy:
   - .cloud: white rounded shape using multiple circles (main div + ::before + ::after)
   - .drop: multiple spans, absolute positioned under cloud, animated falling.
   - Cloud shape: main div with border-radius, ::before and ::after as additional circles to make fluffy cloud.

3. Snowy:
   - Similar cloud.
   - .snowflake: small white circles (or use ::before with content: '❄' but no icon fonts. Use CSS to make a snowflake shape? Too complex. Just use small circles with opacity, drifting down and sideways.

4. Stormy:
   - Darker cloud.
   - .lightning: a zigzag shape. Can be made with a polygon clip-path or multiple divs. Simpler: a div with background and clip-path: polygon(...) for lightning bolt shape. Animate opacity flash.

Let me code the cloud shape first:
```css
.cloud {
  position: relative;
  width: 80px;
  height: 40px;
  background: white;
  border-radius: 20px;
}
.cloud::before,
.cloud::after {
  content: '';
  position: absolute;
  background: white;
  border-radius: 50%;
}
.cloud::before {
  width: 50px;
  height: 50px;
  top: -25px;
  left: 10px;
}
.cloud::after {
  width: 60px;
  height: 60px;
  top: -30px;
  right: 10px;
}
```
This makes a fluffy cloud.

For rain drops: 5-6 spans with class .drop, positioned at bottom of cloud, different left positions, animation delay staggered.

For snowflakes: similar but more flakes, drifting animation with horizontal movement.

For lightning: a bolt shape. Use a div with clip-path: polygon(50% 0%, 60% 35%, 40% 35%, 50% 70%, 40% 70%, 60% 100%, 50% 100%, 40% 65%, 60% 65%, 50% 30%) - something like that. Or simpler: two triangles? Let me use a simple lightning bolt using a div with transformed pseudo-elements? Actually, a single element with clip-path is fine.

I'll define the lightning as:
```css
.lightning {
  position: absolute;
  width: 20px;
  height: 80px;
  background: #ffeb3b;
  clip-path: polygon(50% 0%, 65% 35%, 55% 35%, 70% 70%, 45% 70%, 55% 100%, 50% 100%, 45% 65%, 30% 65%, 45% 30%);
  opacity: 0;
}
```
Then animate opacity flash.

Now, temperatures and cities:
- Sunny: Los Angeles, 28°C, Sunny
- Rainy: London, 14°C, Rainy
- Snowy: Oslo, -2°C, Snowy
- Stormy: Miami, 26°C, Thunderstorms

Gradients:
- Sunny: linear-gradient(135deg, #fceabb 0%, #f8b500 100%)
- Rainy: linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%)
- Snowy: linear-gradient(135deg, #e6dada 0%, #274046 100%)
- Stormy: linear-gradient(135deg, #232526 0%, #414345 100%)

Card styling: white text on dark gradients? Or semi-transparent white background for content? Better: card has gradient background, content in white with slight transparency.

Card structure:
```html
<article class="weather-card sunny">
  <div class="icon-container">
    <div class="icon sunny-icon">
      <div class="sun">
        <span class="ray"></span>...8 rays
      </div>
    </div>
  </div>
  <div class="info">
    <h2 class="city">Los Angeles</h2>
    <p class="temp">28°C</p>
    <p class="desc">Sunny</p>
  </div>
</article>
```

But the icon container might not be needed. Just put icon directly.

Let me write the full CSS.

I need to ensure animations are smooth and respect reduced motion.

For staggered delays, I'll use :nth-child in CSS.

Sun rays: 8 rays, each rotated 45deg * index. The .sun rotates continuously.

Rain drops: 6 drops, each with animation-delay: calc(var(--i) * 0.15s) but CSS can't use var from HTML easily without inline style. Since no JS, I can use nth-child:
```css
.drop:nth-child(1) { animation-delay: 0s; left: 10%; }
.drop:nth-child(2) { animation-delay: 0.15s; left: 25%; }
...
```

Same for snowflakes.

Snowflakes animation: drift down while swaying left-right.
```css
@keyframes drift {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  50% { transform: translate(-10px, 50px) rotate(180deg); opacity: 0.8; }
  100% { transform: translate(10px, 100px) rotate(360deg); opacity: 0; }
}
```

Lightning flash: quick on/off.
```css
@keyframes flash {
  0%, 90%, 92%, 94%, 100% { opacity: 0; }
  91%, 93% { opacity: 1; }
}
```

Now, let me assemble the complete code.

I'll write the HTML with all four cards.

Check for any console errors: none expected.

Viewport: 1280x800, responsive down to 375px.

No horizontal scrollbar: use box-sizing: border-box, proper grid.

First paint meaningful: cards visible immediately.

No JS at all.

Let me write the code now.