@charset "utf-8";
/* =========================================================================
   Qurioucity — スクロール駆動 3D エクスペリエンス（TOP）
   参考サイトと同じ画面構成：プリローダー／固定キャンバス／左の章インデックス／
   中央の見出し／下部バー（音・スクロール案内・進捗）
   ========================================================================= */

/* ------------------------------------------------------------ プリローダー */
.loader{
  position:fixed;inset:0;z-index:400;background:var(--bg);
  display:grid;place-items:center;
  transition:opacity .8s var(--ease),visibility .8s;
}
.loader.is-out{opacity:0;visibility:hidden;pointer-events:none}
.loader__inner{display:flex;flex-direction:column;align-items:center;gap:26px;
  padding-inline:24px;text-align:center}
.loader__squares{display:grid;grid-template-columns:repeat(13,1fr);gap:4px;width:min(280px,62vw)}
.loader__squares i{display:block;aspect-ratio:1;background:var(--gold);opacity:.14;
  animation:loadSq 1.9s var(--ease) infinite}
.loader__squares i:nth-child(n){animation-delay:calc(var(--i) * .085s)}
@keyframes loadSq{0%,100%{opacity:.12;transform:scale(.7)}45%{opacity:.95;transform:scale(1)}}
.loader__word{font-family:var(--font-en);font-weight:300;letter-spacing:.34em;
  font-size:clamp(18px,3.4vw,30px);color:var(--ink);margin-left:.34em}
.loader__meta{display:flex;align-items:baseline;gap:18px;font-size:11px;letter-spacing:.28em;
  color:var(--muted);text-transform:uppercase}
.loader__pct{font-variant-numeric:tabular-nums;color:var(--gold);min-width:4ch;text-align:right}
.loader__track{width:min(280px,62vw);height:1px;background:var(--line);position:relative;overflow:hidden}
.loader__track::after{content:"";position:absolute;inset:0;background:var(--gold);
  transform-origin:0 50%;transform:scaleX(var(--p,0));transition:transform .35s var(--ease)}
.loader__state{font-size:11px;letter-spacing:.18em;color:var(--muted);min-height:1.4em}

/* --------------------------------------------------------- 固定キャンバス */
.ex{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  opacity:0;transition:opacity 1.1s var(--ease),visibility 1.1s;
}
.ex-ready .ex{opacity:1}
.ex.is-past{opacity:0;visibility:hidden}
.ex__canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.ex__veil{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 82% at 50% 44%, transparent 46%, rgba(11,12,13,.55) 100%),
    linear-gradient(to bottom, rgba(11,12,13,.74) 0%, transparent 20%, transparent 40%, rgba(11,12,13,.72) 72%, rgba(11,12,13,.93) 100%);
}

/* 進行を生むための空きスクロール領域 */
.ex-driver{position:relative;z-index:2;pointer-events:none}

/* --------------------------------------------------------------- UI 層 */
.ex__ui{position:absolute;inset:0;z-index:3;pointer-events:none;
  display:grid;grid-template-rows:1fr auto;
  opacity:0;transition:opacity .9s var(--ease) .25s}
.ex-ready .ex__ui{opacity:1}

/* 画面を囲む細い枠（参考サイトと同じ構成要素） */
.ex__frame{position:absolute;inset:calc(var(--head-h) + 10px) 14px 14px;z-index:2;
  border:1px solid var(--line-soft);pointer-events:none;opacity:0;
  transition:opacity .9s var(--ease) .3s}
.ex-ready .ex__frame{opacity:1}

/* ------------------------------------------------------- 左：章インデックス */
.ex__chapters{position:absolute;left:clamp(20px,3.4vw,54px);top:50%;
  transform:translateY(-50%);display:grid;gap:2px;pointer-events:auto}
.ex__chapter{display:flex;align-items:center;gap:12px;min-height:44px;
  padding:4px 6px 4px 0;font-size:10px;letter-spacing:.26em;color:var(--muted);
  text-transform:uppercase;background:none;border:0;cursor:pointer;
  transition:color .3s var(--ease)}
.ex__chapter::before{content:"";width:5px;height:5px;flex:0 0 auto;
  background:var(--muted);opacity:.35;transform:rotate(45deg);
  transition:opacity .3s,background .3s,transform .4s var(--ease)}
.ex__chapter:hover,.ex__chapter:focus-visible{color:var(--ink)}
.ex__chapter.is-active{color:var(--gold)}
.ex__chapter.is-active::before{background:var(--gold);opacity:1;transform:rotate(45deg) scale(1.5)}
.ex__chapter-no{font-variant-numeric:tabular-nums;opacity:.6}
@media (max-width:900px){
  .ex__chapters{left:14px;gap:0}
  .ex__chapter{min-height:44px;font-size:9px;letter-spacing:.18em}
  .ex__chapter-en{display:none}
  .ex__chapter.is-active .ex__chapter-en{display:inline}
}

/* ------------------------------------------------------ 中央：見出しスライド */
.ex__stage{position:relative;display:grid;align-items:end;justify-items:center;padding:
  calc(var(--head-h) + 24px) clamp(20px,6vw,120px) clamp(18px,4.5vh,52px);min-height:0}
