@font-face{font-family:'SG Barlow';src:url('./barlow-800.woff2') format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:'SG Barlow';src:url('./barlow-600.woff2') format('woff2');font-weight:600;font-display:swap}
/* --sg-open = 扉が開く時間（重く、ゆっくり）。--sg-t = 扉の厚み。--sg-idle は JS 側（splash.js）の「操作がないとき自動で開くまで」 */
:root{--sg-open:4800ms;--sg-reduced:500ms;--sg-t:clamp(44px,7vw,120px);--sg-steel-top:#a2a8af;--sg-steel-bottom:#25282c}
/* JS が動かなかったときの保険：幕は 4 秒で必ず消える（扉が出てからは JS が管理する） */
html.sg-splash-pending{overflow:hidden;animation:sg-unlock 0s 4s forwards}
html.sg-splash-pending::before{content:"";position:fixed;inset:0;z-index:2147483645;background:#15171a;animation:sg-release 0s 4s forwards}
html.sg-splash-running::before{display:none}
html.sg-splash-running{animation:none}
/* 注意：扉（3D）には opacity を使わない。opacity があると立体が平らにつぶれ、厚みの面が消える */
@keyframes sg-unlock{to{overflow:visible}}
@keyframes sg-release{to{visibility:hidden;pointer-events:none}}

.sg-splash,.sg-splash *{box-sizing:border-box}
.sg-splash{position:fixed;inset:0;z-index:2147483646;overflow:hidden;perspective:1500px;perspective-origin:50% 50%;isolation:isolate;cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent;background:#15171a}
.sg-splash.sg-open{background:transparent;pointer-events:none;cursor:default}
/* 扉が開くとき、隙間からこぼれる光 */
.sg-splash::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 28% 80% at 50% 50%,#fff 0%,#f4f6f8aa 30%,transparent 100%);opacity:0;pointer-events:none}
.sg-splash.sg-open::before{animation:sg-light var(--sg-open) linear both}
/* 重い扉が動き出すときの、わずかな揺れ */
.sg-splash.sg-open .sg-stage{animation:sg-rumble 1500ms linear both}
.sg-stage{position:absolute;inset:0;transform-style:preserve-3d}

/* ---------- 扉（厚みのある板：表・裏・内側の側面） ---------- */
.sg-door{position:absolute;top:0;bottom:0;width:50%;transform-style:preserve-3d;will-change:transform;transform:translateZ(calc(var(--sg-t) * -.5))}
.sg-door-left{left:0;transform-origin:0 50%}
.sg-door-right{right:0;transform-origin:100% 50%}
.sg-front,.sg-rear,.sg-edge{position:absolute;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.sg-front{inset:0;overflow:hidden;transform:translateZ(calc(var(--sg-t) / 2));
  background:linear-gradient(110deg,#050607,#3a3f45 1px,#c9ced3 3px,#3d4248 6px,transparent 10px),linear-gradient(180deg,var(--sg-steel-top) 0%,#868d95 16%,#646a72 40%,#42474d 66%,#2b2e33 88%,var(--sg-steel-bottom) 100%);
  box-shadow:inset 0 0 0 1px #ffffff2e,inset 0 2px 2px #f4f6f866,inset 0 -3px 5px #000c}
.sg-door-right .sg-front{background:linear-gradient(250deg,#050607,#3a3f45 1px,#c9ced3 3px,#3d4248 6px,transparent 10px),linear-gradient(180deg,var(--sg-steel-top) 0%,#868d95 16%,#646a72 40%,#42474d 66%,#2b2e33 88%,var(--sg-steel-bottom) 100%)}
.sg-front::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,#fff0 0px,#ffffff14 .5px,#05080c33 1px,transparent 1.5px,transparent 3px),linear-gradient(101deg,#0000005c 0%,#ffffff00 14%,#ffffff38 30%,#ffffff00 46%,#ffffff1f 62%,#0000002e 82%,#00000066 100%),linear-gradient(180deg,#ffffff2e 0%,#ffffff00 22%,#0000 55%,#00000047 100%),radial-gradient(ellipse at 45% 30%,transparent 20%,#05080cb3 100%);pointer-events:none}
.sg-front::after{content:"";position:absolute;inset:clamp(17px,3vw,52px);border:1px solid #1d22284d;box-shadow:0 1px 0 #e6edf54f,inset 0 1px 2px #080c1466,inset 1px 0 1px #fff2;pointer-events:none}
.sg-door-left .sg-front::after{right:20px}.sg-door-right .sg-front::after{left:20px}
.sg-grain{position:absolute;inset:0;width:100%;height:100%;opacity:.55;mix-blend-mode:overlay;pointer-events:none}
.sg-markings{position:absolute;inset:0;background:linear-gradient(178deg,transparent 22%,#e5ebf218 22.05%,transparent 22.12%),linear-gradient(1deg,transparent 76%,#10151a20 76.04%,#f5f7f81c 76.12%,transparent 76.2%);opacity:.6}
/* 裏側（開いたときに見える、扉の内側の面）：暗い鋼・補強の枠 */
.sg-rear{inset:0;transform:translateZ(calc(var(--sg-t) / -2)) rotateY(180deg);
  background:linear-gradient(180deg,#3a3e44 0%,#23262a 50%,#121416 100%);
  box-shadow:inset 0 0 0 1px #ffffff1f,inset 0 0 40px #000}
.sg-rear::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,#ffffff0a 0 1px,transparent 1px 3px),linear-gradient(90deg,#0008,transparent 30%,transparent 70%,#0008);pointer-events:none}
.sg-rear::after{content:"";position:absolute;inset:clamp(20px,4vw,64px);border:2px solid #ffffff14;box-shadow:inset 0 0 0 6px #0006,0 0 0 1px #000;pointer-events:none}
/* 内側の側面（扉の厚み）：面取りのハイライト＋縦のブラシ目 */
.sg-edge{top:0;bottom:0;width:var(--sg-t);
  background:linear-gradient(90deg,#f0f3f6 0,#b4bbc2 3%,#7d848c 10%,#9aa1a9 30%,#5a6068 55%,#868d95 80%,#c3c9cf 94%,#f0f3f6 100%);
  box-shadow:inset 0 0 24px #0008}
.sg-edge::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,#ffffff00 0 2px,#0000000a 2px 3px,#ffffff08 3px 5px);}
.sg-edge::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#00000066,transparent 14%,transparent 86%,#00000066)}
.sg-door-left .sg-edge{right:calc(var(--sg-t) / -2);transform:rotateY(90deg)}
.sg-door-right .sg-edge{left:calc(var(--sg-t) / -2);transform:rotateY(-90deg)}

/* ---------- 文字（扉の面に浮き出す） ---------- */
.sg-face{position:absolute;top:0;bottom:0;width:200%;container-type:inline-size;pointer-events:none}
.sg-door-left .sg-face{left:0}.sg-door-right .sg-face{right:0}
.sg-letter{position:absolute;margin:0;font-family:'SG Barlow','Arial Narrow',sans-serif;font-weight:800;line-height:.94;white-space:nowrap;color:#d5dade;background:linear-gradient(180deg,#ffffff 0%,#eef1f4 12%,#c7cdd3 30%,#6f7780 49%,#3f454c 52%,#9aa3ac 66%,#dfe4e8 86%,#f7f9fa 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 -1px 0 #ffffffd9) drop-shadow(0 1px 0 #8a929a) drop-shadow(0 3px 0 #1c2025) drop-shadow(0 6px 2px #000000b3) drop-shadow(0 14px 14px #00000080)}
.sg-title{left:50%;top:46%;transform:translate(-50%,-50%);font-size:clamp(80px,17cqw,310px);letter-spacing:-.025em}
.sg-by{right:9%;bottom:16%;font-size:clamp(16px,2.3cqw,44px);letter-spacing:.055em}
.sg-hint{left:50%;bottom:10.5%;transform:translateX(-50%);font-weight:600;font-size:clamp(11px,1.5cqw,22px);letter-spacing:.42em;padding-left:.42em;opacity:0}
.sg-letter::after{content:attr(data-label);position:absolute;inset:0;background:linear-gradient(112deg,transparent 30%,#fff0 43%,#fff 49%,#fff0 55%,transparent 70%);background-size:300% 100%;background-position:100% 0;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;opacity:0}
.sg-hint::after{display:none}
.sg-bolt{position:absolute;width:clamp(6px,.65vw,12px);aspect-ratio:1;border-radius:50%;background:linear-gradient(145deg,#f4f6f8,#828b96 42%,#343b43 62%,#aab2bb);box-shadow:0 1px 1px #080c13,inset 0 0 0 1px #2d343db3,0 -1px 0 #f6f8fa80}
.sg-bolt::after{content:"";position:absolute;left:22%;right:22%;top:45%;height:1px;background:#242a32;transform:rotate(-32deg);box-shadow:0 1px 0 #f5f6f84d}
.sg-seam{position:absolute;top:0;bottom:0;left:50%;width:1px;background:#e3eaf0;box-shadow:0 0 6px 1px #eef3fa66;pointer-events:none;translate:-50% 0}

/* ---------- 待っているあいだ：光が一度だけ文字を走り、「タップして開く」が静かに呼吸する ---------- */
.sg-splash.sg-ready:not(.sg-open) .sg-letter:not(.sg-hint)::after{animation:sg-glint 1500ms 200ms cubic-bezier(.4,0,.2,1) both}
.sg-splash.sg-ready:not(.sg-open) .sg-hint{animation:sg-hint 2600ms 1100ms ease-in-out infinite both}
.sg-splash.sg-open .sg-hint{animation:sg-hint-out 400ms ease-out both}

/* ---------- 開く：出だしは止まっているように重く、中ほどでゆっくり加速し、最後にまた重く止まる ---------- */
.sg-splash.sg-open .sg-door-left{animation:sg-left var(--sg-open) linear both}
.sg-splash.sg-open .sg-door-right{animation:sg-right var(--sg-open) linear both}
.sg-splash.sg-open .sg-seam{animation:sg-seam var(--sg-open) linear both}
@keyframes sg-left{
  0%{transform:translateZ(calc(var(--sg-t) * -.5)) rotateY(0);animation-timing-function:cubic-bezier(.3,0,.6,1)}
  7%{transform:translateZ(calc(var(--sg-t) * -.5)) rotateY(.7deg);animation-timing-function:cubic-bezier(.42,0,.6,1)}
  90%{transform:translateX(0) translateZ(calc(var(--sg-t) * -.5)) rotateY(-76deg);animation-timing-function:cubic-bezier(.5,0,.8,.6)}
  100%{transform:translateX(-22vw) translateZ(calc(var(--sg-t) * -.5)) rotateY(-84deg)}}
@keyframes sg-right{
  0%{transform:translateZ(calc(var(--sg-t) * -.5)) rotateY(0);animation-timing-function:cubic-bezier(.3,0,.6,1)}
  7%{transform:translateZ(calc(var(--sg-t) * -.5)) rotateY(-.7deg);animation-timing-function:cubic-bezier(.42,0,.6,1)}
  90%{transform:translateX(0) translateZ(calc(var(--sg-t) * -.5)) rotateY(76deg);animation-timing-function:cubic-bezier(.5,0,.8,.6)}
  100%{transform:translateX(22vw) translateZ(calc(var(--sg-t) * -.5)) rotateY(84deg)}}
@keyframes sg-seam{0%,6%{opacity:.6}20%{opacity:1}45%,100%{opacity:0}}
@keyframes sg-light{0%,6%{opacity:0}34%{opacity:.34}86%,100%{opacity:0}}
@keyframes sg-rumble{0%,100%{transform:none}6%{transform:translate3d(1.5px,-1px,0)}12%{transform:translate3d(-1.5px,1px,0)}18%{transform:translate3d(1px,1px,0)}26%{transform:translate3d(-1px,-1px,0)}38%{transform:translate3d(.6px,.4px,0)}55%{transform:translate3d(-.4px,.3px,0)}75%{transform:none}}
@keyframes sg-glint{0%{opacity:0;background-position:100% 0}8%{opacity:.85}70%{opacity:.85;background-position:0 0}100%{opacity:0;background-position:0 0}}
@keyframes sg-hint{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes sg-hint-out{to{opacity:0}}
@keyframes sg-fade{to{opacity:0}}
@media(prefers-reduced-motion:reduce){
  .sg-splash.sg-open{animation:sg-fade var(--sg-reduced) linear both;background:#15171a}
  .sg-splash.sg-open .sg-door,.sg-splash.sg-open .sg-seam,.sg-splash.sg-open .sg-stage,.sg-splash.sg-open::before{animation:none}
  .sg-splash.sg-ready .sg-letter::after{display:none}
  .sg-hint{animation:none!important;opacity:.8}
  .sg-door{will-change:auto}
}
@media print{html.sg-splash-pending{overflow:visible}html.sg-splash-pending::before,.sg-splash{display:none}}