/* Jubilee Project — Opening Animation */
#jp-opening{--soft:cubic-bezier(.22,.61,.24,1); --sub:#5e3b39;
  --sx:0%;--sy:0%;--ss:1;--syA:0%;--sxB:0%;--syB:0%;--ssB:1}

#jp-opening{
  position:fixed; inset:0; z-index:2000; overflow:hidden;
  display:grid; place-items:center; grid-template-areas:"stack";
  background:#0f1120;
  transition:opacity 1.35s var(--soft), visibility 1.35s, background-color .9s var(--soft);
}
#jp-opening.done{opacity:0; visibility:hidden; pointer-events:none}
#jp-opening.preload *{animation-play-state:paused!important}

/* 完成したロゴをTOPのロゴ位置へ受け渡して、夜明けからサイトへ接続する */
#jp-opening .comp{
  transform-origin:center;
  transition:transform .9s cubic-bezier(.33,1,.68,1), filter .9s var(--soft);
}
#jp-opening .dawn,
#jp-opening .scene,
#jp-opening .compSun,
#jp-opening .tagline,
#jp-opening .skip{
  transition:opacity .82s var(--soft), filter .82s var(--soft);
}
#jp-opening.transitioning{background-color:#100e0b}
#jp-opening.transitioning .dawn,
#jp-opening.transitioning .scene,
#jp-opening.transitioning .compSun{opacity:0; filter:saturate(.35) brightness(.35)}
#jp-opening.transitioning .comp{
  transform:translate(var(--exit-x,0),var(--exit-y,0)) scale(var(--exit-scale,.4));
  filter:brightness(.9);
}
#jp-opening.transitioning .tagline,
#jp-opening.transitioning .skip{opacity:0}

/* 着地後の背景：夜明け */
#jp-opening .dawn{position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(58% 42% at 50.5% 26%, rgba(255,231,192,.92) 0%, rgba(255,206,166,.38) 45%, rgba(255,214,178,0) 72%),
    linear-gradient(180deg,#e8d4e2 0%,#eec0b0 30%,#e3a596 58%,#d18f88 82%,#bd7a7c 100%)}

/* 実写の東京／富士山：背面と、稜線で切り抜いた前面の2枚重ね */
#jp-opening .scene{position:absolute; inset:0; z-index:1}
#jp-opening .scene.bg{animation:sceneOut 2s var(--soft) 2.15s forwards}
#jp-opening .scene.fg{z-index:3; animation:fgHide .01s linear 2.05s forwards}
@keyframes sceneOut{0%{opacity:1}100%{opacity:0}}
@keyframes fgHide{to{opacity:0}}

#jp-opening .photoWrap{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:max(100vw, calc(100vh * 1.5)); aspect-ratio:1536 / 1024;
}
#jp-opening .photoWrap img{width:100%; height:100%; display:block; object-fit:cover}
#jp-opening .scene.fg img{clip-path:polygon(0.00% 100.00%, 0.00% 42.00%, 52.00% 42.00%, 57.88% 35.93%, 58.66% 35.83%, 59.44% 35.54%, 60.22% 35.34%, 61.00% 35.05%, 61.78% 34.85%, 62.57% 34.66%, 63.35% 34.27%, 64.13% 33.88%, 64.91% 33.58%, 65.69% 33.29%, 66.47% 32.90%, 67.25% 32.61%, 68.03% 32.21%, 68.82% 31.82%, 69.60% 31.43%, 70.38% 30.85%, 71.16% 30.36%, 71.94% 29.77%, 72.72% 29.19%, 73.50% 28.60%, 74.28% 28.11%, 75.07% 27.43%, 75.85% 26.75%, 76.63% 26.75%, 77.41% 26.55%, 78.19% 26.84%, 78.97% 27.53%, 79.75% 28.11%, 80.53% 28.80%, 81.32% 29.58%, 82.10% 30.26%, 82.88% 30.65%, 83.66% 31.14%, 84.44% 31.73%, 85.22% 32.31%, 86.00% 32.61%, 86.78% 32.90%, 87.57% 33.19%, 90.00% 40.00%, 100.00% 42.00%, 100.00% 100.00%)}
@media (orientation:portrait) and (max-width:900px){
  /* 縦画面では富士山が画角に入るよう構図をずらす */
  #jp-opening .photoWrap{left:auto; right:-30%; transform:translateY(-50%)}
}
#jp-opening .summit{position:absolute; left:77.41%; top:32.4%; width:0; height:0}

/* 舞台：ロゴの外接ボックスと完全に一致 */
#jp-opening .comp,#jp-opening .compSun{
  grid-area:stack; position:relative;
  width:min(76vw,880px); aspect-ratio:2232.91 / 787.42;
}
#jp-opening .comp{z-index:4}
#jp-opening .compSun{z-index:2; animation:sunLift .01s linear 2.6s forwards}
@keyframes sunLift{to{z-index:6}}
@media(max-width:640px){#jp-opening .comp,#jp-opening .compSun{width:90vw}}

/* --- 太陽（最終的に日の丸になる） --- */
#jp-opening .sun,#jp-opening .sunTarget{
  position:absolute; left:50.68%; top:13.29%; width:3.573%; aspect-ratio:1; border-radius:50%;
}
#jp-opening .sunTarget{visibility:hidden}
#jp-opening .sun{background:#c50018; opacity:0;
  animation:sunrise 3.1s var(--soft) .5s forwards}
