/* 3D scenes (assets/js/scene3d.js): hero construction site + data-driven cost tower.
   Progressive enhancement: without WebGL / with reduced data the SVG timelapse and tables stay. */
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.scene3d-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .9s var(--ease-out,ease)}
.has-3d>.scene3d-canvas,.hero-scene.has-3d .scene3d-canvas{opacity:1}
.hero-scene.has-3d .timelapse-scene{opacity:0;transition:opacity .9s var(--ease-out,ease);pointer-events:none}
.hero-scene[data-scene3d]{cursor:grab}
.hero-scene.is-dragging{cursor:grabbing}
.hero-scene.has-3d::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 90px 10px rgba(12,12,11,.55)}

/* cost tower */
.cost3d{position:relative;min-height:340px;height:clamp(320px,42vw,440px);border-radius:16px;overflow:hidden;cursor:grab;touch-action:pan-y;
  background:radial-gradient(70% 60% at 50% 30%,rgba(198,151,79,.14),transparent 70%),linear-gradient(180deg,rgba(var(--ink-rgb),.03),rgba(0,0,0,.25));border:1px solid rgba(var(--ink-rgb),.09)}
.cost3d.is-dragging{cursor:grabbing}
.cost3d:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.cost3d .scene3d-canvas{opacity:1}
.cost3d-labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.cost3d-label{position:absolute;left:0;top:0;display:grid;gap:1px;padding:5px 10px;border-radius:10px;pointer-events:auto;cursor:pointer;white-space:nowrap;max-width:44%;
  background:rgba(20,19,18,.7);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(var(--ink-rgb),.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 6px 18px rgba(0,0,0,.35);
  transition:opacity .25s,background .2s,border-color .2s;will-change:transform}
.cost3d-label{border-inline-start:3px solid var(--c,#c6974f)}
.cost3d-label b{font-size:11.5px;font-weight:700;color:var(--text-strong);overflow:hidden;text-overflow:ellipsis}
.cost3d-label span{font-size:10.5px;color:#cfc9bf;font-variant-numeric:tabular-nums}
.cost3d-label.is-on{background:rgba(60,46,22,.86);border-color:rgba(198,151,79,.7)}
.cost3d-label.is-dim{opacity:.35}
.cost3d-hint{position:absolute;inset-inline-start:12px;bottom:10px;font-size:10.5px;color:var(--dark-muted,#a9a59d);letter-spacing:.02em;pointer-events:none}
.cost3d.is-lost::after{content:"3D";position:absolute;inset:0;display:grid;place-items:center;color:#777;font-size:14px}
@media (prefers-reduced-motion:reduce){.scene3d-canvas,.hero-scene.has-3d .timelapse-scene{transition:none}}
@media (max-width:700px){.cost3d-label{max-width:60%}.cost3d-label b{font-size:11px}}
.bl-tower-card[hidden],#c-towerPanel[hidden]{display:none}
.bl-tower-card .bl-hint{margin:8px 0 0}

/* ---- depth: perspective tilt + specular glare (js/depth.js) — only while hovered, so it never fights .reveal ---- */
.is-tilting,.is-tilting-out{transform:perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg))!important;transform-style:preserve-3d}
.is-tilting{transition:transform .08s linear,box-shadow .35s!important;will-change:transform;box-shadow:0 22px 50px -18px rgba(0,0,0,.55),0 0 0 1px rgba(var(--ink-rgb),.08)}
.is-tilting-out{transition:transform .45s cubic-bezier(.2,.7,.2,1)!important}
.is-tilting::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;background:radial-gradient(260px circle at var(--glare-x,50%) var(--glare-y,0%),rgba(var(--ink-rgb),.14),transparent 60%);mix-blend-mode:screen}
@media (prefers-reduced-motion:reduce),(hover:none){.is-tilting,.is-tilting-out{transform:none!important}.is-tilting::after{display:none}}

/* ---- HERO: the 3D site becomes the full-bleed background (class .hero-3d is added when WebGL is ready) ---- */
.hero.hero-3d .hero-bg{opacity:0}
.hero.hero-3d .hero-wordmark-bg{opacity:.7;z-index:1;pointer-events:none}
.hero.hero-3d .hero-scene-wrap{position:absolute;inset:0;z-index:0;max-width:none;width:auto;padding:0;border:0;border-radius:0;background:none;box-shadow:none;transform:none!important;opacity:1!important;-webkit-backdrop-filter:none;backdrop-filter:none}
.hero.hero-3d .hero-scene-wrap:before{display:none}
.hero.hero-3d .hero-scene{aspect-ratio:auto;width:100%;height:100%;border-radius:0;cursor:default}
.hero.hero-3d .hero-scene.has-3d::after{box-shadow:none}
.hero.hero-3d .hero-scene .timelapse-scene{display:none}
/* readability veil on the text side + a soft vignette; sea/sky stay vivid on the other side */
.hero.hero-3d .hero-overlay{z-index:1;background:
  linear-gradient(to left,rgba(8,9,20,.66) 0%,rgba(8,9,20,.4) 30%,rgba(8,9,20,0) 58%),
  linear-gradient(180deg,rgba(6,7,14,.34) 0%,rgba(6,7,14,0) 20%,rgba(6,7,14,0) 72%,rgba(6,7,14,.4) 100%)}
html[dir="ltr"] .hero.hero-3d .hero-overlay{background:
  linear-gradient(to right,rgba(8,9,20,.66) 0%,rgba(8,9,20,.4) 30%,rgba(8,9,20,0) 58%),
  linear-gradient(180deg,rgba(6,7,14,.34) 0%,rgba(6,7,14,0) 20%,rgba(6,7,14,0) 72%,rgba(6,7,14,.4) 100%)}
.hero.hero-3d .hero-inner{grid-template-columns:minmax(0,min(560px,100%))}
@media (min-width:1101px){.hero.hero-3d .hero-inner{padding-inline-end:0}}
/* the live-stage readout moves to a glass chip in the lower corner */
.hero.hero-3d .hero-scene-head{position:absolute;z-index:3;bottom:clamp(22px,4vh,44px);inset-inline-end:clamp(18px,4vw,56px);padding:8px 14px;border-radius:999px;
  background:var(--lg-sheen,linear-gradient(180deg,rgba(var(--ink-rgb),.12),transparent)),rgba(16,15,20,.5);-webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);
  border:1px solid rgba(var(--ink-rgb),.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 10px 30px rgba(0,0,0,.4)}
.hero.hero-3d .hero-scene-head .hero-coords{margin-inline-start:6px}
@media (max-width:1100px){
  /* small screens: the scene owns the upper part, the text sits below it on a darker veil */
  .hero.hero-3d .hero-inner{padding-top:min(54vh,440px)}
  .hero.hero-3d .hero-overlay{background:linear-gradient(180deg,rgba(8,9,20,.35) 0%,rgba(8,9,20,0) 26%,rgba(8,9,20,.55) 46%,rgba(8,9,20,.88) 62%,rgba(8,9,20,.92) 100%)}
  .hero.hero-3d .hero-scene-head{bottom:22px;padding:6px 10px;gap:8px}
  .hero.hero-3d .hero-scene-head .hero-coords{display:none}
}
@media (prefers-reduced-transparency:reduce){.hero.hero-3d .hero-scene-head{background:#15141a;-webkit-backdrop-filter:none;backdrop-filter:none}}

/* ---- hero logo moment (js/hero-intro.js): appears, then flies to the header logo ---- */
.hero-intro{position:fixed;inset:0;z-index:70;display:grid;place-items:center;pointer-events:none;opacity:0;
  background:radial-gradient(60% 55% at 50% 50%,rgba(20,14,26,.55),rgba(6,6,12,.86));-webkit-backdrop-filter:blur(10px) saturate(140%);backdrop-filter:blur(10px) saturate(140%)}
.hero-intro-box{display:grid;justify-items:center;gap:14px;transform:scale(.9);opacity:0}
.hero-intro-mark{position:relative;width:min(260px,52vw);aspect-ratio:1;display:grid;place-items:center}
.hero-intro-mark img{width:52%;height:auto;filter:drop-shadow(0 0 22px rgba(198,151,79,.55));transform-origin:center}
.hero-intro-rose{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hero-intro-rose path{fill:none;stroke:url(#introGold);stroke-width:1.1;stroke-linecap:round;stroke-dasharray:var(--len,3000);stroke-dashoffset:var(--len,3000);filter:drop-shadow(0 0 6px rgba(198,151,79,.6))}
.hero-intro-name{font-size:clamp(15px,2vw,20px);font-weight:700;letter-spacing:.04em;color:#f4e6cc;text-align:center;opacity:0;transform:translateY(8px)}
.hero-intro-line{width:54px;height:1px;background:linear-gradient(90deg,transparent,#c6974f,transparent);opacity:0}
.hero-intro.is-on{opacity:1;transition:opacity .6s ease}
.hero-intro.is-on .hero-intro-box{opacity:1;transform:scale(1);transition:opacity .7s ease,transform 1.1s cubic-bezier(.2,.7,.2,1)}
.hero-intro.is-on .hero-intro-rose path{stroke-dashoffset:0;transition:stroke-dashoffset 1.15s cubic-bezier(.45,0,.2,1) .1s}
.hero-intro.is-on .hero-intro-name{opacity:1;transform:none;transition:opacity .6s ease .55s,transform .6s ease .55s}
.hero-intro.is-on .hero-intro-line{opacity:1;transition:opacity .6s ease .5s}
/* flight: veil melts away, rose + name fade, the mark glides into the header slot */
.hero-intro.is-fly{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;transition:background .9s ease,backdrop-filter .9s ease,-webkit-backdrop-filter .9s ease,opacity .5s ease 1.4s;opacity:0}
.hero-intro.is-fly .hero-intro-rose,.hero-intro.is-fly .hero-intro-name,.hero-intro.is-fly .hero-intro-line{opacity:0!important;transition:opacity .45s ease!important}
.hero-intro.is-fly .hero-intro-mark img{transition:transform 1s cubic-bezier(.65,0,.2,1),filter .8s ease;filter:none}
.hero-intro.is-fly .hero-intro-box{opacity:1;transform:none}
.intro-hide-logo .site-header .logo-mark{opacity:0}
.site-header .logo-mark{transition:opacity .25s ease}
.site-header .logo-mark.logo-landed{animation:logoLand .8s ease-out}
@keyframes logoLand{0%{filter:drop-shadow(0 0 0 rgba(198,151,79,0))}35%{filter:drop-shadow(0 0 16px rgba(198,151,79,.85))}100%{filter:drop-shadow(0 0 0 rgba(198,151,79,0))}}
@media (prefers-reduced-motion:reduce){.hero-intro{display:none}.intro-hide-logo .site-header .logo-mark{opacity:1}}

/* layering with the scene re-parented to .hero: scene (0) < veil (1) < wordmark (1) < text (3) */
.hero.hero-3d .hero-inner{position:relative;z-index:2}
.hero.hero-3d .hero-copy-col{position:relative;z-index:3}
.hero.hero-3d>.hero-scene-wrap{z-index:0}

/* poster shown while the 3D scene loads (same golden-hour palette), so the hero is never blank or the old card */
.hero.hero-3d{background:linear-gradient(180deg,#0a1226 0,#1b2b50 20%,#3f5580 34%,#dcb984 42%,#f8e0ae 44%,#12495c 44.4%,#0a2a36 100%)}