/* ------------------------------------------------------------------
   depth.css — Phase 1 hero chrome + Phase 2 CSS-3D depth.
   Pure CSS transforms: zero download cost, degrades to flat under
   prefers-reduced-motion and on non-hover devices.
   ------------------------------------------------------------------ */

/* ===== Hero: Jovian sky + 3D stage + labels ===== */
/* Kemav-blue backdrop: deep navy overhead warming to teal-blue at the horizon */
.hero{
  background:
    radial-gradient(120% 70% at 60% 108%, rgba(31,125,143,0.55), rgba(31,125,143,0) 60%),
    linear-gradient(180deg, #0b1526 0%, #0f1c33 55%, #10283f 100%);
  isolation:isolate;
}
.hero .wrap{ z-index:2; }
.eco-sky{ position:absolute; inset:0; width:100%; height:100%; z-index:0; display:block; pointer-events:none; }
/* keeps the headline legible over the planet's limb */
.sky-shade{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, rgba(11,21,38,0.92) 0%, rgba(11,21,38,0.72) 28%, rgba(11,21,38,0.15) 52%, rgba(11,21,38,0) 66%);
}
@media (max-width:900px){
  .sky-shade{ background:linear-gradient(180deg, rgba(11,21,38,0.94) 0%, rgba(11,21,38,0.82) 42%, rgba(11,21,38,0.2) 60%, rgba(11,21,38,0) 72%); }
}

