:root{--ink:#111411;--paper:#f4f0e6;--white:#fffdf8;--yellow:#f3c83e;--red:#e74b34;--blue:#21516f;--green:#45725b;--muted:#62665f;--line:rgba(17,20,17,.15)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",Meiryo,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit} video,img{max-width:100%} button{font:inherit}
.wrap{width:min(1160px,calc(100% - 48px));margin:auto}
.label{display:flex;align-items:center;gap:10px;margin-bottom:16px;color:var(--muted);font-size:11px;font-weight:900;letter-spacing:.18em}
.label:before{content:"";width:30px;height:3px;background:var(--yellow)}
.title{margin:0;font-size:clamp(46px,6.1vw,80px);line-height:1.07;letter-spacing:-.06em;font-weight:950}
.title .line{display:block;white-space:nowrap}
.copy{font-size:16px;line-height:1.95;letter-spacing:.025em}
.head{display:flex;justify-content:space-between;gap:48px;align-items:end;margin-bottom:42px}
.head .copy{max-width:520px;margin:0}

/* HERO */
.hero{min-height:100svh;position:relative;background:#111;color:#fff;overflow:hidden}
.hero>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 48%}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,7,5,.46),rgba(4,7,5,.06) 72%),linear-gradient(0deg,rgba(4,7,5,.42),rgba(4,7,5,.00) 54%)}
.hero-inner{position:relative;z-index:2;min-height:100svh;display:flex;flex-direction:column;justify-content:space-between;padding:24px 0 30px}
.hero-top{display:flex;justify-content:space-between;align-items:center}
.brand{display:flex;align-items:center;gap:12px;font-weight:900;line-height:1.45;letter-spacing:.035em}
.kamome-icon{width:52px;height:52px;border-radius:50%;background:var(--yellow);display:grid;place-items:center;overflow:hidden;flex:0 0 auto}
.kamome-icon img{width:42px;height:42px;object-fit:contain;mix-blend-mode:multiply}
.practice-jump{padding:11px 17px;border:1px solid rgba(255,255,255,.54);border-radius:999px;text-decoration:none;background:rgba(255,255,255,.08);font-size:11px;font-weight:900;letter-spacing:.14em;backdrop-filter:blur(7px)}
.hero-body{padding-top:14vh}
.kicker{display:flex;align-items:center;gap:11px;margin-bottom:20px;font-size:12px;font-weight:900;letter-spacing:.17em}
.kicker:before{content:"";width:40px;height:3px;background:var(--yellow)}
h1{margin:0;font-size:clamp(60px,10vw,136px);line-height:1;letter-spacing:-.07em;font-weight:950}
h1 .line{display:block;white-space:nowrap}
.hero-copy{margin:22px 0 0;font-size:16px;line-height:1.8;font-weight:800;letter-spacing:.035em}
.hero-bottom{display:flex;justify-content:space-between;align-items:end}
.date strong{font-size:32px;line-height:1}
.date span{font-size:11px;margin-left:10px;line-height:1.55;letter-spacing:.12em}
.down{width:58px;height:58px;border:1px solid rgba(255,255,255,.55);border-radius:50%;display:grid;place-items:center;text-decoration:none;font-size:22px}

