/* Detox AI — "Inside the shield" exploded-view teardown.
   A scroll-scrubbed phone: upright -> isometric tilt -> layers float apart.
   Driven by js/teardown.js, which sets --tilt / --ex / --hd on .teardown. */

.teardown {
  --tilt: 0;
  --ex: 0;
  --hd: 1;
  --u: clamp(7px, min(1vw, 1.45vh), 15px);
  position: relative;
  height: 340vh;
  background:
    radial-gradient(ellipse 60% 50% at 50% 55%, rgba(47, 212, 198, 0.09), transparent 70%),
    linear-gradient(180deg, var(--ink900), var(--ink950) 18%, var(--ink950) 82%, var(--ink900));
}

.td-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  min-height: 600px;
  overflow: hidden;
}

/* blueprint grid that sharpens as the object comes apart */
.td-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(159, 176, 201, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(159, 176, 201, 0.07) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 62% at 50% 56%, #000 20%, transparent 78%);
  mask-image: radial-gradient(ellipse 70% 62% at 50% 56%, #000 20%, transparent 78%);
  opacity: calc(0.25 + var(--ex) * 0.75);
  pointer-events: none;
}

/* ---------- headline ---------- */
.td-head {
  position: absolute;
  z-index: 3;
  left: max(1.25rem, calc((100vw - var(--max-w)) / 2));
  top: calc(var(--nav-h) + 4vh);
  max-width: min(560px, 88vw);
  opacity: calc(0.12 + var(--hd) * 0.88);
  transform: translateY(calc((1 - var(--hd)) * -26px));
  will-change: transform, opacity;
}

.td-title {
  margin: 0.35rem 0 0.8rem;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(2.6rem, 5.8vw, 5.2rem);
  line-height: 0.96;
  letter-spacing: -0.035em;
  color: var(--mist50);
}

.td-title em {
  font-style: normal;
  background: linear-gradient(135deg, #fff 10%, var(--teal) 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.td-sub {
  margin: 0;
  max-width: 34ch;
  color: var(--mist300);
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
}

/* ---------- the object ---------- */
.td-stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding-top: var(--nav-h);
  padding-right: 12vw;
  pointer-events: none;
}

.td-scene {
  position: relative;
  width: calc(var(--u) * 22);
  height: calc(var(--u) * 44);
  perspective: calc(var(--u) * 130);
  perspective-origin: 50% 40%;
  /* starts to the right of the headline, drifts to centre as it comes apart */
  transform: translateX(calc(var(--hd) * 9vw));
}

.td-device {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform:
    translateY(calc(var(--ex) * var(--u) * 2.5))
    rotateX(calc(var(--tilt) * 58deg))
    rotateZ(calc(var(--tilt) * -32deg))
    scale(calc(1 - var(--ex) * 0.04));
  will-change: transform;
}

.td-layer {
  --c: var(--teal);
  position: absolute;
  inset: 0;
  color: var(--c);
  border-radius: calc(var(--u) * 3.6);
  border: 1px solid rgba(47, 212, 198, 0.4);
  border: 1px solid color-mix(in srgb, var(--c) 55%, transparent);
  background: linear-gradient(160deg, rgba(20, 38, 60, 0.74), rgba(10, 20, 36, 0.82));
  box-shadow:
    inset 0 0 calc(var(--u) * 2.2) color-mix(in srgb, var(--c) 14%, transparent),
    0 0 calc(var(--u) * 1.4) color-mix(in srgb, var(--c) 10%, transparent);
  transform: translateZ(calc(var(--i) * var(--u) * 0.35 + var(--ex) * var(--i) * var(--u) * 4.4));
  transition: border-color 0.35s var(--ease-soft), box-shadow 0.35s var(--ease-soft);
  backface-visibility: visible;
}

.td-layer.is-on {
  border-color: var(--c);
  box-shadow:
    inset 0 0 calc(var(--u) * 3.4) color-mix(in srgb, var(--c) 34%, transparent),
    0 0 calc(var(--u) * 3.2) color-mix(in srgb, var(--c) 42%, transparent);
}

.td-art {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  font-family: var(--font-body);
}

.td-art .tag {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 8px;
  letter-spacing: 0.08em;
  fill: currentColor;
}

/* per-layer identity */
.td-l0 { --c: var(--mist300); background: linear-gradient(160deg, #182740, #0a1019); }
.td-l1 { --c: var(--teal); }
.td-l2 { --c: var(--emerald); }
.td-l3 { --c: var(--amber); }
.td-l4 { --c: #8fb4ff; }

/* the glass starts opaque (looks like a phone) and clears as it lifts */
.td-l5 {
  --c: var(--mist50);
  background: linear-gradient(
    160deg,
    rgba(16, 31, 51, calc(0.97 - var(--ex) * 0.5)),
    rgba(8, 15, 27, calc(0.97 - var(--ex) * 0.56))
  );
}

.td-scan { animation: td-scan 2.8s ease-in-out infinite alternate; }
.td-ring { transform-origin: 50px 100px; animation: td-spin 18s linear infinite; }

@keyframes td-scan {
  from { transform: translateY(-22px); opacity: 0.2; }
  to { transform: translateY(22px); opacity: 0.95; }
}

@keyframes td-spin {
  to { transform: rotate(360deg); }
}

/* soft contact shadow on the "floor" */
.td-floor {
  position: absolute;
  left: 50%;
  bottom: -9%;
  width: calc(var(--u) * 30);
  height: calc(var(--u) * 7);
  transform: translateX(-50%) scale(calc(0.55 + var(--ex) * 0.45));
  background: radial-gradient(ellipse at center, rgba(47, 212, 198, 0.28), transparent 68%);
  opacity: calc(var(--ex) * 0.9);
  filter: blur(6px);
}

/* ---------- labels ---------- */
.td-labels {
  position: absolute;
  z-index: 3;
  right: max(1.25rem, calc((100vw - var(--max-w)) / 2));
  top: calc(50% + var(--nav-h) / 2);
  transform: translateY(-50%);
  width: min(300px, 30vw);
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.7rem;
}

.td-label {
  --c: var(--teal);
  --lp: 0;
  position: relative;
  padding: 0.15rem 0 0.15rem 1rem;
  border-left: 2px solid rgba(159, 176, 201, 0.35);
  border-left: 2px solid color-mix(in srgb, var(--c) 35%, transparent);
  opacity: calc(var(--lp) * 0.5);
  transform: translateX(calc((1 - var(--lp)) * 26px));
  transition: border-color 0.3s var(--ease-soft), opacity 0.3s var(--ease-soft);
}

.td-label.is-on {
  border-left-color: var(--c);
  opacity: calc(var(--lp));
}

.td-label b {
  display: block;
  font-family: var(--font-head);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--mist50);
}

.td-label b i {
  font-style: normal;
  margin-right: 0.55rem;
  color: var(--c);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
}

.td-label span {
  display: block;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--mist300);
}

.td-label[data-i="0"] { --c: var(--mist300); }
.td-label[data-i="1"] { --c: var(--teal); }
.td-label[data-i="2"] { --c: var(--emerald); }
.td-label[data-i="3"] { --c: var(--amber); }
.td-label[data-i="4"] { --c: #8fb4ff; }
.td-label[data-i="5"] { --c: var(--mist50); }

/* ---------- HUD readout ---------- */
.td-hud {
  position: absolute;
  z-index: 3;
  left: max(1.25rem, calc((100vw - var(--max-w)) / 2));
  bottom: 4.5vh;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font: 600 0.72rem/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mist300);
}

.td-hud-bar {
  width: clamp(90px, 14vw, 180px);
  height: 2px;
  background: rgba(159, 176, 201, 0.2);
  overflow: hidden;
}

.td-hud-bar i {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--teal-deep), var(--teal));
  transform-origin: 0 50%;
  transform: scaleX(0);
}

