/* ===== Reset & Base ===== */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  cursor: none;
  user-select: none;
  -webkit-user-select: none;
  font-family: 'Noto Sans KR', sans-serif;
  background: linear-gradient(135deg, #FFF5F5, #F0F4FF, #FFF5F0, #FFF5F5);
  background-size: 400% 400%;
  animation: gradientShift 12s ease infinite;
}

@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  25%  { background-position: 100% 0%; }
  50%  { background-position: 100% 50%; }
  75%  { background-position: 0% 100%; }
  100% { background-position: 0% 50%; }
}

/* ===== Z-Index System ===== */
/* background decorations: 1  */
/* floating decorations:  10  */
/* fixed decorations:     20  */
/* sparkles:              45  */
/* name area:             50  */

/* ===== Decoration Base ===== */
.decoration {
  position: fixed;
  pointer-events: none;
}

/* ===== Asset Image Styling ===== */
/* Images already have transparent backgrounds — no border-radius clipping needed */
.cake, .gift, .teddy {
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.08));
}

/* ===== Background Confetti ===== */
.confetti-bg {
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  opacity: 0.12;
  z-index: 1;
  border-radius: 0;
}

/* ===== Top Garland (CSS-drawn bunting) ===== */
.garland {
  position: fixed;
  pointer-events: none;
  top: 0;
  left: 0;
  width: 100vw;
  height: 7vh;
  z-index: 20;
  overflow: visible;
}

.garland-string {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4.5vh;
  pointer-events: none;
}

.garland-flags {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-evenly;
  align-items: flex-start;
  padding: 0 1vw;
}

.flag {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: clamp(8px, 1.8vw, 22px) solid transparent;
  border-right: clamp(8px, 1.8vw, 22px) solid transparent;
  border-top: clamp(16px, 3.6vw, 44px) solid currentColor;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.08));
  flex-shrink: 0;

  /* 개별 깃발 바람 흔들림 */
  animation: flagWave 3s ease-in-out infinite;
  transform-origin: top center;
}

/* 물리 기반: 가장자리=작고 빠름, 가운데=크고 느림 */
.flag-1  { animation-delay: 0s;    animation-duration: 2.0s; margin-top: 0;      --sw: 2deg; }
.flag-2  { animation-delay: 0.15s; animation-duration: 2.2s; margin-top: 0.5vh;  --sw: 3.5deg; }
.flag-3  { animation-delay: 0.3s;  animation-duration: 2.5s; margin-top: 1.0vh;  --sw: 5deg; }
.flag-4  { animation-delay: 0.45s; animation-duration: 2.7s; margin-top: 1.35vh; --sw: 6deg; }
.flag-5  { animation-delay: 0.6s;  animation-duration: 2.9s; margin-top: 1.65vh; --sw: 7deg; }
.flag-6  { animation-delay: 0.75s; animation-duration: 3.1s; margin-top: 1.85vh; --sw: 7.5deg; }
.flag-7  { animation-delay: 0.9s;  animation-duration: 3.3s; margin-top: 1.95vh; --sw: 8deg; }
.flag-8  { animation-delay: 1.05s; animation-duration: 3.5s; margin-top: 2.0vh;  --sw: 8deg; }
.flag-9  { animation-delay: 1.2s;  animation-duration: 3.3s; margin-top: 1.95vh; --sw: 8deg; }
.flag-10 { animation-delay: 1.35s; animation-duration: 3.1s; margin-top: 1.85vh; --sw: 7.5deg; }
.flag-11 { animation-delay: 1.5s;  animation-duration: 2.9s; margin-top: 1.65vh; --sw: 7deg; }
.flag-12 { animation-delay: 1.65s; animation-duration: 2.7s; margin-top: 1.35vh; --sw: 6deg; }
.flag-13 { animation-delay: 1.8s;  animation-duration: 2.5s; margin-top: 1.0vh;  --sw: 5deg; }
.flag-14 { animation-delay: 1.95s; animation-duration: 2.2s; margin-top: 0.5vh;  --sw: 3.5deg; }
.flag-15 { animation-delay: 2.1s;  animation-duration: 2.0s; margin-top: 0;      --sw: 2deg; }