/* COUNT */
section{padding:100px 0}
.count-grid{margin-top:42px;display:grid;grid-template-columns:1.05fr repeat(4,.62fr);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.count-intro,.count-item{padding:28px 18px;border-right:1px solid var(--line)}
.count-intro{padding-left:0} .count-item:last-child{border-right:0}
.count-intro b{font-size:20px;line-height:1.45}
.count-intro span,.count-item span{display:block;margin-top:10px;color:var(--muted);font-size:10px;font-weight:900;letter-spacing:.16em}
.count-item b{display:block;font-size:clamp(70px,8.5vw,112px);line-height:.88;letter-spacing:-.075em;font-weight:950}

/* SCHEDULE */
.schedule{background:var(--white)}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.card{min-height:210px;padding:22px;border:2px solid var(--ink);border-radius:26px;display:flex;flex-direction:column;justify-content:space-between}
.card.blue{background:var(--blue);color:#fff;border-color:var(--blue)} .card.red{background:var(--red);color:#fff;border-color:var(--red)}
.card small{font-size:11px;font-weight:900;letter-spacing:.14em}
.card h3{font-size:32px;margin:12px 0 0;letter-spacing:-.03em}
.card p{font-size:14px;line-height:1.75;font-weight:700}
.next{margin-top:18px;background:var(--ink);color:#fff;padding:18px 22px;border-radius:18px}
.next small{display:block;color:#bbb;font-size:10px;letter-spacing:.15em;margin-bottom:5px}
.next strong{font-size:19px}

/* PRACTICE SLIDER */
.practice{background:#eae4d7}
.practice-head{margin-bottom:28px}
.slider-hint{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px;color:var(--muted);font-size:12px;font-weight:800;letter-spacing:.04em}
.slider-hint strong{color:var(--ink);font-size:14px}
.practice-track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(520px,70vw);gap:18px;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x mandatory;padding:2px 0 16px;scrollbar-width:thin}
.practice-card{scroll-snap-align:start}
.video-shell{aspect-ratio:16/9;border:2px solid var(--ink);border-radius:24px;overflow:hidden;background:#111}
.video-shell video{width:100%;height:100%;object-fit:cover;display:block}
.practice-date{margin-top:12px;font-size:22px;font-weight:950;letter-spacing:-.02em}
.last-year-block{margin-top:68px;padding-top:44px;border-top:2px solid var(--ink)}
.last-year-title{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:18px}
.last-year-title h3{margin:0;font-size:34px;letter-spacing:-.04em}
.last-year-title span{font-size:11px;font-weight:900;letter-spacing:.16em;color:var(--muted)}
.last-year-video{width:min(880px,100%)}
.youtube-btn{display:inline-block;margin-top:16px;padding:13px 18px;border-radius:999px;background:var(--red);color:#fff;text-decoration:none;font-size:12px;font-weight:900}

/* FLOW */
.flow{background:var(--ink);color:#fff}
.flow .label,.flow .copy{color:#c9cbc6}
.steps{margin-top:46px}
.step{display:grid;grid-template-columns:78px .75fr 1.25fr;gap:20px;padding:26px 0;border-top:1px solid rgba(255,255,255,.18)}
.step:last-child{border-bottom:1px solid rgba(255,255,255,.18)}
.step-no{font-size:24px;color:var(--yellow);font-weight:950}
.step h3{margin:0;font-size:28px;letter-spacing:-.025em}
.step p{margin:0;font-size:15px;line-height:1.9;color:#d3d5d0}
.em{color:var(--yellow);font-size:20px;font-weight:950}

/* FORMATION */
.formation{background:var(--white)}
.form-wrap{display:grid;grid-template-columns:300px 1fr;gap:22px}
.tabs{display:grid;gap:9px}
.tab{border:2px solid var(--ink);background:transparent;border-radius:18px;padding:16px;text-align:left;cursor:pointer}
.tab b{display:block;margin-bottom:5px} .tab span{font-size:13px;color:var(--muted);line-height:1.5}
.tab.active{background:var(--ink);color:#fff} .tab.active span{color:#ddd}
.stage{min-height:520px;border:2px solid var(--ink);border-radius:26px;background:var(--paper);padding:22px}
.panel{display:none} .panel.active{display:block}
.stagehead{font-size:11px;font-weight:900;letter-spacing:.14em;color:var(--muted)}
.visual{min-height:440px;display:flex;justify-content:center;align-items:center;position:relative}
.taiko{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);width:70px;height:70px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:900}
.diagram{display:grid;gap:20px}
.row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.person{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--blue);color:#fff;font-size:9px;font-weight:900}
.person.old{background:var(--green)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:45px;width:82%}
.half{height:140px;border:5px solid var(--green);border-left-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-radius:50% 50% 0 0}
.circle{grid-column:1/3;justify-self:center;width:200px;height:200px;border:5px solid var(--blue);border-radius:50%;display:grid;place-items:center;color:var(--blue);font-weight:900}
.ref{text-align:right;margin-top:14px} .ref button{border:0;background:none;text-decoration:underline;color:var(--muted);cursor:pointer}
.refimg{display:none;margin-top:14px} .refimg.open{display:block} .refimg img{display:block;width:min(520px,100%);margin-left:auto;border-radius:18px}

/* CLOSING */
.closing{min-height:58svh;position:relative;background:#111;color:#fff;display:flex;align-items:end;overflow:hidden}
.closing video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.closing:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.8),rgba(0,0,0,.08))}
.closing-inner{position:relative;z-index:2;padding:78px 0 34px}
.closing h2{margin:0;font-size:clamp(48px,7vw,96px);line-height:1.07;letter-spacing:-.055em}
footer{background:var(--ink);color:#aaa;padding:24px 0;font-size:10px;letter-spacing:.12em}
footer a{text-decoration:underline;text-underline-offset:3px}

@media(max-width:820px){
  .wrap{width:calc(100% - 32px)} section{padding:76px 0}
  .head{display:block;margin-bottom:32px} .head .copy{margin-top:18px}
  .title{font-size:clamp(38px,10.7vw,51px)}
  .hero-body{padding-top:17vh} h1{font-size:clamp(51px,14.4vw,69px)} .hero-copy{font-size:14px}
  .kamome-icon{width:48px;height:48px} .kamome-icon img{width:39px;height:39px}
  .count-grid{grid-template-columns:1fr 1fr;margin-top:32px}
  .count-intro{grid-column:1/3;border-right:0;border-bottom:1px solid var(--line);padding:18px 0}
  .count-item{padding:22px 0} .count-item:nth-child(2),.count-item:nth-child(4){border-right:1px solid var(--line)} .count-item:nth-child(3),.count-item:nth-child(5){padding-left:20px;border-right:0}
  .count-item b{font-size:78px}
  .cards{grid-template-columns:1fr 1fr} .card{min-height:180px;padding:18px}
  .practice-track{grid-auto-columns:88vw;gap:14px} .video-shell{border-radius:20px} .practice-date{font-size:20px}
  .last-year-block{margin-top:52px;padding-top:34px} .last-year-title h3{font-size:28px}
  .step{grid-template-columns:50px 1fr;gap:10px;padding:22px 0} .step p{grid-column:2/3} .step h3{font-size:23px}
  .form-wrap{grid-template-columns:1fr} .tabs{display:flex;overflow:auto} .tab{min-width:175px}
  .stage{min-height:440px} .visual{min-height:360px} .circle{width:145px;height:145px} .two{width:100%;gap:22px}
}
@media(max-width:520px){.cards{grid-template-columns:1fr}.card{min-height:155px}}


:root{
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --glow:0 0 0 1px rgba(243,200,62,.12),0 0 34px rgba(243,200,62,.18);
}
html{scroll-padding-top:20px}
body{position:relative}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9998;
  background:radial-gradient(circle at var(--mx,50%) var(--my,30%),rgba(243,200,62,.07),transparent 22%);
  opacity:.9;transition:opacity .2s ease
}
#scrollProgress{
  position:fixed;left:0;top:0;height:4px;width:0;z-index:10000;
  background:linear-gradient(90deg,var(--yellow),var(--red));
  box-shadow:0 0 18px rgba(243,200,62,.65);
  transform-origin:left center;
}
#sparkLayer{position:fixed;inset:0;pointer-events:none;z-index:9997;overflow:hidden}
.spark{
  position:absolute;width:7px;height:7px;border-radius:50%;
  background:var(--yellow);box-shadow:0 0 14px rgba(243,200,62,.9);
  animation:sparkFly .9s var(--ease-out) forwards
}
@keyframes sparkFly{
  from{transform:translate3d(0,0,0) scale(.4);opacity:0}
  20%{opacity:1}
  to{transform:translate3d(var(--tx),var(--ty),0) scale(1.6);opacity:0}
}
.reveal{
  opacity:0;transform:translateY(34px) scale(.985);
  filter:blur(5px);
  transition:opacity .85s var(--ease-out),transform .85s var(--ease-out),filter .85s var(--ease-out)
}
.reveal.in-view{opacity:1;transform:none;filter:none}
.reveal-delay-1{transition-delay:.08s}.reveal-delay-2{transition-delay:.16s}.reveal-delay-3{transition-delay:.24s}
.label{
  position:relative;overflow:hidden
}
.label::after{
  content:"";position:absolute;left:0;bottom:-3px;width:100%;height:1px;
  background:linear-gradient(90deg,var(--yellow),transparent);
  transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease-out)
}
.in-view .label::after,.label.in-view::after{transform:scaleX(1)}
.title .line{
  transition:transform .7s var(--ease-out),text-shadow .7s ease;
  transform-origin:left center
}
section.in-view .title .line:first-child{transform:translateX(0)}
section.in-view .title .line:last-child{text-shadow:0 0 28px rgba(243,200,62,.08)}
.hero::before{
  content:"";position:absolute;inset:-15%;z-index:1;pointer-events:none;
  background:
    radial-gradient(circle at 25% 35%,rgba(243,200,62,.16),transparent 24%),
    radial-gradient(circle at 85% 72%,rgba(231,75,52,.13),transparent 26%);
  mix-blend-mode:screen;animation:heroGlow 8s ease-in-out infinite alternate
}
@keyframes heroGlow{from{transform:translate3d(-2%,-1%,0) scale(1)}to{transform:translate3d(2%,1%,0) scale(1.05)}}

.kamome-icon{
  position:relative;box-shadow:0 8px 26px rgba(243,200,62,.2);
  transition:transform .35s var(--ease-spring),box-shadow .35s ease
}
.kamome-icon:hover{transform:rotate(-8deg) scale(1.08);box-shadow:0 10px 34px rgba(243,200,62,.36)}
.kamome-icon::after{
  content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid rgba(243,200,62,.58);
  animation:iconPulse 2.2s ease-out infinite
}
@keyframes iconPulse{0%{transform:scale(.8);opacity:.8}100%{transform:scale(1.45);opacity:0}}
.hero h1 .line{
  display:block;transform:translateY(22px);opacity:0;
  animation:heroLine .85s var(--ease-out) forwards
}
.hero h1 .line:nth-child(2){animation-delay:.12s}
@keyframes heroLine{to{transform:none;opacity:1}}
.hero-copy,.kicker,.hero-bottom,.hero-top{animation:heroFade .9s var(--ease-out) both}
.hero-top{animation-delay:.05s}.kicker{animation-delay:.18s}.hero-copy{animation-delay:.32s}.hero-bottom{animation-delay:.46s}
@keyframes heroFade{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.practice-jump,.youtube-btn,.down,.tab,.ref button{
  position:relative;overflow:hidden;transition:transform .25s var(--ease-spring),box-shadow .25s ease,background .25s ease
}
.practice-jump::after,.youtube-btn::after,.tab::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 0 35%,rgba(255,255,255,.22) 48%,transparent 62%);
  transform:translateX(-120%);transition:transform .6s var(--ease-out)
}
.practice-jump:hover::after,.youtube-btn:hover::after,.tab:hover::after{transform:translateX(120%)}
.practice-jump:hover,.youtube-btn:hover,.down:hover{transform:translateY(-3px) scale(1.02)}
.down{animation:downFloat 1.8s ease-in-out infinite}
@keyframes downFloat{50%{transform:translateY(7px)}}
.count-item{
  position:relative;overflow:hidden;transition:background .3s ease,transform .3s var(--ease-spring)
}
.count-item:hover{background:rgba(243,200,62,.09);transform:translateY(-4px)}
.count-item b{transition:transform .28s var(--ease-spring),text-shadow .28s ease}
.count-item.bump b{transform:scale(1.08);text-shadow:0 0 28px rgba(243,200,62,.26)}
.card{
  position:relative;overflow:hidden;transition:transform .35s var(--ease-spring),box-shadow .35s ease
}
.card::after{
  content:"";position:absolute;inset:-45% auto auto -25%;width:60%;height:180%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);
  transform:rotate(18deg) translateX(-160%);
  transition:transform .8s var(--ease-out)
}
.card:hover{transform:translateY(-8px) rotate(-.4deg);box-shadow:0 18px 48px rgba(17,20,17,.13)}
.card:hover::after{transform:rotate(18deg) translateX(300%)}
.next{
  position:relative;overflow:hidden
}
.next::before{
  content:"";position:absolute;left:-10%;top:0;width:30%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(243,200,62,.24),transparent);
  animation:nextSweep 3.8s linear infinite
}
@keyframes nextSweep{from{transform:translateX(-120%)}to{transform:translateX(450%)}}
.practice-track{scroll-behavior:smooth}
.practice-card{
  transition:transform .35s var(--ease-spring),opacity .35s ease,filter .35s ease;
  transform-origin:center bottom
}
.practice-card.is-center{transform:translateY(-7px) scale(1.015);filter:saturate(1.06)}
.practice-card:not(.is-center){opacity:.82}
.video-shell{
  position:relative;box-shadow:0 12px 28px rgba(17,20,17,.11);
  transition:box-shadow .3s ease,transform .3s var(--ease-spring)
}
.video-shell:hover{box-shadow:0 20px 48px rgba(17,20,17,.18);transform:translateY(-3px)}
.practice-date{position:relative;display:inline-block}
.practice-date::after{
  content:"";position:absolute;left:0;bottom:-4px;width:0;height:4px;background:var(--yellow);
  transition:width .45s var(--ease-out)
}
.practice-card:hover .practice-date::after,.practice-card.is-center .practice-date::after{width:100%}
.flow .step{
  position:relative;transition:background .3s ease,padding-left .3s var(--ease-out)
}
.flow .step::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--yellow);
  transform:scaleY(0);transform-origin:top;transition:transform .45s var(--ease-out)
}
.flow .step:hover{background:rgba(255,255,255,.035);padding-left:14px}
.flow .step:hover::before{transform:scaleY(1)}
.step-no{transition:transform .28s var(--ease-spring),text-shadow .28s ease}
.flow .step:hover .step-no{transform:scale(1.18) rotate(-4deg);text-shadow:0 0 22px rgba(243,200,62,.5)}
.form-wrap{perspective:1200px}
.tab.active{box-shadow:var(--glow);transform:translateX(5px)}
.stage{position:relative;overflow:hidden}
.stage::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,rgba(243,200,62,.08),transparent 36%);
  opacity:0;transition:opacity .5s ease
}
.stage.flash::before{opacity:1}
.panel.active{animation:panelIn .55s var(--ease-out)}
@keyframes panelIn{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
.person{transition:transform .35s var(--ease-spring),box-shadow .35s ease}
.panel.active .person{animation:personPop .5s var(--ease-spring) both}
.panel.active .person:nth-child(2n){animation-delay:.03s}.panel.active .person:nth-child(3n){animation-delay:.06s}
@keyframes personPop{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
.person:hover{transform:scale(1.15);box-shadow:0 0 0 5px rgba(243,200,62,.16)}
.taiko{animation:taikoBeat 1.8s ease-in-out infinite}
@keyframes taikoBeat{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.07);box-shadow:0 0 28px rgba(231,75,52,.3)}}
.closing h2{animation:closingGlow 4s ease-in-out infinite alternate}
@keyframes closingGlow{to{text-shadow:0 0 40px rgba(243,200,62,.18)}}
.floating-note{
  position:fixed;right:16px;bottom:18px;z-index:9996;
  border:1px solid rgba(17,20,17,.15);background:rgba(255,253,248,.82);
  backdrop-filter:blur(12px);border-radius:999px;padding:10px 14px;
  font-size:11px;font-weight:900;letter-spacing:.08em;color:var(--ink);
  box-shadow:0 12px 30px rgba(17,20,17,.12);
  transform:translateY(100px);opacity:0;transition:.45s var(--ease-out)
}
.floating-note.show{transform:none;opacity:1}
.floating-note b{color:var(--red)}
@media(pointer:fine){
  .magnetic{will-change:transform}
}
@media(max-width:820px){
  body::before{display:none}
  .practice-card:not(.is-center){opacity:.9}
  .card:hover,.video-shell:hover,.practice-jump:hover,.youtube-btn:hover,.down:hover{transform:none}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1!important;transform:none!important;filter:none!important}
}


