/* =================== the fun layer: boot screen, letters, parallax, ribbons, cinema, party =================== */

/* hero waits for the boot screen */
body:not(.booted) .hero *, body:not(.booted) .hero *::before { animation-play-state: paused !important; }

/* ---------- boot screen + cartoon iris-out ---------- */
#boot {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--night) 70%, var(--accent)), var(--night) 70%); color: #FFE9DB;
  clip-path: circle(150% at 50% 50%); transition: clip-path .75s cubic-bezier(.7, 0, .3, 1);
  animation: bootfail 0s 4s forwards;
}
#boot.out { clip-path: circle(0% at 50% 50%); }
@keyframes bootfail { to { visibility: hidden; } }
.boot-in { text-align: center; }
#boot-pet { width: 180px; margin: 0 auto 10px; }
.boot-title { font: 700 30px/1 'Pixelify Sans', sans-serif; letter-spacing: .2em; margin: 0 0 14px; animation: blink .5s steps(2) infinite; }
.boot-bar { width: 220px; height: 18px; margin: 0 auto; border: 3px solid #FFE9DB; border-radius: 4px; padding: 2px; }
.boot-bar i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, var(--accent) 0 10px, transparent 10px 12px); animation: load 1.2s steps(18) forwards; }
.boot-msg { font: 600 14px/1 'Pixelify Sans', sans-serif; opacity: .7; margin-top: 12px; }
@keyframes load { to { width: 100%; } }
@keyframes blink { 50% { opacity: .55; } }

/* ---------- letters ---------- */
.w { display: inline-block; white-space: nowrap; }
.ch { display: inline-block; will-change: transform; }
h1.split .ch { animation: drop .8s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(var(--i) * 70ms + 250ms); cursor: default; }
h1.split .ch.landed { animation: none; }
h1.split .ch.jump { animation: jump .55s cubic-bezier(.3, 1.6, .5, 1); }
h1.split .ch.spin { animation: spinjump .7s cubic-bezier(.3, 1.4, .5, 1); }
h1 .name { animation: none; }
@keyframes drop { 0% { transform: translateY(-120px) rotate(-20deg); opacity: 0; } 60% { opacity: 1; } 100% { transform: none; } }
@keyframes jump { 40% { transform: translateY(-22px) scaleY(1.1) rotate(-6deg); } 70% { transform: translateY(3px) scaleY(.88); } }
@keyframes spinjump { 50% { transform: translateY(-40px) rotate(180deg); } 100% { transform: rotate(360deg); } }
.sec-head h2 .ch, .type-card h2 .ch { opacity: 0; transform: translateY(.7em) rotate(8deg); }
.reveal.in h2 .ch { animation: rise .55s cubic-bezier(.3, 1.5, .5, 1) forwards; animation-delay: calc(var(--i) * 28ms + 80ms); }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ---------- parallax ---------- */
.sky { translate: calc(var(--mx, 0) * -18px) calc(var(--my, 0) * -10px); transition: translate .6s ease-out; }
.hero-stage { translate: calc(var(--mx, 0) * 10px) calc(var(--my, 0) * 6px); transition: translate .5s ease-out; }
.hero-copy { translate: calc(var(--mx, 0) * -6px) calc(var(--my, 0) * -4px); transition: translate .5s ease-out; }

/* ---------- orbiting pixel bits around the hero ---------- */
.orbit { position: absolute; left: 50%; top: 48%; width: 92%; aspect-ratio: 1; translate: -50% -50%; pointer-events: none; animation: orbit 14s linear infinite; }
.orbit i { position: absolute; width: 12px; height: 12px; animation: counter 14s linear infinite; }
.orbit .o1 { top: 0; left: 50%; width: 20px; height: 20px; background: var(--spark); clip-path: polygon(50% 0, 65% 35%, 100% 50%, 65% 65%, 50% 100%, 35% 65%, 0 50%, 35% 35%); }
.orbit .o2 { bottom: 4%; left: 14%; width: 18px; height: 16px; background: var(--heart); clip-path: polygon(0 20%, 20% 0, 50% 20%, 80% 0, 100% 20%, 100% 50%, 50% 100%, 0 50%); }
.orbit .o3 { top: 30%; right: -1%; background: var(--teal); }
.orbit .o4 { top: 18%; left: 2%; width: 8px; height: 8px; background: var(--purple); }
@keyframes orbit { to { rotate: 360deg; } }
@keyframes counter { to { rotate: -360deg; } }

/* ---------- ribbons ---------- */
.ribbons { position: relative; height: 170px; margin-top: 30px; overflow: hidden; z-index: 2; }
.ribbon { position: absolute; left: -5%; width: 110%; border-block: 3px solid var(--outline); padding: 12px 0; overflow: hidden; }
.ribbon.r1 { top: 30px; background: var(--accent); color: var(--on-accent); rotate: -3deg; z-index: 2; box-shadow: 0 6px 0 var(--soft); }
.ribbon.r2 { top: 70px; background: var(--paper); color: var(--outline); rotate: 2.5deg; }
.track { display: flex; width: max-content; align-items: center; gap: 22px; padding-right: 22px; font: 700 26px/1 'Pixelify Sans', sans-serif; white-space: nowrap; }
.track b { color: var(--spark); font-size: 22px; display: inline-block; animation: twirl 2.4s linear infinite; }
.r2 .track b { color: var(--accent-d); }
@keyframes twirl { to { rotate: 360deg; } }