/* Static CSS sky for devices that don't get WebGL (or prefer reduced motion) */
.sky-fallback{ display:none; position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(238,241,248,.8) 50%, transparent 51%),
    radial-gradient(1px 1px at 28% 62%, rgba(238,241,248,.6) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 41% 30%, rgba(238,241,248,.9) 50%, transparent 51%),
    radial-gradient(1px 1px at 55% 12%, rgba(238,241,248,.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 67% 74%, rgba(238,241,248,.6) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 83% 22%, rgba(238,241,248,.85) 50%, transparent 51%),
    radial-gradient(1px 1px at 91% 58%, rgba(238,241,248,.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 20% 86%, rgba(238,241,248,.5) 50%, transparent 51%);
}
.hero[data-mode="2d"] .sky-fallback{ display:block; }
.sky-fallback .planet{
  position:absolute; right:-4%; top:-18%; width:min(52vw, 520px); aspect-ratio:1; border-radius:50%;
  background:
    radial-gradient(circle at 30% 28%, rgba(238,241,248,0.10), transparent 45%),
    radial-gradient(circle at 74% 72%, rgba(11,21,38,0.9), transparent 62%),
    repeating-linear-gradient(174deg, #0b1526 0 18px, #1e2e50 18px 34px, #2c3e63 34px 48px, #c3cbe0 48px 51px, #1f7d8f 51px 66px, #16233f 66px 84px, #5b6780 84px 96px, #1e2e50 96px 110px, #2fa8bd 110px 120px, #0f1c33 120px 140px, #e7ebf3 140px 143px, #2c3e63 143px 158px, #1f7d8f 158px 172px, #16233f 172px 192px, #425583 192px 204px, #0b1526 204px 224px);
  box-shadow:0 0 60px rgba(47,168,189,0.18), inset -50px -26px 110px rgba(11,21,38,0.92);
}
@media (max-width:900px){ .sky-fallback .planet{ right:-20%; top:auto; bottom:6%; width:min(80vw, 380px); } }
/* the moon we're standing on */
.sky-fallback::after{
  content:""; position:absolute; left:-15%; width:130%; height:60%; bottom:-50%; border-radius:50%;
  background:#0a1322; box-shadow:0 -24px 80px rgba(31,125,143,0.22);
}
.sky-fallback .moon{ position:absolute; border-radius:50%; background:radial-gradient(circle at 35% 35%, #c3cbe0, #5b6780 60%, #101a2e); }
.sky-fallback .m1{ width:14px; height:14px; left:58%; top:38%; }
.sky-fallback .m2{ width:9px;  height:9px;  left:74%; top:64%; }
.sky-fallback .m3{ width:22px; height:22px; left:36%; top:70%; }

.eco-stage{ position:relative; }
#eco-canvas{ width:100%; height:420px; display:block; touch-action:pan-y; }
.hero-sub #eco-canvas{ height:340px; }
@media (max-width:900px){ #eco-canvas, .hero-sub #eco-canvas{ height:320px; } }

/* sub-page hero bands (Store / Services / About) */
.hero-sub{ padding:64px 0 56px; }
.hero-sub h1{ font-size:clamp(28px,4vw,44px); }
.hero-sub .hero-stats{ margin-top:36px; }
@media (max-width:900px){ .hero-sub{ padding:48px 0 40px; } }

.eco-labels{ position:absolute; inset:0; z-index:3; pointer-events:none; overflow:hidden; }
.eco-label{
  position:absolute; left:0; top:0; will-change:transform;
  font-family:"IBM Plex Mono", monospace; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
  color:#eef1f8; white-space:nowrap; line-height:1;
  transition:opacity .25s ease, color .2s ease, background-color .2s ease;
}
.eco-label-inner{
  pointer-events:auto; cursor:pointer;
  margin-top:-26px;                        /* sits just above its node */
  padding:5px 8px; border:1px solid rgba(238,241,248,0.28); border-radius:2px;
  background:rgba(11,21,38,0.72); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  appearance:none; -webkit-appearance:none;
}
.eco-label-inner:hover, .eco-label-inner.is-hot, .eco-label-inner:focus-visible{
  color:#0b1526; background:var(--accent); border-color:var(--accent); outline:none;
}
.eco-label-inner:focus-visible{ box-shadow:0 0 0 3px rgba(47,168,189,0.45); }
.eco-label-outer{ margin-top:18px; font-size:10px; color:#c3cbe0; opacity:0; }
.eco-hint{
  position:absolute; right:6px; bottom:-18px;
  font-family:"IBM Plex Mono", monospace; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:#7986a3; opacity:.8;
}
@media (max-width:900px){ .eco-hint{ right:auto; left:50%; transform:translateX(-50%); } }

/* About: the three info cards in a row beneath the hero */
.info-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:820px){ .info-grid{ grid-template-columns:1fr; } }
.info-card.kv-target, .svc-card.kv-target, .plan.kv-target, .legal-note.kv-target, .section-head.kv-target{ border-radius:4px; }

/* The 2D fallback canvas has no labels; hide the hint when it's in use */
.hero[data-mode="2d"] .eco-hint{ display:none; }

/* Flash a section when a hero node sends you there */
@keyframes kv-target-flash{
  0%{ box-shadow:0 0 0 0 rgba(47,168,189,0.0); }
  20%{ box-shadow:0 0 0 4px rgba(47,168,189,0.55); }
  100%{ box-shadow:0 0 0 0 rgba(47,168,189,0.0); }
}
.kv-target{ animation:kv-target-flash 1.4s ease-out 1; }

/* ===== Phase 2: pillars — pointer-tracking tilt + layered depth ===== */
.pillars{ gap:16px; background:transparent; border:0; }
.pillar{
  --rx:0deg; --ry:0deg; --mx:50%; --my:50%;
  position:relative; border:1px solid var(--line); border-radius:4px;
  transform-style:preserve-3d;
  /* perspective lives on the card itself so its own centre is the vanishing point —
     text stays put at rest and only lifts while the card is being tilted */
  transform:perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry));
  transition:transform .25s ease-out, box-shadow .3s ease, border-color .3s ease;
  box-shadow:0 1px 0 rgba(16,26,46,0.02);
}
.pillar::after{                 /* specular sheen following the pointer */
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(220px circle at var(--mx) var(--my), rgba(47,168,189,0.16), transparent 60%);
  opacity:0; transition:opacity .3s ease;
}
.pillar .idx, .pillar h3, .pillar p{ transform:translateZ(0); transition:transform .3s ease; }
.pillar .idx{ display:inline-block; }
.pillar.is-tilting .idx{ transform:translateZ(30px); }
.pillar.is-tilting h3{ transform:translateZ(18px); }
.pillar.is-tilting p{ transform:translateZ(8px); }
@media (hover:hover) and (pointer:fine){
  .pillar.is-tilting{ box-shadow:0 24px 48px -24px rgba(16,26,46,0.35), 0 0 0 1px var(--accent); border-color:var(--accent); transition:box-shadow .3s ease, border-color .3s ease; }
  .pillar.is-tilting::after{ opacity:1; }
}
.pillar.kv-target{ border-color:var(--accent); }

/* ===== Phase 2: comparison — two faces of a slab that turns as it enters ===== */
.compare{ perspective:1400px; border:0; gap:0; transform-style:preserve-3d; }
.compare .col{
  border:1px solid var(--line); transform-style:preserve-3d;
  transition:transform .9s cubic-bezier(.2,.7,.2,1), opacity .9s ease;
}
.compare .col.trad{ transform-origin:100% 50%; transform:rotateY(-28deg) translateZ(-40px); opacity:.35; }
.compare .col.kemav{ transform-origin:0% 50%; transform:rotateY(28deg) translateZ(-40px); opacity:.35; border-color:var(--navy-600); }
.compare.in-view .col.trad{ transform:rotateY(0) translateZ(-18px); opacity:1; }
.compare.in-view .col.kemav{ transform:rotateY(0) translateZ(22px); opacity:1; box-shadow:0 30px 60px -30px rgba(11,21,38,0.6); }
@media (max-width:720px){
  .compare .col.trad, .compare .col.kemav{ transform-origin:50% 0; transform:rotateX(-18deg) translateZ(-30px); }
  .compare.in-view .col.trad{ transform:none; }
  .compare.in-view .col.kemav{ transform:translateZ(14px); }
}

/* ===== Phase 2: plans — staggered z-stack, focused plan comes forward ===== */
.plans{ perspective:1400px; transform-style:preserve-3d; }
.plan{
  --rx:0deg; --ry:0deg; --mx:50%; --my:50%; --z:0px;
  border-radius:4px; transform-style:preserve-3d;
  transform:rotateX(var(--rx)) rotateY(var(--ry)) translateZ(var(--z));
  transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
}
@media (min-width:881px){
  .plans .plan:nth-child(1){ --ry:7deg;  --z:-28px; transform-origin:100% 50%; }
  .plans .plan:nth-child(3){ --ry:-7deg; --z:-28px; transform-origin:0% 50%; }
  .plans .plan.featured{ --z:36px; box-shadow:0 34px 60px -28px rgba(11,21,38,0.45), 0 0 0 1px var(--accent); }
  @media (hover:hover) and (pointer:fine){
    .plans:hover .plan{ --z:-28px; }
    .plans .plan:hover{ --ry:0deg; --z:44px; box-shadow:0 40px 70px -28px rgba(11,21,38,0.5), 0 0 0 1px var(--accent); }
    .plans .plan:hover .badge{ transform:translateZ(1px); }
  }
}
/* the checkout button stays a plain, flat button — it never animates on its own */
.plan .btn{ transition:background-color .15s ease, color .15s ease; transform:none; }

/* ===== Phase 2: scroll-linked parallax (progressive enhancement) ===== */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    @keyframes kv-eyebrow-float{ from{ transform:translateY(14px); opacity:.2; } to{ transform:translateY(-6px); opacity:1; } }
    @keyframes kv-head-lift{ from{ transform:translateY(22px); } to{ transform:translateY(-10px); } }
    .section-head .eyebrow{ animation:kv-eyebrow-float linear both; animation-timeline:view(); animation-range:entry 0% entry 90%; }
    .section-head h2{ animation:kv-head-lift linear both; animation-timeline:view(); animation-range:entry 0% exit 100%; }
  }
}

/* ===== Reduced motion: everything flat and static ===== */
@media (prefers-reduced-motion: reduce){
  .pillar, .plan, .compare .col{ transform:none !important; transition:none !important; opacity:1 !important; }
  .pillar::after{ display:none; }
  .pillar .idx, .pillar h3, .pillar p{ transform:none; }
  .plans .plan.featured{ box-shadow:0 0 0 1px var(--accent); }
  .kv-target{ animation:none; }
  .section-head .eyebrow, .section-head h2{ animation:none; }
}

/* ===== Dark-mode touch-ups for the new surfaces ===== */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .pillar.is-tilting{ box-shadow:0 24px 48px -24px rgba(0,0,0,0.7), 0 0 0 1px var(--accent); }
  :root:not([data-theme="light"]) .plans .plan.featured{ box-shadow:0 34px 60px -28px rgba(0,0,0,0.7), 0 0 0 1px var(--accent); }
}