.flag-1  { color: #FF6B9D; }
.flag-2  { color: #FFB347; }
.flag-3  { color: #7CC6FE; }
.flag-4  { color: #A8E06C; }
.flag-5  { color: #C689E8; }
.flag-6  { color: #FF6B9D; }
.flag-7  { color: #FFD93D; }
.flag-8  { color: #7CC6FE; }
.flag-9  { color: #FF8C5A; }
.flag-10 { color: #A8E06C; }
.flag-11 { color: #C689E8; }
.flag-12 { color: #FFB347; }
.flag-13 { color: #7CC6FE; }
.flag-14 { color: #FF6B9D; }
.flag-15 { color: #FFD93D; }

/* ===== Corner Invitations ===== */
.invitation {
  width: clamp(60px, 8vw, 120px);
  height: auto;
  z-index: 20;
  opacity: 0.85;
}

.invitation-left {
  top: 10vh;
  left: 2vw;
}

.invitation-right {
  top: 10vh;
  right: 2vw;
  transform: scaleX(-1);
}

/* ===== Animal Friends ===== */
.animal-friends {
  top: 2vh;
  right: 8vw;
  width: clamp(80px, 12vw, 180px);
  height: auto;
  z-index: 20;
  opacity: 0.9;
}

/* ===== Floating Decorations Container ===== */
#floating-decorations {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10;
  pointer-events: none;
}

/* ===== Name Display Area ===== */
.name-area {
  position: fixed;
  top: 48%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Increased width constraints for the wider frame */
  width: clamp(500px, 90vw, 1400px);
  height: clamp(350px, 65vh, 700px);
}

.frame-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.95; /* Increased opacity as requested implicitly by "making it wider" usually implies visibility */
  z-index: -1;
  pointer-events: none;
}

.party-hat {
  position: absolute;
  top: -12vh; /* Moved up further to clear the frame */
  left: 50%;
  transform: translateX(-50%);
  width: clamp(80px, 12vw, 160px);
  height: auto;
  z-index: 51;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.party-hat.visible {
  opacity: 1;
}

.name-content {
  text-align: center;
  overflow: visible;
  width: 80%; /* Constrain text width within the frame */
  padding: 0;
  margin-top: 4vh; /* Added spacing from top */
}

/* ===== Typography ===== */
.welcome-message {
  font-family: 'Noto Sans KR', sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3.5rem); /* Slightly larger */
  
  /* Rainbow Gradient Text */
  background: linear-gradient(to right, #FF6B9D, #FFB347, #A8E06C, #7CC6FE, #C689E8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  
  /* Removed text-shadow as it conflicts with gradient text depending on browse support, 
     but added a filter drop-shadow instead for legibility if needed, or kept clean. */
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
  
  margin-bottom: 2vh; /* Increased spacing */
  opacity: 0;
  transition: opacity 0.4s ease;
}

.welcome-message.visible {
  opacity: 1;
}

.friend-name {
  font-family: 'Jua', sans-serif;
  font-size: clamp(6rem, 13vw, 18rem); /* Slightly larger to fill the wider space */
  color: #FF6B9D;                      /* JS가 덮기 전 fallback */
  -webkit-background-clip: text;       /* gradient text 지원 */
  background-clip: text;
  text-shadow:
    0 4px 16px rgba(255, 107, 157, 0.35),
    0 0 40px rgba(255, 107, 157, 0.15);
  line-height: 1.1;
  min-height: 1.1em;
  white-space: nowrap;
  will-change: transform, opacity;
}

.birthday-subtitle {
  font-family: 'Jua', sans-serif;
  font-size: clamp(1.4rem, 3vw, 2.5rem);

  /* Rainbow Gradient Text — .welcome-message와 동일 패턴 */
  background: linear-gradient(to right, #FF6B9D, #FFB347, #A8E06C, #7CC6FE, #C689E8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));

  /* 카드 밖 아래로 이동 */
  position: absolute;
  bottom: -4vh;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  opacity: 1;
}

/* ===== Sparkle Particles Container ===== */
/* z-index 45: behind name-area (50) so sparkles don't cover the name text */
.sparkle-container {
  position: fixed;
  top: 48%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(400px, 80vw, 1200px);
  height: clamp(300px, 60vh, 650px);
  z-index: 45;
  pointer-events: none;
}

.sparkle-particle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

/* Star shape via clip-path */
.sparkle-particle::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: inherit;
  clip-path: polygon(
    50% 0%, 61% 35%, 98% 35%, 68% 57%,
    79% 91%, 50% 70%, 21% 91%, 32% 57%,
    2% 35%, 39% 35%
  );
}

.sparkle-particle.active {
  animation: sparklePopFade 1.5s ease-out forwards;
}

/* ===== Bottom Decorations ===== */
.cake {
  bottom: 1vh;
  left: 50%;
  margin-left: calc(-1 * clamp(40px, 6vw, 90px));
  width: clamp(80px, 12vw, 160px);
  height: auto;
  z-index: 20;
  transform-origin: center bottom;
}

.gift {
  bottom: 1vh;
  width: clamp(50px, 7vw, 110px);
  height: auto;
  z-index: 20;
}

.gift-left {
  left: 18vw;
}

.gift-right {
  right: 18vw;
}

.teddy {
  bottom: 0.5vh;
  width: clamp(50px, 8vw, 120px);
  height: auto;
  z-index: 20;
}

.teddy-left {
  left: 2vw;
}

.teddy-right {
  right: 2vw;
}

/* Flip right teddy via a wrapper animation that includes scaleX(-1) */
.teddy-right.anim-wobble {
  animation: wobbleFlipped 3s ease-in-out infinite;
}

@keyframes wobbleFlipped {
  0% { transform: scaleX(-1) rotate(0deg); }
  20% { transform: scaleX(-1) rotate(5deg); }
  40% { transform: scaleX(-1) rotate(0deg); }
  60% { transform: scaleX(-1) rotate(-5deg); }
  80% { transform: scaleX(-1) rotate(0deg); }
  100% { transform: scaleX(-1) rotate(0deg); }
}

/* ===== Name Slide Animations ===== */
/* Keyframes defined in animations.css (slideInRight, slideOutLeft) */
.friend-name.slide-in {
  animation: slideInRight 800ms cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  will-change: transform, opacity;
}

.friend-name.slide-out {
  animation: slideOutLeft 800ms cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
  will-change: transform, opacity;
}