body.opening-lock{overflow:hidden}
.opening{
  position:fixed;inset:0;z-index:20000;background:#120907;
  overflow:hidden;color:#fff;
  transition:opacity .8s cubic-bezier(.16,1,.3,1),visibility .8s ease
}
.opening.hide{opacity:0;visibility:hidden;pointer-events:none}
.opening-fire-bg{position:absolute;inset:0;overflow:hidden;background:#140907}
.opening-fire-bg>img{
  position:absolute;inset:-3%;
  width:106%;height:106%;
  object-fit:cover;
  object-position:center 48%;
  filter:saturate(1.13) contrast(1.07) brightness(1.03);
  transform:scale(1.04);
  animation:openingCinematic 4.1s cubic-bezier(.16,1,.3,1) forwards,
            openingBreath 2.3s 1.1s ease-in-out infinite alternate;
  will-change:transform,filter
}
@keyframes openingCinematic{
  0%{transform:scale(1.18) translate3d(0,2%,0);filter:saturate(.9) contrast(1.12) brightness(.7) blur(2px)}
  45%{filter:saturate(1.18) contrast(1.08) brightness(1.05) blur(0)}
  100%{transform:scale(1.055) translate3d(0,0,0)}
}
@keyframes openingBreath{
  from{filter:saturate(1.08) contrast(1.06) brightness(.98)}
  to{filter:saturate(1.24) contrast(1.1) brightness(1.08)}
}
.opening-fire-vignette{
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 50% 35%,transparent 24%,rgba(12,4,1,.08) 58%,rgba(8,2,0,.5) 100%),
    linear-gradient(0deg,rgba(8,2,0,.46),transparent 28% 74%,rgba(8,2,0,.24));
  pointer-events:none
}
.opening-fire-vignette::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 50% 58%,rgba(255,115,0,.16),transparent 35%);
  mix-blend-mode:screen;animation:fireGlow 1.2s ease-in-out infinite alternate
}
@keyframes fireGlow{to{opacity:.45;transform:scale(1.04)}}
.opening-flame{
  position:absolute;pointer-events:none;mix-blend-mode:screen;filter:blur(8px);
  background:
    radial-gradient(ellipse at 50% 100%,rgba(255,235,75,.95) 0 7%,rgba(255,126,0,.85) 18%,rgba(255,45,0,.28) 42%,transparent 70%);
  transform-origin:50% 100%;opacity:.72
}
.opening-flame-a{left:-10%;bottom:-14%;width:48%;height:72%;animation:flameA 1.05s ease-in-out infinite alternate}
.opening-flame-b{right:-12%;bottom:-18%;width:42%;height:64%;animation:flameB .86s ease-in-out infinite alternate}
.opening-flame-c{left:34%;bottom:-28%;width:34%;height:52%;opacity:.45;animation:flameC 1.25s ease-in-out infinite alternate}
@keyframes flameA{from{transform:rotate(-8deg) scale(.92,1)}to{transform:rotate(4deg) scale(1.05,1.09) translateY(-2%)}}
@keyframes flameB{from{transform:rotate(8deg) scale(.95,1.02)}to{transform:rotate(-4deg) scale(1.07,.96) translateY(-3%)}}
@keyframes flameC{from{transform:scale(.9,1) rotate(-2deg)}to{transform:scale(1.08,1.12) rotate(3deg)}}
.opening-embers{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.opening-ember{
  position:absolute;bottom:-20px;width:4px;height:4px;border-radius:50%;
  background:#ffd35a;box-shadow:0 0 9px #ff7b00,0 0 18px rgba(255,64,0,.7);
  opacity:0;animation:emberRise var(--dur) linear var(--delay) infinite
}
@keyframes emberRise{
  0%{transform:translate3d(0,0,0) scale(.4);opacity:0}
  12%{opacity:1}
  85%{opacity:.85}
  100%{transform:translate3d(var(--drift),-112vh,0) scale(1.4);opacity:0}
}
.opening-ui{
  position:absolute;inset:0;z-index:5;display:flex;align-items:flex-end;justify-content:flex-end;
  padding:26px;pointer-events:none
}
.opening-skip{
  font-size:10px;font-weight:900;letter-spacing:.18em;
  color:rgba(255,255,255,.78);
  border:1px solid rgba(255,255,255,.32);
  background:rgba(0,0,0,.18);backdrop-filter:blur(10px);
  border-radius:999px;padding:9px 13px
}
.soran-flag{
  position:fixed;left:-220px;top:18%;z-index:9000;display:flex;align-items:flex-start;
  pointer-events:none;will-change:transform,opacity;opacity:0
}
.flag-pole{width:6px;height:210px;background:linear-gradient(#e8dfc7,#796f5e);border-radius:4px;box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.flag-cloth{
  width:160px;height:96px;margin-left:-1px;background:linear-gradient(135deg,#e74b34,#aa2418);
  clip-path:polygon(0 0,100% 10%,88% 50%,100% 90%,0 100%);
  display:grid;place-items:center;color:#fff;font-weight:950;font-size:20px;line-height:1.05;text-align:center;
  letter-spacing:-.03em;filter:drop-shadow(0 12px 18px rgba(0,0,0,.2));
  transform-origin:left center;animation:flagWave .7s ease-in-out infinite alternate
}
@keyframes flagWave{from{transform:skewY(-4deg) rotate(-2deg)}to{transform:skewY(5deg) rotate(2deg)}}
.final-date-burst{
  position:fixed;inset:0;z-index:18000;pointer-events:none;display:grid;place-items:center;
  opacity:0;visibility:hidden;background:radial-gradient(circle,rgba(243,200,62,.2),rgba(17,20,17,.94) 48%);
}
.final-date-burst.show{visibility:visible;animation:finalBurst 1.5s cubic-bezier(.16,1,.3,1) both}
.final-date-burst span{
  color:#fff;font-size:min(26vw,220px);font-weight:950;letter-spacing:-.08em;
  text-shadow:0 0 50px rgba(243,200,62,.38);transform:scale(.4)
}
.final-date-burst.show span{animation:finalDatePop 1.1s cubic-bezier(.34,1.56,.64,1) both}
@keyframes finalBurst{0%{opacity:0}20%,70%{opacity:1}100%{opacity:0;visibility:hidden}}
@keyframes finalDatePop{0%{transform:scale(.35) rotate(-6deg)}50%{transform:scale(1.08) rotate(1deg)}100%{transform:scale(1)}}
.formation-motion .person{transition:transform 1s cubic-bezier(.16,1,.3,1),opacity .7s ease,box-shadow .4s ease}
.formation-motion.run .person:nth-child(odd){transform:translate3d(-18px,-10px,0)}
.formation-motion.run .person:nth-child(even){transform:translate3d(18px,10px,0)}
.formation-motion.circle .person{box-shadow:0 0 0 4px rgba(243,200,62,.12)}
.formation-motion.final .person{animation:finalPerson 1s cubic-bezier(.34,1.56,.64,1) both}
@keyframes finalPerson{0%{transform:scale(.5);opacity:0}100%{transform:scale(1);opacity:1}}
@media(max-width:820px){
  .opening-fire-bg>img{object-position:center 50%}
  .opening-ui{padding:18px}
  .soran-flag{top:14%}.flag-pole{height:165px}.flag-cloth{width:125px;height:76px;font-size:16px}
}
@media(prefers-reduced-motion:reduce){
  .opening{display:none!important}.soran-flag,.final-date-burst{display:none!important}
}


.hero-bottom{position:relative}
.hero-quality{
  position:absolute;right:76px;bottom:10px;
  font-size:10px;font-weight:900;letter-spacing:.14em;
  padding:6px 9px;border-radius:999px;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(0,0,0,.18);
  backdrop-filter:blur(8px);
}
@media(max-width:820px){.hero-quality{right:66px;bottom:8px}}


.hero{
  background:
    linear-gradient(90deg,rgba(4,7,5,.46),rgba(4,7,5,.06) 72%),
    linear-gradient(0deg,rgba(4,7,5,.42),rgba(4,7,5,0) 54%),
    url("assets/poster-hq.jpg") center 48% / cover no-repeat #111;
}


.opening-mark{
  display:block;
  object-fit:contain;
  object-position:center;
  background:#fff;
}


.opening-fire-bg>img{
  opacity:1!important;
  visibility:visible!important;
  filter:saturate(1.12) contrast(1.08) brightness(1.03)!important;
  object-fit:cover!important;
  object-position:center 47%!important;
}
.opening-fire-vignette{
  background:
    radial-gradient(circle at 50% 38%,transparent 20%,rgba(10,3,0,.02) 56%,rgba(7,2,0,.30) 100%),
    linear-gradient(0deg,rgba(8,2,0,.28),transparent 32% 76%,rgba(8,2,0,.12))!important;
}
.hero>video{
  display:block!important;
  opacity:1!important;
  visibility:visible!important;
  z-index:0!important;
}
.hero::after{
  background:
    linear-gradient(90deg,rgba(4,7,5,.42),rgba(4,7,5,.04) 72%),
    linear-gradient(0deg,rgba(4,7,5,.38),rgba(4,7,5,0) 54%)!important;
}


/* OPENING: show the complete poster, never crop the artwork */
.opening-fire-bg{
  background:
    radial-gradient(circle at 50% 50%, #4b1208 0%, #220805 44%, #090403 100%) !important;
}
.opening-fire-bg>img{
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  transform:none !important;
  filter:saturate(1.14) contrast(1.06) brightness(1.04) !important;
  animation:openingPosterPulse 3.6s ease-in-out infinite alternate !important;
}
@keyframes openingPosterPulse{
  from{filter:saturate(1.08) contrast(1.05) brightness(1.00)}
  to{filter:saturate(1.22) contrast(1.08) brightness(1.08)}
}
/* animated flame curtains, more visible and continuous */
.opening-fire-bg::before,
.opening-fire-bg::after{
  content:"";
  position:absolute;
  z-index:2;
  pointer-events:none;
  width:48%;
  height:72%;
  bottom:-18%;
  filter:blur(5px);
  mix-blend-mode:screen;
  opacity:.86;
  background:
    radial-gradient(ellipse at 50% 100%,
      rgba(255,245,110,.98) 0 6%,
      rgba(255,156,0,.95) 13%,
      rgba(255,68,0,.72) 30%,
      rgba(255,20,0,.25) 48%,
      transparent 70%);
  transform-origin:50% 100%;
}
.opening-fire-bg::before{
  left:-10%;
  animation:openingFlameLeft .72s ease-in-out infinite alternate;
}
.opening-fire-bg::after{
  right:-10%;
  animation:openingFlameRight .88s ease-in-out infinite alternate;
}
@keyframes openingFlameLeft{
  0%{transform:rotate(-9deg) scale(.90,1.00) translateY(2%)}
  100%{transform:rotate(5deg) scale(1.10,1.16) translateY(-5%)}
}
@keyframes openingFlameRight{
  0%{transform:rotate(8deg) scale(.96,1.04) translateY(3%)}
  100%{transform:rotate(-5deg) scale(1.12,.95) translateY(-6%)}
}
.opening-flame-a,.opening-flame-b,.opening-flame-c{
  z-index:3 !important;
  opacity:.88 !important;
  filter:blur(4px) saturate(1.25) !important;
}

/* FIRST VIEW VIDEO:
   desktop = full bleed,
   mobile = sharp uncropped foreground + blurred full-screen background */
.hero{background:#070807 !important}
.hero-media{
  position:absolute;
  inset:0;
  overflow:hidden;
  z-index:0;
  background:#070807;
}
.hero-video-bg,
.hero-video-main{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  pointer-events:none;
}
.hero-video-bg{
  object-fit:cover;
  transform:scale(1.08);
  filter:blur(22px) brightness(.58) saturate(1.08);
}
.hero-video-main{
  object-fit:cover;
  object-position:center center;
  filter:brightness(.96) contrast(1.03) saturate(1.03);
}
.hero::after{
  z-index:1 !important;
  background:
    linear-gradient(90deg,rgba(4,7,5,.38),rgba(4,7,5,.02) 72%),
    linear-gradient(0deg,rgba(4,7,5,.36),rgba(4,7,5,0) 54%) !important;
}
.hero-inner{z-index:2 !important}

@media(max-width:820px){
  .hero-video-bg{
    object-fit:cover;
    transform:scale(1.14);
    filter:blur(26px) brightness(.50) saturate(1.15);
  }
  .hero-video-main{
    object-fit:contain;
    object-position:center center;
    filter:brightness(1.02) contrast(1.03) saturate(1.04);
  }
  .hero::after{
    background:
      linear-gradient(90deg,rgba(4,7,5,.28),rgba(4,7,5,.00) 75%),
      linear-gradient(0deg,rgba(4,7,5,.34),rgba(4,7,5,0) 60%) !important;
  }
}


/* ===== FV: 上下の余白を解消 ===== */
@media (max-width:820px){
  .hero{height:92svh!important;min-height:92svh!important;max-height:92svh!important;overflow:hidden!important}
  .hero-media{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}
  .hero-video-bg{opacity:0!important;display:none!important}
  .hero-video-main{
    position:absolute!important;inset:0!important;top:0!important;left:0!important;
    width:100%!important;height:100%!important;
    object-fit:cover!important;object-position:center 50%!important;
    filter:brightness(.94) contrast(1.04) saturate(1.05)!important;
    transform:none!important
  }
  .hero-inner{min-height:92svh!important;height:92svh!important;padding:18px 0 18px!important}
  .hero-body{padding-top:6vh!important}
}

/* ===== Opening 2: 2秒、心を→燃やせ ===== */
#opening.opening{
  background:#120300 url("assets/opening-2.png") center center / cover no-repeat!important;
  overflow:hidden!important
}
#opening .opening-fire-bg{background:transparent!important}
#opening .opening-fire-bg>img{display:none!important}
#opening::before{
  content:"";position:absolute;inset:0;z-index:14;pointer-events:none;
  background:radial-gradient(ellipse at 50% 60%,rgba(10,0,0,.78) 0 22%,rgba(10,0,0,.44) 34%,transparent 58%);
  mix-blend-mode:multiply
}
.v14-opening-copy{
  position:absolute;inset:0;z-index:30;display:grid;place-content:center;text-align:center;pointer-events:none;
  font-weight:950;line-height:.92;letter-spacing:-.08em
}
.v14-opening-copy span{display:block;opacity:0}
.v14-kokoro{
  font-size:clamp(62px,17vw,126px);color:#fff1ad;
  text-shadow:0 0 18px #ff5b00,0 0 48px rgba(255,74,0,.9);
  animation:v14Kokoro .38s .08s cubic-bezier(.16,1,.3,1) forwards
}
.v14-moyase{
  margin-top:16px;font-size:clamp(88px,23vw,176px);color:#fff0a0;
  text-shadow:0 0 22px #ff3d00,0 0 64px rgba(255,85,0,.98);
  animation:v14Moyase .46s 1s cubic-bezier(.34,1.56,.64,1) forwards
}
@keyframes v14Kokoro{from{opacity:0;transform:scale(.6);filter:blur(8px)}to{opacity:1;transform:scale(1);filter:blur(0)}}
@keyframes v14Moyase{0%{opacity:0;transform:scale(1.5);filter:blur(8px)}60%{opacity:1;transform:scale(.95);filter:blur(0)}100%{opacity:1;transform:scale(1)}}
.v14-flames{position:absolute;inset:0;z-index:24;pointer-events:none;overflow:hidden}
.v14-flames i{
  position:absolute;bottom:-25%;width:42%;height:60%;transform-origin:50% 100%;
  background:radial-gradient(ellipse at 50% 100%,#fff58c 0 5%,#ffb000 14%,rgba(255,62,0,.85) 35%,transparent 70%);
  mix-blend-mode:screen;filter:blur(4px);animation:v14Flame .65s ease-in-out infinite alternate
}
.v14-flames i:nth-child(1){left:-12%;animation-duration:.56s}.v14-flames i:nth-child(2){left:23%;height:48%;animation-delay:-.2s}.v14-flames i:nth-child(3){right:20%;height:52%;animation-duration:.78s}.v14-flames i:nth-child(4){right:-12%;animation-duration:.61s;animation-delay:-.3s}
@keyframes v14Flame{from{transform:rotate(-8deg) scale(.88,1)}to{transform:rotate(7deg) scale(1.12,1.18) translateY(-7%)}}



/* ===== V20 / 遊び要素 ===== */
#v20Fx{position:fixed;inset:0;pointer-events:none;z-index:15000;overflow:hidden}

/* カモメ */
.v20-gull{
  position:fixed;left:-140px;top:18vh;width:92px;height:46px;z-index:14000;
  pointer-events:none;filter:drop-shadow(0 8px 8px rgba(0,0,0,.12));
  will-change:transform,opacity;opacity:0;
}
.v20-gull::before,.v20-gull::after{
  content:"";position:absolute;top:18px;width:49px;height:18px;
  border-top:7px solid #fff;border-radius:65% 65% 0 0;
  box-shadow:0 -2px 0 rgba(30,70,85,.18);
}
.v20-gull::before{right:44px;transform-origin:right center;transform:rotate(15deg)}
.v20-gull::after{left:44px;transform-origin:left center;transform:rotate(-15deg)}
.v20-gull.fly{opacity:1;animation:v20GullFly 2.25s cubic-bezier(.22,.7,.28,1) forwards}
.v20-gull.fly::before{animation:v20WingL .28s ease-in-out infinite alternate}
.v20-gull.fly::after{animation:v20WingR .28s ease-in-out infinite alternate}
@keyframes v20GullFly{
  0%{transform:translate3d(-10vw,0,0) scale(.78) rotate(-3deg)}
  45%{transform:translate3d(58vw,-24px,0) scale(1.02) rotate(2deg)}
  100%{transform:translate3d(125vw,14px,0) scale(.86) rotate(-2deg)}
}
@keyframes v20WingL{to{transform:rotate(-12deg) translateY(4px)}}
@keyframes v20WingR{to{transform:rotate(12deg) translateY(4px)}}

/* 隊形の人をタップ */
.formation .person{cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}
.formation .person.v20-hop{animation:v20PersonHop .56s cubic-bezier(.2,.9,.25,1.45)!important}
@keyframes v20PersonHop{
  0%{transform:translateY(0) scale(1)}
  30%{transform:translateY(-22px) scale(1.11) rotate(-5deg)}
  58%{transform:translateY(2px) scale(.96) rotate(3deg)}
  78%{transform:translateY(-6px) scale(1.04)}
  100%{transform:translateY(0) scale(1)}
}
.v20-pop{
  position:fixed;z-index:16000;pointer-events:none;font-weight:950;font-size:13px;
  color:#f3c83e;text-shadow:0 2px 0 #111;animation:v20Pop .7s ease-out forwards
}
@keyframes v20Pop{0%{opacity:0;transform:translate(-50%,0) scale(.5)}20%{opacity:1}100%{opacity:0;transform:translate(-50%,-48px) scale(1.12)}}

/* 太鼓 */
#v20Drum{
  position:fixed;left:12px;bottom:14px;z-index:14500;width:82px;height:82px;border:0;
  background:transparent;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent;
  filter:drop-shadow(0 12px 16px rgba(0,0,0,.24));
}
#v20Drum .drum-body{
  position:absolute;left:9px;right:9px;top:20px;bottom:9px;border-radius:12px 12px 17px 17px;
  background:linear-gradient(90deg,#6f2619,#b94b27 32%,#8f331d 68%,#642014);
  border:4px solid #2d1710;
}
#v20Drum .drum-body::before,#v20Drum .drum-body::after{
  content:"";position:absolute;left:-3px;right:-3px;height:5px;background:#e2b94d;border-radius:99px
}
#v20Drum .drum-body::before{top:10px} #v20Drum .drum-body::after{bottom:10px}
#v20Drum .drum-head{
  position:absolute;left:5px;right:5px;top:8px;height:28px;border-radius:50%;
  background:radial-gradient(circle at 47% 40%,#fff9df 0 40%,#e8d8b5 62%,#8e6b41 64% 72%,#2b1710 74%);
  box-shadow:0 5px 0 rgba(0,0,0,.12)
}
#v20Drum .stick{
  position:absolute;width:44px;height:6px;border-radius:99px;background:#d99a4a;top:7px;left:37px;
  transform-origin:8px 3px;transform:rotate(-48deg)
}
#v20Drum .drum-label{
  position:absolute;left:50%;bottom:-13px;transform:translateX(-50%);white-space:nowrap;
  background:rgba(15,18,15,.8);color:white;border-radius:99px;padding:4px 7px;font-size:8px;font-weight:900;letter-spacing:.06em
}
#v20Drum.hit{animation:v20DrumHit .24s cubic-bezier(.2,.8,.25,1.4)}
#v20Drum.hit .stick{animation:v20StickHit .2s ease-out}
@keyframes v20DrumHit{35%{transform:scale(.88) rotate(-3deg)}70%{transform:scale(1.07) rotate(2deg)}}
@keyframes v20StickHit{45%{transform:rotate(-5deg) translate(-5px,7px)}}
.v20-ring{
  position:fixed;border:4px solid rgba(243,200,62,.86);border-radius:50%;
  width:30px;height:30px;pointer-events:none;z-index:14990;
  animation:v20Ring .6s ease-out forwards
}
@keyframes v20Ring{to{width:210px;height:210px;margin:-90px;opacity:0;border-width:1px}}
.v20-spark{
  position:fixed;width:5px;height:10px;background:#f3c83e;border-radius:4px;
  z-index:14995;pointer-events:none;animation:v20Spark .55s ease-out forwards
}
@keyframes v20Spark{to{transform:translate(var(--dx),var(--dy)) rotate(260deg);opacity:0}}