@keyframes sunrise{
  0%   {opacity:0; transform:translate(var(--sx),var(--sy)) scale(var(--ss));
        background:#ff6a3d; box-shadow:0 0 0 rgba(255,150,90,0)}
  12%  {opacity:1; transform:translate(var(--sx),calc(var(--sy) - .18%)) scale(var(--ss));
        background:#ff6a3d; box-shadow:0 0 90px 26px rgba(255,160,100,.55)}
  30%  {opacity:1; transform:translate(var(--sx),var(--syA)) scale(var(--ss));
        background:#fb5a33; box-shadow:0 0 110px 34px rgba(255,170,110,.5)}
  62%  {opacity:1; transform:translate(var(--sxB),var(--syB)) scale(var(--ssB));
        background:#e0402a; box-shadow:0 0 60px 16px rgba(240,130,90,.32)}
  100% {opacity:1; transform:translate(0,0) scale(1);
        background:#c50018; box-shadow:0 0 0 rgba(197,0,24,0)}
}

/* --- ロゴ（SVG） --- */
#jp-opening .logo{position:absolute; inset:0}
#jp-opening .logo svg{display:block; width:100%; height:auto; overflow:hidden}

@keyframes pop{
  0%{opacity:0; transform:translateY(2.4%) scale(.955)}
  100%{opacity:1; transform:translateY(0) scale(1)}
}
#jp-opening .logo .g01,
#jp-opening .logo .g02,
#jp-opening .logo .g03,
#jp-opening .logo .g04,
#jp-opening .logo .g05,
#jp-opening .logo .g06,
#jp-opening .logo .g07,
#jp-opening .logo .g08,
#jp-opening .logo .g09,
#jp-opening .logo .g10,
#jp-opening .logo .g11,
#jp-opening .logo .g12{
  opacity:0; transform-box:view-box; transform-origin:var(--ox) var(--oy);
  animation:pop 1.25s var(--soft) forwards;
}
#jp-opening .logo .g01{--ox:6.75%; --oy:72.51%; animation-delay:2.95s} /* J＋王冠 */
#jp-opening .logo .g02{--ox:13.78%; --oy:51.98%; animation-delay:3.08s} /* 角笛 */
#jp-opening .logo .g03{--ox:21.29%; --oy:60.92%; animation-delay:3.21s} /* 鳩 */
#jp-opening .logo .g04{--ox:28.00%; --oy:63.14%; animation-delay:3.34s} /* BIBLE */
#jp-opening .logo .g05{--ox:33.88%; --oy:64.27%; animation-delay:3.47s} /* 椅子のL */
#jp-opening .logo .g06{--ox:39.00%; --oy:50.39%; animation-delay:3.60s} /* 金のe */
#jp-opening .logo .g07{--ox:47.89%; --oy:38.48%; animation-delay:3.73s} /* 日の丸の旗 */
#jp-opening .logo .g08{--ox:52.47%; --oy:63.38%; animation-delay:3.86s} /* 祈る人 */
#jp-opening .logo .g09{--ox:61.16%; --oy:63.69%; animation-delay:3.99s} /* 手の輪 */
#jp-opening .logo .g10{--ox:67.89%; --oy:61.49%; animation-delay:4.12s} /* 黒いj */
#jp-opening .logo .g11{--ox:73.87%; --oy:61.51%; animation-delay:4.25s} /* ë */
#jp-opening .logo .g12{--ox:83.74%; --oy:61.07%; animation-delay:4.38s} /* c̈ */


/* 旗は日の丸と重なるため、位置のずれない静かなフェードで登場させる */
#jp-opening .logo .g07{
  opacity:0;
  animation:fadeIn 1.15s var(--soft) 3.73s forwards;
}
@keyframes fadeIn{to{opacity:1}}

/* 十字架 */
#jp-opening .logo .g13{
  opacity:0; transform-box:view-box; transform-origin:92.89% 61.67%;
  animation:cross 1.9s var(--soft) 4.60s forwards;
}
@keyframes cross{
  0%{opacity:0; transform:translateY(-4%) scale(.97)}
  50%{opacity:1; transform:none; filter:drop-shadow(0 0 18px rgba(255,240,0,.65))}
  100%{opacity:1; transform:none; filter:drop-shadow(0 0 0 rgba(255,240,0,0))}
}

/* ワードマーク：左から現れる */
#jp-opening .logo .wipeRect{animation:wordWipe 1.7s var(--soft) 5.15s forwards}
@keyframes wordWipe{to{width:1520px}}

#jp-opening .tagline{
  position:absolute; left:0; width:100%; top:112%; z-index:4;
  text-align:center; font-size:clamp(9px,1.05vw,13px);
  letter-spacing:.4em; text-transform:uppercase; color:var(--sub);
  opacity:0; animation:fadeUp 1.3s var(--soft) 6.15s forwards;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:.92;transform:none}}

#jp-opening .skip{
  position:fixed; right:22px; bottom:20px; z-index:100;
  font-size:11px; letter-spacing:.24em; color:rgba(255,255,255,.8);
  background:none; border:0; cursor:pointer;
  animation:skipTone 3.6s var(--soft) .6s forwards;
}
@keyframes skipTone{to{color:rgba(72,40,40,.66)}}
#jp-opening .skip:hover{opacity:.6}

@media(prefers-reduced-motion:reduce){
  #jp-opening .scene{display:none}
  #jp-opening{background:linear-gradient(180deg,#e8d4e2,#bd7a7c)}
  #jp-opening .logo *,#jp-opening .sun,#jp-opening .tagline{
    animation:none!important; opacity:1!important;
    transform:none!important; filter:none!important; box-shadow:none!important}
  #jp-opening .logo .wipeRect{width:1520px}
}