/* ===== THE RESERVE, Interactive Catalogue · ENTRY (level 01) ===== */
:root{
  --bg:#0d0906; --bg-1:#14100c;
  --gold:#b1974a; --gold-soft:rgba(177,151,74,.14); --gold-line:rgba(177,151,74,.45);
  --text:#F1ECE1; --text-1:#9d9789; --text-2:#5a564c;
  --serif:'EB Garamond','Cormorant Garamond',Georgia,serif;
  --sans:'Helvetica Neue','Arimo',Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }
html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body{ background:var(--bg); color:var(--text); font-family:var(--sans); overflow:hidden; }
a{ color:inherit; text-decoration:none; }
img{ display:block; }

/* ===== STAGE ===== */
.stage{ position:relative; width:100%; height:100vh; height:100dvh; min-height:560px; overflow:hidden; display:flex; align-items:center; }

/* ambient media, parallax wrapper (oversized so translate never reveals edges) + ken-burns image */
.stage__media{ position:absolute; inset:-5%; z-index:0; will-change:transform; }
.stage__img{ width:100%; height:100%; object-fit:cover; transform-origin:60% 40%; animation:kenburns 34s var(--ease) infinite alternate; }
.stage__vid{ width:100%; height:100%; object-fit:cover; display:block; }
/* slow cross-fade to a warm interior — teases the craft from the entry */
.stage__interior{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0;
  animation:stageInterior 22s var(--ease) infinite; }
@keyframes stageInterior{ 0%,38%{opacity:0} 54%,78%{opacity:.6} 96%,100%{opacity:0} }
@media(prefers-reduced-motion:reduce){ .stage__interior{ animation:none; opacity:0; } }
@keyframes kenburns{ from{ transform:scale(1.06) } to{ transform:scale(1.2) translate(-2%,-1.5%) } }

.stage__scrim{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(13,9,6,.62) 0%, rgba(13,9,6,.22) 34%, rgba(13,9,6,.5) 66%, rgba(13,9,6,.86) 100%),
    radial-gradient(130% 90% at 50% 42%, transparent 38%, rgba(13,9,6,.55) 100%);
}
.stage__grain{ position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.05; mix-blend-mode:normal;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%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");
}

/* ===== TOP BAR ===== */
.top{ position:absolute; top:0; left:0; right:0; z-index:5;
  display:flex; align-items:center; justify-content:space-between;
  padding:clamp(1.3rem,3vw,2.1rem) clamp(1.4rem,6vw,3.2rem);
  padding-top:calc(clamp(1.3rem,3vw,2.1rem) + env(safe-area-inset-top));
}
.top__mark{ font-family:var(--sans); font-weight:600; font-size:clamp(.72rem,1.6vw,.82rem); letter-spacing:.34em; color:var(--text); }
.top__by{ display:block; font-family:var(--sans); font-weight:500; font-size:.56rem; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); margin-top:.42rem; }

.sound{ display:inline-flex; align-items:center; gap:.7rem; background:none; border:0; cursor:pointer;
  font-family:var(--sans); font-weight:500; font-size:.58rem; letter-spacing:.24em; text-transform:uppercase; color:var(--text-1);
  transition:color .3s; -webkit-tap-highlight-color:transparent; }
.sound:hover{ color:var(--text); }
.sound__eq{ display:inline-flex; align-items:flex-end; gap:2px; height:15px; }
.sound__eq i{ width:2px; height:4px; background:var(--text-2); border-radius:1px; transition:background .3s; }
.sound.on .sound__eq i{ background:var(--gold); animation:eq .9s ease-in-out infinite; }
.sound.on .sound__eq i:nth-child(1){ animation-delay:0s }
.sound.on .sound__eq i:nth-child(2){ animation-delay:.12s }
.sound.on .sound__eq i:nth-child(3){ animation-delay:.28s }
.sound.on .sound__eq i:nth-child(4){ animation-delay:.16s }
.sound.on .sound__eq i:nth-child(5){ animation-delay:.34s }
@keyframes eq{ 0%,100%{ height:4px } 50%{ height:15px } }

/* ===== ENTRY ===== */
.entry{ position:relative; z-index:3; width:100%; padding:0 clamp(1.5rem,7vw,6rem); max-width:1160px; }
.entry__eye{ font-family:var(--sans); font-weight:500; font-size:clamp(.6rem,1.4vw,.74rem); letter-spacing:.26em; text-transform:uppercase; color:var(--gold); margin-bottom:clamp(1.3rem,3.2vh,2.1rem); }
.entry__tag{ font-family:var(--serif); font-weight:300; font-size:clamp(3rem,9.5vw,8rem); line-height:.96; letter-spacing:-.01em; color:var(--text); }
.entry__tag span{ display:block; }
.entry__tag em{ font-style:italic; font-weight:400; color:var(--gold); }

/* ===== PATHS ===== */
.paths{ display:flex; gap:clamp(.9rem,1.5vw,1.3rem); margin-top:clamp(2.4rem,5.5vh,4rem); flex-wrap:wrap; }
.path{ position:relative; display:flex; flex-direction:column; gap:.34rem;
  padding:clamp(1.3rem,2vw,1.7rem) clamp(1.5rem,2.4vw,2rem);
  min-width:min(340px,82vw); border:1px solid rgba(255,255,255,.16); border-radius:9px;
  background:rgba(255,255,255,.035); overflow:hidden;
  transition:border-color .45s var(--ease), background .45s var(--ease), transform .45s var(--ease);
  -webkit-tap-highlight-color:transparent; }
