Mistral Large 4

We need answer only one fenced code block html complete file. Need create four animated weather cards HTML/CSS only. Need no JS, no SVG/images/icon fonts. Icons built from HTML elements and pseudo-elements. Need responsive grid 4 desktop stack mobile, hover lift. Smooth infinite keyframes, respect prefers-reduced-motion. Need look right 1280x800 and 375. Something visible first paint. No external. Need ensure no <script>, no inline handlers. We can include pseudo-elements. Need produce final only code block. Need craft polished demo.

Need think details. Single HTML file with <style> in head. No JS. Use divs/spans for icons. Four cards: sunny, rainy, snowy, stormy. Each card article with class weather-card sunny etc. Icon area .icon with child elements: sun core + rays? Rotating sun rays can be one element with box-shadow rays? But no SVG/images. We can create rays using .sun-rays with multiple spans? Requirement icons built from HTML elements and pseudo-elements styled CSS. We can use spans for rays (HTML elements) and animate rotation. Simpler: .sun .core (circle), .sun .rays (absolute inset, animation spin) with ::before/::after? Only two pseudo per element, not enough for 8 rays unless use repeating-conic-gradient on rays element: a circle border? Could use .rays { background: repeating-conic-gradient(from 0deg, transparent 0 18deg, gold 18deg 30deg); border-radius:50%; mask? } Need mask radial to make ring: -webkit-mask: radial-gradient(circle, transparent 58%, #000 60% 72%, transparent 74%); mask same. Rotating via conic gradient? Animating background not smooth maybe rotate element. Use .rays as ring with conic gradient and animate transform rotate; masked ring rotates. Good. Core circle with glow.

Rain: cloud (HTML element with pseudo bumps) plus drops spans falling. Cloud can be .cloud with ::before/::after bumps. Rain drops: .drop elements (span) animated fall translateY and opacity. Need multiple drops with different delays/left positions. Use nth-child.

Snow: cloud plus snowflakes spans with drift animation (translateY and X using keyframes with alternate? infinite). Could use .flake elements with animation snowfall linear infinite; different left/delay/duration; maybe use ::before/::after for shape? Flakes can be small circles with blur, or star using pseudo? Simpler white circles with box-shadow? Snowflakes drifting: spans with border-radius and animation fall+swing. Use keyframes flake { to { transform: translate(18px, 90px) rotate(180deg); opacity...}} from translate(-6px,-10px). Need infinite. Could have 6 flakes.

Storm: cloud plus lightning bolt built from HTML element .bolt with clip-path polygon (CSS, no SVG) flashing animation (opacity/scale) and maybe rain drops. Lightning from clip-path is okay (CSS shape). Flash animation. Could also add glow behind.

Card content: city, temp, description, maybe meta. Background gradients per weather. Card glassy dark? Each card own gradient. Use CSS variables. Grid: .grid {display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap} @media max-width 1080 maybe 2 columns, max-width 640 1 column (stacked on mobile). Requirement 4 per row desktop, stacked mobile. At 1280 width 4 columns good. At 375 one column. Maybe intermediate 2. No horizontal scroll: body margin 0, box-sizing border-box, overflow-x hidden.

Hover lift: transform translateY(-10px) scale(1.02); box-shadow; transition. But animation icons inside. Respect prefers-reduced-motion: @media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } But requirement smooth infinite animations and respect reduced motion. Better set animations off: animation: none !important for icon anims; maybe keep hover transition minimal. Need ensure icons visible static if reduced. Use .icon * etc animation none. But if set all animation none, rotating rays static still visible, rain drops maybe hidden if opacity 0 initial. Need define keyframes such that at 0 visible? For rain drops animation from opacity 0 to etc; if animation none, element uses base opacity. Set base opacity for drops maybe 0.9? But animation overrides during play; with animation none base visible static at top, not ideal but acceptable? Better under reduced motion set .drop { opacity:.8; transform:none; animation:none } etc. Simpler: media reduce { .anim, .anim * { animation: none !important; } } and give static styles. But rain drops base positions at top all visible maybe okay? Could set .rain .drop { top: 58%; opacity:.85 } and animation moves them down from top? Need keyframes can start at transform translateY(-10px) opacity 0 and end translateY(70px) opacity 0; base if no animation opacity? If base opacity .85 and top 58, static drops visible under cloud. Fine. For snow similar. Lightning base opacity 1? But flashing should flash; under reduced motion static visible. Good.

