/* =========================================================
   APOCRYPHA ― 存在しなかった登場人物たち
   自動上映 → 最後に全ページが現れる 1ページサイト
   ========================================================= */

:root{
  --ink:#06060a; --ink-2:#0b0b11;
  --paper:#ece3cf; --mist:rgba(236,227,207,.62); --mist-2:rgba(236,227,207,.36);
  --gold:#d8b978; --gold-hi:#f6e6bb; --gold-lo:#8d6f31;
  --seal:#8f2b26; --blue:#7fa8d8; --red:#c4564a;

  --serif-jp:"Shippori Mincho","Yu Mincho","YuMincho","Hiragino Mincho ProN",serif;
  --serif-en:"Cormorant Garamond","Shippori Mincho",Georgia,serif;

  --pad:clamp(20px,5vw,80px);
  --wrap:1120px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; }

body{
  margin:0; background:var(--ink); color:var(--paper);
  font-family:var(--serif-jp); line-height:1.9; letter-spacing:.04em;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
/* 上映中はスクロールさせない */
html.js body:not(.is-page){ overflow:hidden; height:100%; }

svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background:var(--gold); color:#12100a; }
.svg-defs{ position:absolute; width:0; height:0; overflow:hidden; }

/* ============================ 空気 ============================ */

#dust{ position:fixed; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; opacity:.85; }
.fx{ position:fixed; inset:0; pointer-events:none; }

.fx-glow{
  z-index:1;
  background:
    radial-gradient(58vw 46vw at 50% 38%, rgba(216,185,120,.13), rgba(216,185,120,.04) 42%, transparent 70%),
    radial-gradient(90vw 70vw at 80% 110%, rgba(80,60,120,.10), transparent 65%),
    radial-gradient(70vw 60vw at 5% -10%, rgba(140,90,50,.08), transparent 60%);
  transition:background 1.4s linear;
}
.fx-vignette{
  z-index:60;
  background:radial-gradient(120% 90% at 50% 45%, transparent 40%, rgba(0,0,0,.55) 82%, rgba(0,0,0,.86) 100%);
}
.fx-grain{
  z-index:61; opacity:.3; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='220' height='220' filter='url(%23n)' opacity='.5'/></svg>");
  animation:grainShift 7s steps(6) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)} 16%{transform:translate(-3%,2%)} 33%{transform:translate(2%,-3%)}
  50%{transform:translate(-2%,-2%)} 66%{transform:translate(3%,1%)} 83%{transform:translate(-1%,3%)}
  100%{transform:translate(0,0)}
}
.fx-scan{
  z-index:62; opacity:.15; mix-blend-mode:soft-light;
  background:repeating-linear-gradient(180deg, rgba(255,255,255,.06) 0 1px, transparent 1px 3px);
}

/* ============================ 開帳 ============================ */

.veil{
  position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  background:radial-gradient(60vw 50vw at 50% 50%, rgba(216,185,120,.07), transparent 70%), #050508;
  transition:opacity 1.1s var(--ease), visibility 1.1s;
}
.veil.is-gone{ opacity:0; visibility:hidden; }
html:not(.js) .veil{ display:none; }
.veil__inner{ text-align:center; padding:var(--pad); }
.veil__rule{
  width:1px; height:0; margin:0 auto 34px;
  background:linear-gradient(180deg,transparent,var(--gold),transparent);
  animation:veilRule 1.4s var(--ease) .2s forwards;
}
@keyframes veilRule{ to{ height:96px; } }
.veil__micro{
  margin:0 0 22px; font-family:var(--serif-en); font-size:clamp(11px,1.6vw,13px);
  letter-spacing:.72em; text-indent:.72em; color:var(--gold);
  opacity:0; animation:fadeUp 1.2s var(--ease) 1s forwards;
}
.veil__line{
  margin:0 0 46px; font-size:clamp(19px,3.4vw,30px); letter-spacing:.2em;
  opacity:0; animation:fadeUp 1.4s var(--ease) 1.5s forwards;
  text-shadow:0 0 34px rgba(216,185,120,.25);
}
.veil__btn{ position:relative; display:inline-block; padding:20px 54px; opacity:0; animation:fadeUp 1.2s var(--ease) 2.4s forwards; }
.veil__btn-frame{ position:absolute; inset:0; border:1px solid rgba(216,185,120,.4); transition:.5s var(--ease); }
.veil__btn-frame::before{ content:""; position:absolute; inset:0 auto 0 0; width:0; background:var(--gold); opacity:.12; transition:.5s var(--ease); }
.veil__btn:hover .veil__btn-frame{ border-color:var(--gold); }
.veil__btn:hover .veil__btn-frame::before{ width:100%; }
.veil__btn-label{ position:relative; font-size:clamp(14px,2vw,17px); letter-spacing:.34em; text-indent:.34em; color:var(--gold-hi); }
.veil__note{ margin:26px 0 0; font-size:11px; letter-spacing:.24em; color:var(--mist-2); opacity:0; animation:fadeUp 1.2s var(--ease) 3s forwards; }
@keyframes fadeUp{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;} }

/* ============================ 上映 ============================ */

.cinema{
  position:fixed; inset:0; z-index:50; overflow:hidden;
  transition:opacity 1.3s var(--ease), visibility 1.3s;
}
.cinema.is-done{ opacity:0; visibility:hidden; pointer-events:none; }
html:not(.js) .cinema{ display:none; }

.cut{
  position:absolute; inset:0; display:grid; place-content:center; justify-items:center;
  text-align:center; padding:clamp(56px,9vh,110px) var(--pad);
  opacity:0; visibility:hidden; pointer-events:none;
  transform:scale(1.015);
  transition:opacity .9s var(--ease), transform 1.6s var(--ease), visibility .9s;
}
.cut.is-live{ opacity:1; visibility:visible; transform:none; }
.cut.is-out{ opacity:0; transform:scale(.985); transition-duration:.7s; }

