/* ===========================================================================
   /solutions/clinical — built in the /xray dark idiom (navy + amber + neon),
   NOT a bespoke theme. Almost every section reuses global styles.css classes
   (.dark .section-pad .acc .demo .stat-cards .skia-app-frame .cta …). This
   sheet holds ONLY the one bespoke set-piece the page opens on: the Gates —
   two torch-lit doors that swing open to reveal the clinic behind them.
   Reuses global tokens: --navy #0a0e1f, --amber, --neon, --neon2, --f-caries…
   =========================================================================== */

.cl-gates {
  position: relative;
  /* pull the dark hero up behind the sticky nav so the dark reaches the very top
     — no light body strip abutting it. The frosted nav floats over the dark. */
  margin-top: -78px;
  padding-top: 78px;
  min-height: min(100svh, 940px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #05070f;
  isolation: isolate;
  --clg-amber: #f0a868;
  --clg-amber-2: #ffce9c;
  /* pointer-driven parallax offsets (-1..1), set by gate.js */
  --px: 0; --py: 0;
  perspective: 1700px;
}

/* ===========================================================================
   Cursor reactivity for the feature stages below the hero (scribe / planning /
   safety / lab). Marked [data-cl-tilt]; driven by stage-tilt.js. The stage tilts
   subtly toward the pointer and a soft light-glow tracks the cursor — the "lean
   into the specimen" feel that ties these sections back to the hero's motion.
   =========================================================================== */
[data-cl-tilt] { position: relative; will-change: transform; }
/* Tilt engages only AFTER the .ios reveal has landed (.in), and its specificity
   (0,3,0) intentionally beats `.ios.in { transform: none }` (0,2,0) so it wins
   the resting transform without disturbing the entrance animation. */
[data-cl-tilt].ios.in {
  transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .35s ease-out;
}
[data-cl-tilt]::after {
  content: "";
  position: absolute; inset: 0; z-index: 30;
  border-radius: inherit; pointer-events: none;
  background: radial-gradient(300px 300px at var(--mx, 50%) var(--my, 50%),
    rgba(120,160,230,.16), transparent 60%);
  opacity: 0; transition: opacity .35s ease;
}
[data-cl-tilt]:hover::after { opacity: 1; }
@media (hover: none), (prefers-reduced-motion: reduce), (max-width: 700px) {
  [data-cl-tilt].ios.in { transform: none; transition: none; }
  [data-cl-tilt]::after { display: none; }
}

/* ---------- the clinic revealed behind the doors ---------- */
.cl-scene { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.cl-scene-sky {
  position: absolute; inset: -4%;
  background:
    radial-gradient(90% 60% at 50% 8%, rgba(240,168,104,.20), transparent 55%),
    radial-gradient(70% 50% at 50% 42%, rgba(143,166,255,.18), transparent 62%),
    linear-gradient(180deg, #0a1024, #070b18 60%, #05070f);
  transform: translate3d(calc(var(--px) * -14px), calc(var(--py) * -9px), 0) scale(1.05);
  transition: transform .3s ease-out;
}
/* a receding operatory floor — perspective grid, like /xray */
.cl-scene-floor {
  position: absolute; left: -30%; right: -30%; bottom: -8%; height: 62%;
  background-image:
    linear-gradient(rgba(143,166,255,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143,166,255,.16) 1px, transparent 1px);
  background-size: 54px 54px;
  transform: perspective(680px) rotateX(74deg);
  transform-origin: bottom center;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 55%);
  mask-image: linear-gradient(180deg, transparent, #000 55%);
  opacity: .5;
}
/* warm light pouring out from deep in the clinic */
.cl-scene-light {
  position: absolute; left: 50%; top: 46%; width: 60%; height: 68%;
  transform: translate(-50%, -50%) translate3d(calc(var(--px) * -7px), calc(var(--py) * -5px), 0);
  background: radial-gradient(50% 50% at 50% 50%, rgba(255,206,156,.5), rgba(240,168,104,.14) 45%, transparent 72%);
  filter: blur(20px);
  opacity: 1; transition: opacity 1.6s ease .5s, transform .3s ease-out;
}
.cl-gates[data-armed] .cl-scene-light { opacity: 0; }

/* a slow light-sweep raking across the revealed clinic — the "scanner" pass */
.cl-scan {
  position: absolute; z-index: 1; top: 0; bottom: 0; left: -40%; width: 32%;
  background: linear-gradient(90deg, transparent, rgba(158,182,240,.10) 42%, rgba(216,230,255,.18) 50%, rgba(158,182,240,.10) 58%, transparent);
  filter: blur(7px); mix-blend-mode: screen;
  pointer-events: none; opacity: 0;
  animation: cl-sweep 7.5s linear infinite 1.2s;
}
@keyframes cl-sweep {
  0% { left: -40%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { left: 108%; opacity: 0; }
}
.cl-gates[data-armed] .cl-scan { opacity: 0 !important; animation-play-state: paused; }

/* light-burst blooming out from the seam the instant the doors part */
.cl-burst {
  position: absolute; z-index: 1; left: 50%; top: 50%; width: 46px; height: 116%;
  transform: translate(-50%, -50%) scaleX(.4);
  background: radial-gradient(50% 50% at 50% 50%, rgba(255,228,186,.9), rgba(255,196,140,.34) 40%, transparent 72%);
  filter: blur(11px); mix-blend-mode: screen;
  pointer-events: none; opacity: 0;
}
.cl-gates[data-cl-burst] .cl-burst { animation: cl-burst 1.15s cubic-bezier(.2,.75,.25,1); }
@keyframes cl-burst {
  0% { opacity: 0; transform: translate(-50%, -50%) scaleX(.4); }
  16% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scaleX(9); }
}

/* the "wonders" glinting inside — small living proof cards */
.cl-wonders {
  position: absolute; inset: 0;
  transform: translate3d(calc(var(--px) * 24px), calc(var(--py) * 16px), 0);
  transition: transform .3s ease-out;
}
.cl-wonder {
  position: absolute;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 13px;
  font: 500 12.5px/1 var(--font);
  color: #eaf0ff;
  background: rgba(12,18,38,.72);
  border: 1px solid rgba(143,166,255,.28);
  border-radius: 12px;
  backdrop-filter: blur(6px);
  box-shadow: 0 20px 50px -24px #000, 0 0 30px -10px rgba(143,166,255,.4);
  white-space: nowrap;
  opacity: .92; transform: none;
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1),
    border-color .3s ease, box-shadow .3s ease;
  /* gentle idle drift (uses `translate`, independent of the reveal `transform`) */
  animation: cl-float 7s ease-in-out infinite;
  pointer-events: auto;
}
.cl-wonder:hover {
  border-color: rgba(158,182,240,.62);
  box-shadow: 0 26px 60px -22px #000, 0 0 42px -6px rgba(158,182,240,.6);
}
@keyframes cl-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -6px; }
}
.cl-wonder .wd { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.cl-wonder b { color: #fff; font-weight: 600; }
.cl-gates[data-armed] .cl-wonder { opacity: 0; transform: translateY(12px) scale(.96); animation-play-state: paused; }
.cl-w1 { left: 4.5%; top: 20%; transition-delay: .7s; animation-duration: 7.5s; animation-delay: .2s; }
.cl-w2 { right: 4.5%; top: 17%; transition-delay: .95s; animation-duration: 8.5s; animation-delay: 1.1s; }
.cl-w3 { left: 5.5%; bottom: 17%; transition-delay: 1.15s; animation-duration: 6.5s; animation-delay: .6s; }
.cl-w4 { right: 5.5%; bottom: 14%; transition-delay: 1.35s; animation-duration: 9s; animation-delay: 1.6s; }
.cl-w5 { left: 4.5%; top: 46%; transition-delay: 1.5s; animation-duration: 7s; animation-delay: .9s; }
/* hide the two lower-inner wonders on smaller widths where they'd crowd copy */
@media (max-width: 1180px) { .cl-w5 { display: none; } }
@media (max-width: 980px) { .cl-w3, .cl-w4 { display: none; } }
.cl-wonder .wd.a { background: var(--f-caries); box-shadow: 0 0 10px var(--f-caries); }
.cl-wonder .wd.n { background: var(--neon); box-shadow: 0 0 10px var(--neon); }
.cl-wonder .wd.t { background: var(--neon2); box-shadow: 0 0 10px var(--neon2); }
.cl-wonder .wd.m { background: var(--mint); box-shadow: 0 0 10px var(--mint); }

/* ---------- the two doors ---------- */
.cl-doors { position: absolute; inset: 0; z-index: 2; transform-style: preserve-3d; pointer-events: none; }
/* bio-lab airlock vault leaves: deep brushed steel with tall vertical machined
   ribs (NOT a tiled grid) and a broad curved sheen sweeping in from the seam, so
   each leaf reads as one heavy domed vault door — they SLIDE apart like an
   airlock. --sheen-x marks the seam edge each leaf's highlight bends toward. */
.cl-door {
  position: absolute; top: 0; bottom: 0; width: 50.4%; overflow: hidden;
  --sheen-x: 100%;
  background:
    /* fine vertical brushed-metal grain */
    repeating-linear-gradient(90deg, rgba(255,255,255,.022) 0 1px, transparent 1px 4px),
    /* wide vertical machined ribs — vertical panelling, never floor-tile rows */
    repeating-linear-gradient(90deg,
      transparent 0 62px,
      rgba(0,0,0,.34) 62px 63px,
      rgba(255,255,255,.028) 63px 64px,
      transparent 64px 65px),
    /* soft outer-jamb shading */
    linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,0) 30%),
    /* cool steel body, gently domed top→bottom */
    linear-gradient(180deg, #2b3341 0%, #1e2532 50%, #12161f 100%);
  box-shadow: inset 0 0 130px rgba(0,0,0,.5);
  transition: transform 1.7s cubic-bezier(.76,0,.24,1);
}
/* broad specular sheen bending in from the seam edge — sells a curved vault
   face and kills any flat, tiled read */
.cl-door::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(150% 82% at var(--sheen-x) 40%,
      rgba(158,182,240,.20), rgba(158,182,240,.06) 32%, transparent 62%),
    /* faint diagonal brushed catch-light across the face */
    linear-gradient(112deg, transparent 40%, rgba(255,255,255,.035) 50%, transparent 60%);
  mix-blend-mode: screen;
}
/* bright accent light strip down the inner (seam) edge of each leaf */
.cl-door::after {
  content: "";
  position: absolute; top: 5%; bottom: 5%; width: 3px;
  background: linear-gradient(180deg, transparent, var(--clg-amber-2), var(--clg-amber), transparent);
  box-shadow: 0 0 18px 2px rgba(240,168,104,.6);
}
.cl-door-l { left: 0; border-right: 1px solid rgba(0,0,0,.6); --sheen-x: 100%; }
.cl-door-r { right: 0; border-left: 1px solid rgba(0,0,0,.6); --sheen-x: 0%; }
.cl-door-l::after { right: 0; }
.cl-door-r::after { left: 0; }

