/* Faithful Cleo hero: a dark storm sky + white headline that CLEAR into a bright
   lake landscape as a 3D iPhone arrives close-up then settles. Static <link> so
   the background-image / backdrop-filter / transforms survive Lightning CSS.
   Layer transforms are scrubbed by getCleoHeroState via window.gsap; the CSS
   values below are the pre-JS / no-JS resting state (storm + headline shown). */

.cleo-hero{position:relative;height:250svh;background:#10243b;} /* 2.5 viewports of scroll */
.cleo-hero__pin{position:sticky;top:0;height:100svh;overflow:hidden;}

/* full-bleed background layers (storm on top of landscape, crossfades out) */
.cleo-hero__storm,
.cleo-hero__landscape{
  position:absolute;inset:0;
  background-size:cover;background-position:center;background-repeat:no-repeat;
  will-change:opacity,transform;
}
.cleo-hero__landscape{z-index:0;background-image:url("/map/cleo/landscape.jpg");opacity:0;}
/* soft blur matches Cleo's out-of-focus storm sky and hides upscale blockiness */
.cleo-hero__storm{z-index:1;background-image:url("/map/cleo/storm-sky.jpg");background-color:#10243b;opacity:1;filter:blur(5px);}

/* nav overlay: absolute within the pin (never fixed; won't collide with MAP #nav) */
.cleo-hero__nav{
  position:absolute;top:0;left:0;right:0;z-index:4;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:clamp(16px,2.2vw,28px) clamp(20px,3vw,48px);
  pointer-events:none; /* decorative clone: links are non-interactive */
}
.cleo-hero__brand{
  font-family:var(--font-sf),-apple-system,system-ui,sans-serif;
  font-weight:500;font-size:clamp(20px,2vw,26px);letter-spacing:-.01em;color:#fff;
}
.cleo-hero__navpill{
  display:flex;align-items:center;gap:clamp(10px,1.6vw,26px);
  padding:11px 24px;border-radius:999px;
  background:rgba(255,255,255,.1);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.16);
}
.cleo-hero__navlink{
  font-family:var(--font-sf),-apple-system,system-ui,sans-serif;
  font-size:15px;font-weight:400;letter-spacing:-.01em;color:rgba(255,255,255,.92);
}
.cleo-hero__getapp{
  font-family:var(--font-sf),-apple-system,system-ui,sans-serif;
  font-size:15px;font-weight:400;color:#fff;
  padding:11px 22px;border-radius:999px;border:1px solid rgba(255,255,255,.42);
}

/* headline + scroll hint (white, centered) */
.cleo-hero__headline{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  z-index:3;margin:0;text-align:center;
  font-family:var(--font-sf),-apple-system,system-ui,sans-serif;
  font-weight:600;letter-spacing:-.03em;line-height:1.05;color:#fff;
  font-size:clamp(1.9rem,4.6vw,3.5rem);max-width:none;white-space:nowrap;
  text-shadow:0 1px 30px rgba(0,0,0,.28);
  will-change:opacity,transform;
}
.cleo-hero__scroll{
  position:absolute;left:50%;top:62%;transform:translateX(-50%);
  z-index:3;color:rgba(255,255,255,.85);
  font-family:var(--font-sf),-apple-system,system-ui,sans-serif;
  font-size:15px;letter-spacing:.02em;will-change:opacity;
}

/* phone: portrait box centered, holds the 3D canvas; opacity scrubbed in */
.cleo-hero__phone{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  z-index:2;opacity:0;
  width:clamp(240px,27vw,360px);aspect-ratio:9/19;
  will-change:opacity,transform;
}
.cleo-hero__phone-3d{position:absolute;inset:0;}
.cleo-hero__phone-3d canvas{width:100%!important;height:100%!important;display:block;}

/* Mobile */
@media (max-width:860px){
  .cleo-hero{height:200svh;}
  .cleo-hero__phone{width:clamp(190px,52vw,260px);}
  .cleo-hero__headline{font-size:clamp(1.7rem,7vw,2.6rem);white-space:normal;max-width:14ch;}
  .cleo-hero__navpill{display:none;} /* Cleo also drops the center pill on mobile */
}

/* Reduced-motion: no scrub, show the settled end state (landscape + phone) */
@media (prefers-reduced-motion:reduce){
  .cleo-hero{height:100svh;}
  .cleo-hero__storm{opacity:0;}
  .cleo-hero__landscape{opacity:1;}
  .cleo-hero__headline{opacity:0;}
  .cleo-hero__scroll{opacity:0;}
  .cleo-hero__phone{opacity:1;transform:translate(-50%,-50%) scale(1);}
}