/* ==========================================================================
   EDIO — SmartClone page hero: the homepage hero from the edio-preview site (approved 2026-09-30), with
   "SmartClone" as its headline. The real SmartClone model on a white stage; scrolling pins the stage while the
   camera looks down at the faceplate, the parts are named, the display's read becomes a repair case and the case
   becomes one tile in a dataset. Ported from home.css; .device* is .hd* here, .tile is .hd-tile.
   ========================================================================== */
.hero {
  --void: #FFFFFF; --stage: #F4F7F8; --ink-hi: #0E1A20;
  --hs: 0;                  /* part callouts, driven by scroll */
  --hs-keep: 0;             /* the display callout stays lit while its read becomes a case */
}
.hero-title, .cap h2 { font-family: var(--font-display); font-weight: 500; font-stretch: 100%; letter-spacing: -.045em; text-wrap: balance; }

/* ==========================================================================
   HERO (pinned stage)
   ========================================================================== */
.hero {
  position: relative;
  height: 100vh; height: 100svh; min-height: 680px;
  overflow: hidden; isolation: isolate;
  background: var(--void);
}

.stage { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.stage i { position: absolute; inset: 0; display: block; }
.stage-light {
  background:
    radial-gradient(30% 30% at 50% 58%, rgba(11, 127, 145, .04), rgba(11, 127, 145, 0) 70%),
    radial-gradient(55% 55% at 50% 48%, rgba(242, 244, 245, .55), rgba(255, 255, 255, 0) 75%),
    radial-gradient(40% 50% at 12% 20%, rgba(242, 244, 245, .35), rgba(255, 255, 255, 0) 70%);
}
.stage-floor {
  top: 58%;
  background:
    radial-gradient(34% 55% at 50% 14%, rgba(11, 127, 145, .056), rgba(14, 26, 32, 0) 70%),
    linear-gradient(180deg, rgba(242, 244, 245, 0) 0, rgba(242, 244, 245, .8) 22%, var(--void) 100%);
}
.stage::before, .stage::after {
  content: ""; position: absolute; pointer-events: none; border-radius: 50%; filter: blur(60px);
}
.stage::before {
  width: 70vw; height: 70vw; left: -22vw; top: -34vw;
  background: radial-gradient(closest-side, rgba(11, 127, 145, .05), rgba(11, 127, 145, 0));
  animation: drift-a 26s ease-in-out infinite alternate;
}
.stage::after {
  width: 64vw; height: 64vw; right: -20vw; bottom: -30vw;
  background: radial-gradient(closest-side, rgba(11, 127, 145, .045), rgba(11, 127, 145, 0));
  animation: drift-b 32s ease-in-out infinite alternate;
}
@keyframes drift-a { to { transform: translate(8vw, 6vw); } }
@keyframes drift-b { to { transform: translate(-7vw, -5vw); } }
/* soft cyan wash behind the headline, and a thin light line where the floor meets the wall */
.stage-halo { background: radial-gradient(46% 30% at 50% 36%, rgba(11, 127, 145, .03), rgba(11, 127, 145, 0) 70%); }
.stage-horizon {
  top: 64%; bottom: auto !important; height: 1px;
  background: linear-gradient(90deg, rgba(11, 127, 145, 0), rgba(11, 127, 145, .272) 50%, rgba(11, 127, 145, 0));
  box-shadow: 0 0 30px 3px rgba(11, 127, 145, .144);
}
.stage-vignette { background: radial-gradient(120% 90% at 50% 45%, rgba(255, 255, 255, 0) 55%, rgba(14, 26, 32, .083) 100%); }
.stage-grain {
  opacity: .09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.boot {
  position: absolute; left: 50%; top: 50%; z-index: 6; transform: translate(-50%, -50%);
  display: flex; gap: 18px; white-space: nowrap; pointer-events: none;
  font: 500 10.5px/1 var(--font-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--text-mute);
  opacity: 0;
}
.boot span:last-child { color: var(--cyan); }

.hero-inner { position: relative; z-index: 2; height: 100%; }

.hero-title {
  position: relative; z-index: 1;
  padding-top: var(--title-pad, calc(var(--header-h) + clamp(40px, 8vh, 96px)));
  font-size: clamp(72px, 14vw, 240px); line-height: .9;
  color: var(--ink-hi); text-align: center;
}
.ht-line { display: block; }
/* the line above the product name; its size is set in sc-hero.js so it spans the name exactly */
.ht-kicker { display: block; width: max-content; margin: 0 auto .14em; font-size: .3em; line-height: 1; letter-spacing: -.02em; white-space: nowrap; color: var(--ink-hi); }
/* typewriter cursor: a thin cyan bar after the letter being typed */
.hero-title .ch { position: relative; }
.hero-title .ch.is-caret::after {
  content: ""; position: absolute; left: 100%; top: .12em; bottom: .02em; width: .06em; margin-left: .04em;
  background: var(--cyan); box-shadow: 0 0 12px rgba(11, 127, 145, .48);
}
.hero-title.is-typed .ch.is-caret::after { animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.ht-a, .ht-b { display: inline; }

/* the object sits in front of the headline's second line, like a product on a plinth */
.hd {
  position: absolute; z-index: 2; left: 50%; top: var(--dev-top, 15%);
  width: var(--dev-w, min(66vw, 1080px)); aspect-ratio: 16 / 9; transform: translateX(-50%);
  pointer-events: none;
}
.hd-rig { position: absolute; inset: 0; }
.hero:not(.is-placed) .hd { visibility: hidden; }
.scan {
  position: absolute; left: 0; top: 24%; bottom: 20%; width: 1px; z-index: 3; opacity: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(11, 127, 145, .76) 20%, rgba(11, 127, 145, .76) 80%, transparent);
  box-shadow: 0 0 14px rgba(11, 127, 145, .36);
}
.hs.is-hit { opacity: 1; transition-duration: .15s; }
.hd-model {
  width: 100%; height: 100%; display: block;
  background: transparent; --poster-color: transparent; --progress-bar-height: 0;
  pointer-events: none;
  /* tone the product into the stage: less yellow shout, cooler shadows */
  filter: saturate(.86);
}
/* cold rim light that sits behind the device */
.hd::before {
  content: ""; position: absolute; left: 18%; right: 18%; top: 30%; bottom: 22%; z-index: -1;
  background: radial-gradient(closest-side, rgba(11, 127, 145, .128), rgba(11, 127, 145, 0));
  filter: blur(18px);
}

/* part callouts (model-viewer hotspots) — 0×0 anchors, content hangs off them */
.hs { position: relative; width: 0; height: 0; pointer-events: none; opacity: var(--hs); transition: opacity .3s ease; }
.hs--keep { opacity: max(var(--hs), var(--hs-keep)); }
.hs > i {
  position: absolute; left: -4px; top: -4px; width: 8px; height: 8px;
  background: var(--cyan-2); box-shadow: 0 0 0 3px rgba(255, 255, 255, .7), 0 0 0 4px rgba(11, 127, 145, .4);
}
.hs > span {
  position: absolute; left: 16px; top: -12px; display: flex; gap: 8px; white-space: nowrap;
  padding: 6px 9px; background: rgba(255, 255, 255, .86); border-left: 1px solid var(--cyan);
  font: 500 10px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: #1B2C33;
}
.hs b { font-weight: 500; color: var(--cyan-2); }
.hs--l > span { left: auto; right: 16px; border-left: 0; border-right: 1px solid var(--cyan); }
.hs--up > span { left: -10px; top: -42px; }
.hs--down > span { left: -10px; top: 18px; }
.hs--up.hs--l > span { left: auto; right: -10px; }
.hs[data-visible="false"] { opacity: 0 !important; }

@keyframes nudge { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(4px); } }

/* ---------- story overlays ---------- */
.story { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.leader { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.leader path { fill: none; stroke: var(--cyan); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; }

.case {
  position: absolute; left: 60%; top: calc(var(--header-h) + 72px);
  width: min(400px, 30vw);
  padding: 18px 20px 6px;
  background: rgba(255, 255, 255, .9); border: 1px solid var(--line-strong);
  transform-origin: 0 0; opacity: 0;
}
.case::before, .case::after { content: ""; position: absolute; width: 10px; height: 10px; border: 0 solid var(--cyan); }
.case::before { left: -1px; top: -1px; border-width: 1px 0 0 1px; }
.case::after { right: -1px; bottom: -1px; border-width: 0 1px 1px 0; }
.case-head {
  display: flex; justify-content: space-between; padding-bottom: 14px;
  font: 500 10px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--text-mute);
}
.case-state { color: var(--cyan); }
.case-row { display: grid; grid-template-columns: 92px 1fr; gap: 12px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--line); }
.case-row dt { font: 500 10px/1.3 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); }
.case-row dd { font: 500 15px/1.3 var(--font-display); color: var(--ink-hi); }