/* ---------- cinema ---------- */
.cinema {
  max-width: none; padding: 110px 20px 100px; margin-top: -60px; position: relative; color: #F5EEFF;
  --glow: #A5D4FF;
  background:
    radial-gradient(60% 50% at 50% 42%, color-mix(in srgb, var(--glow) 26%, transparent), transparent 70%),
    linear-gradient(#1E1830, #15111F);
  clip-path: polygon(0 40px, 100% 0, 100% calc(100% - 40px), 0 100%);
}
.cinema-inner { max-width: 1000px; margin: 0 auto; }
.sec-head.light p { color: #CFC5E8; }
.sec-head.light .kicker { color: var(--accent-l); }
.theater { display: grid; gap: 10px; }
.screen {
  position: relative; border: 6px solid #0C0912; border-radius: 12px; overflow: hidden;
  background: radial-gradient(120% 140% at 50% 0%, #FFF6EE 0, #FFE3CF 60%, #F2C9AE 100%);
  box-shadow: 0 0 0 3px #3A2E52, 0 0 60px color-mix(in srgb, var(--glow) 55%, transparent), 0 0 140px color-mix(in srgb, var(--glow) 30%, transparent);
  transition: box-shadow 1s, filter .3s;
}
.screen img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.scan { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .05) 0 2px, transparent 2px 4px); animation: flicker 3s steps(3) infinite; }
@keyframes flicker { 50% { opacity: .6; } }
.paused-badge {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; scale: .5; opacity: 0; transition: .25s cubic-bezier(.3, 1.6, .5, 1);
  font: 700 26px/1 'Pixelify Sans', sans-serif; color: #fff; background: rgba(20, 14, 28, .85); padding: 12px 20px; border-radius: 10px;
  white-space: nowrap; font-size: clamp(14px, 3.5vw, 26px);
}
.cinema.paused .paused-badge { opacity: 1; scale: 1; animation: blink 1s steps(2) infinite; }
.cinema.paused .screen { filter: saturate(.5) brightness(.85); }
.cinema.paused { --glow: #FF6A6A; }
.seats { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.audience { width: min(46%, 320px); margin-right: 6%; }
#reel-toggle { margin-bottom: 24px; }

/* ---------- tilt cards + shine ---------- */
.card, .step { position: relative; --rx: 0deg; --ry: 0deg; }
.card.in, .step.in { transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--ty, 0px)); }
.card.in:hover, .step.in:hover { --ty: -6px; box-shadow: 0 calc(var(--px) * 2.5) 0 var(--outline); }
.card.tilting, .step.tilting { transition: transform .08s linear, box-shadow .2s; }
.card::after, .step::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .25s;
  background: radial-gradient(260px circle at var(--sx, 50%) var(--sy, 50%), rgba(255, 255, 255, .6), transparent 60%);
  mix-blend-mode: soft-light;
}
.card:hover::after, .step:hover::after { opacity: 1; }

/* ---------- magnetic buttons + shine ---------- */
.btn { translate: var(--bx, 0px) var(--by, 0px); transition: transform .08s, box-shadow .08s, background .2s, translate .25s cubic-bezier(.3, 1.5, .5, 1); }
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: ''; position: absolute; top: -20%; bottom: -20%; width: 30px; left: -60px; rotate: 20deg;
  background: rgba(255, 255, 255, .45); animation: shine 3.2s ease-in-out infinite; pointer-events: none;
}
@keyframes shine { 0%, 70% { left: -60px; } 100% { left: 120%; } }

/* ---------- taskbar scroll progress ---------- */
.taskbar::before {
  content: ''; position: absolute; left: 0; top: -3px; height: 3px; width: calc(var(--p, 0) * 100%);
  background: linear-gradient(90deg, var(--spark), var(--accent-l), var(--heart));
}

/* ---------- fx layer ---------- */
#fx { position: fixed; inset: 0; z-index: 44; pointer-events: none; }

/* ---------- footer sleeper ---------- */
.sleeper { width: 200px; margin: 0 auto -4px; }
.pillow { height: 14px; margin: -2px 12% 0; background: #fff; border: 3px solid var(--outline); border-radius: 10px; }
.foot .the-end { font: 700 22px/1 'Pixelify Sans', sans-serif; color: var(--accent-d); margin: 20px 0 10px; }
kbd { font: 700 12px/1 'Pixelify Sans', sans-serif; background: #fff; border: 2px solid var(--line); border-bottom-width: 4px; border-radius: 6px; padding: 2px 6px; margin: 0 1px; }
.egg { cursor: pointer; white-space: nowrap; }

/* ---------- party mode (type f-l-i-p-p-y) ---------- */
.party .sky, .party .taskbar { animation: hue 1.2s linear infinite; }
.party h1 .name .ch { animation: rainbow 1s linear infinite, partyjump .5s ease-in-out infinite !important; animation-delay: calc(var(--i) * 60ms) !important; }
.party .card, .party .step { animation: shake .4s ease-in-out infinite; }
@keyframes hue { to { filter: hue-rotate(360deg); } }
@keyframes rainbow { 0% { color: var(--accent); } 25% { color: var(--heart); } 50% { color: var(--purple); } 75% { color: var(--teal); } 100% { color: var(--accent); } }
@keyframes partyjump { 50% { transform: translateY(-14px); } }
@keyframes shake { 25% { rotate: -1deg; } 75% { rotate: 1deg; } }

@media (max-width: 760px) {
  .ribbons { height: 130px; }
  .track { font-size: 19px; }
  .cinema { padding-top: 80px; }
  .seats { flex-direction: column-reverse; align-items: center; }
  .audience { width: 70%; margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sec-head h2 .ch, .type-card h2 .ch { opacity: 1; transform: none; }
  h1.split .ch { animation: none; }
}