/* ═══════════════════════════════════════════════════════════
   cardenas.pe — «Archivo Vivo» · v2
   Herencia editorial + skin moderna con movimiento.
   Fraunces (display) + Spectral (texto). Tema claro/oscuro.
   ═══════════════════════════════════════════════════════════ */

:root[data-theme="light"] {
  --bg:#f4eee1; --bg-2:#ece1cd; --band:#e8ddc6; --ink:#2a2018; --ink-soft:#5b4d3e; --ink-faint:#8a7860;
  --gold:#a9772f; --gold-2:#c89a4e; --green:#3a5a45; --sky:#9fb6c4; --sea:#5f8a8b; --terra:#b07a48;
  --line:rgba(42,32,24,.14); --line-2:rgba(42,32,24,.28); --card:#f9f3e7; --art:#e6dabf;
  --shadow:0 30px 70px -34px rgba(58,42,24,.5); --grain-op:.045; --aurora-op:.5;
}
:root[data-theme="dark"] {
  --bg:#15110c; --bg-2:#1c1711; --band:#100d09; --ink:#efe4d1; --ink-soft:#c6b79e; --ink-faint:#8c7c64;
  --gold:#dcae61; --gold-2:#ead08a; --green:#7fa78a; --sky:#5d7686; --sea:#5b9092; --terra:#c08a55;
  --line:rgba(239,228,209,.12); --line-2:rgba(239,228,209,.24); --card:#1f1810; --art:#241d14;
  --shadow:0 30px 80px -36px rgba(0,0,0,.75); --grain-op:.06; --aurora-op:.6;
}

* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body { background:var(--bg); color:var(--ink); font-family:"Nunito",Georgia,serif; font-size:18px; line-height:1.7; overflow-x:hidden; transition:background .5s,color .5s; }
img { max-width:100%; display:block; }
::selection { background:var(--gold); color:var(--bg); }

/* Atmósfera: grano + aurora animada */
.grain { position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:var(--grain-op); mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.aurora { position:fixed; inset:-20% -20% auto -20%; height:140vh; z-index:0; pointer-events:none; opacity:var(--aurora-op);
  background:
    radial-gradient(40% 30% at 20% 15%, color-mix(in srgb,var(--gold) 22%,transparent), transparent 70%),
    radial-gradient(38% 28% at 82% 22%, color-mix(in srgb,var(--green) 20%,transparent), transparent 70%),
    radial-gradient(45% 32% at 55% 8%, color-mix(in srgb,var(--terra) 16%,transparent), transparent 72%);
  filter:blur(20px); animation:auroraDrift 26s ease-in-out infinite alternate; }
@keyframes auroraDrift { 0%{transform:translate3d(-2%,0,0) scale(1)} 100%{transform:translate3d(3%,2%,0) scale(1.08)} }
body > *:not(.grain):not(.aurora) { position:relative; z-index:1; }

/* ───────── Layout ───────── */
.section { max-width:1120px; margin:0 auto; padding:clamp(64px,11vw,150px) clamp(22px,6vw,64px); }
.section--band { background:color-mix(in srgb,var(--band) 86%,transparent); max-width:none; backdrop-filter:blur(2px); }
.section--band > * { max-width:1120px; margin-left:auto; margin-right:auto; }

/* ───────── Nav ───────── */
.nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; gap:24px; padding:14px clamp(22px,6vw,64px);
  background:color-mix(in srgb,var(--bg) 80%,transparent); backdrop-filter:blur(14px) saturate(1.3); border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink); margin-right:auto; }
.brand__mark { width:38px; height:38px; display:grid; place-items:center; font-family:"Baloo 2",serif; font-weight:600; font-size:22px;
  color:var(--bg); background:var(--green); border-radius:50%; box-shadow:inset 0 0 0 2px var(--gold); }
