:root{
  /* --- night big-top palette --- */
  --paper:#140a0e;        /* page base (top) */
  --paper-2:#1b0e13;      /* page base (bottom) + punched notches */
  --paper-3:#2a171d;      /* scroll track */
  --surface:#241419;      /* cards */
  --surface-2:#2d1a20;    /* cards (top of gradient) */
  --ink:#f3e6d0;          /* text + outlines */
  --ink-2:#b49a84;        /* muted text */
  --red:#e0454b;
  --red-deep:#b02f38;
  --red-dark:#7a1a22;
  --red-bright:#ff8f88;   /* readable red on dark */
  --gold:#f0b53f;
  --gold-2:#ffd97a;
  --teal:#3fb3a7;

  --font-display:'Rye', serif;
  --font-body:'Fraunces', serif;
  --page-width:31rem;
  --page-width-wide:62rem;
  --page-gutter:1.5rem;
  --radius:.4rem;
  --hard-shadow:4px 4px 0 rgba(0,0,0,.5);

  --body-bg:
    repeating-linear-gradient(90deg, rgba(224,69,75,.075) 0 26px, rgba(224,69,75,0) 26px 52px),
    radial-gradient(120% 80% at 50% -10%, rgba(240,181,63,.12), rgba(240,181,63,0) 62%),
    radial-gradient(130% 100% at 50% 112%, rgba(224,69,75,.18), rgba(224,69,75,0) 62%),
    linear-gradient(180deg, var(--paper), var(--paper-2));
  box-sizing:border-box;
}

*{box-sizing:inherit;margin:0;padding:0;}

html{scroll-padding-top:env(safe-area-inset-top,0px);}

body{
  min-height:100%;
  background:var(--body-bg);
  background-color:var(--paper);
  color:var(--ink);
  font-family:var(--font-body), serif;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  overflow-x:hidden;
}

a{color:inherit;}

::selection{
  background:var(--red);
  color:#fdf3e0;
  text-shadow:none;
}

::-webkit-scrollbar{width:12px; height:12px;}
::-webkit-scrollbar-track{background:var(--paper-2);}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, var(--red), var(--red-deep));
  border:2px solid var(--paper-2);
  border-radius:8px;
}
::-webkit-scrollbar-thumb:hover{background:var(--gold);}
::-webkit-scrollbar-corner{background:var(--paper-2);}

/* ================= curtains ================= */
.curtain{
  position:fixed;
  inset:0;
  z-index:60;
  display:flex;
  pointer-events:none;
}

.curtain__panel{
  position:relative;
  width:51%;
  height:100%;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.3) 0 20px, rgba(0,0,0,0) 20px 52px),
    linear-gradient(90deg, var(--red-dark), var(--red) 60%, var(--red-deep));
  box-shadow:inset 0 0 70px rgba(0,0,0,.7);
  animation:curtainL 1150ms cubic-bezier(.65,0,.35,1) 280ms forwards;
}

.curtain__panel--r{
  margin-left:auto;
  transform:scaleX(-1);
  animation-name:curtainR;
}

.curtain__panel::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  right:0;
  width:11px;
  background:repeating-linear-gradient(180deg, var(--gold-2) 0 15px, var(--gold) 15px 30px);
  box-shadow:0 0 12px rgba(240,181,63,.6);
}

/* ================= confetti ================= */
.confetti{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}

.confetti__piece{
  position:absolute;
  top:-8vh;
  display:block;
  opacity:.8;
  will-change:transform;
  animation:confettiFall var(--dur,14s) linear var(--delay,0s) infinite;
}

/* ================= shell ================= */
.page-shell{
  position:relative;
  z-index:1;
  width:100%;
  max-width:var(--page-width);
  min-height:100vh;
  margin:0 auto;
  padding:11vh var(--page-gutter) 3.5rem;
}

.page-shell--wide{
  max-width:var(--page-width-wide);
  padding-top:clamp(3.5rem, 9vh, 6.5rem);
}

/* ================= hero ================= */
/* вынесем герой в отдельный слой: тогда параллакс при скролле
   двигает/проявляет готовую картинку, а не перерисовывает вывеску
   каждый кадр (из-за этого буквы и «дулись» и дёргались) */
.hero{
  text-align:center;
  animation:rise 700ms cubic-bezier(.2,.8,.2,1) 620ms backwards;
  will-change:transform, opacity;
}

/* --- bunting --- */
.bunting{
  display:block;
  width:100%;
  margin:0 auto .75rem;
  transform-origin:top center;
  animation:dropIn 800ms cubic-bezier(.34,1.4,.64,1) 520ms backwards;
}

