/* =========================================================================
   花火大会 協賛イントロ オーバーレイ（期間限定：〜2026/10/03）
   ※ 花火大会終了後はこのファイルごと削除可。index.html 側の
     「FIREWORKS INTRO」コメント区間も併せて削除してください。
   ========================================================================= */
body.fw-lock{overflow:hidden;}
#fwintro{position:fixed;inset:0;z-index:9999;overflow:hidden;background:#05070d;color:#fff;font-family:"Noto Sans JP",-apple-system,system-ui,sans-serif;}
#fwintro a{color:inherit;text-decoration:none;}
#fwintro.hidden{display:none;}

/* ---- video plate ---- */
#fwintro .plate{position:absolute;inset:0;overflow:hidden;}
#fwintro .plate video{position:absolute;top:50%;left:50%;width:100%;height:100%;min-width:100%;min-height:100%;object-fit:cover;transform:translate(-50%,-50%) scale(1.06);transition:transform 6s linear;}
#fwintro.go .plate video{transform:translate(-50%,-50%) scale(1.14);}

/* legibility grading over the plate */
#fwintro .grade{position:absolute;inset:0;pointer-events:none;z-index:2;background:linear-gradient(90deg,rgba(5,7,13,0.86) 0%,rgba(5,7,13,0.62) 26%,rgba(5,7,13,0.12) 52%,rgba(5,7,13,0.05) 72%,rgba(5,7,13,0.28) 100%),linear-gradient(0deg,rgba(5,7,13,0.85) 0%,rgba(5,7,13,0.28) 22%,transparent 46%);}
#fwintro .vignette{position:absolute;inset:0;pointer-events:none;z-index:3;box-shadow:inset 0 0 200px 40px rgba(0,0,0,0.55);}
#fwintro .grain{position:absolute;inset:-50%;z-index:4;pointer-events:none;opacity:0.05;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>");}

/* cinematic letterbox */
#fwintro .bar{position:absolute;left:0;right:0;height:11vh;background:#05070d;z-index:9;transition:transform 1.1s cubic-bezier(.7,0,.2,1);}
#fwintro .bar.top{top:0;transform:translateY(-100%);}
#fwintro .bar.bot{bottom:0;transform:translateY(100%);}
#fwintro.go .bar.top{transform:translateY(0);}
#fwintro.go .bar.bot{transform:translateY(0);}
#fwintro.leaving .plate video{transform:translate(-50%,-50%) scale(1.2);}
#fwintro.leaving .stage{opacity:0;transform:translateY(-12px);transition:opacity .5s ease,transform .6s ease;}
#fwintro.leaving{opacity:0;transition:opacity .7s ease .35s;}

/* ---- overlay stage ---- */
#fwintro .stage{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;justify-content:center;padding:12vh clamp(28px,7vw,120px) 28vh;}
#fwintro .reveal{opacity:0;transform:translateY(22px);filter:blur(6px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1.1s cubic-bezier(.2,.7,.2,1),filter 1s ease;}
#fwintro .reveal.in{opacity:1;transform:none;filter:none;}
#fwintro .kick{display:inline-flex;align-items:center;gap:14px;font-family:"Inter",monospace;font-size:clamp(11px,1vw,14px);font-weight:800;letter-spacing:0.34em;color:#6ab0ff;margin-bottom:clamp(20px,3vh,34px);text-transform:uppercase;}
#fwintro .kick .dash{width:34px;height:3px;background:#FFC700;}
#fwintro .kick .jp{color:#fff;letter-spacing:0.28em;}
#fwintro .copy{font-family:"Noto Serif JP",serif;font-weight:900;line-height:1.14;letter-spacing:-0.02em;font-size:clamp(34px,6.4vw,104px);text-shadow:0 4px 40px rgba(0,0,0,0.6),0 1px 2px rgba(0,0,0,0.5);margin:0;}
#fwintro .copy .l{display:block;}
#fwintro .copy .mk{background:linear-gradient(transparent 62%,rgba(255,199,0,0.9) 62%);padding:0 .05em;}
#fwintro .event{margin-top:clamp(30px,5vh,60px);display:flex;flex-direction:column;gap:6px;}
#fwintro .event .no{font-family:"Inter",monospace;font-size:clamp(11px,1vw,13px);letter-spacing:0.3em;color:rgba(255,255,255,0.6);font-weight:700;}
#fwintro .event .name{font-family:"Noto Serif JP",serif;font-weight:900;font-size:clamp(18px,2.3vw,32px);letter-spacing:0.01em;text-shadow:0 2px 20px rgba(0,0,0,0.6);}
#fwintro .event .name b{color:#FFC700;}
#fwintro .event .info{margin-top:10px;font-size:clamp(12.5px,1.35vw,16px);line-height:1.65;color:rgba(255,255,255,0.82);font-weight:600;text-shadow:0 1px 10px rgba(0,0,0,0.6);}
#fwintro .event .info .note{color:rgba(255,255,255,0.55);font-size:0.85em;font-weight:400;}

