@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes riseIn{from{opacity:0;transform:translateY(42px)}to{opacity:1;transform:none}}
@keyframes dropIn{from{opacity:0;transform:translateY(-34px)}to{opacity:1;transform:none}}
@keyframes slideLeft{from{opacity:0;transform:translateX(48px)}to{opacity:1;transform:none}}
@keyframes revealUp{from{opacity:0;clip-path:inset(100% 0 0)}to{opacity:1;clip-path:inset(0)}}
@keyframes revealRight{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0)}}
@keyframes popIn{0%{opacity:0;transform:scale(.55) rotate(-8deg)}70%{opacity:1;transform:scale(1.08)}100%{opacity:1;transform:none}}
@keyframes zoomSoft{from{opacity:0;transform:scale(1.12)}to{opacity:1;transform:scale(1)}}
@keyframes tiltIn{from{opacity:0;transform:translateY(45px) rotate(0)}to{opacity:1}}
@keyframes drawIn{from{opacity:0;transform:scale(.75);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}
@keyframes musicSpin{to{transform:rotate(360deg)}}
@keyframes hintUp{0%{opacity:0;transform:translateY(8px) rotate(45deg)}50%{opacity:1}100%{opacity:0;transform:translateY(-8px) rotate(45deg)}}
@keyframes loaderSpin{to{transform:rotate(360deg)}}
@keyframes characterLeft{0%{opacity:0;transform:translateX(-36px) translateY(20px) rotate(-8deg) scale(.78)}68%{opacity:1;transform:translateX(3px) translateY(-2px) rotate(2deg) scale(1.04)}100%{opacity:1;transform:none}}
@keyframes characterRight{0%{opacity:0;transform:translateX(36px) translateY(20px) rotate(8deg) scale(.78)}68%{opacity:1;transform:translateX(-3px) translateY(-2px) rotate(-2deg) scale(1.04)}100%{opacity:1;transform:none}}
@keyframes characterPop{0%{opacity:0;transform:translateY(32px) scale(.55) rotate(-5deg)}72%{opacity:1;transform:translateY(-4px) scale(1.08) rotate(2deg)}100%{opacity:1;transform:none}}
@keyframes characterFloat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-5px) rotate(1deg)}}
@keyframes headSwing{0%,100%{transform:rotate(0deg) translateY(0)}30%{transform:rotate(-3.5deg) translateY(-1px)}70%{transform:rotate(3.5deg) translateY(-1px)}}
@keyframes danceTwist{0%,100%{transform:rotate(0deg) translateY(0)}25%{transform:rotate(-5deg) translateY(-4px)}50%{transform:rotate(0deg) translateY(0)}75%{transform:rotate(5deg) translateY(-4px)}}
@keyframes bannerRise{0%{opacity:0;transform:translateY(45px) scale(.92)}75%{opacity:1;transform:translateY(-3px) scale(1.01)}100%{opacity:1;transform:none}}
.page:not(.active) .anim{animation:none!important;opacity:0}
.page.active .fade-in{animation:fadeIn .9s ease both}.page.active .rise-in{animation:riseIn .85s cubic-bezier(.2,.75,.25,1) both}.page.active .drop-in{animation:dropIn .85s ease both}.page.active .slide-left{animation:slideLeft .8s ease both}.page.active .reveal-up{animation:revealUp 1.05s cubic-bezier(.7,0,.2,1) both}.page.active .reveal-right{animation:revealRight 1s ease both}.page.active .pop-in{animation:popIn .75s ease both}.page.active .zoom-soft{animation:zoomSoft 1.25s ease both}.page.active .tilt-in{animation:tiltIn .9s ease both}.page.active .draw-in{animation:drawIn 1.1s ease both}
.delay-1{animation-delay:.25s!important}.delay-2{animation-delay:.55s!important}.delay-3{animation-delay:.9s!important}
.page:not(.active) .character-art{animation:none!important;opacity:0}
/* Groom & bride: head-swing loop */
.page.active .slot-shinchan .character-art{animation:characterPop .72s cubic-bezier(.22,.8,.25,1) .18s both,headSwing 2.8s ease-in-out 1.15s infinite;transform-origin:50% 90%}
.page.active .slot-bride .character-art{animation:characterPop .72s cubic-bezier(.22,.8,.25,1) .26s both,headSwing 3.3s ease-in-out 1.23s infinite;transform-origin:50% 90%}
/* Other characters: dance-twist loop (each with independent timing) */
.page.active .slot-nene .character-art{animation:characterLeft .72s cubic-bezier(.22,.8,.25,1) 0s both,danceTwist 3s ease-in-out .95s infinite;transform-origin:50% 86%}
.page.active .slot-masao .character-art{animation:characterLeft .72s cubic-bezier(.22,.8,.25,1) .1s both,danceTwist 3.5s ease-in-out 1.05s infinite;transform-origin:50% 86%}
.page.active .slot-dog .character-art{animation:characterPop .72s cubic-bezier(.22,.8,.25,1) .14s both,danceTwist 2.6s ease-in-out 1s infinite;transform-origin:50% 80%}
.page.active .slot-kazama .character-art{animation:characterRight .72s cubic-bezier(.22,.8,.25,1) .34s both,danceTwist 3.7s ease-in-out 1.31s infinite;transform-origin:50% 86%}
.page.active .slot-bochan .character-art{animation:characterRight .72s cubic-bezier(.22,.8,.25,1) .42s both,danceTwist 3.2s ease-in-out 1.39s infinite;transform-origin:50% 86%}
.page.active .side-character .character-art{animation:characterRight .8s cubic-bezier(.22,.8,.25,1) .35s both,characterFloat 3.7s ease-in-out 1.2s infinite}
@keyframes musicNoteFloat{0%,100%{opacity:0;transform:translateY(0) rotate(0) scale(.7)}20%{opacity:.9;transform:translateY(-8px) rotate(8deg) scale(1)}50%{opacity:.7;transform:translateY(-18px) rotate(-6deg) scale(.95)}80%{opacity:0;transform:translateY(-30px) rotate(10deg) scale(.75)}}
@keyframes heartFloat{0%,100%{opacity:0;transform:translateY(0) scale(.6)}18%{opacity:.95;transform:translateY(-6px) scale(1.05)}45%{opacity:.7;transform:translateY(-16px) scale(.9)}78%{opacity:0;transform:translateY(-26px) scale(.65)}}
@keyframes starFloat{0%,100%{opacity:0;transform:translateY(0) rotate(0) scale(.5)}20%{opacity:1;transform:translateY(-10px) rotate(18deg) scale(1)}55%{opacity:.6;transform:translateY(-22px) rotate(-10deg) scale(.8)}85%{opacity:0;transform:translateY(-34px) rotate(22deg) scale(.6)}}
.page.active .head-decorations .note{animation:musicNoteFloat 2.8s ease-in-out infinite}
.page.active .head-decorations .heart{animation:heartFloat 2.4s ease-in-out infinite}
.page.active .head-decorations .star{animation:starFloat 3s ease-in-out infinite}
.page.active .head-decorations .n1{animation-delay:.2s}
.page.active .head-decorations .n2{animation-delay:.7s}
.page.active .head-decorations .n3{animation-delay:1.3s}
.page.active .head-decorations .h1{animation-delay:.5s}
.page.active .head-decorations .h2{animation-delay:1s}
.page.active .head-decorations .h3{animation-delay:1.5s}
.page.active .head-decorations .s1{animation-delay:.35s}
.page.active .head-decorations .s2{animation-delay:1.1s}
.page:not(.active) .head-decorations span{animation:none!important;opacity:0}
.page.active .letter-banner .character-art{animation:bannerRise .95s cubic-bezier(.2,.75,.25,1) .35s both}
.page.active .fan-cameo .character-art{animation:characterRight .8s cubic-bezier(.22,.8,.25,1) .9s both,characterFloat 4s ease-in-out 1.7s infinite}
.page.active .party-corner .character-art{animation:characterRight .9s cubic-bezier(.22,.8,.25,1) .25s both,characterFloat 4.5s ease-in-out 1.2s infinite}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}}