.dataset {
  position: absolute; left: 60%; top: calc(var(--header-h) + 72px);
  width: min(540px, 33vw);
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px;
}
.hd-tile { aspect-ratio: 1.18; position: relative; border: 1px solid rgba(11, 127, 145, .128); background: rgba(242, 244, 245, .7); opacity: 0; }
.hd-tile::before, .hd-tile::after { content: ""; position: absolute; left: 14%; height: 2px; background: rgba(11, 127, 145, .176); }
.hd-tile::before { top: 30%; width: 58%; }
.hd-tile::after { top: 52%; width: 38%; }
.hd-tile.is-hot { border-color: rgba(11, 127, 145, .56); background: rgba(11, 127, 145, .112); }
.hd-tile.is-hot::before, .hd-tile.is-hot::after { background: var(--cyan-2); }

.captions { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.cap { position: absolute; left: var(--pad); bottom: 112px; width: min(460px, 38%); opacity: 0; }
.cap h2 { margin: 18px 0 16px; font-size: clamp(30px, 3.1vw, 50px); line-height: 1; color: var(--ink-hi); }
.cap p:not(.kicker) { font-size: 16px; line-height: 1.55; color: var(--text-dim); max-width: 40ch; }
/* step 3 answers steps 1–2 from the right; its dataset grid moves to the left */
.cap--r { left: auto; right: var(--pad); text-align: right; }
.cap--r .kicker { justify-content: flex-end; }
.cap--r p:not(.kicker) { margin-left: auto; }
.cap .fine { margin-top: 18px; font: 400 10.5px var(--font-mono) !important; letter-spacing: .12em; text-transform: uppercase; color: var(--text-mute) !important; }
.steps {
  position: absolute; right: var(--pad); bottom: 30px; display: flex; gap: 28px; opacity: 0;
  font: 500 10.5px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--text-mute);
}
.steps li { display: flex; gap: 8px; opacity: .45; transition: opacity .4s ease, color .4s ease; }
.steps li span { color: var(--cyan); }
.steps li.is-on { opacity: 1; color: var(--fg); }