/* logo lockup — bottom left */
#fwintro .lock{position:absolute;left:clamp(28px,7vw,120px);bottom:calc(11vh + clamp(26px,4vh,46px));z-index:7;display:flex;align-items:center;gap:16px;}
#fwintro .lock img{height:clamp(34px,4vw,50px);width:auto;filter:drop-shadow(0 4px 18px rgba(0,0,0,0.6));}
#fwintro .lock .wm{font-family:"Archivo Black",sans-serif;font-size:clamp(26px,3.4vw,44px);letter-spacing:0.02em;line-height:1;}
#fwintro .lock .wm .a{color:#6ab0ff;}
#fwintro .lock .tl{margin-left:14px;padding-left:16px;border-left:1px solid rgba(255,255,255,0.3);font-size:clamp(11px,1vw,14px);font-weight:700;letter-spacing:0.06em;color:rgba(255,255,255,0.8);line-height:1.4;}
@media(max-width:760px){#fwintro .lock .tl{display:none;}}

/* controls */
#fwintro .skip{position:absolute;top:calc(11vh + 20px);right:clamp(22px,4vw,52px);z-index:11;display:inline-flex;align-items:center;gap:10px;padding:11px 18px;border:1px solid rgba(255,255,255,0.32);background:rgba(5,7,13,0.35);backdrop-filter:blur(8px);font-family:"Inter",monospace;font-size:12px;font-weight:700;letter-spacing:0.16em;color:#fff;cursor:pointer;transition:background .2s,border-color .2s;}
#fwintro .skip:hover{background:rgba(255,255,255,0.12);border-color:rgba(255,255,255,0.6);}
#fwintro .skip .x{font-size:14px;line-height:1;}
#fwintro .enter{position:absolute;right:clamp(28px,7vw,120px);bottom:calc(11vh + clamp(26px,4vh,46px));z-index:11;display:inline-flex;align-items:center;gap:18px;padding:17px 26px;background:#FFC700;color:#0a0a0a;font-weight:900;letter-spacing:0.1em;cursor:pointer;clip-path:polygon(6% 0,100% 0,94% 100%,0 100%);opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .7s ease,transform .7s ease,filter .2s;border:0;font-family:inherit;font-size:inherit;}
#fwintro .enter.in{opacity:1;transform:none;pointer-events:auto;}
#fwintro .enter:hover{filter:brightness(1.05);}
#fwintro.ready .enter{animation:fwEntPulse 1.9s ease-in-out infinite;}
@keyframes fwEntPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,199,0,0);}50%{box-shadow:0 0 0 10px rgba(255,199,0,0.16);}}
#fwintro .enter .en{font-family:"Inter",monospace;font-size:10px;letter-spacing:0.28em;padding-right:14px;border-right:1px solid rgba(0,0,0,0.28);}
#fwintro .enter .ar{font-size:18px;}
#fwintro .enter-hint{position:absolute;right:clamp(28px,7vw,120px);bottom:calc(11vh + clamp(26px,4vh,46px) + 74px);z-index:11;font-family:"Inter",monospace;font-size:11px;letter-spacing:0.22em;color:rgba(255,255,255,0.65);opacity:0;transition:opacity .6s ease;}
#fwintro.ready .enter-hint{opacity:1;}
#fwintro .replay{position:absolute;left:clamp(28px,7vw,120px);top:calc(11vh + 20px);z-index:11;display:none;align-items:center;gap:9px;padding:11px 18px;border:1px solid rgba(255,255,255,0.32);background:rgba(5,7,13,0.35);backdrop-filter:blur(8px);font-family:"Inter",monospace;font-size:12px;font-weight:700;letter-spacing:0.14em;color:#fff;cursor:pointer;transition:background .2s,border-color .2s;}
#fwintro .replay:hover{background:rgba(255,255,255,0.12);border-color:rgba(255,255,255,0.6);}
#fwintro.ready .replay{display:inline-flex;}

