@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');

:root {
  color-scheme: dark;
  --ink: #f5f2eb;
  --muted: rgba(245, 242, 235, 0.62);
  --line: rgba(245, 242, 235, 0.2);
  --acid: #d5ff3f;
  --night: #050608;
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--night);
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; overflow: hidden; background: var(--night); }
body { min-height: 100svh; }
button { font: inherit; }

.stage, .scene { position: relative; width: 100%; height: 100svh; min-height: 560px; overflow: hidden; background: var(--night); }
.scene { isolation: isolate; }
.scene::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  opacity: .32;
  background: radial-gradient(ellipse at center, transparent 48%, rgba(0,0,0,.52) 100%);
  mix-blend-mode: multiply;
}
.scene::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  opacity: .11;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.photo, .photo img, .cover, .cover > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.photo { overflow: hidden; background: #090a0c; }
.photo img, .cover > img { display: block; object-fit: cover; object-position: center; user-select: none; -webkit-user-drag: none; }
.photo-message { position: absolute; inset: 0; display: grid; place-items: center; padding: 8vw; color: var(--ink); background: radial-gradient(circle at center, #1b2026 0%, #07080a 72%); font: 700 clamp(28px, 5vw, 86px)/.95 'Barlow Condensed', sans-serif; letter-spacing: .035em; text-align: center; text-wrap: balance; text-shadow: 0 5px 30px rgba(0,0,0,.65); }
.photo--after { z-index: 1; opacity: .08; transform: scale(1.055); filter: blur(20px) saturate(.65) brightness(.7); transition: opacity .12s linear, transform .12s linear, filter .12s linear; }
.stage[data-state='revealed'] .photo--after { opacity: 1; transform: scale(1); filter: blur(0) saturate(1) brightness(1); }

.cover { z-index: 5; background: #07080a; overflow: hidden; will-change: transform, clip-path; transition: opacity .12s linear; }
.stage[data-state='revealed'] .cover { opacity: 0; pointer-events: none; }
.cover-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.15), transparent 45%, rgba(0,0,0,.35)); }
.rip-glow { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; z-index: 2; opacity: 0; pointer-events: none; transform: translateX(-50%) rotate(1deg); background: linear-gradient(180deg, transparent, var(--acid) 18%, rgba(213,255,63,.1) 50%, var(--acid) 82%, transparent); filter: blur(3px); }
.stage.is-armed .cover { animation: cover-rip 1.55s cubic-bezier(.7,0,.18,1) 3.65s forwards; }
.stage.is-armed .cover-shade { animation: shade-out 1.15s ease 3.82s forwards; }
.stage.is-armed .rip-glow { animation: seam-flash .8s ease 3.62s both; }

.hud { position: absolute; z-index: 9; display: flex; align-items: center; gap: 12px; color: var(--muted); font: 500 10px/1 'Barlow Condensed', sans-serif; letter-spacing: .2em; text-transform: uppercase; pointer-events: none; transition: opacity .45s ease, transform .45s ease; }
.hud--top { top: 28px; left: 30px; }
.hud--bottom { right: 30px; bottom: 28px; }
.hud-mark { display: inline-grid; place-items: center; width: 27px; height: 27px; border: 1px solid var(--acid); color: var(--acid); font-weight: 700; letter-spacing: .03em; }
.hud-line { width: 34px; height: 1px; background: var(--line); }
.stage[data-state='revealed'] .hud--top { opacity: 0; transform: translateY(-8px); }
.stage[data-state='revealed'] .hud--bottom { opacity: .72; }

.reveal-button { position: absolute; z-index: 12; top: 50%; left: 50%; width: 184px; height: 184px; display: grid; place-items: center; border: 1px solid rgba(213,255,63,.72); border-radius: 50%; color: var(--ink); background: rgba(7,8,10,.26); backdrop-filter: blur(9px); cursor: pointer; transform: translate(-50%, -50%); transition: color .3s ease, background .3s ease, border-color .45s ease, opacity .12s linear; }
.reveal-button::before { content: ''; position: absolute; left: -145px; top: 50%; width: 150px; height: 20px; border-radius: 50%; opacity: 0; pointer-events: none; transform: translateY(-50%) rotate(-18deg); background: linear-gradient(90deg, transparent, rgba(213,255,63,.42), transparent); filter: blur(7px); }
.reveal-button:hover { color: var(--acid); background: rgba(7,8,10,.52); border-color: var(--acid); }
.reveal-button:focus-visible { outline: 2px solid var(--acid); outline-offset: 6px; }
.button-ring { position: absolute; inset: 10px; border: 1px solid rgba(245,242,235,.22); border-radius: 50%; transition: transform .5s ease, border-color .3s ease; }
.reveal-button:hover .button-ring { transform: rotate(45deg) scale(.92); border-color: rgba(213,255,63,.65); }
.button-label { position: relative; z-index: 1; max-width: 90px; font: 600 17px/1.05 'Barlow Condensed', sans-serif; letter-spacing: .05em; text-align: center; text-transform: uppercase; transition: opacity .2s ease, transform .2s ease; }
.bat-mark { position: absolute; z-index: 2; width: 104px; opacity: 0; transform: scale(.15); }
.bat-mark svg { display: block; width: 100%; height: auto; fill: var(--acid); filter: drop-shadow(0 0 13px rgba(213,255,63,.5)); }
.bat-cut { fill: rgba(7,8,10,.9); }
.stage.is-armed .reveal-button { animation: bat-flight 3.5s cubic-bezier(.2,.8,.25,1) forwards; border-color: transparent; background: transparent; pointer-events: none; }
.stage.is-armed .reveal-button::before { animation: trail-fade 3.1s ease .42s both; }
.stage.is-armed .button-label { opacity: 0; transform: scale(.5); transition-duration: .35s; }
.stage.is-armed .button-ring { opacity: 0; transform: scale(1.25); }
.stage.is-armed .bat-mark { animation: bat-appear .55s cubic-bezier(.2,.8,.25,1) .12s both; }
.stage[data-state='revealed'] .reveal-button { opacity: 1; pointer-events: auto; }

.flash { position: absolute; z-index: 11; inset: -10%; background: var(--acid); opacity: 0; pointer-events: none; mix-blend-mode: screen; }
.stage.is-armed .flash { animation: flash .46s ease 2.08s both; }

@keyframes bat-flight { 0%, 10% { transform: translate(-50%, -50%) scale(1) rotate(0deg); } 22% { transform: translate(-50%, -58%) scale(1.18) rotate(-8deg); } 55% { transform: translate(8vw, -22vh) scale(.82) rotate(4deg); } 78% { transform: translate(29vw, -38vh) scale(.58) rotate(10deg); } 92%, 100% { transform: translate(36vw, -42vh) scale(.5) rotate(14deg); } }
@keyframes bat-appear { 0% { opacity: 0; transform: scale(.15) rotate(-12deg); } 55% { opacity: 1; transform: scale(1.18) rotate(3deg); } 100% { opacity: 1; transform: scale(1) rotate(0deg); } }
@keyframes trail-fade { 0%, 18% { opacity: 0; transform: translateY(-50%) rotate(-18deg) scaleX(.2); } 36% { opacity: .8; } 100% { opacity: 0; transform: translateY(-50%) rotate(-18deg) scaleX(1.6); } }
@keyframes cover-rip {
  0% { clip-path: inset(0); transform: translate(0) rotate(0deg) scale(1); }
  28% { clip-path: polygon(0 0,100% 0,99% 20%,100% 40%,98% 60%,100% 80%,99% 100%,0 100%,1% 80%,0 60%,2% 40%,0 20%); transform: translate(0) rotate(0deg) scale(1.01); }
  100% { clip-path: polygon(0 0,100% 0,99% 20%,100% 40%,98% 60%,100% 80%,99% 100%,0 100%,1% 80%,0 60%,2% 40%,0 20%); transform: translateY(-116%) rotate(-5deg) scale(1.04); }
}
@keyframes shade-out { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes seam-flash { 0%,100% { opacity: 0; } 25% { opacity: .9; } 60% { opacity: .2; } }
@keyframes flash { 0%, 100% { opacity: 0; } 20% { opacity: .14; } 45% { opacity: .42; } 65% { opacity: 0; } }

@media (max-width: 600px) {
  .stage, .scene { min-height: 480px; }
  .hud--top { top: 18px; left: 18px; }
  .hud--bottom { right: 18px; bottom: 18px; }
  .hud-copy { font-size: 9px; }
  .reveal-button { width: 158px; height: 158px; }
  .button-label { font-size: 15px; }
  @keyframes bat-flight { 0%, 10% { transform: translate(-50%, -50%) scale(1); } 22% { transform: translate(-50%, -58%) scale(1.12) rotate(-8deg); } 55% { transform: translate(7vw, -21vh) scale(.78) rotate(4deg); } 78% { transform: translate(25vw, -36vh) scale(.55) rotate(10deg); } 92%, 100% { transform: translate(31vw, -40vh) scale(.47) rotate(14deg); } }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}