/* intro.css — auto-split from styles.css */
/* ===== INTRO — cinematic wow ===== */
#intro {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  text-align: center;
  background: #0c0b09;
  overflow: hidden;
  transition: opacity 1.5s cubic-bezier(0.4, 0, 0.2, 1), transform 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}
#intro.out {
  opacity: 0;
  transform: scale(1.04);
  pointer-events: none;
}

.intro-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 45%, transparent 20%, rgba(0, 0, 0, 0.55) 100%);
  pointer-events: none;
  opacity: 0;
  animation: vignetteIn 2.5s ease-out 0.1s forwards;
}
@keyframes vignetteIn {
  to { opacity: 1; }
}

.intro-spotlight {
  position: absolute;
  top: -30%;
  left: 50%;
  transform: translateX(-50%);
  width: 160%;
  height: 85%;
  background: radial-gradient(
    ellipse 45% 50% at 50% 35%,
    rgba(232, 204, 150, 0.28) 0%,
    rgba(200, 160, 90, 0.12) 30%,
    rgba(180, 140, 70, 0.04) 55%,
    transparent 75%
  );
  opacity: 0;
  animation: spotlightIn 2.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
  pointer-events: none;
  filter: blur(2px);
}
@keyframes spotlightIn {
  0%   { opacity: 0; transform: translateX(-50%) scale(0.7); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateX(-50%) scale(1); }
}

.intro-glow-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(520px, 80vw);
  height: min(520px, 80vw);
  transform: translate(-50%, -50%) scale(0.6);
  border-radius: 50%;
  border: 1px solid rgba(232, 204, 150, 0.12);
  box-shadow:
    0 0 60px rgba(232, 204, 150, 0.06),
    inset 0 0 60px rgba(232, 204, 150, 0.04);
  opacity: 0;
  animation: ringExpand 3.2s cubic-bezier(0.22, 1, 0.36, 1) 0.6s forwards;
  pointer-events: none;
}
@keyframes ringExpand {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.55); }
  40%  { opacity: 0.7; }
  100% { opacity: 0.35; transform: translate(-50%, -50%) scale(1.15); }
}

.intro-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.intro-particle {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(232, 204, 150, 0.75);
  opacity: 0;
  animation: introDust linear forwards;
  will-change: transform, opacity;
  box-shadow: 0 0 5px rgba(232, 204, 150, 0.5);
}
.intro-particle.star {
  width: 3px;
  height: 3px;
  background: rgba(255, 250, 240, 0.9);
  box-shadow: 0 0 8px rgba(255, 250, 240, 0.55);
}
.intro-particle.large {
  width: 4px;
  height: 4px;
  background: rgba(232, 204, 150, 0.5);
  box-shadow: 0 0 12px rgba(232, 204, 150, 0.35);
}
@keyframes introDust {
  0%   { transform: translateY(0) scale(0.4); opacity: 0; }
  12%  { opacity: 0.7; }
  70%  { opacity: 0.35; }
  100% { transform: translateY(-105vh) translateX(var(--drift)) scale(1); opacity: 0; }
}

.intro-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 24px;
  max-width: 920px;
  animation: contentBreathe 6s ease-in-out 2s infinite alternate;
}
@keyframes contentBreathe {
  from { transform: scale(1); }
  to   { transform: scale(1.012); }
}

.intro-kicker {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.55em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 32px;
  opacity: 0;
  transform: translateY(16px);
  animation:
    introFade 1.1s var(--ease) 1.0s forwards,
    kickerGlow 3s ease-in-out 2.2s infinite alternate;
  text-shadow: 0 0 24px rgba(232, 204, 150, 0.35);
}
@keyframes kickerGlow {
  from { text-shadow: 0 0 16px rgba(232, 204, 150, 0.2); }
  to   { text-shadow: 0 0 32px rgba(232, 204, 150, 0.5); }
}

.intro-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(2.05rem, 7.2vw, 3.75rem);
  font-weight: 500;
  line-height: 1.22;
  color: #fffaf0;
  margin: 0;
  letter-spacing: -0.02em;
}
.intro-title span {
  display: block;
  opacity: 0;
  transform: translateY(22px);
}
.intro-line1 {
  animation: introFade 1.15s var(--ease) 1.55s forwards;
}
.intro-line2 {
  animation: introFade 1.15s var(--ease) 2.05s forwards;
}