/* 9.27 紙吹雪 */
.v20-confetti{
  position:fixed;top:-18px;width:8px;height:16px;z-index:15500;pointer-events:none;
  animation:v20Confetti var(--dur) linear var(--delay) forwards;
  transform:translate3d(0,0,0) rotate(0deg)
}
@keyframes v20Confetti{
  to{transform:translate3d(var(--drift),110vh,0) rotate(880deg);opacity:.9}
}

/* 隠し演出 */
#v20Secret{
  position:fixed;inset:0;z-index:17000;display:grid;place-items:center;pointer-events:none;
  opacity:0;visibility:hidden;background:radial-gradient(circle at center,rgba(243,200,62,.2),transparent 55%);
}
#v20Secret.show{visibility:visible;animation:v20SecretShow 1.8s ease both}
#v20Secret strong{
  font-size:clamp(42px,12vw,110px);font-weight:950;letter-spacing:-.08em;color:#fff7d0;
  text-align:center;line-height:.95;text-shadow:0 4px 0 #111,0 0 30px rgba(243,200,62,.9);
  transform:scale(.5) rotate(-4deg)
}
#v20Secret.show strong{animation:v20SecretText 1.2s cubic-bezier(.2,.9,.25,1.4) both}
@keyframes v20SecretShow{0%{opacity:0}20%,72%{opacity:1}100%{opacity:0}}
@keyframes v20SecretText{0%{transform:scale(.45) rotate(-6deg)}55%{transform:scale(1.08) rotate(2deg)}100%{transform:scale(1)}}

