/* ===========================================================
   AQUACAR — Themed FX (sea · sun · car)
   Layered on the dark theme. All gated by prefers-reduced-motion.
   =========================================================== */

/* ---------- Hero: sun + waves + mascot ---------- */
.hero{isolation:isolate}
.hero .wrap{position:relative;z-index:2}
.hero .glow-floor{z-index:0}
.hero-waves{position:absolute;left:0;right:0;bottom:-1px;height:120px;z-index:1;width:100%;pointer-events:none;will-change:transform}
.hero-waves svg{width:200%;height:100%;display:block;animation:drift 14s linear infinite}
.hero-waves .w2 svg{animation-duration:22s;animation-direction:reverse}
.hero-waves .w2{position:absolute;inset:0;opacity:.6}

/* Caballito NADANDO en su pecera: vaivén suave, burbujas y luz tenue */
.hero-mascot{position:absolute;z-index:2;left:1%;bottom:6%;width:84px;opacity:.94;pointer-events:none;
  transform-origin:center;animation:swim 9s ease-in-out infinite;will-change:transform;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.45))}
.hero-aqua{position:absolute;left:-10px;bottom:0;width:240px;height:230px;z-index:0;pointer-events:none;
  background:radial-gradient(45% 50% at 35% 65%, rgba(31,185,221,.20), transparent 70%);
  animation:aqualight 7s ease-in-out infinite}
.hero-bubbles{position:absolute;left:1%;bottom:6%;width:110px;height:220px;z-index:1;pointer-events:none}
.hero-bubbles i{position:absolute;bottom:0;border-radius:50%;opacity:0;will-change:transform,opacity;
  background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.7), rgba(120,220,245,.25) 60%, transparent 72%);
  box-shadow:0 0 5px rgba(120,220,245,.45);animation:bubble linear infinite}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes swim{0%{transform:translate(0,0) rotate(-4deg)}25%{transform:translate(10px,-12px) rotate(4deg)}
  50%{transform:translate(3px,-22px) rotate(-3deg)}75%{transform:translate(-7px,-9px) rotate(5deg)}
  100%{transform:translate(0,0) rotate(-4deg)}}
@keyframes aqualight{0%,100%{opacity:.45}50%{opacity:.85}}
@keyframes bubble{0%{transform:translateY(0) translateX(0) scale(.6);opacity:0}
  12%{opacity:.85}88%{opacity:.5}100%{transform:translateY(-160px) translateX(10px) scale(1);opacity:0}}

/* ---------- Step road + driving car ---------- */
.steps{--p:1}
.steps::before{display:none !important}
.road{position:absolute;top:18px;left:0;width:100%;height:70px;z-index:0;overflow:visible;pointer-events:none}
.road .base{fill:none;stroke:rgba(255,255,255,.10);stroke-width:3;stroke-linecap:round;stroke-dasharray:7 11}
.road .draw{fill:none;stroke:url(#roadgrad);stroke-width:3.5;stroke-linecap:round;stroke-dasharray:1;
  stroke-dashoffset:calc(1 - var(--p));filter:drop-shadow(0 0 6px rgba(31,185,221,.7))}
.road-car{position:absolute;top:32px;left:calc(9% + var(--p) * 82%);transform:translate(-50%,-50%);
  width:46px;z-index:2;filter:drop-shadow(0 6px 8px rgba(0,0,0,.5))}
.road-car svg{width:100%;height:auto;display:block;animation:cbob 1.4s ease-in-out infinite}
.road-puff{position:absolute;top:46px;left:calc(9% + var(--p) * 82%);width:8px;height:8px;border-radius:50%;
  background:rgba(255,255,255,.35);transform:translate(-160%,-50%);opacity:calc(var(--p) * .6);filter:blur(2px)}
@keyframes cbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}

/* QR scan (step 3) */
.dot.qr{overflow:hidden}
.dot.qr .scan{position:absolute;left:14%;right:14%;top:18%;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--cyan-2),transparent);box-shadow:0 0 8px 1px var(--cyan-2);opacity:0}
.steps.in-view .dot.qr .scan,.step:hover .dot.qr .scan{animation:scan 1.4s ease-in-out 1}
.step:hover .dot.qr .scan{animation-iteration-count:1}
@keyframes scan{0%{opacity:0;top:18%}15%{opacity:1}85%{opacity:1}100%{opacity:0;top:80%}}

/* Key turn (step 4) */
.dot.keyturn .ico{transform-origin:60% 60%;transition:transform .2s}
.steps.in-view .dot.keyturn .ico{animation:keyturn 1.1s cubic-bezier(.5,1.6,.4,1) 1}
.step:hover .dot.keyturn .ico{animation:keyturn .9s cubic-bezier(.5,1.6,.4,1) 1}
@keyframes keyturn{0%{transform:rotate(0)}55%{transform:rotate(-90deg)}100%{transform:rotate(-90deg)}}

/* wheel spin on step 1 (drive) */
.dot.drive:hover .ico{animation:spin 1.2s linear infinite}

/* ---------- Vehicle illustrations ---------- */
.car-img{overflow:hidden}
.car-art{position:relative;z-index:1;width:84%;aspect-ratio:220/104;height:auto;
  --glass:rgba(8,34,46,.9);--wheel:#10303c;--hub:var(--cyan-2);--shine:rgba(255,255,255,.55);
  filter:drop-shadow(0 12px 18px rgba(0,0,0,.45));transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.car:hover .car-art{transform:translateX(4px) scale(1.04)}
.car-art .wheel{transform-origin:center;transform-box:fill-box}
.car:hover .car-art .wheel{animation:spin .9s linear infinite}
.car-cap{position:absolute;bottom:10px;right:10px;z-index:1;font-family:ui-monospace,Menlo,monospace;font-size:.62rem;
  letter-spacing:.04em;color:var(--muted);background:rgba(4,33,44,.55);padding:.3em .55em;border-radius:7px;border:1px solid var(--brd)}

/* card shine sweep */
.car-img::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.16) 50%,transparent 62%);
  transform:translateX(-120%);transition:transform .7s cubic-bezier(.3,.7,.3,1)}
.car:hover .car-img::after{transform:translateX(120%)}

/* phone mini car */
.scr-card .ph{position:relative;overflow:hidden}
.scr-card .ph svg{position:absolute;inset:0;margin:auto;width:80%;height:auto}

/* ---------- Confetti canvas ---------- */
#confetti{position:fixed;inset:0;z-index:120;pointer-events:none}

@media (prefers-reduced-motion: reduce){
  .hero-waves svg,.hero-mascot,.hero-aqua,.hero-bubbles i,.road-car svg{animation:none !important}
  .hero-bubbles{display:none}
  .car:hover .car-art .wheel,.dot.drive:hover .ico{animation:none !important}
  .dot.qr .scan{display:none}
  .dot.keyturn .ico{animation:none !important}
  .car-img::after{transition:none;display:none}
  .road .draw{stroke-dashoffset:0 !important}
  .road-car{left:91% !important}
  .road-puff{display:none}
}
@media (max-width:760px){
  .hero-mascot{display:none}
  .road{display:none}.road-car{display:none}.road-puff{display:none}
}