.brand__txt { font-family:"Baloo 2",serif; font-weight:500; font-size:18px; letter-spacing:.3px; }
.nav__links { display:flex; align-items:center; gap:clamp(14px,2.4vw,28px); }
.nav__links a { color:var(--ink-soft); text-decoration:none; font-size:13.5px; text-transform:uppercase; letter-spacing:1.6px; font-weight:500; position:relative; padding:4px 0; transition:color .3s; }
.nav__links a::after { content:""; position:absolute; left:0; bottom:-2px; width:0; height:1px; background:var(--gold); transition:width .35s; }
.nav__links a:hover { color:var(--ink); } .nav__links a:hover::after { width:100%; }
.nav__ext { color:var(--gold) !important; }
@media (max-width:760px){ .nav__links a:not(.nav__ext){display:none} }
.theme-btn { width:40px; height:40px; border-radius:50%; cursor:pointer; border:1px solid var(--line-2); background:var(--card); color:var(--ink); font-size:17px; display:grid; place-items:center; transition:transform .4s,border-color .3s; }
.theme-btn:hover { transform:rotate(20deg); border-color:var(--gold); }
.theme-btn__moon { display:none; }
:root[data-theme="dark"] .theme-btn__sun { display:none; } :root[data-theme="dark"] .theme-btn__moon { display:block; }

/* ───────── Hero ───────── */
.hero { position:relative; min-height:94vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:60px 22px 80px; overflow:hidden; }
.hero__roots { position:absolute; inset:auto 0 0 0; height:62%; color:var(--green); opacity:.24; pointer-events:none; }
.hero__roots svg { width:100%; height:100%; }
.hero__roots circle { fill:var(--gold); }
.root-line { stroke-dasharray:1400; stroke-dashoffset:1400; animation:draw 3.2s ease forwards .3s; }
@keyframes draw { to { stroke-dashoffset:0; } }
.hero__sparks { position:absolute; inset:0; pointer-events:none; }
.hero__sparks i { position:absolute; bottom:-10px; width:5px; height:5px; border-radius:50%; background:var(--gold); opacity:0; filter:blur(.3px); animation:rise 9s linear infinite; }
.hero__sparks i:nth-child(1){left:18%; animation-delay:0s} .hero__sparks i:nth-child(2){left:33%; animation-delay:1.6s; width:4px}
.hero__sparks i:nth-child(3){left:50%; animation-delay:3.1s} .hero__sparks i:nth-child(4){left:64%; animation-delay:4.4s; width:3px}
.hero__sparks i:nth-child(5){left:78%; animation-delay:2.2s} .hero__sparks i:nth-child(6){left:88%; animation-delay:5.5s; width:4px}
@keyframes rise { 0%{opacity:0; transform:translateY(0) scale(.6)} 12%{opacity:.9} 80%{opacity:.7} 100%{opacity:0; transform:translateY(-70vh) scale(1)} }
.hero__eyebrow { font-size:13px; letter-spacing:4px; text-transform:uppercase; color:var(--gold); font-weight:600; margin-bottom:26px; }
.hero__title { font-family:"Baloo 2",serif; font-weight:300; line-height:.92; display:flex; flex-direction:column; align-items:center; gap:.04em; }
.hero__title > span:first-child { font-size:clamp(28px,7vw,78px); letter-spacing:clamp(3px,1.4vw,8px); text-transform:uppercase; font-weight:400; color:var(--ink-soft); }
.hero__title-script { font-size:clamp(52px,16vw,220px); font-weight:700; font-style:normal; color:var(--ink); font-optical-sizing:auto; letter-spacing:-1px; max-width:100%;
  background:linear-gradient(180deg,var(--ink),color-mix(in srgb,var(--gold) 55%,var(--ink))); -webkit-background-clip:text; background-clip:text; }
