/* =========================================================
   PARAISO — teaser (2026.09.01 公開版)
   design.md 準拠。黒9割・赤1割。
   ========================================================= */
:root{
  --black:#000; --black-warm:#090C09;
  --red:#E31313; --red-deep:#9E1310;
  --ember-1:#5C0A01; --ember-2:#D62101; --ember-3:#ED5901; --ember-4:#FDE027;
  --purple-1:#341C4B; --purple-2:#4C2B61;
  --green-deep:#27472F;
  --off-white:#ECE4E0; --gray:#6B6B6B;
  --en:"Anton",Impact,sans-serif;
  --jp:"Zen Kaku Gothic New",-apple-system,"Hiragino Kaku Gothic ProN",sans-serif;
  --frame-w:min(100vw,calc(100vh*9/16));
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--black); color:var(--off-white);
  font-family:var(--jp); font-weight:400; letter-spacing:.08em; line-height:1.9;
  font-size:15px; overflow-x:hidden;
}
@media (min-width:768px){body{font-size:16px}}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.92em}
.h-en{font-family:var(--en);font-weight:400;letter-spacing:.04em;line-height:1;
  font-size:clamp(38px,9vw,92px);color:var(--off-white)}

/* ---------- 全面グレイン ---------- */
.grain{
  position:fixed;inset:0;z-index:9000;pointer-events:none;opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* ---------- 走査線 ---------- */
.scanlines{position:absolute;inset:0;pointer-events:none;opacity:.22;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,.6) 0 1px,transparent 1px 3px)}

/* =========================================================
   0. ローダー（支給素材の逆再生）
   ========================================================= */
.loader{position:fixed;inset:0;z-index:9200;background:var(--black);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.loader.is-done{opacity:0;visibility:hidden;transition:opacity .7s ease,visibility .7s}
.loader__video{width:min(72.7vw,445px);height:auto;object-fit:contain}

/* =========================================================
   0-b. ゲート
   ========================================================= */
.gate{position:fixed;inset:0;z-index:9100;background:var(--black);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8vh;
  opacity:0;visibility:hidden;transition:opacity .6s ease,visibility .6s}
.gate.is-active{opacity:1;visibility:visible}
.gate.is-done{opacity:0;visibility:hidden}
/* ロゴは静止画。ローダー映像内のロゴ（445px×85.3%＝380px）と同じ大きさに揃えてある */
.gate__mark{display:flex;flex-direction:column;align-items:center;gap:14px}
.gate__logo{width:min(62vw,380px)}
.gate__kana{font-size:clamp(11px,2.6vw,13px);letter-spacing:.62em;padding-left:.62em;
  color:rgba(236,228,224,.55)}
.gate__btn{font-family:var(--en);font-size:clamp(26px,7vw,46px);letter-spacing:.18em;
  background:transparent;color:var(--off-white);border:1px solid rgba(236,228,224,.35);
  padding:12px 30px 8px 44px;cursor:pointer;transition:.35s}
.gate__btn:hover{color:var(--red);border-color:var(--red);letter-spacing:.26em}

/* =========================================================
   1. FV
   ========================================================= */
.fv{position:relative;height:100svh;display:flex;align-items:center;justify-content:center;
  background:var(--black);overflow:hidden}
.fv__frame{position:relative;width:var(--frame-w);height:100svh;max-height:100svh}
.fv__video{width:100%;height:100%;object-fit:cover}
.fv__frame::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 45%,rgba(0,0,0,.75) 100%)}
.fv__side{position:absolute;top:0;bottom:0;width:calc((100vw - var(--frame-w))/2);
  display:none;flex-direction:column;justify-content:space-around;align-items:center;
  font-family:var(--en);font-size:12px;letter-spacing:.4em;color:rgba(236,228,224,.16);
  writing-mode:vertical-rl;overflow:hidden}
.fv__side::before{content:"";position:absolute;inset:0;opacity:.5;
  background:repeating-linear-gradient(to bottom,rgba(227,19,19,.10) 0 1px,transparent 1px 4px)}
.fv__side--l{left:0}.fv__side--r{right:0}
@media (min-width:900px){.fv__side{display:flex}}
.fv__meta{position:absolute;left:0;right:0;bottom:6.5%;text-align:center;z-index:5;
  text-shadow:0 2px 18px rgba(0,0,0,.95),0 0 60px rgba(0,0,0,.8)}
.fv__season{font-family:var(--en);font-size:clamp(16px,3.4vw,26px);letter-spacing:.5em;padding-left:.5em}
.scroll-cue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:5;
  width:1px;height:52px;background:rgba(236,228,224,.2);overflow:hidden}
.scroll-cue span{position:absolute;top:-52px;left:0;width:1px;height:52px;background:var(--red);
  animation:cue 2.2s cubic-bezier(.7,0,.3,1) infinite}
@keyframes cue{0%{top:-52px}60%{top:52px}100%{top:52px}}

/* =========================================================
   2. 掟
   ========================================================= */