.intro-rule {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 34px 0 30px;
}
.intro-rule span {
  display: block;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  box-shadow: 0 0 12px rgba(232, 204, 150, 0.4);
  animation: ruleDraw 1.2s var(--ease) 2.7s forwards;
}
@keyframes ruleDraw {
  to { width: 72px; }
}

.intro-sub {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(0.84rem, 2.3vw, 0.98rem);
  font-weight: 400;
  color: #c9bda8;
  letter-spacing: 0.025em;
  line-height: 1.65;
  max-width: 440px;
  margin: 0;
  opacity: 0;
  transform: translateY(16px);
  animation: introFade 1.1s var(--ease) 3.2s forwards;
}

@keyframes introFade {
  to { opacity: 1; transform: translateY(0); }
}

/* ===== ANIME INTRO ===== */
.intro-speedlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  background:
    repeating-linear-gradient(
      105deg,
      transparent 0 12px,
      rgba(255, 250, 240, 0.03) 12px 13px
    );
  animation: speedIn 1.2s ease-out 0.3s forwards, speedPulse 3s ease-in-out 1.5s infinite alternate;
  mask-image: radial-gradient(ellipse 60% 50% at 50% 45%, black 10%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 45%, black 10%, transparent 70%);
}
@keyframes speedIn {
  from { opacity: 0; transform: scale(1.1); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes speedPulse {
  from { opacity: 0.35; }
  to { opacity: 0.7; }
}
.intro-anime-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background: radial-gradient(circle at 50% 40%, rgba(255,250,240,0.55), transparent 55%);
  opacity: 0;
  animation: animeFlash 0.9s ease-out 0.15s forwards;
}
@keyframes animeFlash {
  0% { opacity: 0.7; }
  100% { opacity: 0; }
}
.intro-sakura {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}
.sakura-petal {
  position: absolute;
  top: -10%;
  width: 10px;
  height: 10px;
  border-radius: 50% 0 50% 0;
  background: linear-gradient(135deg, #f5c0d0, #e87890);
  opacity: 0;
  animation: sakuraFall linear forwards;
  box-shadow: 0 0 6px rgba(232, 120, 144, 0.35);
}
@keyframes sakuraFall {
  0% { transform: translateY(0) rotate(0deg) scale(0.6); opacity: 0; }
  10% { opacity: 0.85; }
  100% { transform: translateY(110vh) rotate(360deg) scale(1); opacity: 0; }
}
.intro-content--anime .intro-kicker {
  letter-spacing: 0.45em;
  text-shadow: 0 0 20px rgba(232, 204, 150, 0.5), 0 0 40px rgba(232, 204, 150, 0.2);
}
.intro-content--anime .intro-title {
  text-shadow: 0 2px 24px rgba(0,0,0,0.45), 0 0 40px rgba(232, 204, 150, 0.15);
}

/* ===== CHIBI DUO LIVE ===== */
.duo-mascots--live .duo-frog {
  font-size: 2.35rem;
  animation: chibiHop 1.4s ease-in-out infinite;
  transform-origin: center bottom;
}
.duo-mascots--live .duo-panda {
  font-size: 2.35rem;
  animation: chibiHop 1.4s ease-in-out 0.2s infinite;
  transform-origin: center bottom;
}
.duo-mascots--live .duo-heart {
  font-size: 1.15rem;
  animation: duoPulse 1.2s ease-in-out infinite, heartSpin 4s linear infinite;
}
@keyframes chibiHop {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  40% { transform: translateY(-10px) scale(1.05, 0.95); }
  50% { transform: translateY(-10px) scale(1.05, 0.95); }
  70% { transform: translateY(0) scale(0.98, 1.05); }
}
@keyframes heartSpin {
  from { filter: drop-shadow(0 0 4px rgba(232,120,144,0.4)); }
  50% { filter: drop-shadow(0 0 10px rgba(232,120,144,0.8)); }
  to { filter: drop-shadow(0 0 4px rgba(232,120,144,0.4)); }
}

/* ===== INTRO UPGRADE ===== */
#intro {
  background:
    radial-gradient(ellipse 80% 55% at 50% 35%, #1a1610 0%, #0c0b09 55%, #080706 100%);
}
.intro-glow-ring {
  border-color: rgba(232, 204, 150, 0.2);
  box-shadow:
    0 0 80px rgba(232, 204, 150, 0.1),
    inset 0 0 80px rgba(232, 204, 150, 0.06);
}
.intro-glow-ring::after {
  content: "";
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  border: 1px solid rgba(232, 204, 150, 0.1);
  animation: ringExpandInner 3.5s cubic-bezier(0.22, 1, 0.36, 1) 1s forwards;
  opacity: 0;
}
@keyframes ringExpandInner {
  0% { opacity: 0; transform: scale(0.7); }
  40% { opacity: 0.6; }
  100% { opacity: 0.25; transform: scale(1.05); }
}

.intro-content--anime {
  animation: contentBreathe 5s ease-in-out 3.5s infinite alternate;
}
.intro-content--anime .intro-line1,
.intro-content--anime .intro-line2 {
  background: linear-gradient(180deg, #fffaf0 0%, #e8cc96 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 20px rgba(232, 204, 150, 0.25));
}
.intro-content--anime .intro-line2 {
  background: linear-gradient(180deg, #fffaf0 10%, #d4af77 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.intro-rule span {
  height: 1.5px;
  box-shadow: 0 0 16px rgba(232, 204, 150, 0.55);
}
@keyframes ruleDraw {
  to { width: 96px; }
}

.intro-sub {
  max-width: 420px;
  text-shadow: 0 1px 12px rgba(0,0,0,0.4);
}

.intro-heart {
  margin-top: 28px;
  font-size: 1.35rem;
  color: rgba(232, 204, 150, 0.85);
  opacity: 0;
  transform: translateY(10px) scale(0.8);
  animation: introHeartIn 1.1s cubic-bezier(0.22, 1, 0.36, 1) 4.2s forwards;
  filter: drop-shadow(0 0 12px rgba(232, 204, 150, 0.45));
  font-family: Georgia, 'Playfair Display', serif;
}
@keyframes introHeartIn {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.intro-bottom-fade {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 28%;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(to top, rgba(8,7,6,0.75), transparent);
  opacity: 0;
  animation: vignetteIn 2s ease 0.5s forwards;
}

/* softer exit */
#intro.out {
  opacity: 0;
  transform: scale(1.06);
  filter: blur(6px);
  transition:
    opacity 1.35s cubic-bezier(0.4, 0, 0.2, 1),
    transform 1.35s cubic-bezier(0.4, 0, 0.2, 1),
    filter 1.35s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 700px) {
  .intro-content--anime {
    animation: none !important;
  }
  .intro-content--anime .intro-line1,
  .intro-content--anime .intro-line2 {
    filter: none;
    /* keep gradient text */
  }
  .intro-heart {
    animation-duration: 0.8s;
  }
  #intro.out {
    filter: none;
  }
  .intro-glow-ring::after {
    animation: none !important;
    opacity: 0.2;
    transform: scale(1);
  }
}


/* ===== INTRO TEXT + FLY HEART + SOFT HANDOFF ===== */
.intro-content--anime .intro-title {
  font-size: clamp(1.55rem, 5.5vw, 2.85rem);
  line-height: 1.28;
  max-width: 18ch;
}
.intro-content--anime .intro-line1,
.intro-content--anime .intro-line2 {
  max-width: 100%;
}

.intro-fly-heart {
  position: absolute;
  left: 50%;
  top: 72%;
  z-index: 5;
  font-size: 1.6rem;
  color: #e8c070;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 0) scale(0.6);
  filter: drop-shadow(0 0 16px rgba(232, 192, 112, 0.7));
  font-family: Georgia, 'Playfair Display', serif;
}
.intro-fly-heart.go {
  animation: introFlyHeart 1.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes introFlyHeart {
  0% {
    opacity: 0;
    transform: translate(-50%, 40px) scale(0.5);
  }
  15% {
    opacity: 1;
  }
  55% {
    opacity: 1;
    transform: translate(-50%, -18vh) scale(1.25);
  }
  85% {
    opacity: 0.9;
    transform: translate(-50%, -28vh) scale(1.05);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -32vh) scale(0.7);
  }
}

/* soft handoff: lock rises under fading intro */
body.intro-handoff #lock {
  animation: lockRise 1.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes lockRise {
  from {
    opacity: 0.35;
    transform: translateY(18px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

#intro.out {
  opacity: 0;
  transform: scale(1.03);
  filter: blur(4px);
  transition:
    opacity 1.5s cubic-bezier(0.4, 0, 0.2, 1),
    transform 1.5s cubic-bezier(0.4, 0, 0.2, 1),
    filter 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 700px) {
  .intro-content--anime .intro-title {
    font-size: clamp(1.4rem, 6.2vw, 2rem);
    max-width: 16ch;
  }
  .intro-fly-heart.go {
    animation-duration: 1.1s;
  }
  #intro.out {
    filter: none;
  }
  body.intro-handoff #lock {
    animation-duration: 0.9s;
  }
}


/* ===== HEART PARTICLE SHAPE ===== */
.intro-heart-dot {
  position: absolute !important;
  width: 3px !important;
  height: 3px !important;
  border-radius: 50%;
  background: rgba(232, 204, 150, 0.9) !important;
  box-shadow:
    0 0 6px rgba(232, 204, 150, 0.7),
    0 0 14px rgba(232, 204, 150, 0.35) !important;
  opacity: 0;
  animation: heartDotIn 2.8s ease-out forwards !important;
  will-change: transform, opacity;
}
.intro-heart-dot.star {
  width: 4px !important;
  height: 4px !important;
  background: rgba(255, 250, 240, 0.95) !important;
}
@keyframes heartDotIn {
  0% {
    opacity: 0;
    transform: scale(0.3) translateY(12px);
  }
  25% {
    opacity: 0.95;
    transform: scale(1.15) translateY(0);
  }
  55% {
    opacity: 0.85;
    transform: scale(1) translateY(0);
  }
  100% {
    opacity: 0.35;
    transform: scale(0.9) translateY(-6px);
  }
}

@media (max-width: 700px) {
  .intro-heart-dot {
    width: 2.5px !important;
    height: 2.5px !important;
    box-shadow: 0 0 5px rgba(232, 204, 150, 0.55) !important;
  }
}




/* ===== HEART ORB (particle orb → heart) ===== */
.heart-orb {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 0;
  height: 0;
  z-index: 2;
  pointer-events: none;
  transform-style: preserve-3d;
  perspective: 900px;
  opacity: 0.95;
}
.intro-content.intro-content--anime {
  position: relative;
  z-index: 4;
  max-width: min(320px, 78vw);
  padding: 20px 16px;
}
.intro-content--anime .intro-title {
  font-size: clamp(1.25rem, 4.6vw, 2.35rem) !important;
  line-height: 1.25 !important;
  max-width: 14ch !important;
}
.intro-content--anime .intro-sub {
  font-size: clamp(0.78rem, 2.4vw, 0.92rem) !important;
  max-width: 28ch !important;
  margin-top: 0 !important;
}
.intro-content--anime .intro-kicker {
  margin-bottom: 14px !important;
  letter-spacing: 0.28em !important;
  font-size: 0.62rem !important;
}
.intro-content--anime .intro-rule {
  margin: 14px 0 12px !important;
}
.intro-content--anime .intro-heart {
  margin-top: 12px !important;
  font-size: 1.1rem !important;
}

.heart-orb-dot {
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 3px;
  margin: -1.5px 0 0 -1.5px;
  border-radius: 50%;
  opacity: 0;
  background-color: hsl(var(--hue, 42), 85%, 62%);
  box-shadow: 0 0 6px hsla(var(--hue, 42), 90%, 60%, 0.75);
  transform: translate3d(0, 0, 0) scale(0.3);
  animation: heartOrbForm 6.2s ease-in-out var(--delay, 0s) forwards;
}
.heart-orb-dot--bright {
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  box-shadow: 0 0 10px hsla(var(--hue, 42), 95%, 70%, 0.9);
}
@keyframes heartOrbForm {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.2);
  }
  10% {
    opacity: 1;
  }
  22% {
    opacity: 1;
    transform: translate3d(var(--x), var(--y), var(--z)) scale(1);
  }
  70% {
    opacity: 1;
    transform: translate3d(var(--x), var(--y), var(--z)) scale(1.04);
  }
  88% {
    opacity: 0.75;
    transform: translate3d(var(--x), var(--y), var(--z)) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate3d(
      calc(var(--x) * 1.35),
      calc(var(--y) * 1.35),
      var(--z)
    ) scale(0.45);
  }
}
.heart-orb.is-on {
  animation: heartOrbSway 6.5s ease-in-out 0.3s both;
}
@keyframes heartOrbSway {
  0% { transform: rotateX(6deg) rotateY(-8deg); }
  45% { transform: rotateX(-3deg) rotateY(6deg); }
  100% { transform: rotateX(0deg) rotateY(0deg); }
}

@media (max-width: 700px) {
  .heart-orb {
    top: 46%;
  }
  .heart-orb.is-on {
    animation: none;
  }
  .heart-orb-dot {
    width: 2.5px;
    height: 2.5px;
    margin: -1.25px 0 0 -1.25px;
  }
  .heart-orb-dot--bright {
    width: 3px;
    height: 3px;
    margin: -1.5px 0 0 -1.5px;
  }
  .intro-content.intro-content--anime {
    max-width: min(260px, 72vw);
    padding: 12px 10px;
  }
  .intro-content--anime .intro-title {
    font-size: clamp(1.05rem, 5.2vw, 1.45rem) !important;
    max-width: 13ch !important;
  }
  .intro-content--anime .intro-kicker {
    letter-spacing: 0.2em !important;
    font-size: 0.58rem !important;
    margin-bottom: 10px !important;
  }
  .intro-content--anime .intro-sub {
    font-size: 0.75rem !important;
    line-height: 1.45 !important;
  }
  .intro-content--anime .intro-rule {
    margin: 10px 0 8px !important;
  }
  .intro-content--anime .intro-heart {
    display: none; /* less clutter inside heart on phone */
  }
}
@media (prefers-reduced-motion: reduce) {
  .heart-orb-dot {
    animation: none !important;
    opacity: 0.7;
    transform: translate3d(var(--x), var(--y), 0) !important;
  }
  .heart-orb.is-on { animation: none !important; }
}






/* ===== INTRO SEQUENCE: heart → disperse → text + skip ===== */
#introContent {
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition:
    opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.1s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 1.1s;
  pointer-events: none;
}
#introContent.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}