/* the split tooth emblem — one full circle centred on the seam, each leaf holds
   half via the door's overflow:hidden, so it tears apart as the doors slide */
.cl-emblem {
  position: absolute; top: 50%;
  width: clamp(150px, 21vw, 240px); aspect-ratio: 1;
  display: grid; place-items: center; pointer-events: none;
}
.cl-door-l .cl-emblem { right: 0; transform: translate(50%, -50%); }
.cl-door-r .cl-emblem { left: 0; transform: translate(-50%, -50%); }
/* airlock hatch ring — a lighter, brighter halo with concentric machined rings */
.cl-emblem::before {
  content: "";
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(255,222,186,.72);
  background: radial-gradient(circle, rgba(255,214,170,.16), transparent 68%);
  box-shadow:
    0 0 58px rgba(255,200,146,.42), inset 0 0 42px rgba(255,200,146,.22),
    0 0 0 9px rgba(255,214,170,.05), 0 0 0 10px rgba(255,214,170,.16),
    0 0 0 22px rgba(255,214,170,.04);
}
.cl-emblem svg { width: 48%; height: 48%; overflow: visible; }
.cl-emblem svg path {
  fill: none; stroke: #fff3de; stroke-width: 7;
  stroke-linejoin: round; stroke-linecap: round;
  filter: drop-shadow(0 0 15px rgba(255,204,152,.7));
}

