:root{
  --bg:#080808;
  --paper:#f5f0e8;
  --red:#c50020;
  --red2:#ee2444;
  --gold:#c8aa72;
  --dur:14s;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;background:var(--bg)}
body{overflow:hidden;font-family:Inter,Arial,Helvetica,sans-serif;color:var(--paper)}
.reel{
  position:relative;width:100%;height:100%;min-height:100vh;overflow:hidden;
  background:
    radial-gradient(circle at 50% 120%,rgba(197,0,32,.18),transparent 42%),
    linear-gradient(180deg,#111 0,#060606 58%,#020202 100%);
  isolation:isolate;
}
.noise{
  position:absolute;inset:-50%;z-index:20;pointer-events:none;opacity:.055;
  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='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
  animation:noise .18s steps(2) infinite;
}
.spot{
  position:absolute;top:-28vh;width:24vw;min-width:260px;height:145vh;z-index:0;
  clip-path:polygon(46% 0,54% 0,100% 100%,0 100%);
  background:linear-gradient(to bottom,rgba(255,255,255,.38),rgba(255,244,215,.12) 48%,transparent 87%);
  filter:blur(10px);opacity:.16;transform-origin:top center
}
.spot-a{left:13%;animation:beamA 5s ease-in-out infinite alternate}
.spot-b{right:13%;animation:beamB 6.5s ease-in-out infinite alternate}

.scene{
  position:absolute;inset:0;display:grid;place-items:center;padding:7vw;z-index:3;
  opacity:0;pointer-events:none;
}
.s1{animation:s1 var(--dur) linear infinite}
.s2{animation:s2 var(--dur) linear infinite}
.s3{animation:s3 var(--dur) linear infinite}
.s4{animation:s4 var(--dur) linear infinite}
.s5{animation:s5 var(--dur) linear infinite}

.micro{
  position:absolute;top:7vh;left:7vw;font-size:11px;letter-spacing:.34em;font-weight:700;color:var(--gold)
}
.big-word{
  display:flex;font-family:Georgia,"Times New Roman",serif;font-weight:700;
  font-size:clamp(95px,22vw,360px);letter-spacing:-.11em;line-height:.8
}
.big-word span{
  display:inline-block;opacity:0;transform:translateY(80px) rotate(5deg);
  animation:letterIn var(--dur) cubic-bezier(.2,.8,.2,1) infinite
}
.big-word span:nth-child(2){animation-delay:.12s}
.big-word span:nth-child(3){animation-delay:.24s}
.big-word span:nth-child(4){animation-delay:.36s}
.slash{
  position:absolute;width:4px;height:0;background:var(--red2);transform:rotate(17deg);
  box-shadow:0 0 30px rgba(238,36,68,.55);
  animation:slash var(--dur) ease-in-out infinite
}
.caption{
  position:absolute;bottom:9vh;font-size:clamp(14px,1.4vw,20px);letter-spacing:.06em;color:rgba(255,255,255,.62)
}

.mask-stage{position:absolute;inset:0;display:grid;place-items:center}
.mask-svg{
  position:absolute;width:min(27vw,330px);height:auto;fill:var(--paper);
  filter:drop-shadow(0 22px 55px rgba(0,0,0,.5))
}
.mask-svg .cut{fill:var(--bg)}
.mask-svg .stroke{fill:none;stroke:var(--bg);stroke-width:12;stroke-linecap:round}
.mask-left{transform:translateX(-10vw) rotate(-12deg);animation:maskL var(--dur) cubic-bezier(.2,.8,.2,1) infinite}
.mask-right{transform:translateX(10vw) rotate(12deg);animation:maskR var(--dur) cubic-bezier(.2,.8,.2,1) infinite}
.scene-title{
  position:absolute;right:8vw;top:50%;transform:translateY(-50%);
  font-family:Georgia,"Times New Roman",serif;font-size:clamp(44px,7vw,118px);line-height:.83;
  font-weight:700;letter-spacing:-.05em;text-align:right
}
.scene-title em{color:var(--red2);font-weight:400}

.ticket{
  position:relative;width:min(660px,78vw);aspect-ratio:1.78/1;border:1px solid rgba(255,255,255,.25);
  background:var(--paper);color:#111;padding:clamp(24px,4vw,60px);overflow:hidden;
  box-shadow:0 40px 90px rgba(0,0,0,.45);
  transform:perspective(1000px) rotateX(68deg) rotateZ(-14deg) scale(.55);
  animation:ticket var(--dur) cubic-bezier(.16,.9,.2,1) infinite
}
.ticket::after{
  content:"";position:absolute;right:14%;top:0;height:100%;border-left:2px dashed rgba(0,0,0,.2)
}
.ticket-hole{position:absolute;width:44px;height:44px;background:var(--bg);border-radius:50%;right:calc(14% - 22px)}
.ticket-hole.h1{top:-22px}.ticket-hole.h2{bottom:-22px}
.ticket-small{font-size:12px;letter-spacing:.25em;font-weight:800;color:var(--red)}
.ticket-main{font-family:Georgia,serif;font-size:clamp(68px,12vw,170px);font-weight:700;line-height:.9;letter-spacing:-.07em;margin-top:4%}
.ticket-line{width:60%;height:5px;background:var(--red);margin:7% 0 4%}
.ticket-bottom{font-size:clamp(11px,1.3vw,17px);letter-spacing:.2em;font-weight:700}
.rings{position:absolute;inset:0;display:grid;place-items:center;z-index:-1}
.rings i{position:absolute;width:32vmin;height:32vmin;border:1px solid rgba(238,36,68,.35);border-radius:50%;animation:ring var(--dur) ease-out infinite}
.rings i:nth-child(2){animation-delay:.35s}
.rings i:nth-child(3){animation-delay:.7s}

.kinetic-lines{
  position:absolute;left:-10%;top:15%;width:120%;transform:rotate(-8deg);
  font-size:clamp(44px,8vw,130px);font-weight:900;line-height:.9;letter-spacing:-.045em;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.32);
}
.kinetic-lines span{display:block;white-space:nowrap;animation:marquee var(--dur) linear infinite}
.kinetic-lines span:nth-child(2){color:var(--red2);-webkit-text-stroke:0;animation-direction:reverse}
.center-copy{position:relative;text-align:center;z-index:2}
.center-copy small{display:block;font-size:12px;letter-spacing:.34em;color:var(--gold);margin-bottom:14px}
.center-copy strong{
  display:block;font-family:Georgia,serif;font-size:clamp(100px,21vw,330px);line-height:.75;letter-spacing:-.08em
}

