/* ===== タイミング変数（CSSが未読の瞬間でもJS側でフォールバックあり）===== */
:root{
  --iv-t-enter:   650ms;
  --iv-t-deliver: 1100ms;
  --iv-t-open:     800ms;
  --iv-t-card:     480ms;
  --iv-t-fade:    1000ms;
  --iv-gap1:       280ms;
  --iv-gap2:       200ms;
  --iv-gap4:       360ms;
  --iv-gap5:       320ms;
  --iv-env-top:     46%;
}

/* ===== オーバーレイ（背面スクロールは阻害しない） ===== */
.iv-overlay{
  position:fixed; inset:0; z-index:9999; overflow:hidden;
  background:
    radial-gradient(1200px 700px at 50% 10%, #101a55 0%, transparent 60%),
    linear-gradient(#06091f,#0b1440);
  pointer-events:none;             /* ← 背景スクロールOK */
  opacity:1; transition:opacity .45s ease;
}
.iv-stage{ position:relative; inset:0; height:100dvh; pointer-events:none; }

/* ===== 星空 ===== */
.iv-sky{ position:absolute; inset:0; z-index:0; width:100%; height:100%; display:block; pointer-events:none; }

/* ===== UFO（PC：右端、SP：中央上） ===== */
.iv-ufo{
  position:absolute; top:8%; left:-70vw; opacity:0; z-index:3;
  width:min(42vmin, 380px); aspect-ratio:1/1;
  transform:rotate(-2deg);
  filter:blur(2px) drop-shadow(0 12px 24px rgba(0,0,0,.45));
  transition:
    left var(--iv-t-enter) cubic-bezier(.05,.9,.2,1),
    opacity var(--iv-t-enter) ease,
    transform var(--iv-t-enter) cubic-bezier(.05,.9,.2,1),
    filter var(--iv-t-enter) ease;
}
.iv-overlay.iv-run .iv-ufo{
  left:82%; opacity:1; transform:rotate(0);
  filter:blur(0) drop-shadow(0 12px 24px rgba(0,0,0,.45));
  animation: iv-sway 3.2s ease-in-out .1s infinite alternate;
}
@keyframes iv-sway{ 0%{transform:translateY(-1px)} 100%{transform:translateY(-10px)} }

/* ===== 封筒（中にカードを“収める”） ===== */
.iv-env{
  position:absolute; left:50%; top:var(--iv-env-top);
  width:min(92vmin, 900px); height:calc(min(92vmin, 900px)*.70);
  transform-style:preserve-3d; perspective:1400px;
  z-index:2; opacity:0;
  transform:translate(-50%,-50%) translateX(44vw) translateY(-6vh) rotate(8deg) scale(.62);
  filter:drop-shadow(0 12px 26px rgba(0,0,0,.30));
  transition:transform var(--iv-t-deliver) cubic-bezier(.2,.8,.2,1), opacity 220ms ease;
  pointer-events:none; overflow:hidden; will-change:transform;
}
.iv-overlay.iv-deliver .iv-env{
  opacity:1; transform:translate(-50%,-50%) translateX(0) translateY(0) rotate(0) scale(1);
}
.iv-env-body{
  position:absolute; inset:0;
  background:#fffaf0; border-radius:18px; border:2px solid #e8ded0;
  overflow:hidden; z-index:1; transition:opacity var(--iv-t-fade) ease;
}
.iv-env-front{
  position:absolute; inset:0; height:100%;
  background:linear-gradient(180deg,#ffefc7,#ffe3a1);
  clip-path:polygon(0 0,100% 0,100% 52%,50% 100%,0 52%);
  border-top-left-radius:18px; border-top-right-radius:18px;
  border:2px solid #e8ded0; border-bottom:none;
  z-index:3; transform-origin:50% 0%; transform:rotateX(0deg);
  transition:transform var(--iv-t-open) cubic-bezier(.2,.9,.2,1), opacity var(--iv-t-fade) ease;
  backface-visibility:hidden;
}
.iv-overlay.iv-open .iv-env-front{ transform:rotateX(120deg) translateZ(18px) }

/* ===== カード（封筒より確実に小さく／フラップの下で見える） ===== */
.iv-card{
  position:absolute; left:50%; top:50%;
  width:calc(100% - clamp(28px, 6vw, 48px));
  height:calc(100% - clamp(28px, 6vw, 48px));
  transform:translate(-50%,-50%) translateY(12%) scale(.94) translateZ(16px);
  background:radial-gradient(140% 120% at 50% -10%,#e6f3ff 0%,#ffffff 40%,#fff 60%);
  border-radius:18px; border:2px solid #e1eefc; box-shadow:0 14px 30px rgba(0,0,0,.18);
  display:grid; place-items:center; text-align:center;
  padding:clamp(12px,3.2vw,22px);
  opacity:0; z-index:2; transition:transform var(--iv-t-card) cubic-bezier(.2,.9,.2,1), opacity var(--iv-t-card) ease;
  pointer-events:none; will-change:transform, opacity;
}
/* 届いた時点で中に見える */
.iv-overlay.iv-deliver .iv-card{
  opacity:1; transform:translate(-50%,-50%) translateY(8%) scale(.945) translateZ(16px);
}
/* 開き終わりで前へ・封筒消去後もカードだけ残す */
.iv-overlay.iv-cardshow .iv-card{
  opacity:1; transform:translate(-50%,-50%) translateY(-2%) scale(.96) translateZ(28px);
}
/* 封筒だけフェード */
.iv-overlay.iv-fade .iv-env-front,
.iv-overlay.iv-fade .iv-env-body{ opacity:0; pointer-events:none }

/* ===== 文面（常に1行） ===== */
.iv-content{ width:100% }
.iv-line{
  display:block; white-space:nowrap; word-break:keep-all; overflow:hidden; text-overflow:clip;
  margin:.24em 0;
}
.iv-title{
  font-weight:800; letter-spacing:.04em;
  font-size:clamp(18px, 5.6vw, 34px);
  color:#0ee; text-shadow:0 0 18px rgba(14,238,238,.35);
}
.iv-sub,.iv-desc{
  font-weight:600; letter-spacing:.02em;
  font-size:clamp(12px, 3.8vw, 20px);
  color:#103;
}

/* ===== CTA（固定。クリック可） ===== */
.iv-cta{
  position:fixed; left:50%; bottom:7dvh; transform:translateX(-50%) translateY(8px);
  padding:1.05em 1.6em; border-radius:999px; border:none; cursor:pointer;
  font-weight:900; letter-spacing:.06em; font-size:clamp(16px,4.6vw,22px);
  background:linear-gradient(180deg,#4bd3ff,#2f80ff); color:#041430;
  box-shadow:0 14px 30px rgba(0,140,255,.35), inset 0 2px 0 rgba(255,255,255,.55);
  opacity:0; transition:opacity 480ms ease, transform 480ms ease;
  z-index:10000; pointer-events:auto;
}
body.iv-cta-show .iv-cta{ opacity:1; transform:translateX(-50%) translateY(0) }

/* ===== スマホ：UFOは上中央に停止 ===== */
@media (max-width: 640px){
  :root{ --iv-env-top: 52% }
  .iv-ufo{ top:4%; left:-70vw; width:46vw }
  .iv-overlay.iv-run .iv-ufo{ left:50%; transform:translateX(-50%) }
  .iv-title{ font-size:clamp(18px,6.1vw,30px) }
  .iv-sub,.iv-desc{ font-size:clamp(12px,4.2vw,18px) }
  .iv-cta{ bottom:6dvh }
}

/* ===== 動き抑制設定 ===== */
@media (prefers-reduced-motion: reduce){
  .iv-ufo,.iv-env,.iv-env-front,.iv-env-body,.iv-card{ transition:none !important; animation:none !important }
  .iv-overlay.iv-run .iv-ufo{ left:82%; opacity:1 }
  .iv-overlay.iv-deliver .iv-env{ opacity:1; transform:translate(-50%,-50%) }
  .iv-overlay.iv-open .iv-env-front{ transform:rotateX(120deg) translateZ(18px) }
  .iv-overlay.iv-cardshow .iv-card{ opacity:1; transform:translate(-50%,-50%) }
  .iv-overlay.iv-fade .iv-env-front,.iv-overlay.iv-fade .iv-env-body{ opacity:0 }
  body.iv-cta-show .iv-cta{ opacity:1; transform:translateX(-50%) translateY(0) }
}