/* ==========================================================================
   EDIO — Homepage. Shared tokens, header, markers, footer live in base.css.
   One physical object on a dark industrial stage, large quiet type, lots of air.
   The object is EDIO's own SmartClone model (same file as edio.in).
   ========================================================================== */

:root {
  --void: #FFFFFF;          /* stage black, faintly navy */
  --stage: #F4F7F8;         /* lit floor */
  --ink-hi: #0E1A20;        /* headline white, a touch cool */
  --hs: 0;                  /* part callouts, driven by scroll */
  --hs-keep: 0;             /* the display callout stays lit while its read becomes a case */
}

/* homepage display voice: regular-weight grotesk, tight, not condensed */
.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; }
/* video hero: the repair-intelligence flow plays as a quiet film across the whole stage, kept light, with
   a soft white glow behind the headline so the words always read over it */
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .3; }
.hero-title { transition: none; }
.hero--film .stage-horizon, .hero--film .stage-floor { display: none; }
/* after the film: the footage keeps playing under an even navy wash and the headline is white on it; no white glow */
/* the still sits behind the film so a slow download is the poster, not a black stage */
.hero--film { background: #0B1D25 url("../img/home/hero-loop.webp?v=2") center / cover no-repeat; }
.hero--film .boot { display: none; }
/* once the film has ended, the still behind the loop is the loop itself: no words show through behind the headline */
.hero--film.is-loop { background-image: url("../img/home/hero-loop.webp?v=2"); }
.hero--film .stage-light { display: none; }
.hero--film .stage-halo { background: linear-gradient(180deg, rgba(7, 22, 30, .66) 0%, rgba(7, 22, 30, .52) 48%, rgba(7, 22, 30, .8) 100%); }
.hero--film .hero-title { color: #fff; text-shadow: 0 2px 30px rgba(0, 0, 0, .25); }
/* the header stays a white bar over the dark stage, so the menu always reads */
.site-header { background: rgba(255, 255, 255, .96); }
.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(52px, 7.4vw, 132px); line-height: 1.04; letter-spacing: -.03em;
  color: var(--ink-hi); text-align: center;
}
.ht-line { display: block; }
/* 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 */
.device {
  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;
}
.device-rig { position: absolute; inset: 0; }
.hero:not(.is-placed) .device { 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; }
.device-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 */
.device::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;
}
.tile { aspect-ratio: 1.18; position: relative; border: 1px solid rgba(11, 127, 145, .128); background: rgba(242, 244, 245, .7); opacity: 0; }
.tile::before, .tile::after { content: ""; position: absolute; left: 14%; height: 2px; background: rgba(11, 127, 145, .176); }
.tile::before { top: 30%; width: 58%; }
.tile::after { top: 52%; width: 38%; }
.tile.is-hot { border-color: rgba(11, 127, 145, .56); background: rgba(11, 127, 145, .112); }
.tile.is-hot::before, .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); }

/* closing statement uses the homepage voice */

/* ==========================================================================
   INTRO initial states (only when JS runs the intro)
   ========================================================================== */
.is-intro .site-header,
.is-intro .device,
.is-intro .stage-light,
.is-intro .stage-floor { opacity: 0; }
.is-intro .hero-title { visibility: hidden; }
/* held still until the model has rendered and the headline has typed (the gutter stays, so nothing shifts) */
html { scrollbar-gutter: stable; background: var(--void); }
/* while the model loads, the boot line is already up, so the first frame isn't empty */
.is-intro .boot { opacity: 1; transition: opacity .4s ease .2s; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1199px) {
  .device { 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: 1.02; text-align: left; letter-spacing: -.035em; }
  .ht-a, .ht-b { display: block; }
  .ht-a, .ht-b { white-space: nowrap; }
  .device { 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; }
}

/* ==========================================================================
   OFFER — centred, quiet, after the story
   ========================================================================== */
.offer { background: var(--void); padding-block: clamp(110px, 13vw, 190px) clamp(96px, 11vw, 160px); border-top: 1px solid rgba(14, 26, 32, .07); }

@media (prefers-reduced-motion: reduce) { .stage::before, .stage::after { animation: none; } }

@media (max-width: 767px) { .stage-halo { background: radial-gradient(70% 34% at 50% 34%, rgba(11, 127, 145, .03), rgba(11, 127, 145, 0) 70%); } }
@media (max-width: 767px) {
  .hero--film { background-image: url("../img/home/hero-loop-mobile.webp?v=2"); }
  .hero--film.is-loop { background-image: url("../img/home/hero-loop-mobile.webp?v=2"); }
  .hero--film .stage-halo { background: radial-gradient(70% 26% at 50% 47%, rgba(255, 255, 255, .55), rgba(255, 255, 255, .3) 55%, rgba(255, 255, 255, 0) 100%); }
  /* the boot line is too long for one phone line: stack its two parts */
  .boot { flex-direction: column; align-items: center; gap: 10px; text-align: center; }
}