@media(max-width:820px){
  #v20Drum{width:72px;height:72px;left:7px;bottom:9px}
  #v20Drum .drum-body{top:18px}
  #v20Drum .drum-label{font-size:7px;bottom:-12px}
}
@media(prefers-reduced-motion:reduce){
  .v20-gull,.v20-confetti,.v20-spark,.v20-ring{display:none!important}
  .formation .person.v20-hop{animation:none!important}
}


/* 2枚目のポスターを開始0秒から表示。旧1枚目演出は完全に非表示 */
#opening.opening{
  background:#160500 !important;
}
#opening .opening-fire-bg{
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  background:#160500 url("assets/opening-2.png") center center / cover no-repeat !important;
}
#opening .opening-fire-bg > img{display:none !important;}
/* 旧テキスト／旧コピー演出を止める */
#opening .opening-v13-copy,
#opening .opening-v13-kokoro,
#opening .opening-v13-moyase{
  display:none !important;
}
/* 既存ポスターを最初から見せるための暗転を抑制 */
#opening .opening-fire-vignette{
  background:linear-gradient(0deg,rgba(8,0,0,.28),transparent 34% 76%,rgba(8,0,0,.08)) !important;
}
/* 新しい2段階コピー */
#opening .opening-staged-copy{
  position:absolute;
  inset:0;
  z-index:40;
  display:grid;
  place-content:center;
  text-align:center;
  pointer-events:none;
  transform:translateY(7vh);
  font-weight:950;
  letter-spacing:-.08em;
  line-height:.9;
}
#opening .opening-staged-copy span{display:block;}
#opening .staged-kokoro{
  font-size:clamp(54px,15vw,112px);
  color:#fff3bb;
  opacity:0;
  animation:v15Kokoro .38s .05s cubic-bezier(.16,1,.3,1) forwards,
            v15Glow .55s .38s ease-in-out infinite alternate;
  text-shadow:0 2px 7px #4e0c00,0 0 18px #ff5c00,0 0 44px rgba(255,116,0,.9);
}
#opening .staged-moyase{
  margin-top:15px;
  font-size:clamp(76px,21vw,160px);
  color:#fff0a1;
  opacity:0;
  animation:v15Moyase .46s 1s cubic-bezier(.34,1.56,.64,1) forwards,
            v15Glow .5s 1.35s ease-in-out infinite alternate;
  text-shadow:0 3px 8px #4e0c00,0 0 22px #ff3d00,0 0 58px rgba(255,145,0,.95);
}
@keyframes v15Kokoro{
  from{opacity:0;transform:scale(.72);filter:blur(8px)}
  to{opacity:1;transform:scale(1);filter:blur(0)}
}
@keyframes v15Moyase{
  0%{opacity:0;transform:scale(1.55);filter:blur(8px)}
  60%{opacity:1;transform:scale(.95);filter:blur(0)}
  100%{opacity:1;transform:scale(1)}
}
@keyframes v15Glow{
  to{filter:brightness(1.22);text-shadow:0 3px 8px #4e0c00,0 0 30px #ff4e00,0 0 72px rgba(255,155,0,.98)}
}

body.opening-lock{overflow:auto!important}
/* V21: a short, silent festival opening and authentic nagado daiko. */
#v21Opening{display:none;position:fixed;inset:0;z-index:30000;background:#0d100f;color:#fff8df;overflow:hidden;touch-action:manipulation}
#v21Opening.play{display:grid;place-items:center;animation:intro-exit .35s 2.35s ease-in forwards}
#v21Opening .intro-ring,#v21Opening .intro-wave{position:absolute;width:min(60vw,390px);aspect-ratio:1;border-radius:50%;border:3px solid #ecd6a5;box-shadow:0 0 0 12px #171612,0 0 0 14px #59442b,inset 0 0 50px #ba81382b;opacity:0}
#v21Opening.play .intro-ring{animation:intro-ring 1.8s .05s both}
#v21Opening.play .intro-wave{animation:intro-wave 1.25s .55s both;border-color:#f3c83e}
.intro-title{text-align:center;z-index:2;opacity:0;width:100%;padding:24px}
.intro-title small{display:block;font-size:12px;letter-spacing:.18em;margin-bottom:20px;color:#f3c83e}
.intro-title strong{display:block;font-size:clamp(48px,10vw,112px);font-weight:950;line-height:1.08;letter-spacing:-.045em}
.intro-title strong span{display:inline-block}
.play .intro-title{animation:intro-title 1.6s .65s both}
.intro-slash{position:absolute;width:140%;height:7px;background:#f3c83e;box-shadow:0 0 28px #f3c83e;transform:translateX(-110%) rotate(-12deg);z-index:3}
.play .intro-slash{animation:intro-slash .6s 1.85s both}
.intro-skip{position:absolute;bottom:max(30px,env(safe-area-inset-bottom));right:24px;min-height:44px;color:#fff;background:transparent;border:1px solid #ffffff70;border-radius:24px;padding:10px 18px;font-size:14px;cursor:pointer}
@keyframes intro-ring{0%{opacity:0;transform:scale(.2)}25%,60%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.1)}}
@keyframes intro-wave{0%{opacity:1;transform:scale(.5)}100%{opacity:0;transform:scale(4)}}
@keyframes intro-title{0%{opacity:0;transform:scale(1.22)}20%,100%{opacity:1;transform:scale(1)}}
@keyframes intro-slash{0%{transform:translateX(-110%) rotate(-12deg)}60%{transform:translateX(0) rotate(-12deg);opacity:1}100%{transform:translateX(110%) rotate(-12deg);opacity:0}}
@keyframes intro-exit{to{opacity:0;visibility:hidden}}
#v20Drum{width:112px;height:126px;left:16px;bottom:calc(20px + env(safe-area-inset-bottom));transition:filter .2s}
#v20Drum .drum-image{position:absolute;inset:0;width:100%;height:112px;object-fit:contain}
#v20Drum .drum-label{bottom:0;font-size:12px;padding:5px 9px;background:#111e;letter-spacing:0;max-width:140px}
#v20Drum:hover{filter:drop-shadow(0 6px 15px #f3c83e88)}
#v20Drum:focus-visible,.intro-skip:focus-visible,#heroPlayback:focus-visible{outline:3px solid #f3c83e;outline-offset:5px}
#heroPlayback{position:absolute;right:0;bottom:100px;min-height:44px;border-radius:24px;border:1px solid #ffffff90;background:#111a;color:#fff;font-size:14px;padding:10px 15px;cursor:pointer}
.title .line{white-space:normal;word-break:normal;overflow-wrap:anywhere;line-break:strict;text-wrap:pretty}
.floating-note{left:auto;right:16px;max-width:calc(100vw - 148px);font-size:12px}
@media(max-width:820px){#v20Drum{width:88px;height:105px;left:10px;bottom:calc(18px + env(safe-area-inset-bottom))}#v20Drum .drum-image{height:88px}#v20Drum .drum-label{font-size:12px;bottom:0}.intro-title strong span{display:block}.title{font-size:clamp(29px,6.2vw,50px)!important}.head{gap:24px}#heroPlayback{bottom:95px;font-size:12px}.floating-note{max-width:calc(100vw - 120px)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}#v21Opening{display:none!important}.reveal{opacity:1!important;transform:none!important}}
.hero-bottom .date{margin-left:124px}
@media(max-width:820px){.hero-bottom .date{margin-left:90px}.closing h2{font-size:clamp(32px,8.5vw,60px);line-break:strict;text-wrap:pretty}.closing-inner{padding-bottom:140px}}
@media(max-width:820px){.hero h1{font-size:clamp(44px,14vw,69px)}.hero-quality{top:-32px;bottom:auto;right:0}.date span{font-size:10px;margin-left:6px}.brand{font-size:12px;gap:8px}.kamome-icon{width:42px;height:42px}}

/* Specific September schedule and formation announcement. */
.schedule-list{list-style:none;padding:0;margin:0;border-top:2px solid currentColor}
.schedule-row{display:grid;grid-template-columns:1fr 1.2fr 1fr;align-items:center;gap:20px;padding:25px 12px;border-bottom:1px solid #1c292b30}
.schedule-row time{font-size:clamp(23px,3vw,38px);font-weight:900;letter-spacing:-.03em;white-space:nowrap}
.schedule-hours{font-size:clamp(21px,2.5vw,30px);font-weight:750;white-space:nowrap;font-variant-numeric:tabular-nums}
.schedule-detail{display:flex;gap:14px;align-items:center;font-size:17px}
.schedule-place{font-size:14px;border:1px solid currentColor;border-radius:4px;padding:3px 10px}
.schedule-row:last-child{background:#f3c83e}
.formation-notice{font-size:clamp(24px,3.2vw,44px);font-weight:850;line-height:1.65;margin:30px 0 0;line-break:strict;text-wrap:pretty}
.formation-notice span{display:inline-block}
@media(max-width:600px){.schedule-row{grid-template-columns:1fr 1.2fr;gap:8px 12px;padding:21px 4px}.schedule-detail{grid-column:2;font-size:14px}.schedule-place{font-size:12px;padding:2px 8px}.schedule .next strong{font-size:18px;line-height:1.65}.formation-notice span{display:inline}.formation-notice{font-size:26px}}

/* September 19 gathering announcement. */
.party{background:#f7f4eb;padding:0 0 90px;color:#17201b}
.party-box{display:grid;grid-template-columns:1.1fr 1fr;border:2px solid #17201b;box-shadow:8px 8px 0 #17201b}
.party-info{padding:40px;background:#fffdf7}
.party-info h2{font-size:clamp(26px,3vw,42px);line-height:1.4;margin:20px 0 28px;letter-spacing:-.03em}
.party-details{margin:0}.party-details>div{display:grid;grid-template-columns:60px 1fr;gap:12px;padding:13px 0;border-bottom:1px solid #17201b22}
.party-details dt{font-size:14px;font-weight:700;padding-top:3px}.party-details dd{margin:0;font-size:19px;font-weight:750;line-height:1.6;line-break:strict}
.party-details time{white-space:nowrap}.party-note{font-size:14px;line-height:1.8;margin:18px 0 0}
.party-stay{background:#f3c83e;padding:40px;display:flex;flex-direction:column;justify-content:center}
.party-badge{align-self:flex-start;background:#17201b;color:#fffdf7;padding:8px 13px;font-size:15px;font-weight:800}
.party-stay h3{font-size:clamp(25px,2.7vw,38px);line-height:1.55;letter-spacing:-.03em;margin:22px 0 18px}.party-stay h3 span{display:inline-block}
.party-stay p{font-size:17px;line-height:2;margin:0}
@media(max-width:820px){.party-box{grid-template-columns:1fr;box-shadow:5px 5px 0 #17201b}.party-info,.party-stay{padding:26px 22px}.party{padding-bottom:65px}.party-details dd{font-size:17px}.party-details>div{grid-template-columns:48px 1fr;gap:8px}.party-stay p{font-size:15px}.party-stay h3{font-size:27px}}
@media(max-width:360px){.party-info,.party-stay{padding:24px 16px}.party-details dd{font-size:15px}.party-info h2{font-size:24px}.party-stay h3{font-size:25px}}

/* Low-contrast waving flag behind the opening instructions. */
.flow{position:relative;isolation:isolate;background:#030504;overflow:hidden}
.flow>.wrap{position:relative;z-index:1}
.flow-flag-backdrop{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;perspective:1100px}
.flow-flag-backdrop:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.65),rgba(0,0,0,.24) 65%,rgba(0,0,0,.45)),linear-gradient(0deg,#030504 0%,transparent 25%,transparent 75%,#030504 100%)}
.flow-flag-cloth{position:absolute;top:10%;left:-8%;width:120%;height:auto;aspect-ratio:3/2;opacity:.21;transform-origin:8% 45%;animation:flow-flag-sway 7s ease-in-out infinite;animation-play-state:paused;will-change:transform}
.flow-flag-cloth img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.8)}
.flow-flag-light{position:absolute;inset:0;background:linear-gradient(105deg,transparent 10%,rgba(0,0,0,.75) 30%,rgba(255,255,255,.16) 48%,rgba(0,0,0,.65) 63%,transparent 85%);background-size:200% 100%;mix-blend-mode:multiply;animation:flow-flag-fold 7s ease-in-out infinite;animation-play-state:paused}
.flow.flag-running .flow-flag-cloth,.flow.flag-running .flow-flag-light{animation-play-state:running}
.flow .label,.flow .copy{color:#e1e3df}.flow .step p{color:#f0f0e9}.flow .head,.flow .steps{text-shadow:0 2px 6px #000}
.flow-motion-control{display:block;margin:0 0 28px auto;min-height:44px;padding:8px 14px;border:1px solid #ffffff55;border-radius:24px;background:#030504cc;color:#eee;font:inherit;font-size:12px;cursor:pointer}
.flow-motion-control:focus-visible{outline:3px solid #f3c83e;outline-offset:4px}
@keyframes flow-flag-sway{0%,100%{transform:translate3d(-2%,0,0) rotate(-3deg) rotateY(-14deg) skewY(2deg) scale(1.06)}50%{transform:translate3d(3%,2%,0) rotate(3deg) rotateY(13deg) skewY(-3deg) scale(1.1)}}
@keyframes flow-flag-fold{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@media(max-width:600px){.flow-flag-cloth{width:145%;left:-22%;height:auto;top:10%;opacity:.21}.flow-flag-cloth img{object-position:60% center}}
@media(prefers-reduced-motion:reduce){.flow-flag-cloth,.flow-flag-light{animation:none!important;transform:none;will-change:auto}}

/* Keep the schedule's paper background and dark, legible timetable. */
.schedule{position:relative;isolation:isolate;overflow:hidden}
.schedule>.wrap{position:relative;z-index:1}
.schedule .flow-flag-cloth{opacity:.12;top:15%}
.schedule .flow-flag-backdrop:after{background:linear-gradient(90deg,rgba(255,253,248,.6),rgba(255,253,248,.2) 65%,rgba(255,253,248,.4)),linear-gradient(0deg,#fffdf8,transparent 25%,transparent 75%,#fffdf8)}
.schedule.flag-running .flow-flag-cloth,.schedule.flag-running .flow-flag-light{animation-play-state:running}
.schedule .flow-motion-control{color:#17201b;background:#fffdf8d9;border-color:#17201b55}
.schedule .schedule-row:not(:last-child){background:#fffdf866}
.schedule .head,.schedule .schedule-list{text-shadow:0 1px 3px #fffdf8}

/* The history of the song and the fathers' reason for dancing. */
.soran-story{background:#152b35;color:#fffdf8}
.soran-story .label{color:#d7e0df}
.soran-story h2{font-size:clamp(32px,4.4vw,62px);line-height:1.4;letter-spacing:-.04em;margin:22px 0 48px;text-wrap:pretty;line-break:strict}
.soran-story h2 span,.soran-story h3 span{display:inline-block}
.story-columns{display:grid;grid-template-columns:1fr 1fr;gap:70px}
.story-eyebrow{font-size:13px;font-weight:800;letter-spacing:.08em;color:#f3c83e;margin-bottom:15px}
.soran-story h3{font-size:clamp(22px,2.1vw,29px);line-height:1.6;margin:0 0 20px;text-wrap:pretty;line-break:strict}
.soran-story p{font-size:16px;line-height:2.1;color:#e8ece8;margin:0 0 20px;line-break:strict;text-wrap:pretty}
.story-today{border-left:1px solid #ffffff33;padding-left:42px}
.soran-story .story-promise{margin-top:30px}.story-promise strong{display:block;color:#f3c83e;font-size:clamp(21px,2vw,27px);line-height:1.75;margin-top:16px}
.story-sources{font-size:12px;line-height:1.8;color:#becdcf;margin-top:28px}.story-sources a{display:block;width:fit-content;padding:8px 0;color:#e0e9e6;text-underline-offset:4px}.story-sources a:focus-visible{outline:2px solid #f3c83e;outline-offset:3px}
@media(max-width:820px){.story-columns{grid-template-columns:1fr;gap:34px}.story-today{border-left:0;border-top:1px solid #ffffff33;padding:32px 0 0}.soran-story h2{margin-bottom:32px}.soran-story h2 span{display:block}.soran-story p{font-size:16px}}
@media(max-width:380px){.soran-story h2{font-size:26px}.soran-story h3{font-size:21px}}

.formation-links{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:24px}.formation-links a{display:inline-flex;align-items:center;min-height:44px;padding:12px 18px;border:1px solid #17201b;border-radius:6px;font-weight:750;font-size:14px;text-decoration:none}.formation-links a:first-child{background:#17201b;color:#fffdf8}
.formation-groups{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}.formation-groups button{flex:1 1 140px;min-height:54px;padding:10px 14px;line-height:1.5;border:1px solid #17201b44;border-radius:6px;background:#fffdf8;color:#17201b;cursor:pointer}.formation-groups button[aria-pressed="true"]{background:#f3c83e;border-color:#17201b;font-weight:800}
.formation-reader{padding:24px;background:#fff;border:1px solid #17201b33;border-radius:10px}.formation-reader label{display:block;font-size:13px;font-weight:800;margin-bottom:8px}.formation-reader select{display:block;width:100%;max-width:100%;min-height:48px;border:1px solid #17201b66;border-radius:5px;background:#fff;color:#17201b;font:inherit;font-size:16px;padding:10px 8px}.formation-reader figure{margin:22px 0}.formation-reader figure a{display:block}.formation-reader img{display:block;width:100%;height:auto;max-height:760px;object-fit:contain;background:white}.formation-reader figcaption{font-size:13px;color:#62665f;text-align:center;margin-top:12px}.formation-pagination{display:flex;justify-content:space-between;align-items:center;gap:12px}.formation-pagination button{min-height:44px;padding:10px 18px;background:#17201b;color:white;border:0;border-radius:5px;cursor:pointer}.formation-pagination button:disabled{opacity:.35;cursor:default}.formation-pagination span{font-size:14px;font-variant-numeric:tabular-nums}.formation button:focus-visible,.formation a:focus-visible,.formation select:focus-visible{outline:3px solid #bc8b00;outline-offset:4px}
@media(max-width:600px){.formation-reader{padding:14px 10px}.formation-groups button{flex-basis:100px;font-size:13px}.formation-links a{font-size:13px}.formation-reader select{font-size:14px}}