/* ============================================================
   ソクウリ v3 — ブランド・イントロ（全画面スプラッシュ）
   全画面ロゴ → 持ち上がって現在のヒーローを露出。
   クリック/キーでスキップ可・reduced-motion対応。
   ============================================================ */
.splash{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;overflow:hidden;
  background:
    radial-gradient(120% 90% at 84% -6%, rgba(34,211,207,.42), transparent 54%),
    radial-gradient(90% 80% at 10% 6%, rgba(124,92,255,.40), transparent 56%),
    radial-gradient(120% 100% at 50% 120%, rgba(14,165,233,.30), transparent 60%),
    linear-gradient(158deg,#234399 0%,#1d3677 44%,#141f48 100%);
  cursor:pointer;will-change:transform,opacity;}
.splash .dots{position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.16) 1px, transparent 1.4px);background-size:30px 30px;
  -webkit-mask-image:radial-gradient(120% 100% at 50% 40%, #000 30%, transparent 76%);
          mask-image:radial-gradient(120% 100% at 50% 40%, #000 30%, transparent 76%);}
.splash .sorb{position:absolute;border-radius:50%;filter:blur(50px);mix-blend-mode:screen;opacity:.6;}
.splash .sorb.a{width:520px;height:520px;left:-120px;top:-140px;background:radial-gradient(circle,#3a64e8,transparent 66%);animation:sdriftA 6s ease-in-out infinite;}
.splash .sorb.b{width:460px;height:460px;right:-120px;bottom:-120px;background:radial-gradient(circle,#22d3cf,transparent 66%);animation:sdriftB 7s ease-in-out infinite;}
@keyframes sdriftA{0%,100%{transform:translate(0,0)}50%{transform:translate(40px,30px)}}
@keyframes sdriftB{0%,100%{transform:translate(0,0)}50%{transform:translate(-36px,-28px)}}

.splash-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;}

/* カメラタイル（シャッター演出） */
.splash-mark{position:relative;width:96px;height:96px;border-radius:26px;display:grid;place-items:center;
  background:linear-gradient(150deg,#2f5bff,#1f54de 60%,#173bb0);
  box-shadow:0 24px 50px -16px rgba(31,84,222,.7), 0 0 0 1px rgba(255,255,255,.16) inset;
  opacity:0;transform:translateY(16px) scale(.7) rotate(-8deg);
  animation:markIn .8s .15s cubic-bezier(.2,.8,.25,1) forwards;}
.splash-mark .ic{width:50px;height:50px;color:#fff;stroke-width:1.6;}
.splash-mark .flash{position:absolute;inset:-4px;border-radius:30px;border:3px solid #fff;opacity:0;
  animation:shutter .5s 1.05s ease-out;}
@keyframes markIn{to{opacity:1;transform:none;}}
@keyframes shutter{0%{opacity:.9;transform:scale(.8)}100%{opacity:0;transform:scale(1.5)}}

/* ワードマーク（文字が立ち上がる） */
.splash-word{display:flex;gap:.02em;margin-top:26px;}
.splash-word span{display:inline-block;font-size:clamp(44px,10vw,84px);font-weight:700;color:#fff;letter-spacing:.02em;line-height:1;
  opacity:0;transform:translateY(28px) rotate(6deg);
  text-shadow:0 8px 28px rgba(8,14,40,.5);
  animation:letterUp .7s cubic-bezier(.2,.8,.25,1) forwards;}
.splash-word span:nth-child(1){animation-delay:.5s}
.splash-word span:nth-child(2){animation-delay:.62s}
.splash-word span:nth-child(3){animation-delay:.74s}
.splash-word span:nth-child(4){animation-delay:.86s}
@keyframes letterUp{to{opacity:1;transform:none;}}

.splash-spark{position:absolute;top:96px;right:calc(50% - 150px);width:30px;height:30px;color:#7df0e8;opacity:0;
  animation:sparkPop .7s 1.0s cubic-bezier(.2,.8,.25,1) forwards;}
.splash-spark svg{width:100%;height:100%;fill:currentColor;}
@keyframes sparkPop{0%{opacity:0;transform:scale(.3) rotate(-30deg)}60%{opacity:1;transform:scale(1.15) rotate(8deg)}100%{opacity:.95;transform:scale(1) rotate(0)}}

/* 波の下線（描画） */
.splash-wave{margin-top:18px;width:230px;height:14px;overflow:visible;}
.splash-wave path{fill:none;stroke:url(#splashWave);stroke-width:3;stroke-linecap:round;
  stroke-dasharray:300;stroke-dashoffset:300;animation:draw 1s 1.0s cubic-bezier(.4,0,.2,1) forwards;}
@keyframes draw{to{stroke-dashoffset:0;}}

.splash-tag{margin-top:20px;font-size:clamp(13px,1.6vw,15px);font-weight:600;letter-spacing:.18em;color:#cfe0ff;
  opacity:0;animation:tagIn .8s 1.35s ease forwards;}
@keyframes tagIn{to{opacity:1;}}

.splash-skip{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);font-size:12px;color:rgba(255,255,255,.6);
  letter-spacing:.06em;opacity:0;animation:tagIn .8s 1.8s ease forwards;}

/* 退場：持ち上げてヒーローを露出 */
.splash.lift{animation:lift 1s cubic-bezier(.7,0,.3,1) forwards;}
@keyframes lift{0%{opacity:1;transform:translateY(0) scale(1);clip-path:inset(0 0 0 0)}
  100%{opacity:0;transform:translateY(-8%) scale(1.04);clip-path:inset(0 0 100% 0)}}
.splash.gone{display:none;}

/* スクロールロック（スプラッシュ中） */
html.splashing,html.splashing body{overflow:hidden;}

@media (prefers-reduced-motion:reduce){
  .splash .sorb,.splash-mark .flash{animation:none;}
  .splash-mark,.splash-word span,.splash-spark,.splash-wave path,.splash-tag,.splash-skip{animation:none;opacity:1;transform:none;stroke-dashoffset:0;}
  .splash.lift{animation:fadeOut .5s ease forwards;}
  @keyframes fadeOut{to{opacity:0;}}
}