/* ---------- intro initial states (only while the intro runs) ---------- */
.is-intro .hd,
.is-intro .stage-light,
.is-intro .stage-floor { opacity: 0; }
.is-intro .hero-title { visibility: hidden; }
.is-intro .boot { opacity: 1; transition: opacity .4s ease .2s; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1199px) {
  .hd { width: var(--dev-w, min(80vw, 900px)); }
  .case, .dataset { left: 54%; }
  .case { width: min(360px, 40vw); }
  .dataset { width: calc(46vw - var(--pad)); gap: 6px; }
  .cap { width: min(420px, 46%); }
  .steps li:not(.is-on) { display: none; }


}

@media (max-width: 767px) {
  .hero { min-height: 600px; }
  .hero-title { font-size: clamp(44px, 13.6vw, 72px); line-height: .88; text-align: left; letter-spacing: -.05em; }
  .ht-kicker { margin-left: 0; }
  .ht-a, .ht-b { display: block; }
  .ht-a, .ht-b { white-space: nowrap; }
  .hd { width: var(--dev-w, 150vw); top: var(--dev-top, 30%); }
  .hs, .scan, .leader { display: none !important; }   /* phones: no marks on the device itself */
  .case-row:first-child { display: none; }             /* the case card stays compact on phones */
  .hs > span { font-size: 9px; padding: 5px 7px; }

  .cap { left: var(--pad); right: var(--pad); width: auto; bottom: 64px; }
  .cap--r { text-align: left; }
  .cap--r .kicker { justify-content: flex-start; }
  .cap--r p:not(.kicker) { margin-left: 0; }
  .cap h2 { font-size: 30px; margin: 14px 0 12px; }
  .cap p:not(.kicker) { font-size: 15px; }
  .steps { left: var(--pad); right: auto; bottom: 26px; }
  .case { left: var(--pad); right: var(--pad); width: auto; top: calc(var(--header-h) + 24px); padding: 14px 16px 4px; background: rgba(255, 255, 255, .96); }
  .case-row { grid-template-columns: 84px 1fr; padding: 10px 0; }
  .case-row dd { font-size: 14px; }
  .dataset { left: var(--pad); width: calc(100% - 2 * var(--pad)); top: calc(var(--header-h) + 40px); gap: 5px; }


}

@media (prefers-reduced-motion: reduce) {
  .hs { transition: none; }
}