.hero__phrase { font-style:italic; font-size:clamp(19px,2.7vw,28px); color:var(--ink-soft); margin-top:30px; max-width:24ch; }
.hero__names { list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:11px; margin-top:42px; max-width:760px; }
.hero__names a {
  display:inline-block; text-decoration:none; font-family:"Baloo 2",sans-serif; font-weight:600;
  font-size:14.5px; letter-spacing:.2px; color:var(--ink-soft);
  padding:9px 20px; border-radius:100px;
  background:color-mix(in srgb,var(--gold) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--gold) 38%,transparent);
  transition:transform .3s, background .3s, color .3s, border-color .3s, box-shadow .3s;
}
.hero__names a:hover, .hero__names a:focus-visible {
  color:var(--bg); background:var(--green); border-color:var(--green);
  transform:translateY(-3px); box-shadow:var(--shadow); outline:none;
}
.hero__cue { margin-top:54px; text-decoration:none; color:var(--ink-soft); display:inline-flex; flex-direction:column; align-items:center; gap:12px; font-size:12px; letter-spacing:2.5px; text-transform:uppercase; }
.hero__cue-line { width:1px; height:46px; background:linear-gradient(var(--gold),transparent); animation:drip 2.4s ease-in-out infinite; }
@keyframes drip { 0%,100%{transform:scaleY(.6); opacity:.5; transform-origin:top} 50%{transform:scaleY(1); opacity:1} }

/* ───────── Encabezado de sección ───────── */
.section__head { max-width:760px; margin-bottom:clamp(40px,6vw,72px); }
.section__num { font-family:"Baloo 2",serif; font-style:italic; font-size:15px; color:var(--gold); letter-spacing:2px; }
.section__title { font-family:"Baloo 2",serif; font-weight:400; font-size:clamp(32px,5.5vw,56px); line-height:1.05; margin:6px 0 18px; letter-spacing:-.5px; }
.section__lead { color:var(--ink-soft); font-size:clamp(16px,2vw,20px); max-width:60ch; }
.section__roots { margin-top:22px; max-width:62ch; font-size:clamp(15px,1.8vw,18px); color:var(--ink); font-style:italic; line-height:1.75; padding:16px 0 16px 22px; border-left:2px solid var(--gold); background:linear-gradient(90deg,color-mix(in srgb,var(--gold) 9%,transparent),transparent 70%); }
.section__roots strong { font-style:normal; color:var(--green); font-weight:600; }

/* ───────── Historias ───────── */
.stories { display:flex; flex-direction:column; gap:clamp(40px,7vw,90px); }
.story { display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(24px,4vw,56px); align-items:center; }
.story--alt { grid-template-columns:1.15fr .85fr; }
.story--alt .story__art { order:2; }
.story__art { position:relative; aspect-ratio:4/5; border-radius:6px; overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--line-2); background:var(--art); }
.story__art svg { position:absolute; inset:0; width:100%; height:100%; }
.story__cap { position:absolute; bottom:10px; left:0; right:0; text-align:center; font-size:10.5px; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink-faint); z-index:2; }
.story__top { display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; margin-bottom:18px; border-bottom:1px solid var(--line); padding-bottom:14px; }
.story__name { font-family:"Baloo 2",serif; font-weight:500; font-size:clamp(30px,5vw,50px); letter-spacing:-.5px; }
.story__origin { font-size:12px; letter-spacing:1.8px; text-transform:uppercase; color:var(--gold); font-weight:600; }
.story__text { color:var(--ink); font-size:18px; }
.story__text em { color:var(--ink-soft); font-size:.92em; } .story__text strong { color:var(--green); font-weight:600; }
.dropcap { float:left; font-family:"Baloo 2",serif; font-weight:600; font-size:62px; line-height:.8; padding:6px 12px 0 0; color:var(--green); }
.story__note { margin-top:16px; font-size:12px; letter-spacing:1px; text-transform:uppercase; color:var(--ink-faint); }
.story__note a { color:var(--gold); text-decoration:none; border-bottom:1px solid var(--line-2); transition:border-color .3s; }
.story__note a:hover { border-color:var(--gold); }
@media (max-width:760px){ .story,.story--alt{grid-template-columns:1fr} .story--alt .story__art{order:0} .story__art{aspect-ratio:16/10; max-height:300px} }

