/* The intro page: the watch pulls apart on scroll. Builds on styles.css (header type, the picker, the form, the footer). */

/* the two faces, served from the site (Latin subset), so the first screen never waits on another origin */
@font-face { font-family: "Instrument Sans"; src: url("/fonts/instrument-sans.v1.woff") format("woff"); font-weight: 400 600; font-display: swap; }
@font-face { font-family: "Syncopate"; src: url("/fonts/syncopate-400.v1.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Syncopate"; src: url("/fonts/syncopate-700.v1.woff") format("woff"); font-weight: 700; font-display: swap; }

body.intro {
  background: #04060c;
  overflow-x: clip;
}

/* the bar: wordmark left, the one action right, over everything */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: max(18px, env(safe-area-inset-top)) var(--gutter) 18px;
  pointer-events: none;
}
.bar > * { pointer-events: auto; }
.bar .wordmark { font-size: 15px; }
.bar-cta {
  font-family: var(--label); font-size: 13px; font-weight: 500; letter-spacing: 0.02em;
  color: #04060c; background: var(--ink);
  padding: 9px 16px; border-radius: 999px;
  transition: background 0.2s ease;
}
.bar-cta:hover { background: #dfe6ff; }
.bar-cta:focus-visible { outline: 2px solid var(--blue-2); outline-offset: 3px; }

/* the story: a tall section with the stage pinned inside it (both heights are set in pixels by intro.js) */
.story { position: relative; height: 460vh; }
.stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(90% 70% at 50% 45%, transparent 55%, rgba(0, 0, 0, 0.55) 100%),
    radial-gradient(120% 80% at 50% 42%, #0b1226 0%, #060912 46%, #04060c 100%);
}
#gl {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; transition: opacity 0.9s ease;
}
.ready #gl { opacity: 1; }
.lost #gl { opacity: 0; transition: none; }

/* before the 3D arrives: a still of the same watch from the same camera, placed exactly where the 3D draws it.
   The scene fits 80 mm of height or 54 mm of width, whichever is tighter, so --k (pixels per millimetre) is the
   same rule. --sw and --sh are the stage's width and height, set by intro.js. */
:root { --sw: 100vw; --sh: 100svh; --k: min(calc(var(--sh) / 80), calc(var(--sw) / 54)); }
.poster {
  position: absolute; max-width: none; height: auto;
  width: calc(50.39 * var(--k));
  left: calc(50% - 26.5 * var(--k));
  top: calc(50% - 23.17 * var(--k));
  opacity: 0; transition: opacity 0.6s ease;
  pointer-events: none;
}
.poster.placed { opacity: 1; }        /* intro.js places it in the space the words leave, then shows it */
@media (max-width: 760px) {
  .poster {
    width: calc(49.71 * var(--k));
    left: calc(50% - 25.75 * var(--k));
    top: calc(50% - 0.06 * var(--sh) - 23.66 * var(--k));
  }
}
.ready .poster, .ready .poster.placed { opacity: 0; }
.lost .poster.placed { opacity: 1; transition: none; }

/* the words sit above the scene */
.hero-copy, .progress { z-index: 2; }

.hero-copy {
  position: absolute; left: 0; right: 0; bottom: calc(var(--under, 0px) + max(40px, 6svh));
  padding: 0 var(--gutter); text-align: center;
}
.hero-name {
  margin: 0 0 10px; font-family: var(--label); font-size: 12px; font-weight: 500; line-height: 1.5;
  text-transform: uppercase; letter-spacing: 0.32em; color: var(--steel);
}
.hero-tag {
  font-family: var(--label); font-weight: 500;
  font-size: clamp(22px, 3.2vw, 36px); letter-spacing: -0.015em; color: var(--ink);
  margin-bottom: 18px;
}

