/* =========================================================
   SOLIOS — watch-lux · Swiss Editorial Luxury
   Skill-driven: style=minimalism-and-swiss-style,
   type="Luxury Minimalist" (Bodoni Moda + Jost) + JetBrains Mono
   Palette sampled from the product + blue-light footage.
   ========================================================= */
:root{
  --void:#080A0E;
  --panel:#0E1116;
  --steel:#767D83;
  --platinum:#ECEEF2;
  --accent:#2E64F0;
  --line:rgba(236,238,242,.13);
  --display:"Bodoni Moda", Georgia, serif;
  --sans:"Jost", system-ui, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, monospace;
  --ease:cubic-bezier(.62,.01,.06,1);
  --pad:clamp(1.25rem,4vw,3.5rem);
}
*{ margin:0; padding:0; box-sizing:border-box; }
body{ background:var(--void); color:var(--platinum); font-family:var(--sans); font-weight:300; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
a{ color:inherit; text-decoration:none; }
em{ font-style:italic; }
::selection{ background:var(--accent); color:#fff; }

/* loader */
.loader{ position:fixed; inset:0; z-index:200; background:var(--void); display:flex; align-items:center; justify-content:center; transition:opacity .8s var(--ease), visibility .8s var(--ease); }
.loader.is-done{ opacity:0; visibility:hidden; }
.loader__inner{ width:min(300px,64vw); text-align:center; }
.loader__mark{ font-family:var(--display); font-weight:500; font-size:1.6rem; letter-spacing:.36em; display:block; margin-bottom:1.2rem; padding-left:.36em; }
.loader__bar{ height:1px; background:rgba(236,238,242,.16); position:relative; overflow:hidden; }
.loader__bar span{ position:absolute; inset:0; transform-origin:left; transform:scaleX(0); background:var(--accent); transition:transform .2s linear; }
.loader__count{ display:block; margin-top:1.1rem; font-family:var(--mono); font-size:.64rem; letter-spacing:.24em; color:var(--steel); }

/* HUD */
.hud{ position:fixed; top:0; left:0; width:100%; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:1.5rem var(--pad); mix-blend-mode:difference; color:#fff; }
.hud__brand{ font-family:var(--display); font-weight:500; font-size:1.15rem; letter-spacing:.14em; }
.hud__brand span{ font-size:.5em; vertical-align:super; }
.hud__mid{ font-family:var(--mono); font-size:.64rem; letter-spacing:.28em; }
.hud__nav{ display:flex; gap:1.8rem; }
.hud__nav a{ font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; opacity:.85; transition:opacity .25s var(--ease); }
.hud__nav a:hover{ opacity:1; }
@media(max-width:640px){ .hud__mid{ display:none; } }

/* =========================================================
   HERO — editorial plate + turntable
   ========================================================= */
.hero{ position:relative; }
.hero__stage{ position:relative; height:100vh; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.2rem; }
/* thin inset editorial frame */
.hero__frame{ position:absolute; inset:clamp(1rem,2.4vw,2rem); border:1px solid var(--line); pointer-events:none; }
.hero__frame span{ position:absolute; font-family:var(--mono); font-size:.64rem; letter-spacing:.2em; color:var(--steel); padding:.7rem 1rem; }
.hero__idx{ top:0; left:0; } .hero__ref{ top:0; right:0; } .hero__rot{ bottom:0; left:0; } .hero__rot b{ color:var(--platinum); }
.hero__cue{ bottom:0; right:0; }

.hero__eyebrow{ font-family:var(--mono); font-size:clamp(.6rem,1vw,.72rem); letter-spacing:.34em; text-transform:uppercase; color:var(--steel); }
/* vignette via a STATIC overlay (not a canvas mask) — the ::after darkens the
   edges to the page colour so the watch emerges from the dark with no seam.
   Composited once; the live canvas underneath repaints with zero mask cost. */
.hero__plate{ position:relative; height:min(56vh,74vw); aspect-ratio:1608/1288; }
.hero__plate::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse farthest-side at 50% 49%, transparent 56%, var(--void) 100%); }
.hero__canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.hero__title{ font-family:var(--display); font-weight:400; font-size:clamp(3.4rem,11vw,10rem); line-height:.9; letter-spacing:-.01em; }
.hero__title em{ font-style:italic; font-weight:500; }
.hero__scrub{ position:absolute; left:0; bottom:0; width:100%; height:2px; background:rgba(236,238,242,.07); }
.hero__scrub span{ position:absolute; inset:0; transform-origin:left; transform:scaleX(0); background:var(--accent); }

/* =========================================================
   shared
   ========================================================= */
.tag{ font-family:var(--mono); font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; color:var(--accent); margin-bottom:2rem; }
.tag--center{ text-align:center; }
[data-reveal]{ opacity:0; transform:translateY(22px); }
.craft, .spec{ padding:clamp(6rem,15vh,12rem) var(--pad); border-top:1px solid var(--line); }

/* CRAFT */
.craft__intro{ max-width:60ch; margin-bottom:clamp(3rem,7vh,5.5rem); }
.craft__title{ font-family:var(--display); font-weight:400; font-size:clamp(2rem,5.4vw,4.6rem); line-height:1.04; letter-spacing:-.01em; margin-bottom:1.8rem; }
.craft__lede{ font-family:var(--sans); font-size:clamp(1rem,1.4vw,1.18rem); line-height:1.6; color:var(--steel); max-width:52ch; }
.craft__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:clamp(1rem,2.4vw,2rem); align-items:end; }
.plate__media{ position:relative; overflow:hidden; aspect-ratio:4/5; background:var(--panel); clip-path:inset(0 100% 0 0); }
.plate--tall .plate__media{ aspect-ratio:3/4; }
.plate__media img{ width:100%; height:100%; object-fit:cover; display:block; will-change:transform; }
.plate figcaption{ margin-top:.9rem; font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; color:var(--steel); }
.plate figcaption b{ color:var(--accent); font-weight:500; margin-right:.6rem; }
@media(max-width:800px){ .craft__grid{ grid-template-columns:1fr 1fr; } .plate--tall{ grid-column:1/-1; } }