.bunting__svg{display:block;width:100%;height:auto;}

.bunting__rope{
  fill:none;
  stroke:var(--ink);
  stroke-width:3;
  stroke-linecap:round;
}

.flag{
  transform-box:fill-box;
  transform-origin:50% 0%;
  animation:sway 3.4s ease-in-out infinite;
}
.flag--1{fill:var(--red);}
.flag--2{fill:var(--gold);}
.flag--3{fill:var(--teal);}
.flag--4{fill:#f2e6d0;}
.flag--5{fill:var(--red-deep);}
.flag--6{fill:var(--gold);}
.flag--7{fill:var(--teal);}
.flag--8{fill:var(--red);}
.flag--9{fill:var(--gold-2);}
.flag{stroke:var(--ink);stroke-width:2;stroke-linejoin:round;}
.flag--2{animation-delay:-.4s;animation-duration:3.1s;}
.flag--3{animation-delay:-.9s;animation-duration:3.7s;}
.flag--4{animation-delay:-1.3s;animation-duration:3.2s;}
.flag--5{animation-delay:-.6s;animation-duration:3.9s;}
.flag--6{animation-delay:-1.7s;animation-duration:3.3s;}
.flag--7{animation-delay:-.2s;animation-duration:3.6s;}
.flag--8{animation-delay:-1.1s;animation-duration:3s;}
.flag--9{animation-delay:-2s;animation-duration:3.5s;}

.hero__eyebrow{
  color:var(--red-bright);
  font-size:0.7rem;
  font-weight:600;
  letter-spacing:0.32em;
  text-transform:uppercase;
  text-shadow:0 1px 6px rgba(0,0,0,.7);
}

.hero__eyebrow::before,
.hero__eyebrow::after{
  content:"\2726";
  margin:0 .55rem;
  color:var(--gold);
}

/* --- marquee title --- */
.marquee{
  position:relative;
  display:block;
  margin:.8rem auto .7rem;
  padding:.7rem 1.35rem .85rem;
  border:.18rem solid var(--ink);
  border-radius:.5rem;
  background:linear-gradient(176deg, var(--red) 0%, var(--red-deep) 62%, var(--red-dark) 100%);
  box-shadow:
    inset 0 0 0 3px rgba(255,217,122,.55),
    0 16px 30px rgba(0,0,0,.6);
  transform:rotate(-.7deg);
}

.marquee::before,
.marquee::after{
  content:"";
  position:absolute;
  pointer-events:none;
  background-image:radial-gradient(circle at 12px 12px, var(--gold-2) 0 4px, rgba(255,217,122,.4) 4px 6.5px, transparent 7px);
  background-size:24px 24px;
}

/* top + bottom bulb strips */
.marquee::before{
  inset:-13px;
  -webkit-mask:linear-gradient(#000 0 0) top left/100% 24px no-repeat,
               linear-gradient(#000 0 0) bottom left/100% 24px no-repeat;
  mask:linear-gradient(#000 0 0) top left/100% 24px no-repeat,
       linear-gradient(#000 0 0) bottom left/100% 24px no-repeat;
  animation:bulbX 1.1s linear infinite, bulbGlow 1.7s ease-in-out infinite;
}

/* left + right bulb strips */
.marquee::after{
  inset:-13px;
  -webkit-mask:linear-gradient(#000 0 0) left top/24px 100% no-repeat,
               linear-gradient(#000 0 0) right top/24px 100% no-repeat;
  mask:linear-gradient(#000 0 0) left top/24px 100% no-repeat,
       linear-gradient(#000 0 0) right top/24px 100% no-repeat;
  animation:bulbY 1.1s linear infinite, bulbGlow 1.7s ease-in-out infinite .35s;
}

.hero__title{
  display:block;
  color:var(--gold-2);
  font-family:var(--font-display), serif;
  font-size:clamp(2.5rem, 12.5vw, 3.7rem);
  font-weight:400;
  line-height:1.05;
  letter-spacing:.04em;
  text-shadow:
    -2px -2px 0 #12070a, 2px -2px 0 #12070a,
    -2px 2px 0 #12070a, 2px 2px 0 #12070a,
    0 5px 0 var(--red-dark),
    0 10px 18px rgba(0,0,0,.6);
}

/* блик, периодически пробегающий по вывеске */
.marquee__shine{
  position:absolute;
  inset:0;
  z-index:1;
  overflow:hidden;
  border-radius:.35rem;
  pointer-events:none;
  background:linear-gradient(105deg, rgba(255,255,255,0) 38%, rgba(255,255,255,.42) 50%, rgba(255,255,255,0) 62%);
  background-size:280% 100%;
  background-position:-70% 0;
  background-repeat:no-repeat;
  opacity:0;
  animation:shineSweep 6.5s ease-in-out 3.2s infinite;
}

/* letters light up one after another, C -> S */
.ltr{
  display:inline-block;
  --i:0;
  animation:ltrPop 540ms cubic-bezier(.34,1.56,.64,1) backwards;
  animation-delay:calc(760ms + var(--i) * 70ms);
}

.ltr i{
  display:inline-block;
  font-style:normal;
  animation:ltrWave 2.8s ease-in-out infinite;
  animation-delay:calc(var(--i) * .18s);
  /* волна буквы идёт на композиторе и не зависит от нагрузки на главный поток */
  will-change:transform;
}

.ltr:nth-child(1){--i:0;}
.ltr:nth-child(2){--i:1;}
.ltr:nth-child(3){--i:2;}
.ltr:nth-child(4){--i:3;}
.ltr:nth-child(5){--i:4;}
.ltr:nth-child(6){--i:5;}

.marquee:hover .ltr i,
.marquee:focus-within .ltr i{
  animation:ltrJiggle 640ms ease both;
  animation-delay:calc(var(--i) * 85ms);
}

.hero__tagline{
  display:inline-block;
  padding:.34rem 1rem .38rem;
  background:var(--gold);
  color:#1a0c10;
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  transform:rotate(-.6deg);
  box-shadow:3px 3px 0 rgba(0,0,0,.55);
  animation:rise 620ms ease-out 1250ms backwards;
}

/* ================= divider ================= */
.divider{
  display:flex;
  align-items:center;
  gap:.8rem;
  margin:1.5rem auto 1.9rem;
}

.divider::before,
.divider::after{
  content:"";
  flex:1;
  height:2px;
  background:linear-gradient(to right, transparent, var(--red) 40%, var(--gold));
  animation:stretch 700ms cubic-bezier(.2,.8,.2,1) 1350ms backwards;
}

.divider::after{
  background:linear-gradient(to left, transparent, var(--red) 40%, var(--gold));
}

.divider__star{
  position:relative;
  color:var(--gold);
  font-size:1.35rem;
  line-height:1;
  text-shadow:0 0 14px rgba(240,181,63,.85);
  animation:spin 7s linear infinite, starPulse 2.4s ease-in-out infinite;
}

/* спутники, кружащие вокруг звезды */
.divider__star::before,
.divider__star::after{
  content:"";
  position:absolute;
  left:50%;
  width:5px;
  height:5px;
  margin-left:-2.5px;
  border-radius:50%;
  background:var(--red);
  box-shadow:0 0 8px rgba(224,69,75,.95);
}

.divider__star::before{top:-9px;}
.divider__star::after{bottom:-9px; background:var(--teal); box-shadow:0 0 8px rgba(63,179,167,.95);}

@keyframes starPulse{
  0%,100%{text-shadow:0 0 8px rgba(240,181,63,.6);}
  50%{text-shadow:0 0 26px rgba(255,217,122,1);}
}

/* ================= headings ================= */
.action-heading{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.7rem;
  margin:0 0 1.5rem;
  color:var(--red-bright);
  font-family:var(--font-display), serif;
  font-size:clamp(1.25rem, 5vw, 1.6rem);
  font-weight:400;
  line-height:1.25;
  letter-spacing:.03em;
  text-align:center;
  text-transform:uppercase;
  text-shadow:0 2px 0 rgba(0,0,0,.65);
  animation:rise 560ms ease-out 1420ms backwards;
}

.action-heading::before,
.action-heading::after{
  content:"\2726";
  color:var(--gold);
  font-size:.7em;
  text-shadow:0 0 10px rgba(240,181,63,.8);
  animation:spin 9s linear infinite;
}

.action-heading::after{animation-direction:reverse;}

/* ================= tickets ================= */
.action-list{
  display:flex;
  flex-direction:column;
  gap:1.05rem;
}

.action-list--spaced{margin-top:1.5rem;}

.ticket,
.text-snippet{
  position:relative;
  background-image:
    linear-gradient(105deg, rgba(255,255,255,0) 42%, rgba(255,255,255,.16) 50%, rgba(255,255,255,0) 58%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
  background-size:280% 100%, 100% 100%;
  background-position:-90% 0, 0 0;
  background-repeat:no-repeat;
  color:var(--ink);
  font-family:var(--font-body), serif;
  font-weight:600;
  font-size:1.03rem;
  border:2px solid var(--ink);
  border-radius:var(--radius);
  box-shadow:var(--hard-shadow);
}

.ticket{
  display:flex;
  align-items:center;
  gap:.9rem;
  padding:.85rem 1rem;
  text-align:left;
  text-decoration:none;
  cursor:pointer;
  --rz:-1deg;
  transform:perspective(760px) translateY(var(--ty, 0px)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotate(var(--rz));
  transition:transform 260ms cubic-bezier(.2,.8,.2,1), box-shadow 260ms ease, background-position 750ms ease, border-color 200ms ease;
  animation:ticketIn 640ms cubic-bezier(.2,.9,.25,1.15) backwards;
}

.action-list .ticket:nth-child(1){--rz:-1.2deg; animation-delay:1500ms;}
.action-list .ticket:nth-child(2){--rz:.9deg;  animation-delay:1580ms;}
.action-list .ticket:nth-child(3){--rz:-.7deg; animation-delay:1660ms;}
.action-list .ticket:nth-child(4){--rz:1.1deg; animation-delay:1740ms;}
.action-list .ticket:nth-child(5){--rz:-.9deg; animation-delay:1820ms;}
.action-list .ticket:nth-child(6){--rz:.6deg;  animation-delay:1900ms;}

.ticket::before,
.ticket::after{
  content:"";
  position:absolute;
  top:50%;
  width:1rem;
  height:1rem;
  border:2px solid var(--ink);
  border-radius:50%;
  transform:translateY(-50%);
  background:var(--paper-2);
}
.ticket::before{left:-.62rem;}
.ticket::after{right:-.62rem;}

.ticket:hover,
.ticket:focus-visible{
  --ty:-5px;
  --rx:0deg;
  --ry:0deg;
  --rz:0deg;
  border-color:var(--gold);
  background-position:190% 0, 0 0;
  box-shadow:0 14px 26px rgba(0,0,0,.55), 0 0 0 3px rgba(240,181,63,.9);
}

.ticket:focus-visible{
  outline:2px solid var(--red-bright);
  outline-offset:4px;
}

.ticket__no{
  position:relative;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  width:2.4rem;
  height:2.4rem;
  border:2px solid var(--ink);
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--red), var(--red-deep));
  color:var(--gold-2);
  font-family:var(--font-display), serif;
  font-size:.95rem;
  font-weight:400;
  letter-spacing:.02em;
  box-shadow:inset 0 -3px 6px rgba(0,0,0,.45);
  transition:transform 320ms cubic-bezier(.34,1.56,.64,1);
}

/* пунктирный кружок «работает» при наведении */
.ticket__no::after{
  content:"";
  position:absolute;
  inset:-6px;
  border:2px dashed var(--gold);
  border-radius:50%;
  opacity:0;
  transform:scale(.55) rotate(0deg);
  transition:opacity 220ms ease, transform 420ms cubic-bezier(.34,1.56,.64,1);
}

.ticket:hover .ticket__no,
.ticket:focus-visible .ticket__no{
  transform:rotate(-14deg) scale(1.1);
}

.ticket:hover .ticket__no::after,
.ticket:focus-visible .ticket__no::after{
  opacity:1;
  transform:scale(1) rotate(120deg);
}

.ticket__label{
  flex:1;
  display:block;
  line-height:1.25;
}

.ticket__arrow{
  flex:0 0 auto;
  color:var(--gold);
  font-size:1.2rem;
  opacity:0;
  transform:translateX(-10px);
  transition:opacity 220ms ease, transform 320ms cubic-bezier(.34,1.56,.64,1);
}

.ticket:hover .ticket__arrow,
.ticket:focus-visible .ticket__arrow{
  opacity:1;
  transform:translateX(0);
}

/* ================= rules page ================= */
.content-stack{display:grid;gap:1.5rem;}

.callout{
  position:relative;
  margin-top:.4rem;
  padding:1.15rem 1.35rem 1.2rem;
  border:2px solid var(--ink);
  border-left:7px solid var(--red);
  border-radius:var(--radius);
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  font-size:1rem;
  font-style:italic;
  line-height:1.6;
  box-shadow:var(--hard-shadow);
  transform:rotate(-.4deg);
}

.callout::before,
.callout::after{
  content:"";
  position:absolute;
  top:-11px;
  width:62px;
  height:20px;
  background:rgba(240,181,63,.35);
  border:1px solid rgba(0,0,0,.45);
  box-shadow:0 2px 5px rgba(0,0,0,.4);
}
.callout::before{left:16px;transform:rotate(-6deg);}
.callout::after{right:16px;transform:rotate(5deg);}

.content-section{
  padding-top:1.6rem;
  border-top:3px double rgba(243,230,208,.3);
}

.content-section__title{
  position:relative;
  display:inline-block;
  margin-bottom:1rem;
  color:var(--gold);
  font-family:var(--font-display), serif;
  font-size:clamp(1.3rem, 4vw, 1.7rem);
  font-weight:400;
  line-height:1.25;
  text-shadow:0 2px 0 rgba(0,0,0,.6);
}

.content-section__title::before{
  content:"\2726";
  margin-right:.55rem;
  color:var(--red-bright);
  font-size:.7em;
  vertical-align:.2em;
}

.content-section p{
  font-size:0.97rem;
  line-height:1.7;
}

.content-section p + p{margin-top:.75rem;}

.accent{
  color:var(--gold-2);
  font-weight:600;
  background:linear-gradient(transparent 62%, rgba(240,181,63,.25) 62%);
}

.table-scroll{
  max-width:100%;
  overflow-x:auto;
  border:2px solid var(--ink);
  border-radius:var(--radius);
  background:rgba(10,5,8,.55);
  box-shadow:var(--hard-shadow);
  scrollbar-color:var(--gold) var(--paper-3);
}

.data-table{
  width:100%;
  min-width:42rem;
  border-collapse:collapse;
  color:var(--ink);
  font-size:0.9rem;
}

.data-table th,
.data-table td{
  padding:.7rem .85rem;
  text-align:left;
  vertical-align:top;
  border-bottom:1px solid rgba(243,230,208,.13);
}

.data-table thead th{
  background:linear-gradient(180deg, var(--red), var(--red-deep));
  color:#fdf3e0;
  font-size:.7rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  border-bottom:3px solid var(--ink);
}

.data-table thead th:first-child{border-right:2px solid var(--ink);}

.data-table tbody th{
  width:4.5rem;
  color:var(--red-bright);
  font-weight:600;
  white-space:nowrap;
  border-right:1px dashed rgba(243,230,208,.3);
  background:rgba(240,181,63,.1);
}

.data-table td:last-child{
  color:var(--gold-2);
  font-weight:600;
  background:rgba(224,69,75,.12);
}

.data-table tbody tr:nth-child(even) td{background:rgba(255,255,255,.035);}
.data-table tbody tr:nth-child(even) td:last-child{background:rgba(224,69,75,.19);}

.data-table tbody tr:last-child th,
.data-table tbody tr:last-child td{border-bottom:0;}

.data-table tbody tr{
  transition:background-color 200ms ease, transform 200ms ease;
}

.data-table tbody tr:hover{
  background-color:rgba(240,181,63,.16);
  transform:translateX(4px);
}

/* ================= footer ================= */
.page-footer{
  margin-top:2.75rem;
  color:var(--ink-2);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.18em;
  text-align:center;
  text-transform:uppercase;
  animation:rise 600ms ease-out 2050ms backwards;
}

.page-footer::before,
.page-footer::after{
  content:"\2726";
  margin:0 .6rem;
  color:var(--red);
}

/* ================= clown host ================= */
.clown{
  display:flex;
  flex-direction:column;
  align-items:center;
  margin-top:2.5rem;
  cursor:pointer;
  outline:none;
  animation:clownRise 750ms cubic-bezier(.2,.9,.25,1.15) 2250ms backwards;
}

.clown:focus-visible{
  outline:2px solid var(--red-bright);
  outline-offset:8px;
  border-radius:1rem;
}

.clown__bubble,
.text-snippet{
  display:block;
  width:max-content;
  max-width:min(18rem, 80vw);
  margin:0 0 1rem;
  padding:.75rem .95rem;
  font-size:.95rem;
  line-height:1.4;
  text-align:center;
  border-radius:.5rem;
  transform:rotate(-1.6deg);
  box-shadow:4px 4px 0 rgba(0,0,0,.5);
  transition:transform 260ms cubic-bezier(.34,1.56,.64,1);
  animation:none;
}

.clown__bubble::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-8px;
  width:15px;
  height:15px;
  background:var(--surface);
  border-right:2px solid var(--ink);
  border-bottom:2px solid var(--ink);
  transform:translateX(-50%) rotate(45deg);
}

.clown:hover .clown__bubble{
  transform:rotate(-1.6deg) scale(1.05);
}

.clown__bubble.is-pop{
  animation:bubblePop 460ms cubic-bezier(.34,1.56,.64,1);
}

.clown__art{
  display:block;
  width:9.5rem;
  height:auto;
  transform-origin:bottom center;
  animation:sway 3.6s ease-in-out 3.2s infinite;
}

.clown__arm{
  transform-box:view-box;
  transform-origin:44px 118px;
}

.clown__arm--wave{
  animation:wave 3s ease-in-out 3.6s infinite;
}

.clown__arm--wand{
  transform-origin:78px 118px;
  animation:wandBob 3.4s ease-in-out 4s infinite;
}

.clown__wand-star{
  transform-box:fill-box;
  transform-origin:center;
  animation:twinkle 1.9s ease-in-out infinite;
}

.clown__collar{
  transform-box:view-box;
  transform-origin:61px 108px;
  animation:collarPulse 3.8s ease-in-out 4.4s infinite;
}

.clown.is-shaking .clown__art{
  animation:clownShake 620ms ease, sway 3.6s ease-in-out infinite;
}

.clown__hint{
  margin-top:.5rem;
  color:var(--ink-2);
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  animation:hintBlink 2.8s ease-in-out infinite;
}

@keyframes hintBlink{
  0%,100%{opacity:.45;}
  50%{opacity:1;}
}

.clown-eye{
  transform-box:fill-box;
  transform-origin:center;
  animation:blink 5.2s ease-in-out 4.4s infinite;
}

/* ================= spotlight ================= */
.spotlight{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  mix-blend-mode:screen;
}

/* блик едет трансформом на композиторе, а не перерисовкой градиента
   на весь экран (раньше каждое движение мыши красило весь вьюпорт) */
.spotlight::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:720px;
  height:720px;
  margin:-360px 0 0 -360px;
  background:radial-gradient(360px 360px at 50% 50%,
    rgba(255,217,122,.18), rgba(255,217,122,.07) 45%, rgba(255,217,122,0) 72%);
  transform:translate3d(var(--sx, 50vw), var(--sy, 26vh), 0);
  will-change:transform;
}

/* ================= balloons ================= */
.balloons{
  position:fixed;
  inset:0;
  z-index:3;
  overflow:hidden;
  pointer-events:none;
}

.balloon{
  position:absolute;
  bottom:-160px;
  display:block;
  width:46px;
  opacity:.5;
  pointer-events:auto;
  cursor:crosshair;
  will-change:transform;
  animation:balloonRise var(--dur, 34s) linear var(--delay, 0s) infinite;
}

.balloon__inner{
  display:block;
  transform-origin:50% 35%;
  transition:scale 220ms cubic-bezier(.34,1.56,.64,1);
}

.balloon:hover .balloon__inner{scale:1.14;}

.balloon__inner.is-popped{
  animation:balloonPop 420ms cubic-bezier(.2,.9,.25,1) forwards;
}

/* ================= cursor sparks ================= */
.spark{
  position:fixed;
  z-index:40;
  display:block;
  pointer-events:none;
  font-size:13px;
  line-height:1;
  color:var(--gold-2);
  text-shadow:0 0 8px rgba(255,217,122,.9);
  will-change:transform, opacity;
  animation:sparkOut var(--sdur, 720ms) ease-out forwards;
}

.spark--burst{font-size:15px;}

/* ================= ticker / афиша ================= */
.ticker{
  position:relative;
  overflow:hidden;
  margin:0 calc(var(--page-gutter) * -1) 1.9rem;
  padding:.5rem 0 .55rem;
  border-top:2px solid var(--ink);
  border-bottom:2px solid var(--ink);
  background:linear-gradient(90deg, var(--red-dark), var(--red) 22%, var(--red) 78%, var(--red-dark));
  box-shadow:0 8px 20px rgba(0,0,0,.45);
  rotate:-.35deg;
  animation:tickerIn 560ms ease-out 1560ms backwards;
}

.ticker__track{
  display:flex;
  width:max-content;
  white-space:nowrap;
  animation:tickerRun 26s linear infinite;
}

.ticker:hover .ticker__track{animation-play-state:paused;}

.ticker__item{
  padding-right:2.5rem;
  color:#fdf3e0;
  font-family:var(--font-display), serif;
  font-size:.82rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  text-shadow:0 2px 0 rgba(0,0,0,.45);
}

/* ================= badge / штамп ================= */
.badge{
  position:absolute;
  top:-2.4rem;
  right:-2rem;
  z-index:2;
  width:clamp(78px, 20vw, 108px);
  rotate:-12deg;
  animation:badgeIn 620ms cubic-bezier(.34,1.56,.64,1) 2050ms backwards;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.55));
}

.badge__spin{
  display:block;
  width:100%;
  height:auto;
  animation:spin 18s linear infinite;
}

.badge__ring{
  font-family:var(--font-display), serif;
  font-size:12.5px;
  letter-spacing:.06em;
}

.badge__mid{
  font-family:var(--font-display), serif;
  font-size:22px;
  font-weight:700;
  letter-spacing:.04em;
}

/* ================= scroll reveal ================= */
[data-reveal]{
  opacity:0;
  translate:0 22px;
}

[data-reveal].is-in{
  opacity:1;
  translate:0 0;
  transition:
    opacity 620ms ease calc(var(--d, 0) * 65ms),
    translate 700ms cubic-bezier(.2,.8,.2,1) calc(var(--d, 0) * 65ms);
}

/* билет с data-reveal появляется через reveal, а не через ticketIn:
   иначе входная анимация перебивает плавное проявление и «выскакивает» */
.ticket[data-reveal]{
  animation:none;
}

/* и не должна отключать hover-переходы самого билета */
.ticket[data-reveal].is-in{
  transition:
    opacity 620ms ease calc(var(--d, 0) * 65ms),
    translate 700ms cubic-bezier(.2,.8,.2,1) calc(var(--d, 0) * 65ms),
    transform 260ms cubic-bezier(.2,.8,.2,1),
    box-shadow 260ms ease,
    background-position 750ms ease,
    border-color 200ms ease;
}

/* ================= keyframes ================= */
@keyframes rise{
  from{opacity:0; transform:translateY(18px);}
  to{opacity:1; transform:translateY(0);}
}

@keyframes stretch{
  from{transform:scaleX(0);}
  to{transform:scaleX(1);}
}

@keyframes dropIn{
  from{opacity:0; transform:translateY(-40px) scaleY(.7);}
  to{opacity:1; transform:translateY(0) scaleY(1);}
}

@keyframes sway{
  0%,100%{transform:rotate(-4deg);}
  50%{transform:rotate(4deg);}
}

@keyframes ltrPop{
  from{opacity:0; transform:translateY(-30px) scale(.4) rotate(-10deg);}
  to{opacity:1; transform:translateY(0) scale(1) rotate(0);}
}

@keyframes ltrWave{
  0%,100%{transform:translateY(0) rotate(0);}
  50%{transform:translateY(-7px) rotate(2deg);}
}

@keyframes ltrJiggle{
  0%,100%{transform:translateY(0) rotate(0) scale(1);}
  25%{transform:translateY(-8px) rotate(-7deg) scale(1.12);}
  50%{transform:translateY(2px) rotate(5deg) scale(.96);}
  75%{transform:translateY(-3px) rotate(-3deg) scale(1.05);}
}

@keyframes bulbX{to{background-position:24px 0;}}
@keyframes bulbY{to{background-position:0 24px;}}
@keyframes bulbGlow{0%,100%{opacity:.7;} 50%{opacity:1;}}

@keyframes ticketIn{
  from{
    opacity:0;
    transform:perspective(760px) translateY(38px) rotate(calc(var(--rz) * -4)) scale(.94);
  }
  to{
    opacity:1;
    transform:perspective(760px) translateY(0) rotateX(0) rotateY(0) rotate(var(--rz)) scale(1);
  }
}

@keyframes clownRise{
  from{opacity:0; transform:translateY(46px) scale(.9);}
  to{opacity:1; transform:translateY(0) scale(1);}
}

@keyframes blink{
  0%,92%,100%{transform:scaleY(1);}
  95%{transform:scaleY(.08);}
}

@keyframes clownShake{
  0%,100%{transform:translateX(0) rotate(0);}
  20%{transform:translateX(-8px) rotate(-7deg);}
  40%{transform:translateX(7px) rotate(6deg);}
  60%{transform:translateX(-5px) rotate(-4deg);}
  80%{transform:translateX(4px) rotate(3deg);}
}

@keyframes bubblePop{
  0%{transform:rotate(-1.6deg) scale(1);}
  35%{transform:rotate(2deg) scale(1.12);}
  70%{transform:rotate(-3deg) scale(.97);}
  100%{transform:rotate(-1.6deg) scale(1);}
}

@keyframes shineSweep{
  0%{background-position:-70% 0; opacity:0;}
  8%{opacity:1;}
  34%{background-position:170% 0; opacity:0;}
  100%{background-position:170% 0; opacity:0;}
}

@keyframes wave{
  0%,100%{transform:rotate(0deg);}
  25%{transform:rotate(58deg);}
  50%{transform:rotate(20deg);}
  75%{transform:rotate(66deg);}
}

@keyframes wandBob{
  0%,100%{transform:rotate(-5deg);}
  50%{transform:rotate(7deg);}
}

@keyframes twinkle{
  0%,100%{transform:scale(.85) rotate(-8deg); opacity:.75;}
  50%{transform:scale(1.25) rotate(12deg); opacity:1;}
}

@keyframes collarPulse{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.07);}
}

@keyframes balloonPop{
  0%{scale:1; opacity:1;}
  28%{scale:1.3; opacity:1;}
  60%{scale:.35; opacity:.75;}
  100%{scale:.05; opacity:0;}
}

@keyframes tickerIn{
  from{opacity:0; translate:0 18px;}
  to{opacity:1; translate:0 0;}
}

@keyframes tickerRun{
  from{transform:translate3d(0, 0, 0);}
  to{transform:translate3d(-50%, 0, 0);}
}

@keyframes badgeIn{
  from{opacity:0; scale:.3; rotate:70deg;}
  to{opacity:1; scale:1; rotate:-12deg;}
}

@keyframes balloonRise{
  0%{transform:translate3d(0, 0, 0) rotate(-4deg);}
  25%{transform:translate3d(var(--swayA, 34px), -32vh, 0) rotate(5deg);}
  50%{transform:translate3d(calc(var(--swayA, 34px) * -1), -64vh, 0) rotate(-5deg);}
  75%{transform:translate3d(var(--swayA, 34px), -96vh, 0) rotate(4deg);}
  100%{transform:translate3d(0, -128vh, 0) rotate(-3deg);}
}

@keyframes sparkOut{
  from{opacity:1; transform:translate(-50%, -50%) scale(.5) rotate(0deg);}
  to{
    opacity:0;
    transform:translate(calc(-50% + var(--sx, 0px)), calc(-50% + var(--sy, -18px))) scale(1.25) rotate(200deg);
  }
}

@keyframes spin{to{transform:rotate(360deg);}}

@keyframes curtainL{
  0%{transform:translate3d(0,0,0);}
  60%{transform:translate3d(-74%,0,0);}
  100%{transform:translate3d(-102%,0,0);}
}

@keyframes curtainR{
  0%{transform:scaleX(-1) translate3d(0,0,0);}
  60%{transform:scaleX(-1) translate3d(-74%,0,0);}
  100%{transform:scaleX(-1) translate3d(-102%,0,0);}
}

@keyframes confettiFall{
  0%{transform:translate3d(0,-12vh,0) rotate(0deg);}
  25%{transform:translate3d(var(--sway, 40px),22vh,0) rotate(180deg);}
  50%{transform:translate3d(0,55vh,0) rotate(360deg);}
  75%{transform:translate3d(calc(var(--sway, 40px) * -1),84vh,0) rotate(540deg);}
  100%{transform:translate3d(0,115vh,0) rotate(720deg);}
}

/* ================= reduced motion ================= */
@media (prefers-reduced-motion: reduce){
  .curtain,
  .confetti,
  .spotlight,
  .balloons,
  .spark{display:none !important;}

  .hero,
  .bunting,
  .hero__tagline,
  .divider::before,
  .divider::after,
  .divider__star,
  .action-heading,
  .action-heading::before,
  .action-heading::after,
  .ticket,
  .ltr,
  .ltr i,
  .marquee::before,
  .marquee::after,
  .flag,
  .page-footer,
  .clown,
  .clown__art,
  .clown__hint,
  .clown__bubble,
  .clown__arm,
  .clown__wand-star,
  .clown__collar,
  .clown-eye,
  .marquee__shine,
  .ticker,
  .ticker__track,
  .badge,
  .badge__spin{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }

  .marquee__shine{display:none !important;}

  .badge{scale:1 !important; rotate:-12deg !important;}
  .ticker{rotate:-.35deg !important;}
  .balloon{animation:none !important;}

  .ticket{transform:perspective(760px) rotate(var(--rz)) !important;}
  .marquee{transform:none;}
  .clown__bubble,
  .text-snippet{transform:rotate(-1.6deg) !important;}

  [data-reveal]{opacity:1 !important; translate:none !important; transition:none !important;}

  .clown,
  .data-table tbody tr,
  .ticket,
  .ticket__no,
  .ticket__arrow,
  .clown__bubble{transition:none !important;}
}