.td-hud b { color: var(--teal); font-weight: 600; min-width: 3ch; display: inline-block; text-align: right; }

/* ---------- phones & narrow screens ---------- */
@media (max-width: 900px) {
  .teardown { --u: clamp(6px, min(2.05vw, 1.02vh), 12px); height: 300vh; }
  .td-stage { padding-right: 0; padding-top: var(--nav-h); padding-bottom: 24vh; }
  /* starts below the headline, rises to centre as the headline clears */
  .td-scene { transform: translateY(calc(var(--hd) * 15vh)); }
  .td-head { top: calc(var(--nav-h) + 2.2vh); opacity: var(--hd); }
  .td-title { font-size: clamp(2.4rem, 12vw, 3.6rem); }
  .td-sub { font-size: 0.9rem; }

  /* one label at a time, docked under the object */
  .td-labels {
    left: 1.25rem;
    right: 1.25rem;
    top: auto;
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    width: auto;
    transform: none;
    display: block;
    min-height: 5.2rem;
  }
  .td-label {
    position: absolute;
    inset: auto 0 0 0;
    opacity: 0;
    transform: translateY(10px);
    background: rgba(10, 16, 25, 0.78);
    border: 1px solid rgba(159, 176, 201, 0.3);
    border: 1px solid color-mix(in srgb, var(--c) 40%, transparent);
    border-left-width: 3px;
    border-radius: 12px;
    padding: 0.7rem 0.95rem;
  }
  .td-label.is-on { opacity: 1; transform: none; border-left-color: var(--c); }
  /* the cards share one spot: the outgoing one clears first (0.14 s), then the next arrives, so two cards
     are never seen stacked mid-crossfade */
  .td-label { transition: opacity 0.14s linear, transform 0.14s linear, border-color 0.14s linear; }
  .td-label.is-on { transition: opacity 0.3s var(--ease-soft) 0.14s, transform 0.3s var(--ease-soft) 0.14s, border-color 0.3s var(--ease-soft) 0.14s; }
  .td-hud { display: none; }
}

