/* ---- fonts: PP Neue Machina (assets/fonts) ---- */
@font-face{
  font-family:"PP Neue Machina";
  src:url("assets/fonts/PPNeueMachina-Regular.woff2") format("woff2"),
      url("assets/fonts/PPNeueMachina-Regular.otf") format("opentype");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"PP Neue Machina";
  src:url("assets/fonts/PPNeueMachina-Light.woff2") format("woff2"),
      url("assets/fonts/PPNeueMachina-Light.otf") format("opentype");
  font-weight:300; font-style:normal; font-display:swap;
}

:root{
  --pad:clamp(20px,4vw,56px);
  --fade:1600ms;
  --white:#ffffff;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased}
body{
  font-family:"PP Neue Machina",-apple-system,Helvetica,Arial,sans-serif;
  background:#0e0c0b; color:var(--white);
  min-height:100vh; overflow:hidden; position:relative;
}

/* ---- slideshow ---- */
.reel{position:fixed; inset:0; z-index:0}
.reel .slide{
  position:absolute; inset:0; opacity:0;
  background-size:cover; background-position:center;
  transition:opacity var(--fade) ease;
  will-change:opacity, transform;
}
.reel .slide.on{opacity:1}
.reel .slide.zoom{animation:ken 9s ease-out forwards}
@keyframes ken{from{transform:scale(1.04)}to{transform:scale(1.16)}}

.vignette{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 40%, rgba(0,0,0,0) 30%, rgba(0,0,0,.55) 100%),
    linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 60%, rgba(0,0,0,.7) 100%);
}

/* ---- HUD ---- */
.hud{position:fixed; left:0; right:0; z-index:3; display:flex; justify-content:space-between; align-items:center;
  padding:var(--pad); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--white)}
.top{top:0}
.bottom{bottom:0; flex-wrap:wrap; gap:14px}

/* ---- brand logo (top-left) ---- */
.brand{display:inline-flex; line-height:0}
.brand img{
  height:clamp(20px,2.4vw,30px); width:auto; display:block;
  /* svg artwork is black — render it white */
  filter:brightness(0) invert(1);
}

/* ---- center lockup ---- */
.center{position:relative; z-index:2; height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:0 24px}
.desc{
  max-width:680px; font-weight:300;
  font-size:clamp(18px,2vw,26px); line-height:1.4; letter-spacing:.01em;
  color:var(--white); text-shadow:0 4px 40px rgba(0,0,0,.55);
  animation:fade 1.6s .35s both;
}
@keyframes fade{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}

/* ---- follow button (bottom-left) ---- */
.ig{display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  color:var(--white); font-size:12px; letter-spacing:.2em; text-transform:uppercase; padding:12px 22px;
  border:1px solid rgba(255,255,255,.32); border-radius:999px; transition:background .4s, border-color .4s}
.ig:hover{background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.7)}
.ig-dot{width:7px; height:7px; border-radius:50%; background:var(--white); box-shadow:0 0 0 0 rgba(255,255,255,.6); animation:beat 2.6s infinite}
@keyframes beat{0%{box-shadow:0 0 0 0 rgba(255,255,255,.5)}70%{box-shadow:0 0 0 9px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}

/* ---- controls (bottom-center) ---- */
.controls{display:flex; align-items:center; gap:14px}
.controls button{
  background:none; border:none; color:var(--white); cursor:pointer; font-size:20px; line-height:1;
  width:34px; height:34px; border-radius:50%; opacity:.7; transition:opacity .3s, background .3s;
}
.controls button:hover{opacity:1; background:rgba(255,255,255,.12)}
#toggle{font-size:11px; letter-spacing:0}
.dots{display:flex; gap:9px; align-items:center}
.dots i{width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.32); cursor:pointer; transition:background .3s, transform .3s}
.dots i.on{background:var(--white); transform:scale(1.25)}

/* ---- address (bottom-right) ---- */
.addr{text-align:right; opacity:.85; line-height:1.8}
.addr a{color:var(--white); text-decoration:none; border-bottom:1px solid rgba(255,255,255,.4)}
.addr a:hover{border-color:var(--white)}

/* ---- top progress bar ---- */
.progress{position:fixed; top:0; left:0; height:2px; width:0; background:var(--white); z-index:4; opacity:.85}

@media (max-width:1120px){
  .bottom{flex-direction:column; align-items:center; justify-content:center; text-align:center}
  .addr{text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .reel .slide.zoom{animation:none}
  *{transition-duration:1ms!important}
}