/* ===== Everything clickable: shared affordances ===== */
[data-go]{ cursor:pointer; }
[data-go]:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.pillar[data-go], .svc-card[data-go], .info-card[data-go]{ transition:transform .25s ease-out, box-shadow .3s ease, border-color .3s ease; }
.svc-card[data-go]:hover, .info-card[data-go]:hover{ border-color:var(--accent); box-shadow:0 18px 40px -24px rgba(16,26,46,0.35); transform:translateY(-2px); }
.info-grid .info-card + .info-card{ margin-top:0; }
.compare .col[data-go]{ cursor:pointer; }
.compare .col[data-go]:hover h4{ color:var(--accent); }
.hero-stats div[data-go]{ border-radius:3px; padding:4px 6px; margin:-4px -6px; transition:background-color .2s ease; }
.hero-stats div[data-go]:hover{ background:rgba(47,168,189,0.12); }
.hero-stats div[data-go]:hover .l{ color:#c3cbe0; }
.contact-list a.row{ color:inherit; text-decoration:none; }
.contact-list .row[data-go], .contact-list a.row{ transition:background-color .15s ease; }
.contact-list a.row:hover, .contact-list .row[data-go]:hover{ background:var(--accent-tint); }
.contact-list a.row:hover .v, .contact-list .row[data-go]:hover .v{ color:var(--accent-deep); }
.topic-tags button{
  font:inherit; font-size:12.5px; font-family:"IBM Plex Mono"; color:var(--slate);
  border:1px solid var(--line); background:var(--panel); padding:6px 12px; cursor:pointer;
  transition:border-color .15s ease, color .15s ease;
}
.topic-tags button:hover{ border-color:var(--accent); color:var(--accent-deep); }
.inline-link{
  font:inherit; color:var(--accent-deep); background:none; border:0; padding:0; cursor:pointer;
  text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(47,168,189,0.5);
}
.inline-link:hover{ text-decoration-color:currentColor; }
.faq-a a{ color:var(--accent-deep); }
.foot-links a{ text-decoration:none; }
.foot-links a:hover{ color:var(--accent); }

/* 3D scene labels: outer ring, moons and the planet are links too */
.eco-label.is-link{ pointer-events:auto; cursor:pointer; appearance:none; -webkit-appearance:none; }
.eco-label-outer{ opacity:.62; }
.eco-label-outer.is-link{ padding:3px 6px; border:1px solid transparent; border-radius:2px; background:rgba(11,21,38,0.55); }
.eco-label-outer.is-link:hover, .eco-label-outer.is-hot, .eco-label-outer:focus-visible{ color:#0b1526; background:var(--accent); border-color:var(--accent); outline:none; opacity:1 !important; }
.eco-label-moon{
  margin-top:22px; font-size:10.5px; padding:3px 7px; border-radius:2px;
  color:#c3cbe0; background:rgba(11,21,38,0.6); border:1px solid rgba(195,203,224,0.25);
}
.eco-label-moon.is-hot, .eco-label-moon:hover, .eco-label-moon:focus-visible{ color:#0b1526; background:#c3cbe0; border-color:#c3cbe0; outline:none; }
.eco-label-planet{
  font-size:11.5px; padding:7px 12px; border-radius:2px; opacity:.85;
  color:#eef1f8; background:rgba(11,21,38,0.62); border:1px solid rgba(47,168,189,0.55); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
.eco-label-planet::before{ content:"◉  "; color:var(--accent); }
.eco-label-planet.is-hot, .eco-label-planet:hover, .eco-label-planet:focus-visible{ color:#0b1526; background:var(--accent); border-color:var(--accent); outline:none; opacity:1; }
.eco-label-planet.is-hot::before, .eco-label-planet:hover::before{ color:#0b1526; }
@media (prefers-reduced-motion: reduce){
  .svc-card[data-go]:hover, .info-card[data-go]:hover{ transform:none; }
}
.eco-chips{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:-8px; }
.eco-chips button{
  font-family:"IBM Plex Mono", monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:#eef1f8; background:rgba(11,21,38,0.72); border:1px solid rgba(238,241,248,0.28); border-radius:2px; padding:6px 10px; cursor:pointer;
}
.eco-chips button:hover, .eco-chips button:focus-visible{ color:#0b1526; background:var(--accent); border-color:var(--accent); outline:none; }