.final-mark{text-align:center;max-width:900px}
.logo-shell{
  display:inline-flex;background:#fff;padding:14px 20px;border-radius:14px;
  box-shadow:0 20px 70px rgba(0,0,0,.5);margin-bottom:30px;
  animation:logoFloat 2.6s ease-in-out infinite alternate
}
.logo-shell img{display:block;width:min(360px,70vw);height:auto}
.final-mark h1{
  margin:0;font-family:Georgia,serif;font-size:clamp(43px,7vw,88px);line-height:.98;
  letter-spacing:-.045em;font-weight:500
}
.final-mark p{margin:22px 0 0;color:rgba(255,255,255,.62);font-size:clamp(17px,2vw,21px)}
.pulse-line{
  width:80px;height:3px;background:var(--red2);margin:28px auto 0;border-radius:99px;
  animation:pulse 1.2s ease-in-out infinite alternate
}

.replay{
  position:fixed;right:22px;bottom:22px;z-index:30;width:42px;height:42px;border-radius:50%;
  border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.05);color:#fff;
  font-size:19px;cursor:pointer;backdrop-filter:blur(8px)
}
.replay:hover{background:rgba(255,255,255,.11)}
.progress{position:fixed;left:0;right:0;bottom:0;height:2px;z-index:30;background:rgba(255,255,255,.08)}
.progress span{display:block;height:100%;background:var(--red2);animation:progress var(--dur) linear infinite}

