/* ============================================================
   REGENT — The Obsidian Polo
   Dark heritage couture · scroll-driven film
   ============================================================ */

:root{
  --bg:        #070708;
  --bg-2:      #0c0c0e;
  --ink:       #ECE7DD;
  --ink-soft:  rgba(236,231,221,.62);
  --ink-faint: rgba(236,231,221,.34);
  --gold:      #C2A878;
  --gold-soft: rgba(194,168,120,.55);
  --line:      rgba(236,231,221,.13);
  --line-2:    rgba(236,231,221,.07);

  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans:  "Inter", system-ui, -apple-system, sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
.display{ font-family:var(--serif); font-weight:500; letter-spacing:.005em; }
img{ display:block; max-width:100%; }
::selection{ background:var(--gold); color:#000; }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar{ width:9px; }
::-webkit-scrollbar-track{ background:#000; }
::-webkit-scrollbar-thumb{ background:#26262a; border-radius:9px; }
::-webkit-scrollbar-thumb:hover{ background:var(--gold); }

/* ============================================================
   LOADER
   ============================================================ */
#loader{
  position:fixed; inset:0; z-index:1000;
  background:radial-gradient(120% 100% at 50% 40%, #121214 0%, #060607 60%, #000 100%);
  display:grid; place-items:center;
  transition:opacity 1s var(--ease), visibility 1s var(--ease);
}
#loader.is-done{ opacity:0; visibility:hidden; }
.loader__inner{ width:min(78vw,360px); text-align:center; }
.loader__mark{
  font-family:var(--serif); font-size:54px; font-weight:600;
  color:var(--gold); line-height:1;
  border:1px solid var(--gold-soft); width:84px; height:84px;
  display:grid; place-items:center; margin:0 auto 26px; border-radius:50%;
  box-shadow:0 0 60px rgba(194,168,120,.18);
}
.loader__name{
  font-size:13px; letter-spacing:.62em; text-indent:.62em;
  color:var(--ink); margin-bottom:34px; font-weight:400;
}
.loader__bar{
  height:1px; width:100%; background:var(--line); overflow:hidden;
}
.loader__bar span{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg, var(--gold-soft), var(--gold));
  transition:width .25s linear;
}
.loader__pct{
  margin-top:16px; font-size:12px; letter-spacing:.3em; color:var(--ink-soft);
}
.loader__pct i{ font-style:normal; color:var(--ink-faint); }
.loader__cap{
  margin-top:8px; font-size:10.5px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--ink-faint);
}

/* ============================================================
   TOP BAR
   ============================================================ */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:90;
  display:flex; align-items:center; justify-content:space-between;
  padding:24px clamp(20px,4vw,52px);
  mix-blend-mode:difference;
  opacity:0; transform:translateY(-12px);
  transition:opacity 1s var(--ease) .2s, transform 1s var(--ease) .2s;
}
.topbar.is-in{ opacity:1; transform:none; }
.topbar__brand{
  font-family:var(--serif); font-weight:600; font-size:22px;
  letter-spacing:.34em; text-indent:.34em; color:#fff; text-decoration:none;
}
.topbar__nav{ display:flex; align-items:center; gap:clamp(16px,2.4vw,40px); }
.topbar__nav a{
  color:#fff; text-decoration:none; font-size:11px;
  letter-spacing:.22em; text-transform:uppercase; font-weight:400;
  opacity:.82; transition:opacity .3s;
}
.topbar__nav a:hover{ opacity:1; }
.topbar__cta{
  border:1px solid rgba(255,255,255,.5); border-radius:40px;
  padding:9px 18px; opacity:1 !important;
}

/* ============================================================
   SCROLL FILM
   ============================================================ */
#sequence{
  position:relative;
  height:820vh;            /* scroll length that drives the 388 frames */
  background:#000;
}
.sticky{
  position:sticky; top:0;
  height:100vh; width:100%;
  overflow:hidden;
}
#frames{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
}

