/* trailer.css — 予告編フォーマットの見た目(スタイル・動き・背景)。
   使い方は trailer.js の先頭を見る。色は --m-* と --a/--b/--k(予告編ごとに JS が入れる)。 */
:root{
  --t-ink:#f3efe4; --t-muted:#8c93ad; --t-line:#252b45;
  --t-impact:"Dela Gothic One","Noto Sans JP",sans-serif;
  --t-serif:"Shippori Mincho B1","Noto Serif JP","Hiragino Mincho ProN",serif;
  --t-ui:"Zen Kaku Gothic New","Noto Sans JP","Hiragino Sans",sans-serif;
  --f-copy:var(--t-serif); --f-w:800; --f-s:1; --f-title:var(--t-impact); --f-tw:400; --f-big:var(--t-impact); --f-bw:400;
  --m-cry:#5aa9ff; --m-laugh:#ffc53d; --m-fear:#b46bff; --m-fire:#ff6a3d; --m-love:#ff7eb6; --m-think:#38d6b8;
}
/* ---------- 気分ごとのフォント(docs/fonts.md)。.ft-* を カード/チップ/予告編の .stage に付ける ----------
   --f-copy コピー本文 / --f-title 映画タイトル / --f-big 巨大文字 / *-w 太さ(1ウェイトの和文は400固定=擬似ボールドを避ける) / --f-s 大きさ補正 */
.ft-cry  {--f-copy:"Shippori Mincho B1","Noto Serif JP","Hiragino Mincho ProN",serif; --f-w:800; --f-s:1;
          --f-title:"Shippori Mincho B1","Noto Serif JP","Hiragino Mincho ProN",serif; --f-tw:800; --f-big:"Shippori Mincho B1","Noto Serif JP",serif; --f-bw:800}
.ft-laugh{--f-copy:"Mochiy Pop One","Noto Sans JP",sans-serif; --f-w:400; --f-s:.92;
          --f-title:"Reggae One","Noto Sans JP",sans-serif; --f-tw:400; --f-big:"Reggae One","Noto Sans JP",sans-serif; --f-bw:400}
.ft-fear {--f-copy:"Yuji Syuku","Noto Serif JP","Hiragino Mincho ProN",serif; --f-w:400; --f-s:1.06;
          --f-title:"Zen Antique","Noto Serif JP","Hiragino Mincho ProN",serif; --f-tw:400; --f-big:"Zen Antique","Noto Serif JP",serif; --f-bw:400}
.ft-fire {--f-copy:"Dela Gothic One","Noto Sans JP",sans-serif; --f-w:400; --f-s:.82;
          --f-title:"Dela Gothic One","Noto Sans JP",sans-serif; --f-tw:400; --f-big:"Dela Gothic One","Noto Sans JP",sans-serif; --f-bw:400}
.ft-love {--f-copy:"Klee One","Hiragino Maru Gothic ProN","Noto Sans JP",sans-serif; --f-w:600; --f-s:1.02;
          --f-title:"Hachi Maru Pop","Hiragino Maru Gothic ProN","Noto Sans JP",sans-serif; --f-tw:400; --f-big:"Hachi Maru Pop","Noto Sans JP",sans-serif; --f-bw:400}
.ft-think{--f-copy:"DotGothic16","Noto Sans JP",sans-serif; --f-w:400; --f-s:1.04;
          --f-title:"Stick","DotGothic16","Noto Sans JP",sans-serif; --f-tw:400; --f-big:"DotGothic16","Noto Sans JP",sans-serif; --f-bw:400}