.intro-skip {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
  z-index: 20;
  border: 1px solid rgba(224, 192, 138, 0.35);
  background: rgba(0, 0, 0, 0.25);
  color: rgba(245, 239, 227, 0.85);
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 10px 16px;
  border-radius: 999px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.intro-skip:hover {
  background: rgba(224, 192, 138, 0.15);
  border-color: rgba(224, 192, 138, 0.55);
  color: #fffaf0;
}

/* heart phases */
.heart-orb {
  top: 50% !important;
  z-index: 3;
}
.heart-orb-dot {
  animation: none !important;
  opacity: 0;
  transform: translate3d(0, 0, 0) scale(0.2);
  transition:
    opacity 0.8s ease,
    transform 1.15s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--delay, 0s);
}
.heart-orb.is-on .heart-orb-dot {
  opacity: 1;
  transform: translate3d(var(--x), var(--y), var(--z)) scale(1);
}
.heart-orb.is-hold .heart-orb-dot {
  opacity: 1;
  transform: translate3d(var(--x), var(--y), var(--z)) scale(1.06);
  transition-duration: 0.9s;
}
.heart-orb.is-disperse .heart-orb-dot {
  opacity: 0;
  transform: translate3d(var(--dx), var(--dy), var(--z)) scale(0.35);
  transition-duration: 1.35s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 700px) {
  .intro-skip {
    padding: 9px 14px;
    font-size: 0.68rem;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(0, 0, 0, 0.4);
  }
  .heart-orb {
    top: 48% !important;
  }
}