/* ===== Ambient effects 2026-08-22 ===== */
@keyframes kenBurns{from{transform:scale(1)}to{transform:scale(1.07)}}
@keyframes shineSweep{0%{transform:translateX(-160%) skewX(-14deg)}55%,100%{transform:translateX(320%) skewX(-14deg)}}
@keyframes fxRise{0%{transform:translateY(0) rotate(0);opacity:0}8%{opacity:.55}85%{opacity:.5}100%{transform:translateY(-104vh) rotate(26deg);opacity:0}}
@keyframes fxFall{0%{transform:translateY(0) rotate(0);opacity:0}10%{opacity:.5}88%{opacity:.45}100%{transform:translateY(106vh) rotate(48deg);opacity:0}}
@keyframes fxSparkle{0%,100%{opacity:0;transform:scale(.35)}50%{opacity:.85;transform:scale(1)}}

/* ===== Heart burst effect ===== */
@keyframes heartBurst{
  0%{transform:translate(0,0) scale(0);opacity:0}
  5%{opacity:1;transform:translate(calc(var(--tx)*.15),calc(var(--ty)*.15)) scale(.5)}
  25%{opacity:1;transform:translate(var(--tx),var(--ty)) scale(1.3)}
  45%{opacity:.5;transform:translate(calc(var(--tx)*1.25),calc(var(--ty)*1.25)) scale(.6)}
  55%,100%{opacity:0;transform:translate(0,0) scale(0)}
}
@keyframes heartPulse{
  0%,100%{transform:scale(1)}
  15%{transform:scale(1.25)}
  30%{transform:scale(1)}
  45%{transform:scale(1.15)}
  60%,100%{transform:scale(1)}
}
.page.active .heart-sep{animation:heartPulse 3s ease-in-out 1.2s infinite}
.page.active .burst-particle{animation:heartBurst 3s ease-out 1.2s infinite}
.page:not(.active) .burst-particle,.page:not(.active) .heart-sep{animation:none!important}