/* ---------- カード = フレーム ---------- */
.list{display:flex;flex-direction:column;gap:12px;padding:0;margin:0;list-style:none}
.card{--m:#fff;position:relative;display:flex;flex-direction:column;justify-content:center;width:100%;height:100%;min-height:158px;padding:30px 18px 26px;border:0;border-radius:6px;cursor:pointer;text-align:left;color:var(--t-ink);overflow:hidden;
  background:radial-gradient(120% 140% at 85% 0%,color-mix(in srgb,var(--m) 34%,transparent),transparent 60%),linear-gradient(180deg,#171b33,#0e1122)}
.card .tag{position:absolute;top:18px;left:18px;z-index:3;font-size:11px;font-weight:700;letter-spacing:.18em;color:var(--m)}
.card .go{position:absolute;bottom:17px;right:18px;z-index:3;font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--t-muted)}
.card:hover .go{color:var(--t-ink)}
.copy{position:relative;z-index:1;margin:6px 0 0;font-family:var(--f-copy);font-weight:var(--f-w);font-size:calc(clamp(23px,6.4vw,34px)*var(--f-s));line-height:1.38;text-wrap:balance;word-break:keep-all;overflow-wrap:anywhere}
.copy .c{display:inline-block;white-space:pre}

/* ---- 文字の動き(ループ。0〜60%は完成形で止まる) ---- */
.fx-slam .c{animation:slam 6s cubic-bezier(.2,.9,.2,1) infinite;animation-delay:calc(var(--i)*.045s)}
@keyframes slam{0%,2%{}60%{opacity:1;transform:none;filter:none}
  68%{opacity:0;transform:scale(.9);filter:blur(4px)}69%{opacity:0;transform:scale(1.9);filter:blur(8px)}100%{opacity:1;transform:none;filter:none}}
.fx-rise .c{animation:rise 6.4s ease-out infinite;animation-delay:calc(var(--i)*.05s)}
@keyframes rise{0%{}60%{opacity:1;transform:none}70%{opacity:0;transform:translateY(-14px)}71%{opacity:0;transform:translateY(30px) rotate(6deg)}100%{opacity:1;transform:none}}
.fx-wave .c{animation:wave 2.6s ease-in-out infinite;animation-delay:calc(var(--i)*-.12s)}
@keyframes wave{0%,100%{transform:translateY(0)}50%{transform:translateY(-.18em)}}
.fx-track .copy{animation:track 6.5s ease-out infinite}
@keyframes track{0%{}58%{letter-spacing:.01em;opacity:1}68%{letter-spacing:.01em;opacity:0}69%{letter-spacing:.32em;opacity:0}100%{letter-spacing:.01em;opacity:1}}
.fx-glitch .copy{position:relative;animation:glitch 4.4s steps(1) infinite}
.fx-glitch .copy::before,.fx-glitch .copy::after{content:attr(data-t);position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:0}
.fx-glitch .copy::before{color:#ff2a6d;animation:gl1 4.4s steps(1) infinite}
.fx-glitch .copy::after{color:#26e0ff;animation:gl2 4.4s steps(1) infinite}
@keyframes glitch{0%,86%,100%{transform:none}88%{transform:translateX(-3px) skewX(-4deg)}90%{transform:translateX(3px)}92%{transform:none}}
@keyframes gl1{0%,86%,100%{opacity:0;transform:none}88%{opacity:.9;transform:translateX(5px)}90%{opacity:.9;transform:translateX(-4px)}92%{opacity:0}}
@keyframes gl2{0%,86%,100%{opacity:0;transform:none}88%{opacity:.9;transform:translateX(-5px)}90%{opacity:.9;transform:translateX(4px)}92%{opacity:0}}
.fx-type .copy::after{content:"";display:inline-block;width:.08em;height:1em;vertical-align:-.12em;background:var(--m);margin-left:3px;animation:caret 1s steps(1) infinite}
.fx-type .c{animation:type 7s steps(1) infinite;animation-delay:calc(var(--i)*.07s)}
@keyframes type{0%{}62%{opacity:1}64%{opacity:0}65%{opacity:0}100%{opacity:1}}
@keyframes caret{50%{opacity:0}}
.fx-stamp .c{animation:stamp 6s cubic-bezier(.3,1.6,.5,1) infinite;animation-delay:calc(var(--i)*.1s)}
@keyframes stamp{0%{}60%{transform:none;opacity:1}67%{transform:none;opacity:0}68%{transform:scale(2.4) rotate(-8deg);opacity:0}100%{transform:none;opacity:1}}

/* ---------- 予告編(全画面) ---------- */
.stage{position:fixed;inset:0;z-index:50;background:#000;color:#fff;display:flex;flex-direction:column;overflow:hidden;--a:#111;--b:#222;--k:#fff}
.stage[hidden]{display:none!important}
.s-bg{position:absolute;inset:-12%;background:radial-gradient(ellipse at 50% 40%,transparent 30%,rgba(0,0,0,.7)),linear-gradient(160deg,var(--a),var(--b));animation:drift 16s ease-in-out infinite alternate}
@keyframes drift{from{transform:scale(1)}to{transform:scale(1.14) translate(1%,-1%)}}
.grain{position:absolute;inset:0;pointer-events:none;opacity:.07;background:repeating-linear-gradient(0deg,#fff 0 1px,transparent 1px 3px);animation:flick .16s steps(2) infinite;z-index:5}
@keyframes flick{50%{opacity:.11}}
.amb{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.amb span{position:absolute;display:block}
.amb.rain span{top:-18%;left:var(--x);width:1.5px;height:var(--h);background:linear-gradient(transparent,rgba(170,210,255,.65));animation:fall var(--d) linear infinite;animation-delay:var(--dl)}
@keyframes fall{to{transform:translateY(135vh)}}
.amb.conf span{top:-6%;left:var(--x);width:8px;height:14px;background:var(--cl);opacity:.9;animation:conf var(--d) linear infinite;animation-delay:var(--dl)}
@keyframes conf{to{transform:translate(var(--dx),115vh) rotate(900deg)}}
.amb.ember span,.amb.bokeh span{bottom:-12%;left:var(--x);width:var(--s);height:var(--s);border-radius:50%;animation:upward var(--d) ease-in infinite;animation-delay:var(--dl)}
.amb.ember span{background:#ffb36b;box-shadow:0 0 12px 2px #ff6a3d}
.amb.bokeh span{background:radial-gradient(circle,rgba(255,160,205,.42),transparent 70%)}
@keyframes upward{to{transform:translate(var(--dx),-120vh);opacity:0}}
.amb.fear span{inset:0;background:radial-gradient(circle at 50% 45%,transparent 35%,rgba(130,0,40,.6));animation:fearp 3.4s ease-in-out infinite alternate}
@keyframes fearp{from{opacity:.25}to{opacity:1}}
.amb.think span{inset:-10%;background-image:linear-gradient(rgba(56,214,184,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(56,214,184,.12) 1px,transparent 1px);background-size:44px 44px;animation:grid 8s linear infinite}
@keyframes grid{to{transform:translate(44px,44px)}}
.lb{position:absolute;left:0;right:0;height:max(9vh,52px);background:#000;z-index:6}.lb.t{top:0}.lb.b{bottom:0}
.tc{position:absolute;z-index:7;top:calc(max(9vh,52px) - 26px);left:14px;font:700 11px/1 var(--t-ui);letter-spacing:.14em;color:rgba(255,255,255,.6);font-variant-numeric:tabular-nums}
.flash{position:absolute;inset:0;background:#fff;opacity:0;z-index:9;pointer-events:none}
.flash.go{animation:flash .5s ease-out}@keyframes flash{from{opacity:.9}to{opacity:0}}
.dots{position:absolute;z-index:7;top:calc(max(9vh,52px) + 12px);left:0;right:0;display:flex;justify-content:center;gap:8px}
.dots span{width:22px;height:3px;background:rgba(255,255,255,.28);border-radius:2px;transition:background .3s}
.dots span.on{background:var(--k)}
.x,.skip{position:absolute;z-index:10;min-width:44px;height:44px;border:0;background:none;color:#fff;cursor:pointer;opacity:.85}
.x{top:calc(max(9vh,52px) + 4px);right:8px;font-size:28px}
.skip{bottom:calc(max(9vh,52px) + 6px);right:10px;padding:0 14px;border:1px solid rgba(255,255,255,.4);border-radius:999px;background:rgba(0,0,0,.35);font:700 13px var(--t-ui)}
.snd{position:absolute;z-index:10;bottom:calc(max(9vh,52px) + 6px);left:10px;min-width:44px;height:44px;padding:0 12px;border:1px solid rgba(255,255,255,.4);border-radius:999px;background:rgba(0,0,0,.35);color:#fff;font:700 13px var(--t-ui);cursor:pointer}
.scene{position:relative;z-index:3;flex:1;min-height:0;display:grid;place-items:center;padding:max(11vh,64px) 6vw;text-align:center}
.scene.shake{animation:shake .45s cubic-bezier(.36,.07,.19,.97)}
@keyframes shake{10%,90%{transform:translate(-2px,1px)}20%,80%{transform:translate(5px,-3px)}30%,50%,70%{transform:translate(-9px,4px)}40%,60%{transform:translate(9px,-4px)}}

/* スレート(冒頭) */
.slate{display:flex;flex-direction:column;align-items:center;gap:14px}
.slate .m{font-family:var(--f-title);font-weight:var(--f-tw);font-size:clamp(34px,10vw,64px);letter-spacing:.3em;margin-right:-.3em;color:var(--k);text-shadow:0 0 30px var(--k);animation:slateIn 1.1s cubic-bezier(.2,.9,.2,1) both}
@keyframes slateIn{from{opacity:0;letter-spacing:1em;filter:blur(10px)}to{opacity:1;letter-spacing:.3em;filter:none}}
.slate .s{font-size:12px;letter-spacing:.34em;color:rgba(255,255,255,.7);font-weight:700;animation:fadein 1s .5s both}
.slate .bar{height:2px;width:0;background:var(--k);animation:barg 1.2s .2s ease-out forwards}
@keyframes barg{to{width:min(60vw,260px)}}

/* コピー(チャンク) */
.copy-stack{display:flex;flex-direction:column;align-items:center;gap:.25em;font-family:var(--f-copy);font-weight:var(--f-w);line-height:1.3;max-width:14em;text-shadow:0 2px 28px rgba(0,0,0,.8),0 0 36px color-mix(in srgb,var(--k) 35%,transparent)}
.chunk{display:block;font-size:calc(1em*var(--f-s));word-break:keep-all;overflow-wrap:anywhere;text-wrap:balance}
.chunk .c{display:inline-block;white-space:pre}
.copy-stack.out{animation:t-out .35s ease-in forwards}
@keyframes t-out{to{opacity:0;filter:blur(8px);transform:scale(1.04)}}
.chunk.last{color:#fff;text-shadow:0 0 22px var(--k),0 2px 28px rgba(0,0,0,.8)}
/* 動き */
.e-wipe{animation:wipe .8s cubic-bezier(.6,0,.2,1) both}@keyframes wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
.e-hard{animation:hard .5s cubic-bezier(.9,0,.2,1) both}@keyframes hard{from{clip-path:inset(0 50% 0 50%)}to{clip-path:inset(0)}}
.e-track{animation:trk 1.4s ease-out both}@keyframes trk{from{opacity:0;letter-spacing:.5em;filter:blur(6px)}to{opacity:1;letter-spacing:.02em;filter:none}}
.e-fadeslow{animation:fslow 1.6s ease-out both}@keyframes fslow{from{opacity:0;filter:blur(12px);transform:translateY(10px)}to{opacity:1;filter:none;transform:none}}
.e-bounce .c{animation:bnc .8s cubic-bezier(.3,1.5,.5,1) both;animation-delay:calc(var(--i)*.045s)}@keyframes bnc{from{opacity:0;transform:translateY(-1.4em) rotate(-14deg)}to{opacity:1;transform:none}}
.e-pop .c{animation:pop .5s cubic-bezier(.3,1.8,.5,1) both;animation-delay:calc(var(--i)*.04s)}@keyframes pop{from{opacity:0;transform:scale(0)}to{opacity:1;transform:none}}
.e-over{animation:over .6s cubic-bezier(.2,1.4,.4,1) both}@keyframes over{from{opacity:0;transform:scale(2.8) rotate(-4deg)}60%{transform:scale(.9)}to{opacity:1;transform:none}}
.e-glitch .c{animation:gli .9s steps(1) both;animation-delay:calc(var(--i)*.03s)}
@keyframes gli{0%{opacity:0;transform:translateX(-8px) skewX(14deg)}20%{opacity:1;transform:translateX(6px);text-shadow:3px 0 #ff2a6d,-3px 0 #26e0ff}40%{transform:translateX(-4px) skewX(-8deg);opacity:.4}60%{opacity:1;transform:translateX(3px);text-shadow:-3px 0 #ff2a6d,3px 0 #26e0ff}80%{transform:none;opacity:.8}100%{opacity:1;transform:none;text-shadow:none}}
.e-flicker{animation:flk 1.1s steps(1) both}@keyframes flk{0%{opacity:0}12%{opacity:.8}18%{opacity:0}30%{opacity:1}36%{opacity:.1}52%{opacity:.9}58%{opacity:0}74%,100%{opacity:1}}
.e-creep{animation:creep 3.4s ease-out both}@keyframes creep{0%{opacity:0;transform:scale(.88)}18%{opacity:1}100%{opacity:1;transform:scale(1.08)}}
.e-zoom{animation:zm 1.5s cubic-bezier(.1,.8,.2,1) both}@keyframes zm{from{opacity:0;transform:scale(.25);filter:blur(14px)}40%{opacity:1}to{opacity:1;transform:scale(1.04);filter:none}}
.e-slam{animation:slm .55s cubic-bezier(.2,.9,.2,1) both}@keyframes slm{from{opacity:0;transform:scale(2.4);filter:blur(10px)}to{opacity:1;transform:none;filter:none}}
.e-float{animation:flt 1.6s ease-out both}@keyframes flt{from{opacity:0;transform:translateY(34px);filter:blur(14px)}to{opacity:1;transform:none;filter:none}}
.e-type .c{animation:typ 0s both;animation-delay:calc(var(--i)*.09s);opacity:0}@keyframes typ{to{opacity:1}}
.e-flip{animation:flp 1.5s ease-in-out both}@keyframes flp{0%{opacity:0;transform:scaleX(-1)}20%{opacity:1;transform:scaleX(-1)}60%{transform:scaleX(-1)}100%{opacity:1;transform:scaleX(1)}}

/* タイトル */
.reveal{display:flex;flex-direction:column;align-items:center;gap:14px}
.reveal .q{font-size:12px;letter-spacing:.3em;color:rgba(255,255,255,.75);font-weight:700;animation:fadein .8s both}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.reveal h2{margin:0;font-family:var(--f-title);font-weight:var(--f-tw);font-size:clamp(30px,9vw,56px);line-height:1.2;text-wrap:balance;word-break:keep-all;overflow-wrap:anywhere}
.reveal h2 .w{display:inline-block;white-space:nowrap}
.reveal h2 .c{display:inline-block;white-space:pre;animation:tt .7s cubic-bezier(.2,.9,.2,1) both;animation-delay:calc(.3s + var(--i)*.05s)}
@keyframes tt{from{opacity:0;transform:scale(1.9);filter:blur(10px)}to{opacity:1;transform:none;filter:none}}
.reveal h2.sweep{animation:glow 2.6s 1s ease-in-out both}
@keyframes glow{0%{text-shadow:0 0 0 transparent}45%{text-shadow:0 0 34px var(--k),0 0 8px #fff}100%{text-shadow:0 0 16px color-mix(in srgb,var(--k) 60%,transparent)}}
.reveal .yr{font-size:13px;color:rgba(255,255,255,.8);letter-spacing:.16em;animation:fadein 1s 1s both}
.links{display:flex;flex-direction:column;gap:10px;align-items:stretch;width:min(100%,340px);margin-top:6px;animation:fadein 1s 1.3s both}
.links .btn{text-align:center;text-decoration:none;display:flex;align-items:center;justify-content:center}
.trial{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;font-size:12px;color:rgba(255,255,255,.8)}
.trial span{flex-basis:100%;text-align:center;font-weight:700}
.btn.sm{min-height:40px;padding:6px 14px;font-size:13px}
.btn[disabled]{opacity:.5;cursor:default}
.next{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;animation:fadein 1s 1.6s both}
.note{margin:0;font-size:11px;color:rgba(255,255,255,.6);animation:fadein 1s 1.6s both}
.scene{overflow-y:auto}
.scene:has(.reveal){padding-bottom:calc(max(9vh,52px) + 56px)}
.btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:8px;animation:fadein 1s 1.4s both}
.btn{min-height:46px;padding:10px 20px;border:1.5px solid rgba(255,255,255,.55);border-radius:8px;background:rgba(0,0,0,.35);color:#fff;font:700 14px var(--t-ui);cursor:pointer}
.btn.main{background:#fff;color:#000;border-color:#fff}
@media (prefers-reduced-motion:reduce){
  .copy,.copy .c,.copy::before,.copy::after,.s-bg,.grain,.amb span,.scene.shake{animation:none!important}
  .chunk,.chunk .c,.slate *,.reveal *{animation-duration:.01s!important;animation-delay:0s!important}
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- 背景の絵文字(あえてチープに) / 横に流れる巨大文字 ---------- */
.emo{position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none;transition:opacity .5s}
.stage.hush .emo{opacity:.12}
.em{position:absolute;display:block;line-height:1;will-change:transform,opacity;filter:drop-shadow(0 6px 14px rgba(0,0,0,.5));font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;user-select:none}
.mq{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;display:flex;flex-direction:column;justify-content:center;gap:2vh}
.mq .row{white-space:nowrap;font-family:var(--f-big);font-weight:var(--f-bw);font-size:clamp(90px,30vw,230px);line-height:1;color:transparent;-webkit-text-stroke:2px var(--k);opacity:.2;will-change:transform}
.pass{position:absolute;inset:0;z-index:4;overflow:hidden;pointer-events:none;display:grid;align-items:center}
.pass .big{white-space:nowrap;font-family:var(--f-big);font-weight:var(--f-bw);font-size:clamp(120px,46vw,380px);line-height:1;color:var(--k);text-shadow:0 0 40px var(--k);will-change:transform}
.stage.fin .emo{opacity:.32}
/* エンディング: 出演者の絵文字が左右に激アップで登場(見切れる)。ボタンより奥 */
.cast{position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none}
.cast .em{filter:drop-shadow(0 10px 28px rgba(0,0,0,.6))}
.cast .em i{display:block;font-style:normal;line-height:1}
@media (max-width:640px){.cast{opacity:.55}}
.castline{font-size:13px;color:rgba(255,255,255,.85);letter-spacing:.12em;animation:fadein 1s 1.2s both}
.castline b{font-weight:700;letter-spacing:.3em;margin-right:.6em;color:var(--k)}
.castline .em2{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;letter-spacing:.25em}
@media (prefers-reduced-motion:reduce){.em,.mq .row,.pass .big,.cast{display:none}}