/* =========================================================
   LIGHT REVEAL — blue-light video
   ========================================================= */
.reveal{ position:relative; }
.reveal__stage{ position:relative; height:100vh; overflow:hidden; background:var(--void); display:flex; align-items:center; justify-content:center; }
.reveal__plate{ position:relative; height:min(82vh,120vw); aspect-ratio:1608/1288; }
.reveal__plate::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse farthest-side at 50% 50%, transparent 56%, var(--void) 100%); }
.reveal__canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.reveal__copy{ position:absolute; z-index:3; left:var(--pad); top:50%; transform:translateY(-50%); max-width:16ch; }
.reveal__eyebrow{ font-family:var(--mono); font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; color:var(--accent); margin-bottom:1.4rem; }
.reveal__quote{ font-family:var(--display); font-weight:400; font-size:clamp(2.2rem,5.4vw,4.8rem); line-height:1.02; letter-spacing:-.01em; }
.reveal__quote em{ font-style:italic; font-weight:500; color:#fff; }
.reveal__cue{ position:absolute; z-index:3; right:var(--pad); bottom:clamp(1.5rem,4vh,2.6rem); font-family:var(--mono); font-size:.64rem; letter-spacing:.22em; color:var(--steel); }
@media(max-width:720px){ .reveal__copy{ top:auto; bottom:14vh; transform:none; } }

/* =========================================================
   SPEC — text-scrub
   ========================================================= */
.spec__scrub{ font-family:var(--display); font-weight:400; font-size:clamp(1.9rem,5vw,4.4rem); line-height:1.16; letter-spacing:-.005em; max-width:22ch; margin-bottom:clamp(3.5rem,9vh,7rem); }
.spec__scrub .w{ color:#242a30; }
.spec__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:2.4rem clamp(1.5rem,3vw,3rem); border-top:1px solid var(--line); padding-top:clamp(2rem,5vh,3.5rem); }
.spec__grid dt{ font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin-bottom:.9rem; }
.spec__grid dd{ font-family:var(--sans); font-size:clamp(.95rem,1.3vw,1.08rem); line-height:1.5; color:var(--platinum); }
@media(max-width:820px){ .spec__grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:440px){ .spec__grid{ grid-template-columns:1fr; } }

/* =========================================================
   CTA
   ========================================================= */
.cta{ min-height:92vh; display:flex; flex-direction:column; border-top:1px solid var(--line); padding:var(--pad); }
.cta__plate{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; border:1px solid var(--line); }
.cta__head{ font-family:var(--display); font-weight:400; font-size:clamp(3rem,12vw,9rem); line-height:.94; letter-spacing:-.01em; }
.cta__head em{ font-style:italic; font-weight:500; }
.cta__sub{ margin-top:1.6rem; color:var(--steel); font-size:clamp(.95rem,1.4vw,1.1rem); }
.cta__btn{ margin-top:2.6rem; padding:1rem 2.6rem; border:1px solid var(--line); font-family:var(--mono); font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
.cta__btn:hover{ background:var(--platinum); color:var(--void); border-color:var(--platinum); }
.cta__foot{ display:flex; justify-content:space-between; padding-top:1.6rem; font-family:var(--mono); font-size:.64rem; letter-spacing:.16em; color:var(--steel); }

@media (prefers-reduced-motion:reduce){ [data-reveal]{ opacity:1; transform:none; } .plate__media{ clip-path:none !important; } }