/* cinematic layers over the canvas */
.layer{ position:absolute; inset:0; pointer-events:none; z-index:3; }
.vignette{
  background:
    radial-gradient(130% 110% at 50% 42%, transparent 38%, rgba(0,0,0,.55) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.45) 0%, transparent 22%, transparent 72%, rgba(0,0,0,.78) 100%);
}
.grain{
  z-index:4; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Overlay text chapters ---------- */
.overlay{ position:absolute; inset:0; z-index:5; pointer-events:none; }
.panel{
  position:absolute;
  top:50%; left:50%;
  width:min(92vw,1240px);
  transform:translate(-50%,-50%);
  will-change:transform,opacity;
  opacity:0;
}
.panel > *{ will-change:transform,opacity; display:block; }

/* alignment variants */
.panel[data-align="center"]{ text-align:center; }
.panel[data-align="center"] .panel__body{ margin-left:auto; margin-right:auto; }
.panel[data-align="left"]{ text-align:left; }
.panel[data-align="right"]{ text-align:right; }
.panel[data-align="right"] .panel__body{ margin-left:auto; }

.panel__index{
  font-size:clamp(40px,5.4vw,78px);
  line-height:.8; color:transparent;
  -webkit-text-stroke:1px var(--gold-soft);
  opacity:.7; margin-bottom:8px;
}
.panel__kicker{
  font-size:11px; letter-spacing:.42em; text-transform:uppercase;
  color:var(--gold); margin-bottom:22px; font-weight:500;
}
.panel__title{
  font-size:clamp(32px,5vw,68px);
  line-height:1; letter-spacing:-.01em;
  color:#fff;
  text-shadow:0 6px 60px rgba(0,0,0,.7);
}
.panel__title em{ font-style:italic; color:var(--gold); }
.panel__sub{
  margin-top:20px; font-size:clamp(14px,1.6vw,19px);
  letter-spacing:.34em; text-transform:uppercase; color:var(--ink-soft); font-weight:300;
}
.panel__body{
  margin-top:26px; max-width:38ch;
  font-size:clamp(15px,1.35vw,18px); line-height:1.7;
  color:var(--ink-soft); font-weight:300;
}

/* hero specifics — centered, compact */
.panel--hero{
  width:min(92vw,720px);
  text-align:center;
}
.panel--hero .panel__kicker{ margin-bottom:16px; }
.panel--hero .panel__title{ font-size:clamp(30px,4.8vw,64px); line-height:1; }
.panel--hero .panel__sub{ margin-top:14px; font-size:clamp(11px,1.1vw,14px); }

/* crest chapter — anchored to the bottom of the screen */
.panel--bottom{
  top:auto;
  bottom:clamp(54px,8vh,104px);
  transform:translateX(-50%);
}

.scrollcue{
  margin-top:34px; display:inline-flex; flex-direction:column; align-items:center; gap:14px;
  font-size:10px; letter-spacing:.36em; text-transform:uppercase; color:var(--ink-faint);
}
.scrollcue i{
  width:1px; height:54px; position:relative; overflow:hidden;
  background:var(--line);
}
.scrollcue i::after{
  content:""; position:absolute; left:0; top:-50%;
  width:1px; height:50%; background:var(--gold);
  animation:cue 2.1s var(--ease) infinite;
}
@keyframes cue{ 0%{ transform:translateY(-100%); } 60%,100%{ transform:translateY(300%);} }

/* ---------- HUD ---------- */
.hud{ position:absolute; inset:0; z-index:6; pointer-events:none; }
.hud__label{
  position:absolute; bottom:26px;
  font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-faint);
}
.hud__label--l{ left:clamp(20px,4vw,52px); }
.hud__label--r{ right:clamp(20px,4vw,52px); }
.hud__label--r b{ color:var(--ink); font-weight:500; }
.hud__progress{
  position:absolute; left:50%; bottom:28px; transform:translateX(-50%);
  width:min(40vw,260px); height:1px; background:var(--line);
}
.hud__progress span{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--gold-soft),var(--gold));
}

/* ============================================================
   OUTRO / PRODUCT
   ============================================================ */
#outro{
  position:relative; z-index:10;
  background:
    radial-gradient(120% 80% at 50% 0%, #131316 0%, var(--bg) 46%),
    var(--bg);
  padding:clamp(90px,12vw,180px) clamp(20px,5vw,80px) 0;
}
.eyebrow{
  display:block; font-size:11px; letter-spacing:.42em; text-transform:uppercase;
  color:var(--gold); margin-bottom:30px;
}
.outro__intro{ max-width:1100px; margin:0 auto; }
.outro__head{
  font-size:clamp(30px,5vw,72px); line-height:1.08; letter-spacing:-.01em; color:#fff;
}
.outro__head em{ font-style:italic; color:var(--gold); }

/* gallery */
.gallery{
  display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(12px,1.6vw,22px);
  max-width:1240px; margin:clamp(64px,9vw,130px) auto 0;
}
.gallery__item{ position:relative; overflow:hidden; background:var(--bg-2); }
.gallery__item[data-span="wide"]{ grid-column:1 / -1; }
.gallery__item img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(.15) contrast(1.04);
  transition:transform 1.2s var(--ease), filter 1.2s var(--ease);
}
.gallery__item[data-span="wide"] img{ aspect-ratio:16/7; }
.gallery__item:not([data-span]) img{ aspect-ratio:4/5; }
.gallery__item:hover img{ transform:scale(1.045); filter:grayscale(0) contrast(1.08); }
.gallery__item figcaption{
  position:absolute; left:18px; bottom:16px;
  font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:var(--ink-soft);
  text-shadow:0 2px 12px #000;
}