.creed{position:relative;padding:34vh 24px;background:var(--black)}
.creed__inner{max-width:780px;margin:0 auto}
.line{font-size:clamp(18px,4.7vw,31px);font-weight:700;line-height:2.05;margin-bottom:1.5em;
  opacity:0;transform:translateY(24px)}
.line--red{color:var(--red);text-shadow:0 0 34px rgba(227,19,19,.4);margin-bottom:0}

/* =========================================================
   3. 世界（Sticky ズームアウト）
   ========================================================= */
.island{position:relative;height:300svh}
.island__sticky{position:sticky;top:0;height:100svh;overflow:hidden;
  display:flex;align-items:center;justify-content:center;background:var(--black)}
.island__img{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.island__img img{width:var(--frame-w);height:100svh;object-fit:cover;transform:scale(1.75);transform-origin:52% 58%;
  will-change:transform;backface-visibility:hidden}
.island__sticky::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,.6),rgba(0,0,0,.28) 30%,rgba(0,0,0,.34) 55%,rgba(0,0,0,.92))}
.island__copy{position:relative;z-index:3;text-align:center;padding:0 24px;opacity:0}
.island__copy .h-en{text-shadow:0 4px 34px rgba(0,0,0,.95),0 0 90px rgba(0,0,0,.8)}
.island__text{margin-top:22px;font-size:clamp(14px,3.7vw,19px);line-height:2.1;
  text-shadow:0 2px 24px rgba(0,0,0,.95)}

/* =========================================================
   4. キャラクター（12人中4人だけ影が見えている）
   ========================================================= */
.chars{position:relative;background:var(--black);padding:16vh 24px 18vh}
.chars__head{margin-bottom:8vh}
.chars__kana{margin-top:14px;font-size:clamp(11px,2.6vw,13px);letter-spacing:.5em;
  padding-left:.5em;color:var(--gray)}
.chars__grid{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (min-width:900px){.chars__grid{grid-template-columns:repeat(6,1fr);gap:16px}}
.chars__item{position:relative;aspect-ratio:3/4;overflow:hidden;background:#050505;
  border:1px solid rgba(236,228,224,.07)}
.chars__item img{width:100%;height:100%;object-fit:cover;transition:transform .9s ease}
.chars__item:hover img{transform:scale(1.05)}
.chars__item--empty{display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(45deg,#050505 0 6px,#080808 6px 12px)}
.chars__item--empty span{font-family:var(--en);font-size:clamp(14px,3vw,20px);
  color:rgba(236,228,224,.13)}
.chars__count{margin-top:26px;text-align:right;font-family:var(--en);font-size:13px;
  letter-spacing:.24em;color:var(--gray)}

/* =========================================================
   5. カウントダウン
   ========================================================= */
.cd{position:relative;background:var(--black);padding:18vh 24px;text-align:center}
.cd__label{font-family:var(--en);font-size:clamp(14px,3vw,20px);letter-spacing:.5em;
  padding-left:.5em;color:var(--gray);margin-bottom:6vh}
.cd__clock{display:flex;justify-content:center;gap:clamp(14px,5vw,54px);flex-wrap:nowrap}
.cd__unit{display:flex;flex-direction:column;align-items:center;min-width:0}
.cd__num{font-family:var(--en);font-size:clamp(38px,13vw,120px);line-height:1;
  color:var(--off-white);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.cd__cap{margin-top:12px;font-size:10px;letter-spacing:.28em;color:var(--gray);padding-left:.28em}
.cd__date{margin-top:8vh;font-family:var(--en);font-size:clamp(20px,5vw,38px);
  letter-spacing:.22em;padding-left:.22em;color:var(--red);
  text-shadow:0 0 40px rgba(227,19,19,.35)}

/* =========================================================
   6. CTA
   ========================================================= */
.cta{position:relative;background:var(--black);padding:18vh 24px 20vh;text-align:center}
.cta__lead{font-size:clamp(18px,4.8vw,32px);font-weight:700;margin-bottom:8vh}
.cta__btns{display:flex;flex-direction:column;gap:14px;max-width:520px;margin:0 auto}
@media (min-width:768px){.cta__btns{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}}
.cta__btn{border:1px solid rgba(236,228,224,.3);padding:20px;font-family:var(--en);
  font-size:19px;letter-spacing:.18em;transition:.3s}
.cta__btn:hover{background:var(--red);border-color:var(--red);color:#fff}
.cta__btn.is-pending{color:rgba(236,228,224,.32);border-color:rgba(236,228,224,.12);cursor:not-allowed}
.cta__btn.is-pending:hover{background:transparent;border-color:rgba(236,228,224,.12);color:rgba(236,228,224,.32)}

/* =========================================================
   フッター
   ========================================================= */
.footer{position:relative;background:var(--black);padding:12vh 24px 14vh;text-align:center}
.footer__logo{width:min(42vw,200px);margin:0 auto 26px;opacity:.8}
.footer__copy{font-size:10.5px;letter-spacing:.24em;color:var(--gray)}

/* =========================================================
   モーション配慮
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .line,.island__copy{opacity:1!important;transform:none!important}
  .grain{display:none}
}