.progress { position: absolute; left: 0; right: 0; bottom: var(--under, 0px); height: 2px; background: rgba(255, 255, 255, 0.04); }
.progress i { display: block; height: 100%; background: linear-gradient(90deg, #1d3fb0, #9fb8ff); transform-origin: left; transform: scaleX(0); }

/* short desktop windows: the words get smaller so they stay clear of the watch */
@media (min-width: 761px) and (max-height: 700px) {
  .hero-copy { bottom: 22px; }
  .hero-name { margin-bottom: 4px; }
  .hero-tag { font-size: 22px; margin-bottom: 10px; }
  .hero-form .fine { display: none; }
}

/* phones: the scene sits high, the words sit low, no hairlines */
@media (max-width: 760px) {
  .story { height: 420vh; }
}

/* the forms: a pill field and a pill button, in sentence case */
.hero-form { width: min(440px, 100%); margin: 0 auto; text-align: left; }
.hero-form .row, .join .row { display: flex; gap: 8px; }
.hero-form input[type=email], .join .row input[type=email] {
  flex: 1; min-width: 0; height: 48px; padding: 0 18px;
  font: 16px var(--font); color: var(--ink);
  background: rgba(10, 14, 26, 0.72); border: 1px solid #2a3247; border-radius: 999px;
}
.hero-form input[type=email] { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.hero-form input[type=email]::placeholder, .join .row input[type=email]::placeholder { color: #7d869c; }
.hero-form input[type=email]:focus, .join .row input[type=email]:focus { outline: none; border-color: #6d8dff; }
.hero-form .btn, .join .row .btn, .joined .share {
  height: 48px; border-radius: 999px; padding: 0 24px;
  text-transform: none; letter-spacing: 0.01em; font-size: 15px; font-weight: 500;
}
.hero-form .opt { display: flex; margin-top: 10px; justify-content: center; font-size: 13px; }
.hero-form .fine { text-align: center; margin-top: 4px; }
.hero-form .form-msg { text-align: center; min-height: 0; margin-top: 6px; }
.fine { font-size: 13px; color: var(--steel); margin-top: 10px; }
.typo {
  display: block; margin: 8px 0 0; padding: 4px 0; background: none; border: 0; cursor: pointer;
  font: 14px var(--font); color: #9fb8ff; text-decoration: underline; text-underline-offset: 3px;
}
.hero-form .typo { margin: 8px auto 0; }
.typo[hidden] { display: none; }

/* signed up: one line, one way to pass it on */
.joined { display: grid; gap: 8px; justify-items: start; }
.hero-copy .joined { justify-items: center; }
.joined-line { font-family: var(--label); font-weight: 500; font-size: 22px; letter-spacing: -0.01em; color: var(--ink); outline: none; }
.joined-sub { color: var(--steel); font-size: 15px; }
.joined .share { margin-top: 10px; border: 1px solid var(--line-2); height: 44px; }
.share-link {
  width: min(360px, 100%); height: 44px; padding: 0 14px; margin-top: 4px;
  font: 14px var(--font); color: var(--ink); background: rgba(10, 14, 26, 0.72);
  border: 1px solid #2a3247; border-radius: 10px;
}

/* the bar at the bottom of a phone: a link to the last form, never a form itself */
.dock {
  position: fixed; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); z-index: 19;
  transform: translate(-50%, 140%); opacity: 0; visibility: hidden;
  font-family: var(--label); font-size: 15px; font-weight: 500;
  color: #04060c; background: var(--ink);
  padding: 13px 24px; border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  transition: transform 0.35s ease, opacity 0.35s ease, visibility 0s linear 0.35s;
}
.dock.on { transform: translate(-50%, 0); opacity: 1; visibility: visible; transition: transform 0.35s ease, opacity 0.35s ease; }
@media (min-width: 761px) { .dock { display: none; } }

/* the join section follows on from the night */
.join { padding-top: 120px; }
.join .sec-head h2 { font-size: clamp(44px, 6vw, 84px); letter-spacing: -0.035em; line-height: 1; text-transform: none; font-family: var(--label); font-weight: 500; }
.join .waitlist { border-top: 0; padding-top: 4px; }
.join .waitlist-lead { font-size: 20px; color: var(--ink); margin-bottom: 14px; }
.join .readout-no { font-family: var(--label); font-weight: 500; letter-spacing: -0.03em; }
#endForm { scroll-margin-top: 96px; scroll-margin-bottom: 40px; }

.coda { padding: 18vh var(--gutter) 16vh; text-align: center; }
.coda-line { font-family: var(--label); font-weight: 500; font-size: clamp(32px, 6vw, 88px); letter-spacing: -0.035em; line-height: 1.02; color: var(--ink); }

/* no 3D (no WebGL, reduced motion, or a lost graphics context): the still and the form, one screen */
.no3d .story { height: auto !important; }
.no3d .stage { position: relative; }
.no3d #gl, .no3d .progress { display: none; }
.no3d .poster.placed { opacity: 1 !important; }

/* local: render the opening frame alone, on transparent, to make the stills */
.poster-mode, .poster-mode .stage { background: transparent !important; }
.poster-mode .poster, .poster-mode .progress, .poster-mode main, .poster-mode .foot, .poster-mode .dock { display: none !important; }
.poster-mode .bar, .poster-mode .hero-copy { visibility: hidden !important; }
.poster-mode .backdrop, .poster-mode .bd-bead, .poster-mode .bd-bloom { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  #gl, .poster, .dock { transition: none; }
}

/* while the 3D is still on its way, a scroll says so instead of looking stuck */
.loading {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3;
  margin: 0; padding: 10px 18px; border-radius: 999px; background: rgba(4, 6, 12, 0.7);
  font-family: var(--label); font-size: 13px; letter-spacing: 0.04em; color: var(--steel);
  opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
.waiting3d.scrolled .loading { opacity: 1; }
.waiting3d.scrolled .hero-copy { opacity: 0.25; }

/* ------------------------------------------------------------------ the specification, beside the still watch */
.explore {
  position: absolute; z-index: 3; right: max(40px, 6vw); top: 50%; transform: translateY(-50%);
  width: min(400px, 32vw); opacity: 0; visibility: hidden;
}
.spec-kicker {
  margin: 0 0 14px; font-family: var(--label); font-size: 12px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.32em; color: var(--steel);
}
.spec { width: 100%; border-collapse: collapse; }
.spec tr { border-top: 1px solid rgba(160, 175, 210, 0.16); }
.spec tr:last-child { border-bottom: 1px solid rgba(160, 175, 210, 0.16); }
.spec th, .spec td { padding: 11px 0; text-align: left; vertical-align: baseline; font-family: var(--label); }
.spec th {
  width: 36%; padding-right: 16px; font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--dim);
}
.spec td { font-size: 16px; font-weight: 500; letter-spacing: -0.005em; color: var(--ink); }

/* phones: the same table as a two-column grid, label over value, so the watch keeps most of the screen */
@media (max-width: 760px) {
  .explore { left: 18px; right: 18px; top: auto; bottom: calc(var(--under, 0px) + max(14px, env(safe-area-inset-bottom))); transform: none; width: auto; }
  .spec-kicker { margin-bottom: 8px; font-size: 11px; }
  .spec, .spec tbody { display: block; }
  .spec tbody { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; }
  .spec tr { display: flex; flex-direction: column; gap: 2px; padding: 7px 0; border-top: 1px solid rgba(160, 175, 210, 0.16); }
  .spec tr:last-child { border-bottom: 0; }
  .spec th, .spec td { display: block; width: auto; padding: 0; }
  .spec th { font-size: 9.5px; letter-spacing: 0.12em; }
  .spec td { font-size: 14px; line-height: 1.3; }
}
@media (max-width: 760px) and (max-height: 700px) {
  .spec tr { padding: 5px 0; }
  .spec td { font-size: 13px; }
}
.no3d .explore { display: none; }

/* ?debug=1 */
.debug { position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: 50; margin: 0; padding: 8px 10px; border-radius: 8px;
  background: rgba(0, 0, 0, 0.85); color: #9fe0c0; font: 12px/1.4 ui-monospace, Menlo, Consolas, monospace; }

/* ------------------------------------------------------------------ the looks: a backdrop behind the 3D */
.backdrop { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
#gl, .poster { z-index: 1; }
.bd-sky { position: absolute; inset: 0; width: 100%; height: 100%; }
.bd-sun, .bd-bead, .bd-bloom, .bd-floor, .bd-line { display: none; position: absolute; max-width: none; }
/* --bx, --by: the watch's centre on screen; --bs: pixels per millimetre at the watch; --bk: the corona's size;
   --bq: its squash, so at the end it is the same oval as the tilted case (all set by intro.js) */
.bd-sun {
  left: var(--bx, 50%); top: var(--by, 45%); width: calc(var(--bs, 7px) * 108); aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(var(--bk, 1), calc(var(--bk, 1) * var(--bq, 1)));
  opacity: var(--bo, 1); will-change: transform, opacity;
}
.bd-sun img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; opacity: 0; }
.bd-a { transform: rotate(var(--ra, 0deg)); }
.bd-b { transform: rotate(var(--rb, 0deg)) scale(1.04); mix-blend-mode: screen; }
/* the corona lights up once its image is in: a quick swell from a little smaller, the way the corona appears at second contact */
.bd-sun.lit .bd-a { animation: ignite 1.6s cubic-bezier(.2, .7, .2, 1) both; }
.bd-sun.lit .bd-b { animation: ignite-b 2.4s cubic-bezier(.2, .7, .2, 1) 0.2s both; }
@keyframes ignite { from { opacity: 0; scale: 0.84; } to { opacity: 1; scale: 1; } }
@keyframes ignite-b { from { opacity: 0; scale: 0.8; } to { opacity: 0.85; scale: 1; } }
/* the diamond ring: a bead of light on the corona's edge, at the same minute as the flare on the dial */
.bd-bead, .bd-bloom { z-index: 2; pointer-events: none; }
.bd-bead {
  left: var(--gx, 50%); top: var(--gy, 40%); width: calc(var(--bs, 7px) * 46);
  transform: translate(-50%, -50%) scale(var(--gs, 1)) rotate(var(--gr, 0deg)); opacity: var(--go, 0);
  mix-blend-mode: screen; will-change: transform, opacity;
}
.bd-bloom {
  inset: 0; opacity: var(--gb, 0); mix-blend-mode: screen;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 40%), rgba(245, 248, 255, 0.95), rgba(150, 185, 255, 0.55) 7%, rgba(60, 110, 255, 0.22) 24%, rgba(30, 60, 255, 0.06) 48%, transparent 75%);
}
.bd-floor {
  left: var(--bx, 50%); top: calc(var(--by, 45%) + var(--bs, 7px) * 27); width: calc(var(--bs, 7px) * 120); height: calc(var(--bs, 7px) * 22);
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(150, 185, 255, 0.34), rgba(70, 110, 255, 0.1) 55%, transparent);
  filter: blur(4px);
}
.bd-line {
  left: 0; right: 0; top: calc(var(--by, 45%) + var(--bs, 7px) * 4); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(190, 210, 255, 0.25) 25%, rgba(255, 255, 255, 0.75) 50%, rgba(190, 210, 255, 0.25) 75%, transparent);
  box-shadow: 0 0 18px 2px rgba(120, 160, 255, 0.35);
}

.look-totality .stage { background: radial-gradient(120% 80% at 50% 40%, #050913 0%, #020307 60%, #010103 100%); }
.look-totality .bd-sun, .look-totality .bd-bead, .look-totality .bd-bloom { display: block; }
.look-totality .backdrop::after {        /* keeps the words readable over the corona */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46%;
  background: linear-gradient(to bottom, rgba(1, 2, 5, 0), rgba(1, 2, 5, 0.86) 70%);
  opacity: calc(1 - var(--ex, 0) * 0.6);
}
/* and beside the specification on wide screens, a dark side for the table */
.look-totality .backdrop::before {
  content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 52%; z-index: 1; opacity: var(--ex, 0);
  background: linear-gradient(to right, rgba(1, 2, 5, 0), rgba(1, 2, 5, 0.78) 34%, rgba(1, 2, 5, 0.9));
}
@media (max-width: 760px) { .look-totality .backdrop::before { display: none; } }
.look-totality .spec th { color: #9aa6c2; }
.look-totality .spec-kicker { color: #a9b3c9; }
.look-totality .explore, .look-totality .hero-copy { text-shadow: 0 1px 14px rgba(0, 0, 0, 0.9); }

.look-studio .stage { background: #000; }
.look-studio .bd-floor, .look-studio .bd-line { display: block; }

.look-afterglow .stage { background: #02040b; }
.look-afterglow .backdrop::before {
  content: ""; position: absolute; inset: -6% 0; background: url("/img/bd_haze.v2.webp") center / cover no-repeat;
  transform: translate3d(0, var(--hy, 0px), 0); animation: haze-in 1.6s ease both;
}
@keyframes haze-in { from { opacity: 0; } to { opacity: 1; } }
.look-afterglow .spec th { color: #9aa6c2; }
.look-afterglow .spec-kicker { color: #a9b3c9; }
.look-afterglow .explore, .look-afterglow .hero-copy { text-shadow: 0 1px 12px rgba(0, 0, 0, 0.85); }
@media (prefers-reduced-motion: reduce) { .look-afterglow .backdrop::before { animation: none; } }
.look-afterglow .backdrop::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 45% at var(--bx, 50%) var(--by, 45%), rgba(40, 110, 255, 0.12), transparent 70%);
}

/* the specification arrives a row at a time */
.spec tr { transition: opacity 0.5s ease, transform 0.6s cubic-bezier(.2, .7, .2, 1); }
.explore .spec tr { opacity: 0; transform: translateY(10px); }
.exploring .explore .spec tr { opacity: 1; transform: none; }
.exploring .explore .spec tr:nth-child(1) { transition-delay: 0.00s; }
.exploring .explore .spec tr:nth-child(2) { transition-delay: 0.04s; }
.exploring .explore .spec tr:nth-child(3) { transition-delay: 0.08s; }
.exploring .explore .spec tr:nth-child(4) { transition-delay: 0.12s; }
.exploring .explore .spec tr:nth-child(5) { transition-delay: 0.16s; }
.exploring .explore .spec tr:nth-child(6) { transition-delay: 0.20s; }
.exploring .explore .spec tr:nth-child(7) { transition-delay: 0.24s; }
.exploring .explore .spec tr:nth-child(8) { transition-delay: 0.28s; }
.exploring .explore .spec tr:nth-child(9) { transition-delay: 0.32s; }
.exploring .explore .spec tr:nth-child(10) { transition-delay: 0.36s; }
.exploring .explore .spec tr:nth-child(11) { transition-delay: 0.40s; }
.exploring .explore .spec tr:nth-child(12) { transition-delay: 0.44s; }
@media (prefers-reduced-motion: reduce) { .explore .spec tr { opacity: 1; transform: none; transition: none; } .bd-sun.lit img { animation: none; opacity: 1; } }
.no3d .bd-sun img { opacity: 1; }