Need maybe include heading. Visible first paint. No JS.

Need be careful no inline event handlers; none. No <script>. No external. Use system fonts.

Need final exactly one code block. No text before/after. Need code complete.

Let's design HTML:
<!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> ... </style></head><body>
<main class="page">
 <header class="hero"><p class="eyebrow">CSS-only forecast</p><h1>Four skies, one page</h1><p class="sub">Pure HTML + CSS animations: sun, rain, snow and storm.</p></header>
 <section class="grid" aria-label="Weather cards">
  <article class="card card--sunny">
    <div class="scene" aria-hidden="true">
      <div class="sun"><span class="sun-rays"></span><span class="sun-core"></span></div>
    </div>
    <div class="meta"><span class="temp">31°</span><div><h2>Lisbon</h2><p>Sunny</p></div></div>
    <p class="desc">Clear skies, warm breeze and endless light.</p>
  </article>
  ... rain: cloud with drops
  <article class="card card--rainy"> scene: <div class="rain"><div class="cloud"></div><span class="drop"></span>... x5</div> city Porto temp 18 desc Showers...
  snowy: <div class="snow"><div class="cloud"></div><span class="flake"></span> x6</div> Oslo -4
  stormy: <div class="storm"><div class="cloud cloud--dark"></div><span class="bolt"></span><span class="drop"></span>... maybe</div> Reykjavík 7 desc Thunder...
 </section>
 <footer>... maybe no</footer>
</main>
</body></html>

Need icon construction details.

CSS variables: :root { --radius: 28px; --ink...}. body min-height 100vh, background radial gradients dark, color white, font-family system-ui. .page width min(1180px, calc(100% - 32px)); margin auto; padding 48px 0 64px. At 375 width calc 100%-24? Use width: min(1180px, 100% - 24px). Good.

.hero text center margin-bottom 28. h1 clamp. 

.grid display grid; grid-template-columns repeat(4,minmax(0,1fr)); gap:20px; @media (max-width: 1020px) repeat(2,...); @media (max-width: 620px) 1fr. At 1280 page width 1180, card ~275, good. At 800 maybe 2 columns? Requirement stacked on mobile; okay. No horizontal scroll.

.card position relative; border-radius; padding: 22px; min-height: 340px? At 4 columns 1280x800, hero ~150, cards ~380 fits. min-height maybe 360. overflow hidden; isolation; box-shadow; border: 1px solid rgba(255,255,255,.35); backdrop-filter? maybe not necessary; transition transform .35s ease, box-shadow .35s. hover translateY(-12px). focus? no JS. Use .card:hover { transform: translateY(-12px) }.

