@font-face { font-family: "Anton"; src: url("../assets/fonts/anton.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "Inter"; src: url("../assets/fonts/inter-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../assets/fonts/inter-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../assets/fonts/inter-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }

:root {
  --black: #050505;
  --ink: #111111;
  --white: #F4F1EA;
  --orange: #FF6A13;
  --orange-deep: #C94A06;
  --title: "Anton", "Impact", "Arial Narrow", sans-serif;
  --text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: var(--black); color: var(--white); overflow: hidden; }
body {
  font-family: var(--text);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  overscroll-behavior: none;
  user-select: none;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img { display: block; }

#app { position: fixed; inset: 0; overflow: hidden; background: var(--black); }

/* ---------- ATO 0 */
#intro {
  position: fixed; inset: 0; z-index: 30;
  display: grid; place-items: center; align-content: center; gap: 7vh;
  padding: 24px; text-align: center;
  background: radial-gradient(120% 70% at 50% 60%, #140a04 0%, var(--black) 62%);
}
.intro-kicker {
  font: 600 12px/1 var(--text); letter-spacing: .5em; color: var(--orange); opacity: .9;
  padding-left: .5em;
}
.intro-title {
  font: 400 clamp(38px, 12vw, 76px)/.95 var(--title); letter-spacing: .01em; text-transform: uppercase;
}
.intro-title span { color: var(--orange); }
#start {
  position: relative; width: 132px; height: 132px; border-radius: 50%;
  display: grid; place-items: center;
}
#start svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
#start .ring-bg { fill: none; stroke: rgba(244,241,234,.14); stroke-width: 1.5; }
#start .ring-load { fill: none; stroke: var(--orange); stroke-width: 2.5; stroke-linecap: round;
  stroke-dasharray: 339.3; stroke-dashoffset: 339.3; transition: stroke-dashoffset .3s; }
#start span { font: 400 17px/1 var(--title); letter-spacing: .22em; padding-left: .22em; }
#start::before {
  content: ""; position: absolute; inset: -14px; border-radius: 50%;
  border: 1px solid rgba(255,106,19,.45); animation: pulse 2.2s ease-out infinite;
}
@keyframes pulse { 0% { transform: scale(.82); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
.intro-hint { font: 600 11px/1 var(--text); letter-spacing: .32em; text-transform: uppercase; opacity: .55;
  display: flex; align-items: center; gap: 10px; }
.intro-hint .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }

/* ---------- ATO 1 */
#kick { position: fixed; inset: 0; z-index: 10; background: var(--black); overflow: hidden; visibility: hidden; }

/* ---------- ATOS 2 a 7 */
#act2 {
  position: fixed; inset: 0; z-index: 20; background: var(--black); overflow: hidden;
  visibility: hidden; clip-path: circle(0px at 50% 50%);
}
.layer { position: absolute; inset: 0; overflow: hidden; visibility: hidden; }
.layer img { width: 100%; height: 100%; object-fit: cover; }

/* Ato 2 */
#s-reveal .bg { position: absolute; inset: -6%; }
#s-reveal .bg img { object-position: 50% 22%; filter: contrast(1.15) brightness(.55); }
#s-reveal .tint {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,5,5,.25) 0%, rgba(5,5,5,.1) 40%, rgba(201,74,6,.35) 78%, rgba(5,5,5,.92) 100%);
}
.name {
  position: absolute; left: 6vw; right: 6vw; bottom: 17vh;
  display: flex; flex-direction: column; font: 400 clamp(64px, 25vw, 168px)/.84 var(--title);
  letter-spacing: -.005em;
}
.name span { display: block; }
.name .n2 { color: var(--orange); }
.rotator { position: absolute; left: 6vw; bottom: 9vh; height: 20px; overflow: hidden; }
.rotator span {
  position: absolute; left: 0; top: 0; white-space: nowrap;
  font: 800 14px/20px var(--text); letter-spacing: .42em; opacity: 0;
}

/* Ato 3 */
.shot { position: absolute; inset: 0; overflow: hidden; visibility: hidden; background: var(--black); }
.shot .ph { position: absolute; inset: 0; will-change: transform; }
.shot .word {
  position: absolute; left: 5vw; bottom: 11vh; font: 400 clamp(56px, 20vw, 140px)/.9 var(--title);
  color: transparent; -webkit-text-stroke: 1.5px var(--white); letter-spacing: .01em;
}
.shot .word.fill { color: var(--orange); -webkit-text-stroke: 0; }
.shot .cap {
  position: absolute; left: 5vw; right: 5vw; bottom: 8vh; font: 800 12px/1.5 var(--text);
  letter-spacing: .3em; color: var(--white);
}
.shot .cap::before { content: ""; display: block; width: 36px; height: 3px; background: var(--orange); margin-bottom: 14px; }
.shot .num {
  position: absolute; left: 5vw; top: calc(env(safe-area-inset-top) + 22px); font: 400 15px/1 var(--title);
  letter-spacing: .2em; color: var(--orange);
}
.shot .vignette { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,5,5,.35), transparent 30%, transparent 55%, rgba(5,5,5,.85)); }
.shot.frame { display: grid; place-items: center; }
.shot.frame .ph { position: relative; inset: auto; width: 78vw; height: 58vh; border: 1px solid rgba(244,241,234,.2); }