.path::after{ content:""; position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--gold); transition:width .5s var(--ease); }
.path:hover, .path:focus-visible{ border-color:var(--gold-line); background:rgba(177,151,74,.07); transform:translateY(-3px); outline:none; }
.path:hover::after, .path:focus-visible::after{ width:100%; }
.path--primary{ border-color:var(--gold-line); background:rgba(177,151,74,.11); }
.path--primary:hover{ background:rgba(177,151,74,.17); }
.path__k{ font-family:var(--sans); font-weight:500; font-size:.56rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }
.path__name{ font-family:var(--serif); font-weight:400; font-size:clamp(1.5rem,3.2vw,2.1rem); line-height:1.05; color:var(--text); }
.path__meta{ font-family:var(--sans); font-weight:500; font-size:.62rem; letter-spacing:.08em; color:var(--text-1); }
.path__arw{ position:absolute; right:clamp(1.5rem,2.4vw,2rem); top:50%; transform:translateY(-50%); color:var(--gold); font-size:1.1rem; transition:transform .45s var(--ease); }
.path:hover .path__arw{ transform:translateY(-50%) translateX(5px); }
.path__arw--play{ width:0; height:0; border-left:11px solid var(--gold); border-top:7px solid transparent; border-bottom:7px solid transparent; }
.path:hover .path__arw--play{ transform:translateY(-50%) scale(1.12); }

/* ===== FOOT ===== */
.foot{ position:absolute; left:0; right:0; bottom:clamp(1.1rem,3vh,1.9rem); z-index:3; text-align:center;
  padding-bottom:env(safe-area-inset-bottom); }
.foot__note{ font-family:var(--sans); font-weight:500; font-size:.56rem; letter-spacing:.18em; text-transform:uppercase; color:var(--text-2); }

/* ===== ENTER CHOREOGRAPHY ===== */
.r{ opacity:0; transform:translateY(20px); transition:opacity 1.1s var(--ease), transform 1.1s var(--ease); }
body.ready .r{ opacity:1; transform:none; }
.r1{ transition-delay:.25s } .r2{ transition-delay:.5s } .r3{ transition-delay:.66s }
.r4{ transition-delay:.82s } .r5{ transition-delay:1.1s } .r6{ transition-delay:1.25s } .r7{ transition-delay:1.5s }
/* subtle initial zoom settle */
.stage__media{ transform:scale(1.04); transition:transform 1.6s var(--ease); }
body.ready .stage__media{ transform:scale(1); }

/* ===== TRANSITION VEIL + TOAST ===== */
.veil{ position:absolute; inset:0; z-index:8; background:var(--bg); opacity:0; pointer-events:none; transition:opacity .6s var(--ease); }
.veil.show{ opacity:1; }
.toast{ position:absolute; z-index:9; left:50%; bottom:clamp(4rem,12vh,7rem); transform:translate(-50%,12px);
  background:rgba(15,15,13,.92); border:1px solid var(--gold-line); border-radius:100px;
  padding:.75rem 1.4rem; font-family:var(--sans); font-weight:500; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text);
  opacity:0; pointer-events:none; transition:opacity .4s var(--ease), transform .4s var(--ease); white-space:nowrap; }
.toast.show{ opacity:1; transform:translate(-50%,0); }

/* ===== RESPONSIVE ===== */
@media(max-width:720px){
  .paths{ flex-direction:column; width:100%; }
  .path{ min-width:0; width:100%; }
  .entry__tag{ font-size:clamp(3rem,15vw,5rem); }
  .foot__note{ font-size:.52rem; letter-spacing:.14em; }
}
@media(max-width:400px){
  .top__by{ display:none; }
  .entry{ padding:0 1.4rem; }
}
@media(prefers-reduced-motion:reduce){
  .stage__img{ animation:none; }
  .r{ transition-duration:.4s; }
  .sound.on .sound__eq i{ animation:none; height:10px; }
}

/* ── entry top-bar "Download catalogue" button ── */
.top__brand{ margin-right:auto; }
.top__dl{ font-family:var(--sans); font-weight:500; font-size:.56rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold);
  border:1px solid var(--gold-line); border-radius:100px; padding:.55rem 1.1rem; margin-left:1.3rem; white-space:nowrap; transition:.25s; }
.top__dl:hover{ background:var(--gold-soft); }
@media(max-width:560px){ .top__by{ display:none; } .top__dl{ margin-left:.8rem; padding:.5rem .85rem; letter-spacing:.12em; } }

/* brand palette · single oxblood touch on the material reveal */
:root{ --wine:#743430; }
.hs__r{ border-top-color:rgba(116,53,51,.55); }

/* entry brand logo (Reserve, cream on dark) */
.top__logo{ height:26px; width:auto; display:block; }


/* branded text selection (replaces default browser blue) */
::selection{ background:#b1974a; color:#2b1f15; }
::-moz-selection{ background:#b1974a; color:#2b1f15; }

.top__home{ font-family:var(--sans); font-weight:500; font-size:.56rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); text-decoration:none; white-space:nowrap; margin-left:1.1rem; transition:opacity .3s; } .top__home:hover{ opacity:.65; }

/* Sound toggle hidden until the real brand score is supplied */
.sound{ display:none !important; }

/* Main-site link shown as the Cavalier wordmark (matches project page) */
.top__home--cav{ display:inline-flex; align-items:center; padding:0; }
.top__cavlogo{ height:19px; width:auto; display:block; filter:brightness(0) invert(1); }