/* ═══════════════════════════════════════════════════════════════
   Solace / Midway Hotel — 1:1 rebuild of Figma template #37
   Type   : Playfair Display 600 (display) + Jost (UI)
   Motion : crossfade + slow ken-burns on the backdrop. transform/opacity
            only, so it stays on the compositor. No scroll involvement.
   ═══════════════════════════════════════════════════════════════ */

@font-face{
  font-family:'Playfair';
  src:url('../fonts/Playfair-latin-var.woff2') format('woff2');
  font-weight:400 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Jost';
  src:url('../fonts/Jost-latin-var.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
}

:root{
  --display:'Playfair','Playfair Display',Didot,serif;
  --ui:'Jost',Futura,system-ui,sans-serif;

  --white:#fff;
  --dim:rgba(255,255,255,.66);
  --ink:#2a1d1c;
  --accent:#f2b3a6;          /* the blush chip on the solid pill */
  --glass:rgba(255,255,255,.13);
  --glass-line:rgba(255,255,255,.28);

  --gut:clamp(1.1rem,3.2vw,3.6rem);
  --bar:clamp(56px,7.2vh,86px);   /* nav height */
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:#1a1113; color:var(--white);
  font-family:var(--ui); font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block; max-width:100%; height:auto}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
a{color:inherit; text-decoration:none}

.skip{position:absolute; left:-9999px; top:0; z-index:99}
.skip:focus{left:1rem; top:1rem; padding:.6rem 1rem; background:#fff; color:#000; border-radius:6px}
:where(a,button):focus-visible{outline:2px solid #fff; outline-offset:3px; border-radius:6px}

/* ───────── nav ───────── */
.nav{
  position:fixed; inset:0 0 auto; z-index:40; height:var(--bar);
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:clamp(.8rem,2vw,2rem); padding:0 var(--gut);
}
.brand{display:flex; align-items:center; gap:.6em}
.brand__mark{
  width:clamp(26px,2.1vw,38px); height:auto;
  fill:none; stroke:#fff; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
.brand__word{
  font-family:var(--display); font-weight:500;
  font-size:clamp(.66rem,.85vw,1rem); letter-spacing:.22em; text-transform:uppercase;
}
.menu{display:flex; justify-content:center; gap:clamp(1rem,2.6vw,3.2rem)}
.menu a{
  font-size:clamp(.7rem,.86vw,.96rem); font-weight:300; color:var(--dim);
  transition:color .3s ease;
}
.menu a:hover,.menu a.is-active{color:var(--white)}
.nav__right{display:flex; align-items:center; gap:clamp(.5rem,1vw,1rem)}

/* pills */
.pill{
  display:inline-flex; align-items:center; gap:.7em;
  border-radius:999px; white-space:nowrap;
  font-size:clamp(.64rem,.8vw,.9rem); font-weight:400;
  letter-spacing:.09em; text-transform:uppercase;
  padding:.62em 0 .62em 1.35em;
  transition:transform .3s cubic-bezier(.3,1,.5,1), background .3s ease;
}
.pill--solid{background:#fff; color:var(--ink); padding-right:.42em}
.pill--solid:hover{transform:translateY(-2px)}
.pill__chip{
  width:2.05em; height:2.05em; border-radius:50%; background:var(--accent);
  display:grid; place-items:center; flex:0 0 auto;
}
.pill__chip::after{
  content:''; width:.42em; height:.42em;
  border-top:1.6px solid var(--ink); border-right:1.6px solid var(--ink);
  rotate:45deg; margin-left:-.12em;
}
.pill--ghost{
  padding:.62em 1.5em; color:#fff;
  background:var(--glass); backdrop-filter:blur(9px);
  box-shadow:inset 0 0 0 1px var(--glass-line);
}
.pill--ghost:hover{background:rgba(255,255,255,.2)}
.pill--lg{font-size:clamp(.68rem,.85vw,.95rem); padding-top:.85em; padding-bottom:.85em}
.pill--lg.pill--solid{padding-left:1.7em}

.grid-btn{
  display:grid; grid-template-columns:repeat(3,3px); gap:3px;
  padding:.5em; border-radius:8px;
}
.grid-btn span{width:3px; height:3px; border-radius:50%; background:#fff; opacity:.9}

/* ───────── stage ───────── */
.track{height:620vh}
.stage{
  position:sticky; top:0; height:100svh; overflow:clip; isolation:isolate;
  background:#1a1113;
}

.beds{position:absolute; inset:0; z-index:0}
/* the walk itself: one clip, its currentTime driven by the scroll position */
.walk,.walk-still{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 52%;
}
.walk{opacity:0; transition:opacity .5s ease}
.stage.has-video .walk{opacity:1}
.stage.has-video .walk-still{opacity:0}
.walk-still{opacity:1; transition:opacity .5s ease}
/* the dark beat as one space hands over to the next */
.veil{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:#140a0c; opacity:0;
}

.scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg,rgba(20,10,12,.5) 0%,transparent 22%),
    linear-gradient(90deg,rgba(20,10,12,.52) 0%,transparent 46%),
    linear-gradient(0deg,rgba(20,10,12,.5) 0%,transparent 32%);
}

/* ───────── slides ───────── */
.scenes{position:absolute; inset:0; z-index:3}
.scene{
  position:absolute; inset:0;
  padding:calc(var(--bar) + 2vh) var(--gut) 0;
  display:flex; flex-direction:column;
  opacity:0; transform:translateY(var(--lift,0));
  pointer-events:none; will-change:transform,opacity;
}
.scene :where(a,button){pointer-events:auto}

/* stop 01 — the building itself, no headline in the reference */
.scene--intro{justify-content:flex-end; align-items:center; padding-bottom:16vh; text-align:center}
.eyebrow{
  margin:0; font-size:clamp(.66rem,.82vw,.92rem); font-weight:300;
  letter-spacing:.24em; text-transform:uppercase; color:rgba(255,255,255,.82);
  text-shadow:0 1px 14px rgba(26,10,14,.6);
}

.scene--left{justify-content:center; align-items:flex-start; padding-left:clamp(1.1rem,6vw,7rem)}
.scene--center{justify-content:flex-end; align-items:center; text-align:center; padding-bottom:19vh}
.scene--center::before{     /* the centred copy sits low, often over bright stone */
  content:''; position:absolute; inset:auto 0 0; height:52%; z-index:-1;
  background:linear-gradient(180deg,transparent,rgba(18,8,12,.62));
  pointer-events:none;
}

.hd{
  font-family:var(--display); font-weight:600;
  text-transform:uppercase; margin:0;
  line-height:1.02; letter-spacing:.012em;
  font-size:clamp(2rem,4.55vw,5.4rem);
  text-shadow:0 2px 30px rgba(26,10,14,.5);
}
.hd span{display:block}
.hd--in{padding-left:1.55em}        /* the staggered middle line */
.hd--c{line-height:1.1; font-size:clamp(1.7rem,3.9vw,4.6rem)}

.lede{
  margin:1.5em 0 0; max-width:26ch;
  font-size:clamp(.85rem,1.02vw,1.18rem); line-height:1.55; font-weight:300;
  color:rgba(255,255,255,.9);
  text-shadow:0 1px 16px rgba(26,10,14,.6);
}
.lede--c{max-width:48ch; margin-top:1.3em}

.acts{display:flex; flex-wrap:wrap; gap:.7rem; margin-top:2.4em}

/* the ring + wave glyph on the centred slides */
.halo{
  position:absolute; left:50%; top:34%; translate:-50% -50%;
  width:clamp(150px,17vw,270px); aspect-ratio:1;
  display:grid; place-items:center;
  border-radius:50%; box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);
}
.halo::before{
  content:''; position:absolute; inset:11%;
  border-radius:50%; box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
}
.halo svg{
  width:42%; fill:none; stroke:#fff; stroke-width:2.1;
  stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 2px 12px rgba(26,10,14,.5));
}

/* ───────── persistent chrome ───────── */
.social{
  position:absolute; z-index:3; right:var(--gut); top:50%; translate:0 -50%;
  display:flex; flex-direction:column; gap:.7rem;
}
.social a{
  width:clamp(30px,2.4vw,42px); aspect-ratio:1; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(30,16,20,.28); backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.42);
  transition:background .3s ease, transform .3s ease;
}
.social a:hover{background:rgba(255,255,255,.24); transform:translateY(-2px)}
.social svg{
  width:48%; fill:none; stroke:#fff; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}

.scroller{
  position:absolute; z-index:3; left:calc(var(--gut) + .4vw); bottom:5vh;
  width:clamp(74px,6.6vw,112px); aspect-ratio:1;
  display:grid; place-items:center; opacity:.72;
}
.scroller__ring{position:absolute; inset:0; animation:spin 24s linear infinite}
.scroller__ring text{
  font-family:var(--ui); font-size:8.6px; font-weight:400;
  letter-spacing:.26em; fill:rgba(255,255,255,.85);
}
.scroller__arrow{
  width:.5em; height:.5em; font-size:clamp(74px,6.6vw,112px);
  border-right:1.5px solid rgba(255,255,255,.9);
  border-bottom:1.5px solid rgba(255,255,255,.9);
  rotate:45deg; margin-top:-.12em;
}
@keyframes spin{to{rotate:360deg}}

/* the promo card is chrome for the left-aligned slides only - on the centred
   ones the reference shows just the counter, and the card would sit on the copy */
.stage[data-variant="center"] .promo{opacity:0; pointer-events:none}
.stage[data-variant="center"] .scroller{opacity:.4}
.promo{
  transition:opacity .5s ease;
  position:absolute; z-index:3; right:clamp(8rem,15vw,17rem); bottom:6vh;
  display:flex; align-items:center; gap:clamp(.7rem,1.2vw,1.4rem);
  max-width:min(46vw,540px); padding:clamp(.7rem,1vw,1.1rem);
  border-radius:clamp(14px,1.3vw,22px);
  background:var(--glass); backdrop-filter:blur(14px);
  box-shadow:inset 0 0 0 1px var(--glass-line), 0 24px 60px -30px rgba(20,8,12,.8);
}
.promo__txt{min-width:0}
.promo h3{
  margin:0; font-family:var(--display); font-weight:600; text-transform:uppercase;
  font-size:clamp(.82rem,1.05vw,1.25rem); line-height:1.12; letter-spacing:.02em;
}
.promo p{
  margin:.6em 0 0; max-width:24ch;
  font-size:clamp(.66rem,.78vw,.88rem); line-height:1.45;
  color:rgba(255,255,255,.82);
}
.promo img{
  flex:0 0 auto; width:clamp(74px,7vw,120px); aspect-ratio:1;
  object-fit:cover; border-radius:clamp(10px,1vw,18px);
}
.promo__grip{
  position:absolute; right:.75em; bottom:.7em;
  width:10px; height:10px; opacity:.55;
  background:
    radial-gradient(currentColor 40%,transparent 42%) 0 0/5px 5px repeat;
}

.count{
  position:absolute; z-index:3; right:var(--gut); bottom:5.5vh;
  display:flex; align-items:baseline; gap:.55em;
}
.count b{
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.5rem,2.4vw,2.9rem); line-height:1;
}
.count i{
  width:clamp(34px,3.4vw,62px); height:1px; background:rgba(255,255,255,.85);
  align-self:center;
}
.count span{font-size:clamp(.62rem,.76vw,.86rem); letter-spacing:.1em; opacity:.8}

/* invisible click zones, so the slider works without visible arrows */
.edge{position:absolute; z-index:2; top:var(--bar); bottom:14vh; width:12vw; cursor:pointer}
/* z-index 2 keeps them under .slides, whose links opt back into pointer events */
.edge--prev{left:0}
.edge--next{right:0}

/* ───────── mobile ───────── */
@media (max-width:900px){
  .menu,.scroller{display:none}
  .social{top:auto; bottom:23vh; translate:0 0; flex-direction:row}
  .scene--left{justify-content:flex-end; padding-bottom:30vh; padding-left:var(--gut)}
  .scene--intro{padding-bottom:22vh}
  .scene--center{padding-bottom:26vh}
  .hd--in{padding-left:.9em}
  .halo{top:26%; width:min(42vw,190px)}
  .lede{max-width:32ch}
  .promo{
    right:var(--gut); left:var(--gut); bottom:12vh; max-width:none;
  }
  .promo p{display:none}
  .count{bottom:5vh}
  .edge{width:22vw; bottom:34vh}
}

@media (max-width:520px){
  .brand__word{font-size:.6rem; letter-spacing:.18em}
  .hd{font-size:2.15rem}
  .hd--c{font-size:1.75rem}
  .acts .pill--ghost{display:none}
}

/* ───────── reduced motion ───────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .walk{transition:none}
  .scroller__ring{animation:none}
  .pill,.social a{transition:none}
}