/* closed by default (no-JS shows the clinic through — so open is the safe rest);
   gate.js arms them shut, then releases → the leaves slide apart */
.cl-gates[data-armed] .cl-door-l,
.cl-gates[data-armed] .cl-door-r { transform: translateX(0); }
/* while instant-armed, snap shut with no slide so the ONLY visible motion is
   the open; also freeze the copy/scene reveal so nothing pre-flashes */
.cl-gates[data-cl-instant] .cl-door,
.cl-gates[data-cl-instant] .cl-scene-light,
.cl-gates[data-cl-instant] .cl-wonder,
.cl-gates[data-cl-instant] .cl-gate-copy,
.cl-gates[data-cl-instant] .cl-gate-scroll,
.cl-gates[data-cl-instant] .cl-seam { transition: none !important; }
.cl-door-l { transform: translateX(-100%); }
.cl-door-r { transform: translateX(100%); }

/* seam light between the leaves while shut */
.cl-seam {
  position: absolute; z-index: 3; top: 0; bottom: 0; left: 50%; width: 3px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, var(--clg-amber-2), var(--clg-amber), transparent);
  box-shadow: 0 0 24px 4px rgba(240,168,104,.7);
  opacity: 0; transition: opacity .5s ease;
}
.cl-gates[data-armed] .cl-seam { opacity: 1; }