/* カット内の段送り */
.s1,.s2,.s3,.s4,.s5{ opacity:0; }
.cut.is-live .s1{ animation:cutIn 1.5s var(--ease) .2s forwards; }
.cut.is-live .s2{ animation:cutIn 1.5s var(--ease) 1s forwards; }
.cut.is-live .s3{ animation:cutIn 1.5s var(--ease) 1.85s forwards; }
.cut.is-live .s4{ animation:cutIn 1.5s var(--ease) 2.7s forwards; }
.cut.is-live .s5{ animation:cutIn 1.5s var(--ease) 3.7s forwards; }
@keyframes cutIn{
  from{ opacity:0; transform:translateY(20px); filter:blur(8px); }
  to  { opacity:1; transform:none; filter:none; }
}

.cut__label{
  font-family:var(--serif-en); font-size:11px; font-weight:600;
  letter-spacing:.52em; text-indent:.52em; color:var(--gold); margin:0 0 30px;
}
.cut__h{
  margin:0 0 clamp(30px,5vh,52px); font-size:clamp(26px,5.4vw,54px);
  font-weight:600; line-height:1.6; letter-spacing:.1em;
}
.cut__body{ margin:0 0 22px; font-size:clamp(15px,2.4vw,22px); line-height:2.2; letter-spacing:.12em; color:var(--mist); }
.cut__say{
  margin:0 0 18px; font-size:clamp(15px,2.5vw,24px); line-height:2; letter-spacing:.16em;
  color:var(--paper); text-shadow:0 0 34px rgba(216,185,120,.2);
}
.cut__tail{
  margin:clamp(24px,4vh,44px) 0 0; padding-top:22px; max-width:60ch;
  border-top:1px solid rgba(236,227,207,.14);
  font-size:clamp(12px,1.8vw,16px); letter-spacing:.1em; color:var(--mist);
}

/* 01 開帳 */
.beam{
  position:absolute; top:-40%; left:50%; width:min(780px,90vw); height:170%;
  transform:translateX(-50%);
  background:linear-gradient(180deg, rgba(216,185,120,.15), rgba(216,185,120,.03) 45%, transparent 72%);
  filter:blur(46px); pointer-events:none;
}
.cut--title .cut__say{ font-size:clamp(14px,2.2vw,20px); color:var(--mist); }
.bigtitle{
  font-family:var(--serif-en); font-weight:300; margin:clamp(18px,3vh,34px) 0 0;
  font-size:clamp(46px,13vw,168px); line-height:1; letter-spacing:.1em; text-indent:.1em;
  background:linear-gradient(100deg,#8d7133 0%,var(--gold-hi) 22%,var(--gold) 46%,#7d6229 68%,var(--gold-hi) 88%,var(--gold) 100%);
  background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:sheen 9s linear infinite;
  filter:drop-shadow(0 0 34px rgba(216,185,120,.28));
}
@keyframes sheen{ from{background-position:180% 0} to{background-position:-40% 0} }
.bigtitle .ch{
  display:inline-block; opacity:0; transform:translateY(.42em) rotateX(-70deg); filter:blur(10px);
  transform-origin:50% 100%;
}
.bigtitle.is-lit .ch{
  opacity:1; transform:none; filter:none;
  transition:opacity 1.1s var(--ease), transform 1.1s var(--ease), filter 1.1s var(--ease);
  transition-delay:calc(var(--i) * 90ms);
}
html:not(.js) .bigtitle .ch{ opacity:1!important; transform:none!important; filter:none!important; }
.bigtitle__rule{ margin:28px auto 20px; width:min(420px,72vw); }
.bigtitle__rule i{ display:block; height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent); }
.bigtitle__jp{ margin:0; font-size:clamp(14px,2.6vw,23px); letter-spacing:.44em; text-indent:.44em; }

/* 02 原典 */
.canon{ list-style:none; margin:0; padding:0; }
.canon li{
  position:relative; margin:0 0 20px; padding-left:34px;
  font-size:clamp(16px,2.8vw,27px); letter-spacing:.12em; color:var(--paper); text-align:left;
}
.canon li::before{ content:""; position:absolute; left:0; top:.9em; width:20px; height:1px; background:var(--gold); opacity:.8; }

/* 03 裂ける */
.cut--tear{ padding:0; display:block; }
.tear-stage{ position:absolute; inset:0; display:grid; place-items:center; perspective:1600px; }