/* Global scene timeline */
@keyframes s1{0%,18%{opacity:1}22%,100%{opacity:0}}
@keyframes s2{0%,17%{opacity:0}21%,39%{opacity:1}43%,100%{opacity:0}}
@keyframes s3{0%,38%{opacity:0}42%,59%{opacity:1}63%,100%{opacity:0}}
@keyframes s4{0%,58%{opacity:0}62%,78%{opacity:1}82%,100%{opacity:0}}
@keyframes s5{0%,77%{opacity:0}82%,98%{opacity:1}100%{opacity:0}}

@keyframes letterIn{
  0%,2%{opacity:0;transform:translateY(100px) rotate(8deg)}
  6%,16%{opacity:1;transform:translateY(0) rotate(0)}
  20%,100%{opacity:0;transform:translateY(-90px) rotate(-4deg)}
}
@keyframes slash{
  0%,3%{height:0}
  7%,15%{height:68vh}
  20%,100%{height:0;transform:rotate(17deg) translateY(-20vh)}
}
@keyframes maskL{
  0%,19%{opacity:0;transform:translateX(-45vw) rotate(-30deg) scale(.55)}
  24%,36%{opacity:1;transform:translateX(-10vw) rotate(-12deg) scale(1)}
  42%,100%{opacity:0;transform:translateX(-3vw) rotate(6deg) scale(1.12)}
}
@keyframes maskR{
  0%,20%{opacity:0;transform:translateX(45vw) rotate(30deg) scale(.55)}
  25%,36%{opacity:1;transform:translateX(10vw) rotate(12deg) scale(1)}
  42%,100%{opacity:0;transform:translateX(3vw) rotate(-6deg) scale(1.12)}
}
@keyframes ticket{
  0%,39%{opacity:0;transform:perspective(1000px) rotateX(68deg) rotateZ(-14deg) scale(.55)}
  45%,57%{opacity:1;transform:perspective(1000px) rotateX(0) rotateZ(-3deg) scale(1)}
  62%,100%{opacity:0;transform:perspective(1000px) rotateX(-16deg) rotateZ(5deg) scale(1.08)}
}
@keyframes ring{
  0%,40%{opacity:0;transform:scale(.35)}
  47%{opacity:.8}
  61%,100%{opacity:0;transform:scale(4.2)}
}
@keyframes marquee{
  0%{transform:translateX(-8%)}
  100%{transform:translateX(8%)}
}
@keyframes logoFloat{from{transform:translateY(-4px)}to{transform:translateY(5px)}}
@keyframes pulse{from{transform:scaleX(.55);opacity:.55}to{transform:scaleX(1.4);opacity:1}}
@keyframes beamA{from{transform:rotate(18deg) translateX(-30px)}to{transform:rotate(-8deg) translateX(30px)}}
@keyframes beamB{from{transform:rotate(-18deg) translateX(28px)}to{transform:rotate(8deg) translateX(-32px)}}
@keyframes noise{0%{transform:translate(0,0)}25%{transform:translate(2%,-2%)}50%{transform:translate(-2%,2%)}75%{transform:translate(1%,1%)}100%{transform:translate(-1%,-1%)}}
@keyframes progress{from{width:0}to{width:100%}}

.reel.restart .scene,
.reel.restart .big-word span,
.reel.restart .slash,
.reel.restart .mask-svg,
.reel.restart .ticket,
.reel.restart .rings i,
.reel.restart .kinetic-lines span,
.reel.restart .progress span{animation:none!important}

@media(max-width:720px){
  .scene{padding:24px}
  .micro{left:24px;top:28px}
  .scene-title{right:24px;font-size:clamp(42px,13vw,82px)}
  .mask-svg{width:min(43vw,230px)}
  .mask-left{transform:translateX(-18vw) rotate(-12deg)}
  .mask-right{transform:translateX(18vw) rotate(12deg)}
  .ticket{width:88vw}
  .kinetic-lines{top:20%}
}

/* Animation intentionally remains active even if OS reduced-motion is enabled,
   because this page is itself a motion teaser. The replay control is always visible. */