/* mobile: keep sweet intro animations + denser feel */
@media (max-width: 700px) {
  .heart-orb.is-on {
    animation: heartOrbSway 6.5s ease-in-out 0.3s both !important;
  }
  .heart-orb-dot {
    width: 2.5px !important;
    height: 2.5px !important;
  }
  .intro-skip {
    transition: transform 0.2s ease, background 0.2s ease;
  }
  .intro-skip:active {
    transform: scale(0.96);
  }
  #introContent.is-visible {
    animation: introTextSweet 1.15s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
}
@keyframes introTextSweet {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.98);
    filter: blur(3px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* soft pulse on intro kicker when text shows */
.intro-text-on .intro-kicker {
  animation: kickerGlow 2.2s ease-in-out infinite alternate;
}
@keyframes kickerGlow {
  from { text-shadow: 0 0 12px rgba(232, 204, 150, 0.25); }
  to { text-shadow: 0 0 22px rgba(232, 204, 150, 0.55); }
}


/* wait for page-ready — no premature animation */
html:not(.page-ready) #intro .heart-orb-dot {
  opacity: 0 !important;
  transform: translate3d(0,0,0) scale(0.2) !important;
  transition: none !important;
}
html:not(.page-ready) #intro .intro-particle,
html:not(.page-ready) #intro .sakura-petal {
  animation-play-state: paused !important;
  opacity: 0 !important;
}


html:not(.page-anim) #intro .heart-orb-dot {
  opacity: 0 !important;
  transform: translate3d(0,0,0) scale(0.2) !important;
  transition: none !important;
}