.rip__crease{
  position:absolute; left:50%; top:50%; width:min(860px,88vw); height:26px;
  transform:translate(-50%,-50%); opacity:calc(var(--strain,0) * .9); z-index:3; pointer-events:none;
  background:linear-gradient(180deg, transparent 40%, rgba(60,45,20,.5) 50%, rgba(255,250,235,.35) 54%, transparent 64%);
  filter:blur(.6px) url(#f-fiber);
}
.rip__rift{
  position:absolute; left:50%; top:50%; width:120vw; height:3px;
  transform:translate(-50%,-50%) scaleX(calc(.12 + var(--t,0) * .88));
  background:linear-gradient(90deg,transparent,var(--gold-hi),var(--gold),transparent);
  box-shadow:0 0 70px 26px rgba(216,185,120,calc(.14 + var(--t,0)*.36));
  opacity:calc(var(--t,0) * 1.6); filter:blur(1px);
}

.leaf{ position:absolute; inset:0; display:grid; place-items:center; will-change:transform; transform-style:preserve-3d; }
.leaf--top{
  transform:
    translate3d(calc(var(--t,0) * -3.4vw), calc(var(--t,0) * -66vh - var(--strain,0) * 3px), 0)
    rotate(calc(var(--t,0) * -5.2deg + var(--wob,0) * .35deg))
    rotateX(calc(var(--t,0) * 16deg));
  opacity:calc(1 - var(--t,0) * .5);
}
.leaf--bottom{
  transform:
    translate3d(calc(var(--t,0) * 2.6vw), calc(var(--t,0) * 66vh + var(--strain,0) * 3px), 0)
    rotate(calc(var(--t,0) * 4.4deg - var(--wob,0) * .3deg))
    rotateX(calc(var(--t,0) * -13deg));
  opacity:calc(1 - var(--t,0) * .5);
}
.leaf__sheet{ position:relative; width:min(860px,88vw); filter:drop-shadow(0 30px 70px rgba(0,0,0,.72)); }
.leaf__fiber{ position:absolute; inset:0; filter:url(#f-fiber); }
.leaf__ground{
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(96deg, rgba(120,95,55,.05) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(2deg, rgba(255,255,255,.14) 0 1px, transparent 1px 6px),
    radial-gradient(120% 90% at 50% 0%, #f6efdd, #e7ddc6 52%, #d5c8aa 100%);
  box-shadow:inset 0 0 90px rgba(120,95,55,.24);
}
.leaf__ground::before{ content:""; position:absolute; left:-2%; right:-2%; top:38%; height:24%; pointer-events:none; }
.leaf--top .leaf__ground::before{
  background:linear-gradient(180deg, rgba(255,252,242,0) 0%, rgba(255,252,242,.45) 55%, rgba(255,253,246,.92) 82%, rgba(255,255,250,1) 100%);
}
.leaf--bottom .leaf__ground::before{
  background:linear-gradient(0deg, rgba(255,252,242,0) 0%, rgba(255,252,242,.4) 48%, rgba(250,244,229,.9) 76%, rgba(214,200,170,1) 100%);
}
.leaf--top .leaf__ground,.leaf--top .leaf__text{ clip-path:url(#tearTop); }
.leaf--bottom .leaf__ground,.leaf--bottom .leaf__text{ clip-path:url(#tearBottom); }

.leaf__text{
  position:relative; z-index:2; padding:clamp(34px,6vw,72px);
  min-height:min(560px,68svh); color:#241f18; text-align:left;
}
.leaf__text .chapter{ color:#8a6d2e; margin:0 0 26px;
  font-family:var(--serif-en); font-size:11px; font-weight:600; letter-spacing:.52em; text-indent:.52em; }
.leaf__h{ margin:0 0 clamp(24px,4vw,40px); font-size:clamp(24px,4.4vw,44px); font-weight:600; letter-spacing:.14em; color:#1d1913; }
.leaf__p{ margin:0 0 28px; font-size:clamp(13px,2vw,19px); line-height:2.2; letter-spacing:.08em; color:#37301f; }
.leaf__tail{ margin:0; padding-top:20px; border-top:1px solid rgba(60,45,20,.24); font-size:clamp(11px,1.6vw,14px); color:#5a4f38; }

.shards{ position:absolute; left:50%; top:50%; width:0; height:0; z-index:4; }
.shards i{
  position:absolute; display:block; width:var(--w); height:var(--h); left:var(--x); top:0;
  background:linear-gradient(150deg,#f6efdd,#d9cbac);
  opacity:calc((var(--t,0) - var(--dl)) * 4 * (1 - var(--t,0)));
  transform:
    translate3d(calc(var(--dx) * var(--t,0)), calc(var(--dy) * var(--t,0) - 6vh * var(--t,0)), 0)
    rotate(calc(var(--r) * var(--t,0)));
  filter:url(#f-torn-soft) drop-shadow(0 4px 6px rgba(0,0,0,.5));
}

.tear-ask{
  position:relative; z-index:1; grid-area:1/1; padding:0 var(--pad); text-align:center;
  opacity:calc((var(--t,0) - .26) * 2.9);
  transform:scale(calc(.94 + var(--t,0) * .06));
}
.tear-ask p{ margin:0; font-size:clamp(26px,6vw,64px); line-height:1.6; font-weight:600; letter-spacing:.1em; }
.tear-ask em{ font-style:normal; color:var(--gold-hi); text-shadow:0 0 44px rgba(216,185,120,.55); }

/* 04 書き換え */
.swaps{ display:grid; gap:clamp(16px,2.6vw,26px); width:min(880px,100%); }
.swap{
  display:grid; grid-template-columns:1fr 60px 1fr; align-items:center; gap:clamp(10px,2vw,20px);
  padding:clamp(16px,2.4vw,26px) clamp(16px,3vw,32px);
  border:1px solid rgba(236,227,207,.1);
  background:linear-gradient(115deg, rgba(255,255,255,.028), rgba(255,255,255,.008));
}
.swap__from{
  position:relative; margin:0; width:max-content; max-width:100%; justify-self:end;
  font-size:clamp(13px,2vw,20px); letter-spacing:.08em; color:var(--mist); text-align:right;
}
.swap__from::after{
  content:""; position:absolute; left:0; top:50%; height:1px; width:0;
  background:var(--red); box-shadow:0 0 10px rgba(196,86,74,.7);
}
.swap.is-cut .swap__from::after{ width:100%; transition:width .9s var(--ease); }
.swap.is-cut .swap__from{ color:var(--mist-2); transition:color 1s .4s; }
.swap__arrow{ position:relative; display:block; height:1px; background:linear-gradient(90deg, rgba(236,227,207,.14), rgba(216,185,120,.7)); transform:scaleX(0); transform-origin:0 50%; }
.swap.is-cut .swap__arrow{ transform:scaleX(1); transition:transform .8s var(--ease) .45s; }
.swap__arrow::after{ content:""; position:absolute; right:0; top:-3px; border:3.5px solid transparent; border-left-color:var(--gold); }
.swap__to{
  margin:0; justify-self:start; text-align:left;
  font-size:clamp(14px,2.4vw,24px); font-weight:600; letter-spacing:.08em;
  color:var(--gold-hi); text-shadow:0 0 30px rgba(216,185,120,.28);
}

/* 05 / 06 人物 */
.cut--char{ padding:clamp(20px,3.6vh,56px) var(--pad) clamp(78px,12.5vh,118px); }
.char{
  display:grid; grid-template-columns:minmax(200px,34%) 1fr;
  gap:clamp(24px,5vw,72px); align-items:center; text-align:left;
  width:min(1060px, calc(100vw - var(--pad) * 2));
}
.char__sil{ position:relative; display:grid; place-items:center; }
.char__sil::before{
  content:""; position:absolute; width:78%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, var(--tone-glow), transparent 68%);
  filter:blur(28px);
  animation:silPulse 7s ease-in-out infinite;
}
@keyframes silPulse{ 0%,100%{ transform:scale(1); opacity:.85 } 50%{ transform:scale(1.07); opacity:1 } }
.char__sil svg{
  position:relative; height:min(46vh,430px); width:auto;
  --sil-body:#04060b;
  --sil-line:var(--tone);
  --sil-hi:var(--tone-hi);
  filter:drop-shadow(0 0 26px var(--tone-glow));
  opacity:0;
}
.cut.is-live .char__sil svg{ animation:silIn 2.2s var(--ease) .1s forwards; }
@keyframes silIn{
  from{ opacity:0; transform:translateY(26px) scale(.97); filter:blur(14px) drop-shadow(0 0 26px var(--tone-glow)); }
  to  { opacity:1; transform:none; filter:blur(0) drop-shadow(0 0 26px var(--tone-glow)); }
}
.cut--char-clock{ --tone:#7fa8d8; --tone-hi:#d6e8ff; --tone-glow:rgba(127,168,216,.34); }
.cut--char-wolf { --tone:#c4564a; --tone-hi:#ffcdb4; --tone-glow:rgba(196,86,74,.32); }

.char__origin{ margin:0 0 12px; font-size:10px; letter-spacing:.42em; color:var(--tone); }
.char__name{ margin:0 0 10px; font-size:clamp(21px,min(4.2vw,5.4vh),42px); font-weight:600; letter-spacing:.12em; }
.char__role{ margin:0 0 14px; font-size:clamp(10px,min(1.45vw,1.95vh),14px); letter-spacing:.09em; color:var(--mist-2); line-height:1.85; text-wrap:balance; }
.char__page{
  margin:0 0 clamp(12px,2.2vh,20px); padding:clamp(9px,1.6vh,14px) 0;
  font-size:clamp(10px,min(1.45vw,1.95vh),14px); line-height:1.85; color:var(--mist);
  border-top:1px solid rgba(236,227,207,.12); border-bottom:1px solid rgba(236,227,207,.12);
}
.char__page span{ display:block; font-size:9px; letter-spacing:.36em; color:var(--gold); margin-bottom:6px; }

/* 台詞（複数行・順に灯る） */
.char__quotes{
  display:grid; gap:clamp(4px,.95vh,11px);
  padding-left:clamp(13px,1.5vw,20px); border-left:2px solid var(--tone);
}
.char__quotes p{
  margin:0; opacity:0; font-style:italic; color:var(--mist);
  font-size:clamp(9.5px,min(1.5vw,1.95vh),16px); line-height:1.72; letter-spacing:.04em; text-wrap:pretty;
}
.char__quotes p.is-last{
  margin-top:clamp(2px,.6vh,8px);
  font-size:clamp(13px,min(2.1vw,3vh),25px); line-height:1.8; letter-spacing:.07em;
  color:var(--tone-hi); text-shadow:0 0 34px var(--tone-glow);
}
.cut.is-live .char__quotes p{
  animation:cutIn 1.3s var(--ease) forwards;
  animation-delay:calc(3.4s + var(--i, 0) * .78s);
}

/* 上映のUI */
.cinema__ui{
  position:absolute; left:0; right:0; bottom:0; z-index:10;
  display:grid; justify-items:center; gap:14px;
  padding:0 var(--pad) clamp(22px,4vh,40px);
  pointer-events:none;
}
.cinema__bars{ display:flex; gap:6px; width:min(420px,70vw); pointer-events:none; }
.cinema__bars i{ position:relative; flex:1; height:2px; background:rgba(236,227,207,.16); overflow:hidden; }
.cinema__bars i::after{
  content:""; position:absolute; inset:0; transform-origin:0 50%; transform:scaleX(0);
  background:linear-gradient(90deg,var(--gold-lo),var(--gold-hi));
}
.cinema__bars i.is-done::after{ transform:scaleX(1); }
.cinema__bars i.is-now::after{ animation:barFill linear forwards; animation-duration:var(--dur,6s); }
@keyframes barFill{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }

.cinema__ctrl{ display:flex; align-items:center; gap:10px; pointer-events:auto; }
.cinema__btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:9px 20px; border:1px solid rgba(216,185,120,.35);
  font-size:10px; letter-spacing:.28em; text-indent:.28em; color:var(--gold-hi);
  transition:background .4s, border-color .4s;
}
.cinema__btn:hover{ background:rgba(216,185,120,.14); border-color:var(--gold); }
.cinema__btn--skip{ border-color:rgba(236,227,207,.18); color:var(--mist); }
.cinema__btn--skip:hover{ color:var(--gold-hi); }

/* 一時停止／再生のアイコン：2枚を差し替える */
.cinema__icon{ display:grid; place-items:center; width:12px; height:14px; text-indent:0; flex:none; }
.cinema__icon svg{ grid-area:1/1; width:100%; height:100%; fill:currentColor; }
.cinema__icon .ic-play{ display:none; }
.cinema.is-paused .cinema__icon .ic-pause{ display:none; }
.cinema.is-paused .cinema__icon .ic-play{ display:block; }

/* 停止中は動くものを全て止める（* は擬似要素に当たらないので個別に指定する） */
.cinema.is-paused,
.cinema.is-paused *,
.cinema.is-paused *::before,
.cinema.is-paused *::after{ animation-play-state:paused!important; }
.cinema.is-paused .cut.is-live{ filter:saturate(.85) brightness(.92); }

.cinema__hint{
  margin:0; font-size:9.5px; letter-spacing:.3em; color:var(--mist-2);
  transition:opacity .8s;
}
.cinema__hint.is-faded{ opacity:0; }

/* ============================ 全ページ ============================ */

.page{ display:none; position:relative; z-index:5; }
body.is-page .page{ display:block; animation:pageIn 1.6s var(--ease) both; }
html:not(.js) .page{ display:block; }
@keyframes pageIn{ from{ opacity:0; transform:translateY(30px); filter:blur(10px); } to{ opacity:1; transform:none; filter:none; } }

.psec{ max-width:var(--wrap); margin:0 auto; padding:clamp(50px,7vh,90px) var(--pad); }

.chapter{ font-family:var(--serif-en); font-size:11px; font-weight:600; letter-spacing:.52em; text-indent:.52em; color:var(--gold); margin:0 0 26px; }

/* 応募 */
.psec--apply{ display:grid; place-items:center; min-height:100svh; }
.finale__panel{
  position:relative; width:100%; max-width:820px;
  padding:clamp(34px,5vw,70px) clamp(24px,5vw,60px); text-align:center;
}
/* 上から降りる一条の光 */
.finale__panel::before{
  content:""; position:absolute; left:50%; top:0; width:1px;
  height:clamp(44px,7vh,84px); transform:translateX(-50%);
  background:linear-gradient(180deg, transparent, var(--gold));
}
.finale__body{ position:relative; }

.finale__h{
  margin:0 0 26px; font-size:clamp(28px,5.6vw,56px); font-weight:600;
  line-height:1.55; letter-spacing:.1em; color:var(--paper);
  text-shadow:0 0 60px rgba(216,185,120,.22);
}
.finale__call{
  margin:36px 0 38px; font-size:clamp(16px,2.8vw,26px); letter-spacing:.2em;
  color:var(--gold-hi); font-weight:600; text-shadow:0 0 44px rgba(216,185,120,.3);
}

.apply-btn{
  position:relative; display:inline-flex; align-items:center; gap:18px;
  padding:22px clamp(30px,5vw,58px);
  border:1px solid var(--gold); color:var(--gold-hi);
  background:rgba(216,185,120,.05);
  overflow:hidden; isolation:isolate;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), color .5s;
}
.apply-btn::before{
  content:""; position:absolute; inset:0; z-index:-1; transform:translateY(101%);
  background:linear-gradient(120deg,var(--gold-lo),var(--gold),var(--gold-hi));
  transition:transform .6s var(--ease);
}
.apply-btn:hover{
  transform:translateY(-3px); color:#191308;
  box-shadow:0 22px 60px rgba(216,185,120,.2);
}
.apply-btn:hover::before{ transform:translateY(0); }
.apply-btn__seal{
  display:grid; place-items:center; width:34px; height:34px; border-radius:50%; flex:none;
  background:var(--seal); color:#f3dfae; font-family:var(--serif-en); font-size:15px;
  box-shadow:inset 0 0 8px rgba(0,0,0,.5);
}
.apply-btn__label{ font-size:clamp(14px,2.2vw,18px); letter-spacing:.24em; font-weight:600; }
.apply-btn__arrow{ transition:transform .5s var(--ease); }
.apply-btn:hover .apply-btn__arrow{ transform:translateX(6px); }

.finale__facts{
  list-style:none; display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  margin:clamp(34px,5vw,52px) 0 0; padding:0;
  background:rgba(236,227,207,.1); border:1px solid rgba(236,227,207,.1);
}
.finale__facts li{
  background:var(--ink); padding:20px 14px; font-size:12px;
  letter-spacing:.06em; color:var(--mist); line-height:1.9;
}
.finale__facts span{ display:block; font-size:9px; letter-spacing:.34em; color:var(--gold); margin-bottom:8px; }

/* footer */
.foot{ padding:clamp(50px,8vh,90px) var(--pad) clamp(40px,6vh,70px); text-align:center; border-top:1px solid rgba(236,227,207,.08); }
.foot__mark{ margin:0 0 18px; font-family:var(--serif-en); font-size:clamp(22px,4vw,38px); letter-spacing:.42em; text-indent:.42em; color:var(--gold); font-weight:300; }
.foot__sub{ margin:0 0 34px; font-size:11px; letter-spacing:.26em; color:var(--mist-2); line-height:2.4; }
.foot__last{ margin:0 0 32px; font-size:clamp(12px,1.7vw,15px); line-height:2.4; letter-spacing:.14em; color:var(--mist); }
.foot__replay{ padding:11px 26px; border:1px solid rgba(236,227,207,.2); font-size:10px; letter-spacing:.3em; text-indent:.3em; color:var(--mist); transition:border-color .4s, color .4s; }
.foot__replay:hover{ border-color:var(--gold); color:var(--gold-hi); }


/* ============================ 06 書き換えの実演 ============================ */

.cut--codex{ padding:clamp(20px,3.4vh,52px) var(--pad) clamp(78px,12.5vh,118px); }

.codex{
  position:relative; display:grid; justify-items:center;
  width:min(660px,100%); text-align:center;
}

/* 背後に立ち上がる森と狼 */
.cut--codex-clock{ --codex-scene:#44536b; }
.cut--codex-wolf { --codex-scene:#57402f; }

.codex__scene{
  position:absolute; left:50%; bottom:-9%; z-index:0;
  width:min(1240px,148%); transform:translateX(-50%) scale(1.04);
  color:var(--codex-scene,#57402f); opacity:0; pointer-events:none;
  mask-image:linear-gradient(180deg, transparent 0%, #000 34%, #000 78%, transparent 100%);
  transition:opacity 2.4s var(--ease), transform 3.4s var(--ease);
}
.codex.is-apocrypha .codex__scene{ opacity:.85; transform:translateX(-50%) scale(1); }
.codex__scene svg{ width:100%; height:auto; }
.codex__scene .bg-eyes{ opacity:0; }
.codex.is-apocrypha .codex__scene .bg-eyes{ animation:codexEyes 5.2s var(--ease) 1.4s infinite; }
.codex.is-apocrypha .codex__scene .bg-hands{ animation:codexHands 6s var(--ease) 1s infinite; }
@keyframes codexHands{ 0%,88%{ opacity:.95 } 91%{ opacity:.35 } 94%{ opacity:.95 } 97%{ opacity:.4 } 100%{ opacity:.95 } }
@keyframes codexEyes{
  0%,42%{ opacity:0 } 48%,74%{ opacity:.85 } 80%,100%{ opacity:0 }
}

.codex__eyebrow,
.codex__state,
.codex__book,
.codex__foot{ position:relative; z-index:1; }
.codex.is-apocrypha .codex__stamp--apoc{ color:var(--gold-hi); }

.codex__eyebrow{
  margin:0 0 clamp(12px,2vh,20px); font-family:var(--serif-en);
  font-size:11px; font-weight:600; letter-spacing:.46em; text-indent:.46em; color:var(--gold);
}

/* 原典 → 欠落 → APOCRYPHA */
.codex__state{ display:grid; place-items:center; min-height:2.6em; margin:0 0 clamp(14px,2.4vh,26px); }
.codex__stamp{
  grid-area:1/1; font-family:var(--serif-en); font-size:12px; font-weight:600;
  letter-spacing:.52em; text-indent:.52em; white-space:nowrap;
  opacity:0; transition:opacity .55s var(--ease), transform .55s var(--ease), filter .55s var(--ease);
}
.codex__stamp--origin{ color:var(--gold); opacity:1; }
.codex__stamp--gone{
  display:grid; gap:5px; justify-items:center; color:var(--red);
  transform:scale(1.14); filter:blur(6px);
}
.codex__stamp--gone i{
  font-family:var(--serif-jp); font-style:normal; font-size:10px; letter-spacing:.46em; text-indent:.46em;
  color:rgba(196,86,74,.72);
}
.codex__stamp--apoc{ color:var(--gold-hi); text-shadow:0 0 34px rgba(216,185,120,.5); transform:scale(.94); }

.codex.is-inking .codex__stamp--origin{ opacity:0; transform:scale(.9); filter:blur(7px); }
.codex.is-inking .codex__stamp--gone{ opacity:1; transform:none; filter:none; animation:codexFlicker 2.1s steps(1) infinite; }
.codex.is-apocrypha .codex__stamp--gone{ opacity:0; transform:scale(1.1); filter:blur(6px); animation:none; }
.codex.is-apocrypha .codex__stamp--apoc{ opacity:1; transform:none; }
@keyframes codexFlicker{
  0%,5%{ opacity:1; transform:none }
  6%{ opacity:.08; transform:translateX(-5px) }
  7%{ opacity:1; transform:translateX(4px) }
  8%,21%{ opacity:1; transform:none }
  22%{ opacity:.3; transform:translateX(6px) }
  24%,43%{ opacity:1; transform:none }
  44%{ opacity:.06; transform:translateX(-7px) }
  45%{ opacity:.9; transform:translateX(3px) }
  47%,64%{ opacity:1; transform:none }
  65%{ opacity:.4; transform:translateX(-4px) }
  67%,85%{ opacity:1; transform:none }
  86%{ opacity:.1; transform:translateX(5px) }
  88%,100%{ opacity:1; transform:none }
}

/* 古書の頁 */
.codex__book{
  width:min(608px,100%);
  filter:drop-shadow(0 26px 62px rgba(0,0,0,.72));
}
/* ゆれは頁の側へ。外側の .codex__book はカットの段送り（.s2）を使っているので上書きしない */
.codex.is-inking .codex__leaf,
.codex.is-bleeding .codex__leaf,
.codex.is-writing .codex__leaf{ animation:codexShudder .34s steps(2) infinite; }
.codex.is-apocrypha .codex__leaf{ animation:codexShudder .46s steps(2) 3; }
.codex.is-settled .codex__leaf{ animation:codexTwitch 3.4s steps(1) infinite; }
@keyframes codexShudder{
  0%{ transform:translate3d(-6px,2px,0) rotate(-.4deg) }
  25%{ transform:translate3d(5px,-3px,0) rotate(.32deg) }
  50%{ transform:translate3d(-3px,-1px,0) rotate(-.18deg) }
  75%{ transform:translate3d(4px,2px,0) rotate(.24deg) }
  100%{ transform:none }
}
@keyframes codexTwitch{
  0%,88%{ transform:none }
  89%{ transform:translate3d(-5px,2px,0) rotate(-.3deg) }
  91%{ transform:translate3d(4px,-2px,0) rotate(.22deg) }
  93%{ transform:translate3d(-2px,0,0) }
  95%,100%{ transform:none }
}

/* 走査線のノイズ */
.codex__noise{
  position:absolute; inset:-6%; z-index:3; pointer-events:none; opacity:0;
  background:
    repeating-linear-gradient(0deg, rgba(12,9,4,.42) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(196,86,74,.3) 0 1px, transparent 1px 2px);
  mix-blend-mode:multiply;
}
.codex.is-inking .codex__noise{ animation:codexScan .2s steps(3) infinite; }
.codex.is-bleeding .codex__noise,
.codex.is-writing .codex__noise{ animation:codexScan .13s steps(3) infinite; }
.codex.is-settled .codex__noise{ animation:codexScanCalm 3.6s steps(4) infinite; }
@keyframes codexScan{
  0%{ opacity:.62; transform:translateY(0) }
  33%{ opacity:.18; transform:translateY(-9px) }
  66%{ opacity:.72; transform:translateY(7px) }
  100%{ opacity:.34; transform:translateY(-3px) }
}
@keyframes codexScanCalm{
  0%,84%{ opacity:0 }
  86%{ opacity:.5; transform:translateY(-7px) }
  89%{ opacity:.1; transform:translateY(8px) }
  92%{ opacity:.58; transform:translateY(-3px) }
  95%,100%{ opacity:0 }
}

.codex__leaf{
  position:relative; overflow:hidden; text-align:left;
  padding:clamp(30px,5.6vw,58px) clamp(24px,4.6vw,50px);
  background:
    repeating-linear-gradient(96deg, rgba(120,95,55,.05) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(2deg, rgba(255,255,255,.14) 0 1px, transparent 1px 6px),
    radial-gradient(120% 90% at 50% 0%, #f6efdd, #e7ddc6 52%, #d5c8aa 100%);
  box-shadow:inset 0 0 90px rgba(120,95,55,.24);
}
.codex__leaf::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 80% at 50% 40%, transparent 40%, rgba(20,15,8,.5));
  opacity:0; transition:opacity 1.2s var(--ease);
}
.codex.is-inking .codex__leaf::after{ opacity:.34; }
.codex.is-apocrypha .codex__leaf::after{ opacity:.2; }

.codex__chapter{
  position:relative; z-index:2; margin:0 0 clamp(16px,2.6vw,26px);
  font-family:var(--serif-en); font-size:10px; font-weight:600;
  letter-spacing:.5em; text-indent:.5em; color:#8a6d2e;
}
.codex__line{
  position:relative; z-index:2; margin:0;
  font-size:clamp(16px,2.6vw,26px); line-height:2.05; letter-spacing:.1em; color:#241f18;
}
.codex__rest{ transition:color .8s var(--ease); }
.codex.is-writing .codex__line{ animation:codexLineGlitch .82s steps(1) 3; }
@keyframes codexLineGlitch{
  0%,100%{ transform:none; text-shadow:none }
  9%{ transform:translate3d(-9px,1px,0); text-shadow:7px 0 rgba(196,86,74,.55), -7px 0 rgba(90,130,190,.5) }
  17%{ transform:translate3d(7px,-2px,0); text-shadow:none }
  26%{ transform:translate3d(-4px,0,0) skewX(1.2deg) }
  35%{ transform:translate3d(6px,2px,0); text-shadow:-5px 0 rgba(196,86,74,.45), 5px 0 rgba(90,130,190,.4) }
  46%{ transform:none; text-shadow:none }
  58%{ transform:translate3d(-3px,-1px,0) skewX(-.9deg); text-shadow:3px 0 rgba(90,130,190,.45) }
  69%{ transform:translate3d(2px,1px,0) }
  80%{ transform:none; text-shadow:none }
}
.codex.is-apocrypha .codex__rest{ color:#1b1710; }

/* 書き換えられる名前 */
.codex__slot{
  position:relative; display:inline-block; vertical-align:baseline;
  margin:0; padding:0; border:0; background:none;
  font:inherit; color:inherit; letter-spacing:inherit; text-align:left;
  transition:width .86s cubic-bezier(.4,0,.25,1);
}
.codex__word{
  cursor:pointer;
  pointer-events:auto;   /* .cut 側で切ってあるのを、ここだけ戻す */
  -webkit-tap-highlight-color:transparent;
}
.codex__old,.codex__new{ display:block; white-space:nowrap; }
.codex__new{ position:absolute; left:0; top:0; opacity:0; color:#17130c; }
.codex__ch{ display:inline-block; white-space:pre; }
.codex__mark{
  position:absolute; left:0; right:0; bottom:0; height:2px; margin-bottom:-.1em;
  background:linear-gradient(90deg,rgba(138,109,46,0),#8a6d2e,#c9a24a,rgba(138,109,46,0));
  animation:codexBeckon 2.8s var(--ease) infinite;
}
@keyframes codexBeckon{ 0%,100%{ opacity:.28 } 50%{ opacity:.85 } }
.codex__word:hover .codex__mark,
.codex__word:focus-visible .codex__mark{ animation:none; opacity:1; }
.codex__word:focus-visible{ outline:2px solid #8a6d2e; outline-offset:6px; }
.codex.is-inking .codex__mark{ opacity:0; animation:none; }

.codex__ink{
  position:absolute; inset:-.30em -.34em;
  background:#141009;
  clip-path:inset(0 100% 0 0); opacity:0; filter:url(#f-ink);
}
.codex.is-inking .codex__word .codex__ink{ opacity:1; animation:codexInk .74s cubic-bezier(.55,.06,.3,1) forwards; }
.codex.is-bleeding .codex__swap .codex__ink{ opacity:1; animation:codexInk .66s cubic-bezier(.55,.06,.3,1) .12s both; }
@keyframes codexInk{ from{ clip-path:inset(0 100% 0 0) } to{ clip-path:inset(0 -6% 0 -6%) } }

.codex.is-writing .codex__old{ opacity:0; }
.codex.is-writing .codex__word .codex__ink{ animation:codexDry .86s cubic-bezier(.4,0,.25,1) forwards; }
.codex.is-writing .codex__swap .codex__ink{ animation:codexDry .86s cubic-bezier(.4,0,.25,1) .22s forwards; }
@keyframes codexDry{ from{ clip-path:inset(0 -6% 0 -6%) } to{ clip-path:inset(0 -6% 0 108%); opacity:0 } }
.codex__swap{ --codex-lag:.26s; }
.codex.is-writing .codex__new{ opacity:1; }
.codex.is-writing .codex__ch{
  animation:codexScatter 1.02s cubic-bezier(.2,.9,.25,1) calc(var(--codex-lag, 0s) + var(--n) * 46ms) both;
}
@keyframes codexScatter{
  0%{
    opacity:0; filter:blur(10px);
    transform:translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(2) skewX(22deg);
    text-shadow:7px 0 rgba(196,86,74,.95), -7px 0 rgba(90,130,190,.95);
  }
  16%{ opacity:1 }
  28%{
    filter:blur(5px);
    transform:translate(calc(var(--dx) * .48), calc(var(--dy) * -.42)) rotate(calc(var(--rot) * -.6)) scale(1.34) skewX(-16deg);
    text-shadow:6px 0 rgba(196,86,74,.85), -6px 0 rgba(90,130,190,.85);
  }
  38%{ opacity:.3; transform:translate(-11px,5px) skewX(12deg) scale(1.08) }
  48%{
    opacity:1; filter:blur(0);
    transform:translate(9px,-6px) skewX(-10deg);
    text-shadow:5px 0 rgba(196,86,74,.75), -5px 0 rgba(90,130,190,.75);
  }
  57%{ opacity:.32; transform:translate(-7px,3px) skewX(8deg) }
  66%{ opacity:1; transform:translate(6px,-3px); text-shadow:3px 0 rgba(196,86,74,.6), -3px 0 rgba(90,130,190,.6) }
  74%{ opacity:.5; transform:translate(-4px,2px) skewX(-6deg) }
  82%{ opacity:1; transform:translate(3px,-1px); text-shadow:2px 0 rgba(196,86,74,.45), -2px 0 rgba(90,130,190,.45) }
  90%{ opacity:.7; transform:translate(-2px,1px) }
  96%{ opacity:1; transform:translate(1px,0) }
  100%{ opacity:1; transform:none; filter:none; text-shadow:none }
}

/* 書き換えられた字は、そのあとも時々ぶれる */
.codex.is-settled .codex__ch{
  animation:codexJitter 2.4s steps(1) calc(var(--n) * 160ms) infinite;
}
@keyframes codexJitter{
  0%,74%{ transform:none; text-shadow:none; opacity:1 }
  75%{ transform:translate(-5px,2px) skewX(10deg); text-shadow:5px 0 rgba(196,86,74,.8), -5px 0 rgba(90,130,190,.75); opacity:.85 }
  77%{ transform:translate(6px,-3px) skewX(-8deg); opacity:.25 }
  79%{ transform:translate(-3px,1px); text-shadow:none; opacity:1 }
  81%{ transform:translate(4px,2px) skewX(6deg); text-shadow:-4px 0 rgba(196,86,74,.65), 4px 0 rgba(90,130,190,.6); opacity:.55 }
  83%{ transform:translate(-2px,-1px); opacity:1 }
  86%{ transform:translate(3px,1px) skewX(-4deg); opacity:.7; text-shadow:2px 0 rgba(90,130,190,.5) }
  89%{ transform:translate(-1px,0); opacity:1 }
  92%{ transform:translate(2px,-1px); opacity:.8 }
  95%,100%{ transform:none; text-shadow:none; opacity:1 }
}

/* にじむインク */
.codex__blots{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.codex__blots i{
  position:absolute; left:var(--x); top:var(--y); width:var(--w); aspect-ratio:1;
  margin-left:calc(var(--w) / -2); margin-top:calc(var(--w) / -2);
  background:radial-gradient(circle at 40% 36%, #14110b, #100d07 64%, rgba(16,13,7,0) 70%);
  border-radius:47% 53% 62% 38% / 55% 42% 58% 45%;
  filter:url(#f-ink);
  opacity:0; transform:scale(.06) rotate(var(--r));
}
.codex.is-bleeding .codex__blots i{ animation:codexBlot 1.6s cubic-bezier(.16,.9,.3,1) var(--d) forwards; }
@keyframes codexBlot{
  0%{ opacity:0; transform:scale(.06) rotate(var(--r)) }
  24%{ opacity:.86 }
  100%{ opacity:.78; transform:scale(1) rotate(var(--r)) }
}
.codex.is-apocrypha .codex__blots i{ animation:none; opacity:.5; transform:scale(1) rotate(var(--r)); transition:opacity 1.6s var(--ease); }

.codex__foot{
  display:grid; justify-items:center; align-content:start; width:100%;
  grid-template-rows:auto auto; gap:.9em;
  min-height:6.2em; margin:clamp(14px,2.4vh,24px) 0 0;
}
.codex__hint{
  grid-area:1/1; margin:0; font-size:11px; letter-spacing:.28em;
  color:var(--mist-2); transition:opacity .6s var(--ease);
}
.codex.is-inking .codex__hint{ opacity:0; }
.codex__after{
  grid-area:1/1; margin:0;
  font-size:clamp(12px,1.7vw,15px); line-height:2; letter-spacing:.14em;
  color:var(--mist); opacity:0; transform:translateY(12px);
  transition:opacity 1s var(--ease) .35s, transform 1s var(--ease) .35s;
}
.codex.is-apocrypha .codex__after{ opacity:1; transform:none; }
.codex__go{
  grid-area:2/1; margin:0;
  font-size:11px; letter-spacing:.28em; color:var(--mist-2);
  opacity:0; transition:opacity .9s var(--ease);
}
.codex.is-settled .codex__go{ opacity:1; animation:codexBeckon 3.2s var(--ease) 1s infinite; }

/* ============================ レスポンシブ ============================ */

@media (max-width:900px){
  .finale__facts{ grid-template-columns:1fr; }

  .char{ grid-template-columns:1fr; gap:clamp(14px,3vh,28px); justify-items:center; text-align:center; }
  .cut--char{ padding-bottom:clamp(96px,15vh,132px); }
  .char__sil svg{ height:min(15vh,132px); }
  .char__quotes{ padding:13px 0 0; border-left:0; border-top:2px solid var(--tone); gap:clamp(3px,.7vh,9px); }
  .char__quotes p{ line-height:1.6; }
  .char__page{ text-align:left; }

  .codex__book{ width:100%; }
  .codex__line{ font-size:clamp(15px,4.6vw,22px); line-height:1.95; }
  .swap{ grid-template-columns:1fr; gap:10px; justify-items:center; }
  .swap__from,.swap__to{ justify-self:center; text-align:center; }
  .swap__arrow{ width:56px; }
  .leaf__text{ min-height:min(480px,62svh); }
}

/* 幅は狭いが高さがない窓（横長）では、人物カットだけ 2列のまま使う */
@media (max-width:900px) and (max-height:820px) and (orientation:landscape){
  .char{ grid-template-columns:minmax(130px,30%) 1fr; gap:clamp(16px,3vw,34px); justify-items:start; text-align:left; }
  .char__sil{ justify-self:center; }
  .char__sil svg{ height:min(40vh,300px); }
  .char__quotes{ padding:0 0 0 14px; border-left:2px solid var(--tone); border-top:0; }
  .char__quotes p{ line-height:1.7; }
}

@media (max-width:560px){
  .apply-btn{ width:100%; justify-content:center; padding:20px 14px; gap:12px; }
  .apply-btn__label{ letter-spacing:.14em; white-space:nowrap; }
  .apply-btn__seal{ width:28px; height:28px; font-size:13px; }
  .cut{ padding:clamp(34px,6vh,70px) var(--pad) clamp(112px,17vh,152px); }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; }
  .bigtitle .ch{ opacity:1; transform:none; filter:none; }
  .s1,.s2,.s3,.s4,.s5{ opacity:1; }
  .char__quotes p{ opacity:1; }
  .char__sil svg{ opacity:1; }
  #dust,.fx-grain,.fx-scan{ display:none; }
  .codex__mark,.codex__ink,.codex__blots{ display:none; }
  .codex__old{ display:none; }
  .codex__new{ opacity:1; }
  .codex__ch{ animation:none!important; }
  .codex__noise{ display:none; }
  .codex__scene{ opacity:.6; }
  .codex__hint{ opacity:0; }
  .codex__after,.codex__go{ opacity:1; }
  .codex__stamp--origin,.codex__stamp--gone{ opacity:0; }
  .codex__stamp--apoc{ opacity:1; transform:none; }
}

/* シルエットのリムライト（輪郭に沿って光が当たっている側） */
.sil-rim{ opacity:.32; }