/* ─── Escenas de vida animadas (siluetas en movimiento) ─── */
.scene { background:linear-gradient(180deg, color-mix(in srgb,var(--sky) 50%,var(--art)) 0%, var(--art) 72%); }
.scene .ground { fill:color-mix(in srgb,var(--green) 70%,var(--art)); }
.scene .fig { fill:none; stroke:var(--ink); stroke-width:5; stroke-linecap:round; stroke-linejoin:round; opacity:.82; }
.scene .head { fill:var(--ink); opacity:.82; }
.scene .leaves circle { fill:var(--green); opacity:.85; }
.scene .trunk { stroke:var(--terra); }
.scene .sun { fill:var(--gold); opacity:.85; animation:pulse 6s ease-in-out infinite; }
.scene .accent { fill:var(--gold); opacity:.85; }
.scene .path { fill:none; stroke:color-mix(in srgb,var(--gold) 60%,transparent); stroke-width:3; stroke-dasharray:6 9; opacity:.7; }
.scene .bird { fill:none; stroke:var(--ink); stroke-width:3; stroke-linecap:round; opacity:.8; }

.scene--climb .bird { animation:flyAcross 9s linear infinite; }
.scene--climb .leaves, .scene--play .leaves { transform-origin:center top; animation:sway 6s ease-in-out infinite; }
.scene--climb .kid1 { transform-origin:center; animation:climbUD 4s ease-in-out infinite; }
.scene--climb .kid2 { transform-origin:center; animation:climbUD 5s ease-in-out infinite .7s; }
.scene--climb .kid3 { transform-origin:center; animation:climbUD 4.6s ease-in-out infinite 1.5s; }
.scene--march .marchers { animation:marchX 2.2s ease-in-out infinite; }
.scene--march .flagcloth { transform-origin:150px 150px; animation:flagwave 2.6s ease-in-out infinite; }
.scene--farm .tool { transform-origin:176px 220px; animation:dig 1.3s ease-in-out infinite; }
.scene--farm .crops { transform-origin:center bottom; animation:sway 5s ease-in-out infinite; }
.scene--travel .travelers { animation:bob 2.5s ease-in-out infinite; }
.scene--study .reader { transform-origin:center; animation:bob 5s ease-in-out infinite; }
.scene--play .kids { transform-origin:center; animation:bob 3s ease-in-out infinite; }

@keyframes flyAcross { from{transform:translate(0,0)} to{transform:translate(380px,-22px)} }
@keyframes bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
@keyframes marchX { 0%,100%{transform:translateX(-4px)} 50%{transform:translateX(6px)} }
@keyframes flagwave { 0%,100%{transform:skewX(0) scaleX(1)} 50%{transform:skewX(-7deg) scaleX(.93)} }
@keyframes dig { 0%{transform:rotate(-48deg)} 45%{transform:rotate(12deg)} 62%{transform:rotate(12deg)} 100%{transform:rotate(-48deg)} }
@keyframes climbUD { 0%,100%{transform:translateY(8px)} 50%{transform:translateY(-26px)} }
@keyframes sway { 0%,100%{transform:rotate(-2.5deg)} 50%{transform:rotate(2.5deg)} }
@keyframes pulse { 0%,100%{transform:scale(1); opacity:.85} 50%{transform:scale(1.06); opacity:1} }

