/* ==========================================================================
   CINEMATIC INTRO — "Salma's Heart Vault"
   Self-contained overlay. Removed from the DOM once the reveal finishes.
   ========================================================================== */
:root {
  --intro-steel-1: #4a5468;
  --intro-steel-2: #232a3a;
  --intro-steel-3: #6b7690;
  --intro-gold: #f2c879;
  --intro-love: #ff7a9c;
  --intro-love-dark: #e0557a;
}

.intro {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: radial-gradient(ellipse at 50% 40%, #12162c 0%, #05060f 75%);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.8s ease;
}
.intro.is-removing { opacity: 0; pointer-events: none; }

.intro__particles-canvas { position: absolute; inset: 0; }

.intro__smoke { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.intro__smoke span {
  position: absolute; bottom: -10%; height: 220px; width: 420px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(180, 195, 230, 0.16), rgba(180, 195, 230, 0));
  filter: blur(6px);
  animation: smokeDrift linear infinite;
}
@keyframes smokeDrift {
  0% { transform: translateX(-20%) translateY(0); opacity: 0; }
  15% { opacity: 0.8; }
  85% { opacity: 0.5; }
  100% { transform: translateX(60vw) translateY(-6%); opacity: 0; }
}

.intro__stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: 50% 45%;
}
.intro__stage.is-shaking { animation: introShake 0.5s ease; }
.intro__stage.is-pushing-in { transition: transform 1.6s cubic-bezier(0.22, 1, 0.36, 1); transform: scale(1.16); }
@keyframes introShake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-6px, 3px) rotate(-0.3deg); }
  40% { transform: translate(5px, -4px) rotate(0.3deg); }
  60% { transform: translate(-4px, 4px); }
  80% { transform: translate(4px, -2px); }
}

/* ---------------------------------------------------------------------
   VAULT
   --------------------------------------------------------------------- */
.vault {
  position: relative;
  width: min(520px, 78vw);
  height: min(420px, 52vh);
  opacity: 0;
}
.vault__glow {
  position: absolute; inset: -18%;
  background: radial-gradient(circle, rgba(125, 196, 255, 0.35), rgba(125, 196, 255, 0) 68%);
  filter: blur(10px);
  animation: vaultGlowPulse 3.4s ease-in-out infinite;
}
@keyframes vaultGlowPulse { 0%, 100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.07); } }

.vault__frame {
  position: absolute; inset: 0; border-radius: 28px;
  background: linear-gradient(155deg, var(--intro-steel-3) 0%, var(--intro-steel-2) 55%, var(--intro-steel-1) 100%);
  box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.7), 0 0 0 2px rgba(125, 196, 255, 0.3), 0 0 60px rgba(125, 196, 255, 0.25);
  overflow: hidden;
}