/* progress */
#fwintro .prog{position:absolute;left:0;bottom:11vh;height:3px;width:0%;background:#FFC700;z-index:10;box-shadow:0 0 12px rgba(255,199,0,0.6);}

/* tap-to-start fallback */
#fwintro .tap{position:absolute;inset:0;z-index:20;display:none;align-items:center;justify-content:center;flex-direction:column;gap:18px;background:rgba(5,7,13,0.6);cursor:pointer;}
#fwintro .tap.show{display:flex;}
#fwintro .tap .pl{width:88px;height:88px;border-radius:50%;border:2px solid rgba(255,255,255,0.6);display:grid;place-items:center;font-size:30px;padding-left:6px;}
#fwintro .tap .t{font-family:"Inter",monospace;letter-spacing:0.2em;font-size:13px;color:rgba(255,255,255,0.85);}

@media(max-width:760px){
  #fwintro .bar{height:8vh;}
  #fwintro .plate video{object-position:70% 38%;}
  #fwintro .stage{padding:12vh clamp(24px,6vw,60px) 30vh;justify-content:flex-start;}
  #fwintro .kick{margin-bottom:18px;}
  #fwintro .copy{font-size:clamp(32px,8.6vw,62px);line-height:1.16;}
  #fwintro .event{margin-top:26px;}
  #fwintro .skip,#fwintro .replay{top:calc(8vh + 16px);}
  #fwintro .prog{bottom:8vh;}
  #fwintro .enter{left:clamp(24px,6vw,60px);right:auto;bottom:calc(8vh + 22px);}
  #fwintro .lock{left:clamp(24px,6vw,60px);bottom:calc(8vh + 22px + 78px);}
  #fwintro .enter-hint{display:none;}
}
@media (orientation:landscape) and (max-height:520px){
  #fwintro .bar{height:7vh;}
  #fwintro .stage{padding:9vh clamp(20px,5vw,60px) 9vh;justify-content:center;}
  #fwintro .kick{margin-bottom:10px;font-size:10px;}
  #fwintro .copy{font-size:clamp(24px,4.4vw,44px);line-height:1.15;}
  #fwintro .event{margin-top:14px;}
  #fwintro .event .name{font-size:clamp(15px,1.9vw,22px);}
  #fwintro .lock{bottom:calc(7vh + 14px);}
  #fwintro .lock img{height:28px;}
  #fwintro .lock .wm{font-size:24px;}
  #fwintro .enter{bottom:calc(7vh + 14px);padding:12px 20px;}
  #fwintro .skip,#fwintro .replay{top:calc(7vh + 12px);padding:8px 14px;}
  #fwintro .prog{bottom:7vh;}
}
@media(prefers-reduced-motion:reduce){
  #fwintro .plate video,#fwintro.go .plate video{transition:none;transform:translate(-50%,-50%) scale(1.08);}
  #fwintro .reveal{transition:opacity .5s ease;transform:none;filter:none;}
}