Gradients:
.card--sunny { background: linear-gradient(160deg,#ffd76a 0%, #ff9d4d 45%, #ff6b6b 100%); color #4a2500? } Need text readable. Maybe dark text on sunny? Use color rgba? Simpler all cards white text with text-shadow and gradients dark enough? Sunny gradient bright; white text maybe okay with shadow but temp large white on yellow poor. Could use dark ink for sunny? Card text color per card: sunny #5b2d00; rainy white; snowy white; stormy white. But description etc. Use .card--sunny { color:#51300a } .card--sunny .temp etc. For others white. Border rgba(255,255,255,.5) for sunny maybe rgba(255,255,255,.7). Fine.

Rainy gradient: linear-gradient(165deg,#7dd3fc,#3b82f6 55%,#1e3a8a). Snowy: linear-gradient(165deg,#ffffff,#bfdbfe 55%,#64748b) color #0f172a? Snow card light, use dark text. Stormy: linear-gradient(165deg,#475569,#1e293b 55%,#020617) white.

Maybe maintain contrast: sunny and snowy light cards dark text; rainy/stormy light text. Set .card--sunny,.card--snowy { color:#17202b } etc.

Scene height 150px; position relative; margin-bottom 18px. Each icon centered.

Sun: .sun { position:absolute; left:50%; top:44%; width:118px; height:118px; transform:translate(-50%,-50%); } .sun-core { position:absolute; inset:28px; border-radius:50%; background: radial-gradient(circle at 35% 30%, #fff7ad, #ffd23f 45%, #ff9f1c); box-shadow: 0 0 24px 8px rgba(255,210,63,.65), 0 0 70px 20px rgba(255,170,60,.35); animation: sunPulse 4s ease-in-out infinite; } .sun-rays { position:absolute; inset:0; border-radius:50%; background: repeating-conic-gradient(from 0deg, rgba(255,244,180,.95) 0deg 10deg, transparent 10deg 45deg); -webkit-mask: radial-gradient(circle, transparent 0 34px, #000 35px 48px, transparent 49px); mask: radial-gradient(circle, transparent 0 34px, #000 35px 48px, transparent 49px); animation: spin 14s linear infinite; filter: drop-shadow(0 0 6px rgba(255,220,90,.8)); } Need mask sizes relative to 118: core inset 28 => radius 31; rays ring 35-48 good. repeating-conic 8 rays (45 deg period with 10 deg ray). Good. Keyframes spin { to { transform: rotate(360deg) } } but .sun-rays no translate, fine. sunPulse scale maybe but core has no transform; keyframes {0,100 transform scale(1);50 scale(1.06)}.

Cloud: .cloud { position:absolute; left:50%; top:34%; width:112px; height:38px; transform:translateX(-50%); background: linear-gradient(#fff,#dbeafe); border-radius:999px; box-shadow: 0 10px 24px rgba(2,32,71,.18); animation: cloudBob 5s ease-in-out infinite; } .cloud::before { content:""; position:absolute; width:46px; height:46px; left:18px; top:-24px; border-radius:50%; background:inherit; box-shadow: 14px 8px 0 6px rgba(255,255,255,.95)? Hmm pseudo one bump only plus after. Need cloud bumps: use ::before and ::after circles: before width 44 height 44 left 16 top -22 background #fff border-radius 50%; after width 34 height 34 right 18 top -14 background #fff. With base background gradient, pseudo solid #fff maybe okay. For dark cloud override background and pseudo background. Use background: #f8fafc for cloud; before/after background:#f8fafc; base maybe #e2e8f0. Simpler .cloud { background:#f8fafc; } .cloud::before,.cloud::after { background:#f8fafc; content...} plus box-shadow. For storm .cloud--dark { background:#334155 } pseudo background:#334155.

Rain drops: .rain .drop { position:absolute; top:72px; width:5px; height:18px; border-radius:999px; background: linear-gradient(#e0f2fe, #38bdf8); box-shadow: 0 0 8px rgba(125,211,252,.8); opacity:.9; animation: rainfall 1.15s linear infinite; } positions left via nth-child: .rain .drop:nth-child(2) { left:34%; animation-delay:-.2s } etc. But cloud is first child; drops are children 2..6. Use nth-of-type? span.drop are span, cloud div; nth-child works if count includes div. Simpler assign classes d1..d5? Use style? inline style not event, allowed but maybe avoid; use nth-child: .rain .drop:nth-child(2){left:30%} etc. Keyframes rainfall { 0% { transform: translateY(-14px) scaleY(.6); opacity:0 } 15% {opacity:1} 100% { transform: translateY(64px) scaleY(1.15); opacity:0 } } Base top 70, left default 50. If reduced motion animation none, drops visible at top under cloud (opacity .9) static, okay. Maybe under reduced set .drop { transform: translateY(24px); opacity:.75 }? Can set in media. Good.

Snow flakes: .snow .flake { position:absolute; top:66px; width:9px; height:9px; border-radius:50%; background:#fff; box-shadow:0 0 10px rgba(255,255,255,.9); animation: snowfall 3.2s linear infinite; } positions nth-child. Keyframes snowfall { 0% { transform: translate3d(-8px,-12px,0) rotate(0deg); opacity:0 } 12% {opacity:1} 100% { transform: translate3d(14px,72px,0) rotate(220deg); opacity:0 } } For variety use animation-duration via nth-child and delay. Could use same keyframes with different left/delay/duration. Good. Add flake shape maybe ::before? not needed; circles as snow. But requirement drifting snowflakes; circles okay? Maybe make flakes as 6-point using pseudo? Too much. Circles with slight scale in keyframe? Add scale. Fine.

Storm: .storm .cloud--dark top 26; .bolt { position:absolute; left:50%; top:64px; width:34px; height:74px; transform:translateX(-50%); background: linear-gradient(#fef08a,#facc15 55%,#f59e0b); clip-path: polygon(58% 0, 18% 52%, 42% 52%, 28% 100%, 82% 38%, 54% 38%); filter: drop-shadow(0 0 12px rgba(250,204,21,.95)); animation: lightning 2.4s linear infinite; opacity:1; } Keyframes lightning { 0%, 54%, 100% { opacity:0; transform: translateX(-50%) scale(.92);} 58%,72% { opacity:1; transform: translateX(-50%) scale(1.06);} 80% {opacity:.25;} } Hmm want flashing. Simpler: 0%,100% opacity 0; 8% opacity1; 16% opacity .1; 24% opacity 1; 34% opacity 0. With transform. But if reduced motion animation none, base opacity should be 1. Set .bolt { opacity:1 } and animation will override. Keyframes can start at 0 opacity .0? If animation running, at 0 maybe flash. Use keyframes flash { 0%, 100% { opacity: 0; } 6% {opacity:1} 12% {opacity:.15} 18% {opacity:1} 26% {opacity:0} } with duration 2.8 infinite; long dark between flashes maybe okay. But screenshot at 3 sec might catch dark if opacity 0 at 3 sec? Duration 2.8, at 3s -> 0.2s = 7% -> opacity 1, good maybe. But not guaranteed. To ensure visible at first paint and screenshot, maybe base and animation keyframes include visible at 0? If animation infinite, at load time t=0 keyframe 0 applies. If keyframe 0 opacity 0, initial paint dark bolt (but card still visible). At 3s with duration 2.4, 3/2.4=1.25 -> 0.25*2.4=0.6s =25% maybe opacity? Could be 0. Better make lightning mostly visible with brief dark? Requirement flashing lightning. We can make bolt visible most of time with rapid opacity flicker: keyframes flash {0%,100%{opacity:1; transform...scale(1)} 8%{opacity:.15} 12%{opacity:1} 46%{opacity:.25} 50%{opacity:1} 78%{opacity:.2} 82%{opacity:1}}. It flashes but visible at 0 and likely at 3s? At 3s if duration 3.6, 3/3.6=83.3% -> keyframe around 82-100 opacity 1. Good. Use duration 3.6s so at exactly 3s near 83%, visible. Nice. But screenshot about 3 sec after load maybe plus rendering; choose duration 4s, at 3s=75%, keyframe 78 opacity .2 if between 50 and78? Need design keyframes such that at 75% opacity 1. Let's set flash duration 4s: 0% opacity 1; 5% .1; 9% 1; 45% .25; 49% 1; 80% .15; 84% 1; 100% 1. At 3s=75% between 49 and80 interpolates from 1 to .15 -> around .36, visible dim. Better at 75 maybe .5; okay visible. Could set 70% 1, 74% .1, 78% 1. Then at 75% ~.55 visible. Fine. Simpler: animation: lightning 3.2s steps? no smooth. Use flicker with high visibility. Good enough.

Add storm rain maybe few drops dark blue. Could include drops in storm with .storm .drop similar but shorter. Not necessary but stormy can have rain too. Add 3 drops.

Meta layout: .meta { display:flex; align-items:end; justify-content:space-between; gap:12px; } .temp { font-size: clamp(2.4rem, 4vw, 3.4rem); font-weight:800; line-height:.9; letter-spacing:-.04em; } h2 margin 0 font-size 1.35rem; .label margin 0 opacity .8 text-transform uppercase letter-spacing .12em font-size .72rem; .desc margin 14px 0 0; opacity .86; line-height 1.45; font-size .95rem. Maybe card min-height 330.

Need weather label maybe description short: Sunny: "Clear skies and golden light." But requirement short description. City names: Lisbon, London, Oslo, Reykjavík? Temperatures: 31°, 17°, -3°, 6°. Descriptions: "Bright sun with a warm Atlantic breeze." Rain: "Steady showers under a low grey sky." Snow: "Soft flakes drifting over a quiet city." Storm: "Thunder, wind and sudden bright flashes." Good.

Accessibility: aria-hidden on scenes, article aria-label maybe. h2 city. Good.

Reduced motion: 
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior:auto !important; transition-duration:0.01ms !important; }
  .sun-rays, .sun-core, .cloud, .drop, .flake, .bolt { animation: none !important; }
  .rain .drop, .storm .drop { opacity:.75; transform: translateY(26px); }
  .snow .flake { opacity:.85; transform: translate(6px, 34px); }
  .bolt { opacity:1; transform: translateX(-50%); }
}
But if we set all animation none, hover transition still okay? transition-duration .01ms makes hover instant but respected. Fine. However setting .drop transform in media will conflict with animation none; okay. Need not set * animation-duration because animation:none enough. But for any other animation, none. Use targeted. Also keyframes still defined. Good.

Potential issue: CSS mask support in Chrome fine. Need include -webkit-mask and mask. If mask unsupported, rays would be full conic circle (filled disc) maybe too much; Chrome supports. Good.

No images/SVG/icon fonts. clip-path okay. No external fonts. 

Need ensure no horizontal scrollbar at 375: .page width min(1120px, 100% - 24px); body overflow-x:hidden. Cards min-width 0. grid columns minmax(0,1fr). At mobile one column, card width full. Scene width etc. Good.

At 1280x800, page width 1120, padding top maybe 36, hero maybe 132, grid card height maybe 350, total 36+132+24+350+ bottom = 560, fits. Actually good. Maybe make cards a bit taller 360. 800 height enough.

Need first paint visible: yes.

Let's craft final code carefully. Need only one fenced code block. Ensure no <script>. No inline event handlers. Use HTML entities for degrees ° and í okay UTF-8.

Check pseudo-elements: cloud::before/::after. Sun rays uses element span. Good.

Potential requirement "rotating sun rays" - .sun-rays rotates. Good.

"falling rain drops" - drops animate. "drifting snowflakes" - flakes animate with x drift. "flashing lightning" - bolt flashes.

"Each card has its own background gradient matching weather" yes.

"cards displayed responsive grid (4 per row desktop, stacked mobile) and lift up on hover" yes.

"Smooth infinite animations using @keyframes, respect prefers-reduced-motion" yes.

Need maybe include @keyframes spin, sunPulse, cloudBob, rainfall, snowfall, lightning, maybe float for scene? Keep minimal.

Let's write code. Use CSS custom props for card text? Simpler classes.

Need be mindful .card:hover transform might conflict with any card animation (none on card). Good.

Let's produce final. Ensure code block starts ```html and ends ```. No extra text. 

One nuance: If using `repeating-conic-gradient` with `mask`, the element rotates; since gradient is conic centered, rotation visible as rays move. Good.

Rain cloud bob animation transform translateX(-50%) maybe keyframes must include translateX(-50%) to avoid jump: @keyframes cloudBob { 0%,100% { transform: translateX(-50%) translateY(0) } 50% { transform: translateX(-50%) translateY(-6px) } }. Set .cloud base transform translateX(-50%). Good.

Sun core pulse uses transform scale; base no transform. Fine.

Drop keyframes include translateY only; base left set. Good.

Snow keyframes include translate3d; base no transform. Good.

Bolt keyframes include translateX(-50%) to preserve centering plus scale. Base transform translateX(-50%). Good.

Reduced motion targeted .bolt transform translateX(-50%) but if animation none and base transform already translateX(-50%), okay. For drops, base has no transform; set in media.

Need maybe `.scene { height: 150px; }` at mobile maybe 140. Fine.

Card color contrast: For snowy light gradient, .card--snowy color #12263a; desc opacity .8. For sunny color #5b3208. Border for light cards: .card--sunny,.card--snowy { border-color: rgba(255,255,255,.75); box-shadow... } okay.

Let's include small status dot? Not needed.

Need maybe title/meta.

Final code length moderate. Ensure no comments? Comments okay but maybe no need. Could include comments in CSS; fine. But output only code block. 

Let's formulate.