@media (max-height: 640px) and (min-width: 901px) {
  .td-title { font-size: clamp(2.2rem, 5vw, 3.6rem); }
}
/* phone in landscape: a pin taller than the screen pushes the docked label off the bottom */
@media (max-height: 600px) {
  .td-pin { min-height: 0; }
}
/* ...and the docked label moves into the empty left margin instead of covering the object */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
  .td-labels { right: auto; width: min(250px, 30vw); bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- WebGL mode (js/gl/gl.js adds .gl-on) ---------- */
/* height switches as soon as WebGL is detected (html.has-gl), not when the scene boots, so nothing below jumps */
html.has-gl .teardown,
.teardown.gl-on { height: 440vh; }
.td-gl { position: absolute; inset: 0; z-index: 0; }
.teardown.gl-on .td-stage { display: none; }
.teardown.gl-on .td-grid { z-index: 1; opacity: 0.35; }
/* the headline fades out completely once the 3D object takes over: a 12% ghost of it showed through the
   exploded phone on desktops */
.teardown.gl-on .td-head { z-index: 3; opacity: var(--hd); }

.td-lines {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.td-callout { transition: opacity 0.35s var(--ease-soft); }
.td-callout path { fill: none; stroke: var(--c, var(--teal)); stroke-width: 1.2; stroke-opacity: 0.85; }
.td-callout circle { fill: var(--c, var(--teal)); }
.td-callout .td-ring-dot {
  fill: none;
  stroke: var(--c, var(--teal));
  stroke-width: 1.2;
  transform-box: fill-box;
  transform-origin: center;
  animation: td-ping 1.8s var(--ease-out) infinite;
}

@keyframes td-ping {
  0% { transform: scale(0.5); opacity: 0.9; }
  100% { transform: scale(2.2); opacity: 0; }
}

@media (min-width: 901px) {
  .teardown.gl-on .td-labels {
    inset: 0;
    top: 0;
    right: 0;
    width: auto;
    transform: none;
    display: block;
    pointer-events: none;
  }
  .teardown.gl-on .td-label {
    position: absolute;
    left: 0;
    top: 0;
    width: 300px;
    padding: 0.55rem 0.8rem 0.6rem 1rem;
    border-radius: 0 12px 12px 0;
    opacity: calc(var(--lbl, 0) * 0.42);
    transition: opacity 0.35s var(--ease-soft), background 0.35s var(--ease-soft), border-color 0.35s var(--ease-soft);
    will-change: transform;
  }
  /* only the highlighted part explains itself; the rest stay a compact column of titles */
  .teardown.gl-on .td-label span {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    /* height is driven per frame by teardown.js (inline max-height), in step with the stacking */
    transition: opacity 0.12s linear;
  }
  .teardown.gl-on .td-label.is-on span {
    opacity: 1;
    transition: opacity 0.35s var(--ease-soft) 0.08s;
  }
  .teardown.gl-on .td-label.is-on {
    opacity: var(--lbl, 0);
    background: linear-gradient(90deg, color-mix(in srgb, var(--c) 14%, transparent), rgba(10, 16, 25, 0.55));
  }
}

@media (max-width: 900px) {
  html.has-gl .teardown,
  .teardown.gl-on { height: 400vh; }
  .teardown.gl-on .td-label.is-on { opacity: var(--lbl, 0); }
}

/* ---------- reduced motion / no-JS: show the exploded object, no pinning ---------- */
@media (prefers-reduced-motion: reduce) {
  .teardown { height: auto; }
  .td-pin { position: relative; height: auto; min-height: 0; padding: calc(var(--nav-h) + 2rem) 0 3rem; }
  .td-head, .td-stage, .td-labels, .td-hud { position: relative; inset: auto; left: auto; right: auto; top: auto; bottom: auto; transform: none; }
  .td-head { margin: 0 auto 2rem; padding: 0 1.25rem; max-width: var(--max-w); opacity: 1; }
  .td-stage { padding: 0 0 4rem; min-height: calc(var(--u) * 52); }
  .td-scene { transform: none; }
  .td-labels { margin: 0 auto; padding: 0 1.25rem; width: auto; max-width: 560px; display: grid; min-height: 0; }
  .td-label { position: relative; opacity: 1 !important; transform: none !important; inset: auto; background: none; border: 0; border-left: 2px solid var(--c); border-radius: 0; padding: 0.15rem 0 0.15rem 1rem; }
  .td-hud { display: none; }
  .td-scan, .td-ring { animation: none; }
}