.vault__light {
  position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; border-radius: 50%;
  transform: translate(-50%, -50%) scale(1);
  background: radial-gradient(circle, #ffffff 0%, var(--intro-accent, #7DC4FF) 45%, rgba(125, 196, 255, 0) 72%);
  opacity: 0; filter: blur(2px);
  z-index: 1;
}

.vault__door {
  position: absolute; top: 3px; bottom: 3px; width: calc(50% - 3px);
  background: repeating-linear-gradient(100deg, #3d4658 0px, #4a5468 3px, #333b4a 6px, #4a5468 9px);
  z-index: 2;
}
.vault__door--left { left: 3px; border-radius: 24px 0 0 24px; box-shadow: inset -2px 0 0 rgba(125, 196, 255, 0.55); transform-origin: left center; }
.vault__door--right { right: 3px; border-radius: 0 24px 24px 0; box-shadow: inset 2px 0 0 rgba(125, 196, 255, 0.55); transform-origin: right center; }
.vault__door::before {
  content: ""; position: absolute; inset: 14px; border: 1px solid rgba(125, 196, 255, 0.28); border-radius: 18px;
}
.vault__door.is-open.vault__door--left { transform: translateX(-115%) rotateY(-12deg); }
.vault__door.is-open.vault__door--right { transform: translateX(115%) rotateY(12deg); }
.vault__door { transition: transform 1.4s cubic-bezier(0.7, 0, 0.3, 1); }

.vault__wheel {
  position: absolute; top: 50%; left: 50%; width: 92px; height: 92px; margin: -46px 0 0 -46px;
  border-radius: 50%; z-index: 3;
  background: radial-gradient(circle at 35% 30%, #7c8bab, #2c3242 70%);
  box-shadow: 0 0 0 4px rgba(125, 196, 255, 0.5), 0 0 30px rgba(125, 196, 255, 0.55), inset 0 0 12px rgba(0, 0, 0, 0.6);
  animation: vaultWheelIdle 9s linear infinite;
}
@keyframes vaultWheelIdle { to { transform: rotate(360deg); } }
.vault__wheel-spoke {
  position: absolute; top: 50%; left: 50%; width: 84px; height: 8px; margin: -4px 0 0 -42px;
  background: linear-gradient(90deg, transparent, var(--intro-gold), transparent);
  opacity: 0.85;
}
.vault__wheel-spoke:nth-child(2) { transform: rotate(45deg); }
.vault__wheel-spoke:nth-child(3) { transform: rotate(90deg); }
.vault__wheel-spoke:nth-child(4) { transform: rotate(135deg); }
.vault__wheel-hub {
  position: absolute; top: 50%; left: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe5ad, var(--intro-gold) 70%);
  box-shadow: 0 0 14px rgba(242, 200, 121, 0.8);
}

.vault.is-flickering .vault__glow { animation: vaultFlicker 0.12s steps(2) 8; }
@keyframes vaultFlicker { 0%, 100% { opacity: 1; } 50% { opacity: 0.15; } }

/* ---------------------------------------------------------------------
   NARRATIVE TEXT + CTA
   --------------------------------------------------------------------- */
.intro__narrative {
  position: absolute; top: 14%; left: 50%; transform: translateX(-50%); width: min(720px, 88vw); text-align: center; z-index: 5;
}
.intro__line {
  position: absolute; top: 0; left: 0; right: 0; margin: 0 auto;
  font-family: var(--font-display, "Playfair Display", serif); font-style: italic;
  font-size: clamp(1.1rem, 3vw, 1.7rem); color: #eaf1ff;
  opacity: 0; transform: translateY(16px);
  text-shadow: 0 0 24px rgba(125, 196, 255, 0.4);
}
.intro__line--warning {
  font-family: var(--font-body, "Inter", sans-serif); font-style: normal; font-weight: 700;
  letter-spacing: 0.18em; color: #ffb37a; font-size: clamp(0.9rem, 2.4vw, 1.15rem);
  text-shadow: 0 0 20px rgba(255, 140, 60, 0.55);
}
.intro__line--bold { font-weight: 700; font-size: clamp(1.4rem, 4vw, 2.1rem); color: #fff; }

.intro__cta {
  position: absolute; bottom: 9%; left: 50%; transform: translate(-50%, 24px); width: min(640px, 90vw);
  text-align: center; opacity: 0; z-index: 5;
}
.intro__title {
  font-family: var(--font-display, "Playfair Display", serif); font-weight: 800; color: #fff;
  font-size: clamp(1.6rem, 5vw, 2.6rem); letter-spacing: 0.02em; margin-bottom: 10px;
  text-shadow: 0 0 40px rgba(255, 122, 156, 0.6);
}
.intro__cta-sub { color: rgba(234, 241, 255, 0.7); font-size: 0.95rem; margin-bottom: 24px; }

.intro__btn {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  padding: 18px 40px; border-radius: 999px; font-weight: 600; font-size: 1.05rem; color: #fff;
  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(125, 196, 255, 0.55);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 0 0 rgba(255, 122, 156, 0);
  animation: btnGlowPulse 2.2s ease-in-out infinite;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}
.intro__btn:hover { transform: translateY(-4px) scale(1.04); box-shadow: 0 0 50px rgba(255, 122, 156, 0.65); }
@keyframes btnGlowPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(125, 196, 255, 0.35); }
  50% { box-shadow: 0 0 34px rgba(255, 122, 156, 0.55); }
}

/* ---------------------------------------------------------------------
   CHARACTER + LOVE CANNON
   --------------------------------------------------------------------- */
.hero-unit {
  position: absolute; bottom: 10%; left: 50%; z-index: 4;
  width: 420px; max-width: 86vw; height: 150px;
  transform: translate(-50%, 0) translateX(-160vw);
  display: flex; align-items: flex-end;
  pointer-events: none;
}
.hero-unit__cannon { height: 100%; width: auto; flex-shrink: 0; overflow: visible; }
.hero-unit__character { height: 62%; width: auto; flex-shrink: 0; overflow: visible; margin-left: -4%; }

.cannon-wheel { transform-box: fill-box; transform-origin: center; }
.hero-unit.is-moving .cannon-wheel { animation: wheelSpin 0.5s linear infinite; }
@keyframes wheelSpin { to { transform: rotate(360deg); } }

.char-leg { transform-box: fill-box; transform-origin: top center; }
.hero-unit.is-moving .char-leg--front { animation: legSwing 0.42s ease-in-out infinite; }
.hero-unit.is-moving .char-leg--back { animation: legSwing 0.42s ease-in-out infinite reverse; }
@keyframes legSwing { 0%, 100% { transform: rotate(18deg); } 50% { transform: rotate(-18deg); } }

.char-body-bob { transform-box: fill-box; transform-origin: center; }
.hero-unit.is-moving .char-body-bob { animation: bodyBob 0.42s ease-in-out infinite; }
@keyframes bodyBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

.char-pupils { transform-box: fill-box; transform-origin: center; transition: transform 0.4s ease; }
.hero-unit.is-looking-user .char-pupils { transform: translateX(-2.5px); }
.hero-unit.is-looking-vault .char-pupils { transform: translateX(2.5px); }

.char-head-tilt { transform-box: fill-box; transform-origin: 50% 90%; transition: transform 0.4s ease; }
.hero-unit.is-looking-user .char-head-tilt { transform: rotate(-6deg); }
.hero-unit.is-looking-vault .char-head-tilt { transform: rotate(6deg); }
.hero-unit.is-smiling .char-cheek { animation: cheekPulse 0.5s ease; }
@keyframes cheekPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }

.tow-rope {
  position: absolute; left: 58%; bottom: 34px; width: 30px; height: 3px;
  background: repeating-linear-gradient(90deg, #cfd8e6 0, #cfd8e6 4px, transparent 4px, transparent 7px);
  opacity: 0.8; z-index: 3;
}

.hero-unit.is-recoil .hero-unit__cannon { animation: cannonRecoil 0.35s ease; }
@keyframes cannonRecoil {
  0% { transform: translateX(0); }
  30% { transform: translateX(-14px) rotate(-2deg); }
  100% { transform: translateX(0); }
}

.dust-puff {
  position: absolute; bottom: 6%; width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle, rgba(210, 200, 180, 0.55), rgba(210, 200, 180, 0));
  animation: puffRise 0.9s ease-out forwards;
  z-index: 3;
}
@keyframes puffRise {
  0% { opacity: 0.7; transform: translateY(0) scale(0.6); }
  100% { opacity: 0; transform: translateY(-24px) scale(1.6); }
}

.debris {
  position: absolute; top: -5%; width: 6px; height: 10px; background: rgba(200, 210, 230, 0.55);
  animation: debrisFall linear forwards;
}
@keyframes debrisFall {
  to { transform: translateY(115vh) rotate(220deg); opacity: 0.2; }
}

/* ---------------------------------------------------------------------
   COUNTDOWN
   --------------------------------------------------------------------- */
.intro__countdown {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-family: var(--font-display, "Playfair Display", serif); font-weight: 800;
  font-size: clamp(4rem, 14vw, 8rem); color: #fff; z-index: 6;
  text-shadow: 0 0 50px rgba(255, 122, 156, 0.75);
  opacity: 0;
}
.intro__countdown.is-popping { animation: countdownPop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes countdownPop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
  55% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
  75% { transform: translate(-50%, -50%) scale(0.95); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}

/* ---------------------------------------------------------------------
   LOVE BURST PARTICLES
   --------------------------------------------------------------------- */
.intro__burst { position: absolute; inset: 0; overflow: hidden; z-index: 7; pointer-events: none; }
.burst-item {
  position: absolute; will-change: transform, opacity; font-size: 22px; opacity: 0;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.5));
}

.intro__flash {
  position: absolute; inset: 0; background: #fff; opacity: 0; z-index: 20; pointer-events: none;
}

@media (max-width: 640px) {
  .hero-unit { bottom: 13%; }
  .intro__narrative { top: 10%; }
}

@media (prefers-reduced-motion: reduce) {
  .intro, .intro * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}