.scene .hills { fill:color-mix(in srgb,var(--green) 45%,var(--art)); }
.scene .cloud ellipse { fill:color-mix(in srgb,#fff 65%,var(--art)); opacity:.55; }
.scene .goods circle { fill:var(--gold); opacity:.7; }
.scene--market .vendor { transform-origin:center; animation:bob 3.6s ease-in-out infinite; }
.scene--pilot .plane { fill:var(--ink); opacity:.82; animation:flyPlane 7s linear infinite; }
.scene--pilot .cloud { animation:floatXslow 22s linear infinite; }
.scene--medic .ecg { fill:none; stroke:var(--green); stroke-width:4; stroke-linecap:round; stroke-linejoin:round; opacity:.85; stroke-dasharray:600; stroke-dashoffset:600; animation:ecg 3.4s linear infinite; }
.scene--medic .runner { transform-origin:center; animation:bob 1.6s ease-in-out infinite; }
@keyframes flyPlane { from{transform:translateX(0)} to{transform:translateX(430px)} }
@keyframes floatXslow { from{transform:translateX(-20px)} to{transform:translateX(340px)} }
@keyframes ecg { from{stroke-dashoffset:600} to{stroke-dashoffset:0} }

/* ───────── Carrusel de videos ───────── */
.carousel { overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.carousel__track { display:flex; gap:22px; width:max-content; animation:slide 40s linear infinite; }
.carousel:hover .carousel__track { animation-play-state:paused; }
@keyframes slide { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.vcard { position:relative; flex:0 0 auto; width:min(420px,78vw); aspect-ratio:16/9; border-radius:10px; background-size:cover; background-position:center;
  border:1px solid var(--line-2); box-shadow:var(--shadow); overflow:hidden; transition:transform .4s; }
.vcard::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.55)); }
.vcard:hover { transform:scale(1.03); }
.vcard__play { position:absolute; inset:0; z-index:2; display:grid; place-items:center; color:#fff; font-size:34px; text-shadow:0 4px 18px rgba(0,0,0,.6); opacity:.92; transition:transform .4s; }
.vcard:hover .vcard__play { transform:scale(1.18); }
.videos__hint { margin-top:28px; color:var(--ink-soft); font-style:italic; font-size:15px; }
.videos__hint a, .footer__links a { color:var(--gold); text-decoration:none; border-bottom:1px solid var(--line-2); }
.videos__hint a:hover, .footer__links a:hover { border-color:var(--gold); }

/* ───────── Carlos ───────── */
.carlos { display:grid; grid-template-columns:220px 1fr; gap:clamp(28px,5vw,56px); align-items:start; }
.carlos__portrait { width:220px; height:220px; border-radius:50%; overflow:hidden; box-shadow:inset 0 0 0 3px var(--gold), var(--shadow); position:relative; }
.carlos__portrait::after { content:""; position:absolute; inset:0; border-radius:50%; box-shadow:inset 0 0 0 6px color-mix(in srgb,var(--green) 60%,transparent); }
.carlos__portrait img { width:100%; height:100%; object-fit:cover; filter:saturate(.95) contrast(1.02); }
.carlos__bio { font-size:19px; color:var(--ink); }
.carlos__chips { list-style:none; display:flex; flex-wrap:wrap; gap:10px; margin:22px 0 26px; }
.carlos__chips li { font-size:13px; letter-spacing:.5px; padding:6px 14px; border-radius:100px; background:color-mix(in srgb,var(--gold) 14%,transparent); color:var(--gold); border:1px solid color-mix(in srgb,var(--gold) 30%,transparent); }
.carlos__links { display:flex; flex-wrap:wrap; gap:12px; }
.lnk { text-decoration:none; color:var(--ink); font-size:14px; letter-spacing:.5px; padding:10px 18px; border:1px solid var(--line-2); border-radius:100px; transition:background .3s,color .3s,border-color .3s,transform .3s; }
.lnk:hover { transform:translateY(-2px); border-color:var(--gold); color:var(--gold); }
.lnk--primary { background:var(--green); color:var(--bg); border-color:var(--green); }
.lnk--primary:hover { background:var(--ink); border-color:var(--ink); color:var(--bg); }
@media (max-width:640px){ .carlos{grid-template-columns:1fr} .carlos__portrait{width:150px; height:150px} }

/* ───────── Footer ───────── */
.footer { text-align:center; padding:clamp(60px,9vw,110px) 22px 56px; background:color-mix(in srgb,var(--band) 90%,transparent); border-top:1px solid var(--line); }
.footer__mark { width:56px; height:56px; margin:0 auto 26px; border-radius:50%; display:grid; place-items:center; font-family:"Baloo 2",serif; font-size:30px; color:var(--bg); background:var(--green); box-shadow:inset 0 0 0 2px var(--gold); }
.footer__phrase { font-family:"Baloo 2",serif; font-style:italic; font-size:clamp(20px,3.4vw,30px); color:var(--ink); max-width:26ch; margin:0 auto 28px; }
.footer__mail { display:inline-block; color:var(--gold); text-decoration:none; font-size:18px; letter-spacing:.5px; border-bottom:1px solid var(--line-2); padding-bottom:3px; transition:border-color .3s; }
.footer__mail:hover { border-color:var(--gold); }
.footer__names { list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:34px 0 16px; color:var(--ink-faint); font-size:13px; letter-spacing:2px; text-transform:uppercase; }
.footer__links { margin-bottom:18px; font-size:14px; }
.footer__copy { color:var(--ink-faint); font-size:13px; }

/* ───────── Reveal ───────── */
.reveal { opacity:0; transform:translateY(22px); }
.reveal.in { opacity:1; transform:none; transition:opacity .9s cubic-bezier(.2,.7,.2,1) var(--d,0s), transform .9s cubic-bezier(.2,.7,.2,1) var(--d,0s); }
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1!important; transform:none!important}
  .hero__cue-line,.aurora,.root-line,.hero__sparks i,.carousel__track,
  .bird,.leaves,.kid1,.kid2,.kid3,.tool,.marchers,.flagcloth,.crops,.reader,.sun,.vendor,.plane,.cloud,.ecg,.runner,.confetti,.leader,.players{ animation:none!important }
  .ecg{ stroke-dashoffset:0!important }
  .root-line{ stroke-dashoffset:0!important }
  html{scroll-behavior:auto}
}

