/* ============================================================
   オープニングアニメーション（5段階・実素材 / 全パラメータCSS変数化）
   ① 液面が下から上がってカートンを満たす
   ② 満タンで雫がピチョンと跳ねる
   ③ パチっとパッケージへ切替
   ④ パッケージ背後から野菜・果物がわさっと湧き出す
   ⑤ ふわっとフェードしてFVへ収束
   ※ 数値は #opening の CSS変数で一括管理（調整ツールと共有）
   ============================================================ */
#opening {
  /* ---- 位置・サイズ ---- */
  --op-anchor-x: 50.1%;
  --op-anchor-y: 55%;
  --op-carton-size: 47.9%;
  --op-pkg-size: 47.9%;
  --op-drop1-top: 26%;
  --op-drop1-x: 70px;
  --op-drop1-size: 12%;
  --op-drop2-top: 21.5%;
  --op-drop2-x: 105px;
  --op-drop2-size: 20.5%;
  --op-drop1-rot: 0deg;
  --op-drop2-rot: 20deg;
  /* ---- ① 充填 ---- */
  --op-fill-delay: 0.05s;
  --op-fill-dur: 2.2s;
  --op-fill-ease: cubic-bezier(.40,.06,.30,1);
  /* ---- ② 雫 ---- */
  --op-bounce-time: 1.2s;
  --op-drop-dur: 0.55s;
  --op-drop1-time: 1.3s;
  --op-drop2-time: 1.35s;
  /* ---- ③ パッケージ ---- */
  --op-carton-out-time: 1.7s;
  --op-pkg-time: 1.85s;
  --op-pkg-dur: 0.5s;
  /* ---- ④ 野菜 ---- */
  --op-veg-dur: 0.6s;
  --op-veg-ease: cubic-bezier(.2,1.5,.45,1);
  --op-veg-time: 2s;     /* JS: is-veg 付与時刻 */
  /* ---- ⑤ フェード ---- */
  --op-fade-dur: 0.8s;
  --op-fade-hold: 3.2s;    /* JS: フェード開始時刻 */

  position: fixed; inset: 0; z-index: 3000;
  background: var(--lime); overflow: hidden;
  transition: opacity var(--op-fade-dur) ease;
}
#opening.is-leaving { opacity: 0; }

.op__scene {
  position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(100%, var(--content-width));
  aspect-ratio: 782 / 1271;
}

.op__carton, .op__package, .op__veg, .op__drop {
  position: absolute; left: var(--op-anchor-x); top: var(--op-anchor-y);
}

/* ---- ① シルエット＋液面上昇 ---- */
.op__carton {
  height: var(--op-carton-size); aspect-ratio: 1; z-index: 3;
  transform: translate(-50%, -50%);
  clip-path: url(#op-carton-clip);
  animation: op-bounce 0.5s ease var(--op-bounce-time),
             op-carton-out 0.08s linear var(--op-carton-out-time) forwards;
}
.op__sil { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.op__liquid {
  position: absolute; left: 0; bottom: 0; width: 100%; height: 176%; display: block;
  transform: translateY(100%);
  animation: op-fill var(--op-fill-dur) var(--op-fill-ease) var(--op-fill-delay) forwards;
}
@keyframes op-fill { to { transform: translateY(0); } }

/* ---- ② 雫 ---- */
.op__drop { transform: translate(-50%, 0) scale(0); opacity: 0; z-index: 4; }
.op__drop--1 { --op-drop-rot: var(--op-drop1-rot); top: var(--op-drop1-top); margin-left: var(--op-drop1-x); width: var(--op-drop1-size); animation: op-drop var(--op-drop-dur) ease var(--op-drop1-time); }
.op__drop--2 { --op-drop-rot: var(--op-drop2-rot); top: var(--op-drop2-top); margin-left: var(--op-drop2-x); width: var(--op-drop2-size); animation: op-drop var(--op-drop-dur) ease var(--op-drop2-time); }

/* ---- ③ パッケージ（パチっと） ---- */
.op__package {
  height: var(--op-pkg-size); aspect-ratio: 1; width: auto; object-fit: contain; z-index: 10; opacity: 0;
  transform: translate(-50%, -50%) scale(0.8);
  animation: op-pkg-pop var(--op-pkg-dur) cubic-bezier(.2,1.5,.4,1) var(--op-pkg-time) forwards;
}

/* ---- ④ 野菜・果物 ---- */
.op__veg {
  width: var(--vw, 24%); z-index: 1; opacity: 0;
  transform: translate(-50%, -50%) scale(0.25);
  transition: transform var(--op-veg-dur) var(--op-veg-ease), opacity 0.3s ease;
}
.op__scene.is-veg .op__veg {
  opacity: 1;
  transform: translate(calc(-50% + var(--fx)), calc(-50% + var(--fy))) scale(1) rotate(var(--fr, 0deg));
}

/* ============================================================ */
@keyframes op-bounce {
  0%,100% { transform: translate(-50%, -50%); }
  35%     { transform: translate(-50%, -55%); }
  70%     { transform: translate(-50%, -50%); }
}
@keyframes op-carton-out { to { opacity: 0; } }
@keyframes op-drop {
  0%   { opacity: 0; transform: translate(-50%, 10px) scale(0.2) rotate(var(--op-drop-rot, 0deg)); }
  35%  { opacity: 1; transform: translate(-50%, -42px) scale(1) rotate(var(--op-drop-rot, 0deg)); }
  68%  { opacity: 1; transform: translate(-50%, -8px) scale(0.92) rotate(var(--op-drop-rot, 0deg)); }
  100% { opacity: 0; transform: translate(-50%, 2px) scale(0.55) rotate(var(--op-drop-rot, 0deg)); }
}
@keyframes op-pkg-pop {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
  45%  { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

html.opening-lock, html.opening-lock body { overflow: hidden; height: 100%; }

@media (prefers-reduced-motion: reduce) {
  .op__carton, .op__drop, .op__veg { display: none; }
  .op__package { animation: none; opacity: 1; transform: translate(-50%,-50%) scale(1); }
  #opening { transition: opacity 0.4s ease; }
}