:root {
  --ivory: #f3eee4; --ink: #11120f; --line: rgba(243,238,228,.55);
  --edge: clamp(24px,3.7vw,64px); --x: 72%; --y: 48%;
  --radius: clamp(150px,17vw,310px); --serif: Georgia,"Times New Roman",serif;
  --sans: Arial,Helvetica,sans-serif;
}
* { box-sizing: border-box; }
html,body { width:100%; height:100%; overflow:hidden; }
body { margin:0; color:var(--ivory); background:var(--ink); font-family:var(--sans); }
button { font:inherit; }
::selection { color:var(--ink); background:var(--ivory); }
:focus-visible { outline:2px solid var(--ivory); outline-offset:5px; }

.hero {
  position:relative; width:100%; height:100vh; height:100svh; min-height:560px;
  overflow:hidden; isolation:isolate; background:#171814; cursor:none; touch-action:none;
}
.scene,.shade,.grain { position:absolute; inset:0; }
.scene { width:100%; height:100%; object-fit:cover; object-position:center 52%; user-select:none; -webkit-user-drag:none; }
.scene--before { animation:image-in 1.7s cubic-bezier(.18,.8,.2,1) both; }
.scene--after {
  z-index:1;
  -webkit-mask-image:radial-gradient(circle var(--radius) at var(--x) var(--y),#000 0,#000 calc(100% - 34px),transparent 100%);
  mask-image:radial-gradient(circle var(--radius) at var(--x) var(--y),#000 0,#000 calc(100% - 34px),transparent 100%);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; transition:opacity .55s ease;
}
.scene--after img { width:100%; height:100%; object-fit:cover; object-position:center 52%; }
.hero.is-resolved .scene--after { -webkit-mask-image:none; mask-image:none; }
.hero.is-unbuilt .scene--after { opacity:0; }
.shade {
  z-index:2; pointer-events:none;
  background:linear-gradient(90deg,rgba(8,9,7,.84),rgba(8,9,7,.56) 46%,rgba(8,9,7,.12) 78%),
  linear-gradient(0deg,rgba(8,9,7,.5),transparent 46%); transition:opacity .8s ease;
}
.hero.is-resolved .shade { opacity:.76; }
.grain {
  z-index:3; opacity:.13; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
.brand {
  position:absolute; z-index:6; top:clamp(24px,4vh,44px); left:var(--edge);
  display:flex; align-items:center; gap:10px; opacity:0; animation:copy-in .8s .2s ease forwards;
}
.brand span { font-size:12px; font-weight:700; letter-spacing:.25em; }
.brand i { width:24px; height:1px; background:currentColor; opacity:.5; }
.brand small { font-size:8px; letter-spacing:.18em; opacity:.68; }
.copy {
  position:absolute; z-index:6; left:var(--edge); top:50%; width:min(790px,85vw);
  transform:translateY(-47%);
}
.eyebrow {
  margin:0 0 clamp(20px,3vh,34px); font-size:clamp(8px,.65vw,11px); font-weight:700;
  letter-spacing:.25em; text-transform:uppercase; opacity:0; animation:copy-in .8s .35s ease forwards;
}
h1 { margin:0; font:400 clamp(76px,10.5vw,172px)/.79 var(--serif); letter-spacing:-.072em; }
h1 span { display:block; opacity:0; transform:translateY(45px); animation:title-in 1.05s cubic-bezier(.16,.8,.24,1) forwards; }
h1 span:first-child { animation-delay:.42s; }
h1 span:last-child { animation-delay:.54s; }
.deck {
  width:min(430px,72vw); margin:clamp(28px,4vh,48px) 0 clamp(24px,3.5vh,38px);
  font:700 clamp(17px,1.35vw,22px)/1.48 var(--serif); opacity:0; animation:copy-in .8s .72s ease forwards;
}
.enter {
  display:inline-flex; min-width:235px; min-height:46px; padding:0; align-items:center;
  justify-content:space-between; gap:34px; border:0; border-bottom:1px solid var(--line);
  color:inherit; background:transparent; cursor:pointer; text-transform:uppercase;
  opacity:0; animation:copy-in .8s .84s ease forwards;
}
.enter-label { font-size:10px; font-weight:700; letter-spacing:.16em; }
.enter-icon { font-size:14px; transition:transform .45s ease; }
.enter:hover .enter-icon { transform:translateY(6px); }
.hero.is-resolved .enter-icon { transform:rotate(180deg); }
.lens {
  position:absolute; z-index:5; left:var(--x); top:var(--y); width:calc(var(--radius)*2); aspect-ratio:1;
  border:1px solid rgba(255,255,255,.62); border-radius:50%; transform:translate(-50%,-50%) scale(.92);
  pointer-events:none; box-shadow:inset 0 0 70px rgba(255,255,255,.07),0 0 0 1px rgba(0,0,0,.15);
  opacity:0; animation:lens-in .9s 1.05s ease forwards; transition:opacity .4s ease;
}
.lens::after { content:""; position:absolute; inset:-8px; border:1px solid rgba(255,255,255,.12); border-radius:inherit; }
.lens span {
  position:absolute; left:50%; top:50%; padding:7px 10px; transform:translate(-50%,-50%);
  color:var(--ink); background:var(--ivory); font-size:7px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
}
.hero.is-resolved .lens,.hero.is-unbuilt .lens { opacity:0; }
.hint,.index {
  position:absolute; z-index:6; bottom:clamp(22px,3.5vh,38px); margin:0;
  font-size:8px; letter-spacing:.18em; text-transform:uppercase; opacity:.72;
}
.hint { left:var(--edge); display:flex; align-items:center; gap:10px; }
.hint span { width:24px; height:1px; background:currentColor; animation:pulse 1.8s ease-in-out infinite; }
.index { right:var(--edge); }
.mobile-actions { display:none; }

@keyframes image-in { from { opacity:0; transform:scale(1.07); } to { opacity:1; transform:scale(1.01); } }
@keyframes copy-in { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@keyframes title-in { to { opacity:1; transform:none; } }
@keyframes lens-in { to { opacity:1; transform:translate(-50%,-50%) scale(1); } }
@keyframes pulse { 50% { transform:scaleX(.55); transform-origin:left; } }

@media (max-width:760px),(pointer:coarse) {
  .hero { cursor:auto; min-height:520px; }
  .scene,.scene--after img { object-position:58% center; }
  .shade { background:linear-gradient(0deg,rgba(8,9,7,.9),rgba(8,9,7,.54) 53%,rgba(8,9,7,.1) 90%),linear-gradient(90deg,rgba(8,9,7,.3),transparent); }
  .copy { top:auto; bottom:104px; width:calc(100% - var(--edge)*2); transform:none; }
  .eyebrow { margin-bottom:18px; }
  h1 { font-size:clamp(62px,20vw,92px); line-height:.82; }
  .deck { max-width:320px; margin:24px 0 20px; font-size:clamp(15px,4.2vw,18px); }
  .enter { min-width:min(235px,75vw); min-height:44px; }
  .lens,.hint,.index { display:none; }
  .scene--after { -webkit-mask-image:none; mask-image:none; opacity:0; transition:opacity .8s ease; }
  .hero.is-resolved .scene--after { opacity:1; }
  .mobile-actions {
    position:absolute; z-index:8; right:var(--edge); top:26px; display:flex; padding:3px;
    border:1px solid rgba(255,255,255,.32); border-radius:100px; background:rgba(8,9,7,.28); backdrop-filter:blur(10px);
  }
  .mobile-actions button {
    min-width:68px; min-height:38px; padding:0 12px; border:0; border-radius:100px;
    color:var(--ivory); background:transparent; font-size:8px; letter-spacing:.13em; text-transform:uppercase;
  }
  .mobile-actions button.is-active { color:var(--ink); background:var(--ivory); }
  .brand { top:30px; }
  .brand i,.brand small { display:none; }
}
@media (max-width:430px) {
  :root { --edge:20px; }
  .brand span { font-size:10px; }
  .mobile-actions { right:18px; }
  .copy { bottom:82px; }
  h1 { font-size:clamp(58px,19vw,80px); }
  .deck { margin-top:20px; }
  .enter-label { font-size:9px; }
}
@media (max-height:680px) and (min-width:761px) {
  .copy { transform:translateY(-43%); }
  .deck { margin:22px 0 18px; }
  h1 { font-size:clamp(70px,9.2vw,138px); }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
  .scene--before { transform:none; }
  .lens { opacity:1; transform:translate(-50%,-50%); }
}