/* オープニング演出: 飛行機が右下から弧を描いて飛び、着地したらそのまま幕が開く
   動きの計算は opening.js。ここでは見た目だけ。 */
#tp-opening {
  position: fixed; inset: 0; z-index: 99999;
  pointer-events: none; overflow: hidden;
}

/* 上下に分かれる幕（青い空＋ツブツブ） */
#tp-opening .tp-op__half {
  position: absolute; left: 0; width: 100%; height: 50.2%;
  transition: transform .9s cubic-bezier(.76,0,.24,1);
}
#tp-opening .tp-op__half.-top    { top: 0; background: linear-gradient(180deg, #00b4c4 0%, #4ec3d8 100%); }
#tp-opening .tp-op__half.-bottom { bottom: 0; background: linear-gradient(180deg, #4ec3d8 0%, #a8e2ec 100%); }
/* ツブツブ（白い細かい点。2px 四方に1点） */
#tp-opening .tp-op__half::after {
  content: ""; position: absolute; inset: 0;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAACXBIWXMAAAPoAAAD6AG1e1JrAAAAEElEQVQImWP4////fwZkAAA91AP9jp3V5gAAAABJRU5ErkJggg==);
  background-size: 1.4px 1.4px; opacity: .40; pointer-events: none;
}

/* 飛行機（位置と大きさは JS が transform で動かす） */
#tp-opening .tp-op__plane {
  position: absolute; top: 0; left: 0; height: auto;
  transform-origin: center center; will-change: transform;
  filter: drop-shadow(0 8px 16px rgba(43,43,43,.18));
  transition: opacity .45s ease;
}

/* 飛行機雲（曲線に沿って伸びる） */
#tp-opening .tp-op__trail { position: absolute; top: 0; left: 0; overflow: visible; }
#tp-opening .tp-op__trail path {
  fill: none; stroke: rgba(255,255,255,.75); stroke-width: 4; stroke-linecap: round;
}

/* 飛行中に出るキャッチコピー */
#tp-opening .tp-op__catch {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-size: clamp(18px, 3vw, 30px); font-weight: 700; letter-spacing: .12em;
  color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.25);
  opacity: 0; animation: tp-catch 2.6s ease forwards; white-space: nowrap; text-align: center;
}
@keyframes tp-catch { 0% { opacity: 0 } 25% { opacity: .9 } 70% { opacity: .9 } 100% { opacity: 0 } }

/* 着地したらそのまま幕が開く */
#tp-opening.is-open .tp-op__half.-top { transform: translateY(-100%); }
#tp-opening.is-open .tp-op__half.-bottom { transform: translateY(100%); }
#tp-opening.is-open .tp-op__plane,
#tp-opening.is-open .tp-op__catch,
#tp-opening.is-open .tp-op__trail { opacity: 0; transition: opacity .45s ease; }
#tp-opening.is-done { display: none; }

/* 動きを減らす設定の人には出さない */
@media (prefers-reduced-motion: reduce) { #tp-opening { display: none !important; } }