/* specs */
.specs{
  max-width:1240px; margin:clamp(70px,10vw,140px) auto 0;
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
}
.spec{
  padding:34px 8px 30px; border-bottom:1px solid var(--line);
}
.spec:not(:nth-child(3n)){ border-right:1px solid var(--line-2); }
.spec__k{
  display:block; font-size:10px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--gold-soft); margin-bottom:14px;
}
.spec__v{
  display:block; font-family:var(--serif); font-size:clamp(18px,1.7vw,23px);
  line-height:1.4; color:var(--ink);
}

/* reserve */
.reserve{
  max-width:1240px; margin:clamp(80px,11vw,150px) auto 0;
  display:grid; grid-template-columns:.7fr 1.3fr; gap:clamp(30px,5vw,70px);
  align-items:center;
  padding:clamp(36px,5vw,64px);
  border:1px solid var(--line);
  background:linear-gradient(160deg, rgba(255,255,255,.025), transparent 60%);
}
.reserve__price{
  font-family:var(--serif); font-size:clamp(46px,6vw,92px); color:#fff; line-height:.9;
}
.reserve__body h3{ font-size:clamp(26px,3vw,40px); color:#fff; margin-bottom:14px; }
.reserve__body p{ color:var(--ink-soft); max-width:46ch; line-height:1.7; font-size:15px; }
.reserve__sizes{ display:flex; flex-wrap:wrap; gap:10px; margin:28px 0 26px; }
.size{
  min-width:50px; padding:11px 4px; background:transparent;
  border:1px solid var(--line); color:var(--ink-soft);
  font-family:var(--sans); font-size:12px; letter-spacing:.12em; cursor:pointer;
  transition:.28s var(--ease);
}
.size:hover{ border-color:var(--ink-faint); color:var(--ink); }
.size.is-active{ background:var(--ink); border-color:var(--ink); color:#000; }
.btn-reserve{
  appearance:none; border:none; cursor:pointer;
  background:var(--gold); color:#0a0a0a;
  font-family:var(--sans); font-weight:500; font-size:12.5px;
  letter-spacing:.2em; text-transform:uppercase;
  padding:17px 30px; border-radius:44px;
  transition:.32s var(--ease);
}
.btn-reserve:hover{ background:#fff; transform:translateY(-2px); box-shadow:0 14px 40px rgba(0,0,0,.5); }
.btn-reserve.is-done{ background:transparent; color:var(--gold); border:1px solid var(--gold-soft); }

/* footer */
.foot{
  max-width:1240px; margin:clamp(90px,12vw,170px) auto 0;
  padding:clamp(50px,6vw,80px) 0 46px;
  border-top:1px solid var(--line);
}
.foot__brand{
  font-size:clamp(64px,15vw,200px); line-height:.8; color:#fff;
  letter-spacing:.04em; opacity:.94; margin-bottom:60px;
}
.foot__cols{
  display:grid; grid-template-columns:repeat(3,1fr); gap:30px; max-width:680px;
}
.foot__cols > div{ display:flex; flex-direction:column; gap:13px; }
.foot__cols span{
  font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold-soft);
  margin-bottom:6px;
}
.foot__cols a{
  color:var(--ink-soft); text-decoration:none; font-size:13px; transition:color .3s;
}
.foot__cols a:hover{ color:var(--ink); }
.foot__base{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  margin-top:64px; padding-top:26px; border-top:1px solid var(--line-2);
  font-size:11px; letter-spacing:.16em; color:var(--ink-faint); text-transform:uppercase;
}

/* reveal on scroll */
.reveal{ opacity:0; transform:translateY(40px); transition:opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:760px){
  #sequence{ height:700vh; }
  .panel{ width:88vw; }
  .panel[data-align="right"]{ text-align:left; }
  .panel[data-align="right"] .panel__body{ margin-left:0; }
  .panel__body{ max-width:34ch; }
  .topbar__nav a:not(.topbar__cta){ display:none; }
  .gallery{ grid-template-columns:1fr; }
  .specs{ grid-template-columns:1fr 1fr; }
  .spec:not(:nth-child(3n)){ border-right:none; }
  .spec:nth-child(odd){ border-right:1px solid var(--line-2); }
  .reserve{ grid-template-columns:1fr; }
  .hud__label--l{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  *{ scroll-behavior:auto; }
  .scrollcue i::after{ animation:none; }
}