/* ---------- torches flanking the gate (wooden stick + amber flame) ---------- */
.cl-torch { position: absolute; z-index: 4; top: 20%; width: 14px; height: 46%; pointer-events: none; }
.cl-torch-l { left: 2.2%; }
.cl-torch-r { right: 2.2%; }
.cl-torch::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 8px; height: 74%; background: linear-gradient(180deg, #3a2a1a, #17110a); border-radius: 3px; }
.cl-flame {
  position: absolute; left: 50%; top: -6px; transform: translateX(-50%);
  width: 26px; height: 46px; border-radius: 50% 50% 46% 46% / 62% 62% 38% 38%;
  background: radial-gradient(circle at 50% 72%, #fff2d0 0 12%, var(--clg-amber-2) 26%, var(--clg-amber) 52%, rgba(240,120,60,.2) 78%, transparent 82%);
  filter: blur(.4px);
  box-shadow: 0 0 46px 14px rgba(240,168,104,.5);
  animation: cl-flicker 1.7s ease-in-out infinite;
  transform-origin: 50% 90%;
}
@keyframes cl-flicker {
  0%,100% { transform: translateX(-50%) scale(1) rotate(-1deg); opacity: 1; }
  25% { transform: translateX(-52%) scaleY(1.12) rotate(1.5deg); opacity: .92; }
  50% { transform: translateX(-49%) scaleY(.94) rotate(-1.5deg); opacity: 1; }
  75% { transform: translateX(-51%) scaleY(1.06) rotate(1deg); opacity: .95; }
}

/* ---------- the headline, over the opening ---------- */
.cl-gate-copy {
  position: relative; z-index: 5; text-align: center;
  max-width: 860px; padding-inline: var(--gut);
  opacity: 1; transform: none;
  transition: opacity 1s ease .9s, transform 1s cubic-bezier(.2,.8,.2,1) .9s;
}
.cl-gates[data-armed] .cl-gate-copy { opacity: 0; transform: translateY(18px); }
.cl-gate-copy .hero-badge { display: inline-flex; align-items: center; gap: 8px; }
.cl-gates .cl-gate-copy .display {
  margin: 20px 0 18px; color: #ffffff !important;
  text-shadow: 0 2px 40px rgba(5,7,15,.85), 0 1px 3px rgba(5,7,15,.6);
}
.cl-gates .cl-gate-copy .display em { color: var(--clg-amber-2); font-style: normal; }
.cl-gate-copy .lead { color: #d3d9f2; max-width: 60ch; margin-inline: auto; text-shadow: 0 1px 20px rgba(5,7,15,.8); }
/* a soft scrim so the headline reads over the revealed scene */
.cl-gate-copy::before {
  content: ""; position: absolute; z-index: -1; inset: -8% -12%;
  background: radial-gradient(60% 60% at 50% 50%, rgba(5,7,15,.72), transparent 72%);
  pointer-events: none;
}
.cl-gate-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }
.cl-gate-scroll {
  position: absolute; z-index: 5; left: 50%; bottom: 26px; transform: translateX(-50%);
  font: 600 11px var(--mono); letter-spacing: .18em; text-transform: uppercase; color: #8c93c0;
  display: inline-flex; flex-direction: column; align-items: center; gap: 7px;
  opacity: 1; transition: opacity .8s ease 1.6s;
}
.cl-gates[data-armed] .cl-gate-scroll { opacity: 0; }
.cl-gate-scroll i { width: 1px; height: 26px; background: linear-gradient(180deg, var(--clg-amber), transparent); animation: cl-scrollpulse 1.8s ease-in-out infinite; }
@keyframes cl-scrollpulse { 0%,100% { opacity: .3; transform: scaleY(.7); } 50% { opacity: 1; transform: scaleY(1); } }

@media (max-width: 700px) {
  .cl-torch { display: none; }
  .cl-emblem { width: clamp(120px, 34vw, 180px); }
  /* Phones: the gate reveal is JS-driven (data-armed / data-cl-instant), and
     that JS only checks prefers-reduced-motion, not viewport width — so force
     the finished "doors open / scene + copy visible" state here regardless of
     what attribute the script sets, matching the reduced-motion freeze below. */
  .cl-gates[data-armed] .cl-door-l { transform: translateX(-100%) !important; }
  .cl-gates[data-armed] .cl-door-r { transform: translateX(100%) !important; }
  .cl-gates[data-armed] .cl-scene-light,
  .cl-gates[data-armed] .cl-wonder,
  .cl-gates[data-armed] .cl-gate-copy,
  .cl-gates[data-armed] .cl-gate-scroll {
    opacity: 1 !important;
    transform: none !important;
    animation-play-state: running !important;
  }
}
@media (prefers-reduced-motion: reduce), (max-width: 700px) {
  .cl-door, .cl-gate-copy, .cl-wonder, .cl-scene-light, .cl-scene-sky, .cl-wonders { transition: none !important; }
  .cl-flame, .cl-wonder, .cl-scan, .cl-burst { animation: none !important; }
  .cl-scan, .cl-burst { display: none; }
  .cl-scene-sky, .cl-scene-light, .cl-wonders { transform: none !important; }
  .cl-door-l { transform: translateX(-100%); }
  .cl-door-r { transform: translateX(100%); }
}