/* Ato 4 */
#s-who { background: var(--black); }
#s-who .slit { position: absolute; left: 50%; top: 14vh; width: 44vw; height: 46vh; transform: translateX(-50%); overflow: hidden; }
#s-who .slit .ph { position: absolute; inset: 0; visibility: hidden; }
#s-who .slit img { filter: grayscale(1) contrast(1.1); }
.who-words p {
  position: absolute; left: 0; right: 0; bottom: 20vh; text-align: center; visibility: hidden;
  font: 400 clamp(40px, 13vw, 96px)/1 var(--title); letter-spacing: .02em;
}
.who-words p::after { content: ""; display: block; width: 44px; height: 3px; margin: 18px auto 0; background: var(--orange); }
#s-who .but {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; visibility: hidden;
  font: 600 clamp(18px, 5.4vw, 30px)/1 var(--text); letter-spacing: .34em; padding-left: .34em;
}
#s-who .brother {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; visibility: hidden;
  font: 400 clamp(110px, 36vw, 300px)/1 var(--title); color: var(--orange); letter-spacing: -.01em;
}
#s-who .brother span { color: var(--white); }

/* Ato 5 */
#s-msg { background: radial-gradient(90% 60% at 50% 40%, #1a0d05 0%, var(--black) 70%); }
.msg-box { position: absolute; left: 8vw; right: 8vw; top: 50%; transform: translateY(-50%); }
.msg-box p {
  position: absolute; left: 0; right: 0; top: 50%; visibility: hidden;
  font: 600 clamp(24px, 7.4vw, 42px)/1.26 var(--text); letter-spacing: -.01em; color: var(--white);
}
.msg-box p .w { display: inline-block; white-space: pre; }
.msg-box p.sig-line .sig { display: block; margin-top: 26px; font: 400 16px/1 var(--title); letter-spacing: .3em; color: var(--orange); }

/* Ato 6 */
#s-energy .cuts .ph { position: absolute; inset: 0; visibility: hidden; }
#s-energy .cuts img { filter: grayscale(1) contrast(1.2) brightness(.7); }
#s-energy .cuts .ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(201,74,6,.55), rgba(5,5,5,.2)); mix-blend-mode: multiply; }
#s-energy .eword {
  position: absolute; left: 0; right: 0; top: 50%; text-align: center; opacity: 0;
  font: 400 clamp(46px, 15.5vw, 130px)/1 var(--title); letter-spacing: .01em; color: var(--white);
  mix-blend-mode: normal;
}

/* Ato 7 */
#s-final { background: var(--black); }
.final-ball { position: absolute; width: 56px; height: 56px; left: 50%; top: 34vh; margin-left: -28px; }
.final-text { position: absolute; left: 0; right: 0; top: 48vh; text-align: center; padding: 0 6vw; }
.f-name { font: 400 clamp(40px, 13vw, 96px)/.95 var(--title); letter-spacing: .02em; visibility: hidden; }
.f-line { margin-top: 18px; font: 800 clamp(13px, 3.9vw, 20px)/1.4 var(--text); letter-spacing: .24em; color: var(--orange); visibility: hidden; }
.f-date { margin-top: 26px; font: 600 12px/1 var(--text); letter-spacing: .5em; opacity: .5; visibility: hidden; padding-left: .5em; }
#replay {
  position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 10vh); transform: translateX(-50%);
  padding: 14px 22px; font: 600 11px/1 var(--text); letter-spacing: .34em; padding-left: calc(22px + .34em);
  border: 1px solid rgba(244,241,234,.25); border-radius: 999px; visibility: hidden;
}

.credit {
  position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 2.2vh); transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px; white-space: nowrap; text-decoration: none; color: var(--white);
  font: 400 10px/1 var(--text); letter-spacing: .12em; opacity: 0; visibility: hidden;
}
.credit img { width: auto; height: 36px; object-fit: contain; }
.credit b { font-weight: 800; color: #FFC21A; }

.grain {
  position: absolute; inset: -50%; pointer-events: none; opacity: .07; z-index: 5;
  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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

#flash { position: fixed; inset: 0; z-index: 40; background: #fff; opacity: 0; pointer-events: none; }

#mute {
  position: fixed; z-index: 50; right: 14px; top: calc(env(safe-area-inset-top) + 14px);
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(5,5,5,.35); border: 1px solid rgba(244,241,234,.18);
}
#mute[hidden] { display: none; }
#mute svg { width: 18px; height: 18px; fill: none; stroke: var(--white); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#mute .spk { fill: var(--white); stroke: none; }
#mute .x { display: none; }
#mute.off .wave { display: none; }
#mute.off .x { display: inline; }

#paused { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(5,5,5,.8); }
#paused[hidden] { display: none; }
#paused button { font: 400 18px/1 var(--title); letter-spacing: .2em; padding: 18px 26px; border: 1px solid var(--orange); border-radius: 999px; }

#rotate-hint { display: none; }
@media (orientation: landscape) and (max-height: 500px) {
  #rotate-hint {
    display: block; position: fixed; z-index: 55; left: 50%; bottom: 10px; transform: translateX(-50%);
    font: 600 10px/1 var(--text); letter-spacing: .2em; text-transform: uppercase; opacity: .5;
  }
  .name { bottom: 14vh; font-size: 21vh; }
}