.ex__slide{grid-area:1/1;max-width:760px;text-align:center;pointer-events:none;
  opacity:0;transform:translateY(22px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.ex__slide.is-active{opacity:1;transform:none;pointer-events:auto}
.ex__eyebrow{font-size:10px;letter-spacing:.36em;color:var(--gold);
  text-transform:uppercase;margin-bottom:22px}
.ex__title{font-size:clamp(21px,3.3vw,42px);font-weight:500;line-height:1.45;
  letter-spacing:.01em;color:var(--ink);
  text-shadow:0 2px 40px rgba(11,12,13,.9),0 1px 4px rgba(11,12,13,.95)}
.ex__en{font-family:var(--font-en);font-weight:300;font-size:clamp(24px,4.1vw,54px);
  line-height:1.04;letter-spacing:.005em;color:var(--ink);margin-bottom:10px;
  text-shadow:0 2px 40px rgba(11,12,13,.9),0 1px 6px rgba(11,12,13,.7)}
.ex__body{margin:18px auto 0;max-width:50ch;font-size:clamp(13px,1vw,15px);
  line-height:1.95;color:#cfc9bd;text-shadow:0 1px 20px rgba(11,12,13,.95)}
.ex__actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:26px}
.ex__btn{display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:12px 26px;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--line-strong);color:var(--ink);
  background:rgba(11,12,13,.35);backdrop-filter:blur(6px);
  transition:background .3s,border-color .3s,color .3s}
.ex__btn::before{content:"";width:5px;height:5px;background:var(--gold);transform:rotate(45deg)}
.ex__btn:hover,.ex__btn:focus-visible{background:var(--ink);color:var(--pale-ink);border-color:var(--ink)}
.ex__btn:hover::before{background:var(--pale-ink)}
.ex__btn--ghost{background:transparent}

/* ------------------------------------------------------------- 下部バー */
.ex__bottom{position:relative;pointer-events:none;
  border-top:1px solid var(--line-soft);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:16px;padding:14px clamp(20px,4vw,54px);
  background:linear-gradient(to top,rgba(11,12,13,.86),transparent)}
.ex__sound{display:inline-flex;align-items:center;gap:10px;min-height:44px;
  font-size:10px;letter-spacing:.26em;color:var(--muted);pointer-events:auto;
  background:none;border:0;cursor:pointer;transition:color .3s}
.ex__sound:hover,.ex__sound:focus-visible{color:var(--ink)}
.ex__sound.is-on{color:var(--gold)}
.ex__sound-bars{display:inline-flex;align-items:flex-end;gap:2px;height:12px}
.ex__sound-bars i{width:2px;height:4px;background:currentColor;transition:height .3s}
.ex__sound.is-on .ex__sound-bars i{animation:sndBar .9s var(--ease) infinite alternate}
.ex__sound.is-on .ex__sound-bars i:nth-child(2){animation-delay:.15s}
.ex__sound.is-on .ex__sound-bars i:nth-child(3){animation-delay:.3s}
@keyframes sndBar{from{height:3px}to{height:12px}}
.ex__hint{justify-self:center;display:flex;align-items:center;gap:12px;
  font-size:10px;letter-spacing:.3em;color:var(--muted);text-transform:uppercase;
  transition:opacity .5s var(--ease)}
.ex__hint.is-hidden{opacity:0}
.ex__hint i{display:block;width:1px;height:22px;background:var(--line-strong);position:relative;overflow:hidden}
.ex__hint i::after{content:"";position:absolute;inset:0;background:var(--gold);
  transform:translateY(-100%);animation:hintRun 2.2s var(--ease) infinite}
@keyframes hintRun{0%{transform:translateY(-100%)}60%{transform:translateY(100%)}100%{transform:translateY(100%)}}
.ex__progress{justify-self:end;width:min(200px,26vw);height:1px;background:var(--line);
  position:relative;overflow:hidden}
.ex__progress i{position:absolute;inset:0;background:var(--gold);
  transform-origin:0 50%;transform:scaleX(0)}
@media (max-width:700px){
  .ex__bottom{grid-template-columns:auto 1fr;gap:10px;padding-inline:16px}
  .ex__hint{display:none}
  .ex__progress{width:100%}
}

/* ------------------------------------------------------- 退避（WebGL不可） */
.ex-fallback .ex{position:static;opacity:1;visibility:visible;pointer-events:auto}
.ex-fallback .ex__canvas,.ex-fallback .ex__veil,.ex-fallback .ex__frame{display:none}
.ex-fallback .ex-driver{display:none}
.ex-fallback .ex__ui{position:static;opacity:1;visibility:visible;display:block;pointer-events:auto}
.ex-fallback .ex__ui>*{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.ex-fallback .ex__chapters{display:none}
.ex-fallback .ex__stage{position:static;display:block;padding:0}
.ex-fallback .ex__slide{grid-area:auto;opacity:1;transform:none;pointer-events:auto;
  max-width:none;text-align:left;padding-block:clamp(56px,8vw,110px);
  border-top:1px solid var(--line-soft)}
.ex-fallback .ex__slide:first-child{border-top:0}
.ex-fallback .ex__actions{justify-content:flex-start}
.ex-fallback .ex__body{margin-inline:0}
.ex-fallback .ex__bottom{display:none}
.ex-note{margin:0 auto;max-width:var(--wrap);padding:14px var(--pad);
  font-size:13px;color:var(--muted);border-bottom:1px solid var(--line-soft)}

/* JavaScript が無効な場合も内容が読めるようにする */
.no-js-ex .ex,.no-js-ex .ex__frame,.no-js-ex .ex-driver,.no-js-ex .loader{display:none}

@media (prefers-reduced-motion:reduce){
  .loader__squares i,.ex__hint i::after,.ex__sound.is-on .ex__sound-bars i{animation:none}
  .ex__slide{transition:opacity .01ms}
}