/* ── Gente junta (fondo) ── */
.hero__crowd{ position:absolute; inset:auto 0 0 0; height:36%; color:var(--green); opacity:.34; pointer-events:none; z-index:0; }
.footer__crowd{ position:absolute; inset:auto 0 0 0; height:130px; color:var(--green); opacity:.16; pointer-events:none; z-index:0; }
.hero__crowd svg,.footer__crowd svg{ width:100%; height:100%; }
.hero > p,.hero > h1,.hero > ul,.hero > a{ position:relative; z-index:2; }
.footer > :not(.footer__crowd){ position:relative; z-index:1; }
.person .ph{ fill:currentColor; }
.person .pb{ fill:none; stroke:currentColor; stroke-width:4; stroke-linecap:round; stroke-linejoin:round; }
.person{ transform-origin:center bottom; animation:peopleBob 3s ease-in-out infinite; animation-delay:calc(var(--i,0)*.16s); }
@keyframes peopleBob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
@media (prefers-reduced-motion:reduce){ .person{animation:none!important} }

/* ── Escena desfile (Urrutia): niñas jugando + niña en desfile ── */
.scene--parade .confetti circle{ fill:var(--gold); opacity:.75; }
.scene--parade .confetti{ animation:confetti 4s linear infinite; }
.scene--parade .leader{ transform-origin:center bottom; animation:bob 2.4s ease-in-out infinite; }
.scene--parade .players{ transform-origin:center bottom; animation:bob 1.7s ease-in-out infinite; }
@keyframes confetti{ 0%{transform:translateY(-12px); opacity:0} 25%{opacity:.85} 100%{transform:translateY(46px); opacity:0} }
@media (prefers-reduced-motion:reduce){ .confetti,.leader,.players{ animation:none!important } }

/* ── Escena camión (Loyola): camioneros en la montaña ── */
.scene--truck .mtn.back{ fill:color-mix(in srgb,var(--green) 50%,var(--art)); }
.scene--truck .road{ stroke:color-mix(in srgb,var(--ink) 45%,transparent); stroke-width:4; stroke-dasharray:10 12; fill:none; }
.scene--truck .truck rect, .scene--truck .truck path{ fill:var(--terra); stroke:var(--ink); stroke-width:3; stroke-linejoin:round; opacity:.92; }
.scene--truck .wheel{ fill:var(--ink); }
.scene--truck .truck{ animation:drive 6s linear infinite; }
@keyframes drive{ from{transform:translateX(-130px)} to{transform:translateX(340px)} }
@media (prefers-reduced-motion:reduce){ .truck{ animation:none!important } }