/* ==========================================================================
   3D POP-UP BIRTHDAY CAKE & GREETING CARD STYLES (cake.css)
   Exquisite 3D Honeycomb Paper Cake matching Image 3 with LED Glow Rays,
   Cut-out "HAPPY BIRTHDAY" lettering, interactive candle, and confetti burst.
   ========================================================================== */

/* Cake Scene Overlay / Container */
.cake-scene-container {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 40%, rgba(10, 25, 47, 0.96) 0%, rgba(3, 7, 18, 0.99) 100%);
  backdrop-filter: blur(12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  perspective: 1400px;
  overflow: hidden;
}

.cake-scene-container.active {
  opacity: 1;
  pointer-events: auto;
}

/* Ambient Birthday Atmosphere */
.cake-ambient-glow {
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.15) 0%, rgba(59, 130, 246, 0.08) 50%, transparent 70%);
  filter: blur(60px);
  pointer-events: none;
  animation: ambientPulse 6s ease-in-out infinite alternate;
}

@keyframes ambientPulse {
  0% { transform: scale(0.9) translate(0, 0); opacity: 0.7; }
  100% { transform: scale(1.15) translate(0, -20px); opacity: 1; }
}

/* Close & Top Actions */
.cake-top-bar {
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1100;
}

.cake-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(212, 175, 55, 0.4);
  color: #fae19c;
  border-radius: 9999px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: all 0.3s ease;
}

.cake-back-btn:hover {
  background: rgba(212, 175, 55, 0.2);
  border-color: #d4af37;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
}

.cake-title-pill {
  color: #fef08a;
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(254, 240, 138, 0.5);
}

/* ==========================================================================
   THE 3D GREETING CARD SYSTEM
   ========================================================================== */
.card-stage {
  position: relative;
  width: 360px;
  height: 520px;
  transform-style: preserve-3d;
  transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (min-width: 768px) {
  .card-stage {
    width: 420px;
    height: 580px;
  }
}

/* The Foldable 3D Card */
.popup-card {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  cursor: pointer;
}

/* Closed Card Mode: Slightly tilted on desk */
.popup-card.is-closed {
  transform: rotateX(20deg) rotateY(-10deg) rotateZ(2deg);
  animation: cardHoverFloat 4s ease-in-out infinite alternate;
}

@keyframes cardHoverFloat {
  0% { transform: rotateX(20deg) rotateY(-10deg) rotateZ(2deg) translateY(0); }
  100% { transform: rotateX(22deg) rotateY(-8deg) rotateZ(1deg) translateY(-8px); }
}

/* Open Card Mode: Unfolded into 3D L-Shape with standing back and flat base */
.popup-card.is-open {
  transform: rotateX(25deg) rotateY(0deg) rotateZ(0deg) translateY(60px);
}

/* 1. FRONT COVER (Folds open like a book cover) */
.card-front-cover {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #0f274a 0%, #1e3a8a 50%, #0d1b2a 100%);
  border: 4px solid #d4af37;
  border-radius: 12px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8), 0 0 30px rgba(212, 175, 55, 0.3);
  transform-origin: top center;
  transform-style: preserve-3d;
  transition: transform 1.5s cubic-bezier(0.25, 1, 0.5, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px;
  z-index: 10;
  backface-visibility: hidden;
}

.popup-card.is-open .card-front-cover {
  transform: rotateX(-120deg);
  pointer-events: none;
  opacity: 0;
}

/* Ornate Cover Graphics */
.cover-filigree-frame {
  position: absolute;
  inset: 12px;
  border: 1px dashed rgba(254, 240, 138, 0.6);
  border-radius: 8px;
  pointer-events: none;
}

.cover-corner-star {
  position: absolute;
  width: 14px;
  height: 14px;
  fill: #fef08a;
}
.cover-corner-star.tl { top: 6px; left: 6px; }
.cover-corner-star.tr { top: 6px; right: 6px; }
.cover-corner-star.bl { bottom: 6px; left: 6px; }
.cover-corner-star.br { bottom: 6px; right: 6px; }

.cover-icon-cake {
  font-size: 64px;
  margin-bottom: 20px;
  filter: drop-shadow(0 0 16px rgba(250, 204, 21, 0.6));
  animation: gentleBounce 2s ease-in-out infinite;
}

@keyframes gentleBounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-8px) scale(1.05); }
}

.cover-title {
  font-family: 'Playfair Display', serif;
  font-size: 26px;
  color: #fef08a;
  text-align: center;
  letter-spacing: 1.5px;
  margin-bottom: 8px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.cover-name {
  font-family: 'Caveat', cursive;
  font-size: 38px;
  color: #ffffff;
  margin-bottom: 25px;
  text-shadow: 0 0 12px rgba(254, 240, 138, 0.8);
}

.cover-open-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  background: linear-gradient(135deg, #d4af37, #fef08a);
  color: #0f172a;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  border-radius: 9999px;
  box-shadow: 0 8px 20px rgba(212, 175, 55, 0.4);
}

/* 2. BACK CARD FACE (Upright Background Panel) */
.card-back-panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: #fffdf5;
  border: 4px solid #b91c1c; /* Crimson border like Image 3 */
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  transform-origin: bottom center;
  transform: rotateX(0deg);
  transform-style: preserve-3d;
  box-shadow: inset 0 0 40px rgba(217, 119, 6, 0.15);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 25px;
}

.popup-card.is-open .card-back-panel {
  transform: rotateX(0deg);
}

/* Radial Light Beams projected onto back panel from honeycomb cake (Image 3) */
.back-panel-light-rays {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 480px;
  height: 300px;
  background: conic-gradient(
    from 180deg at 50% 100%,
    transparent 0deg,
    rgba(254, 240, 138, 0.45) 15deg,
    transparent 28deg,
    rgba(251, 191, 36, 0.5) 45deg,
    transparent 60deg,
    rgba(254, 240, 138, 0.55) 75deg,
    transparent 90deg,
    rgba(251, 191, 36, 0.5) 105deg,
    transparent 120deg,
    rgba(254, 240, 138, 0.45) 135deg,
    transparent 150deg,
    rgba(251, 191, 36, 0.5) 165deg,
    transparent 180deg
  );
  filter: blur(8px);
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s ease 0.6s;
}

.popup-card.is-open .back-panel-light-rays {
  opacity: 1;
  animation: rayShimmer 4s ease-in-out infinite alternate;
}

@keyframes rayShimmer {
  0% { opacity: 0.85; filter: blur(7px); }
  100% { opacity: 1; filter: blur(5px); }
}

/* Laser-cut fireworks & party hats on back face (Image 3) */
.back-panel-laser-art {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.8;
}

.firework-cutout {
  position: absolute;
  top: 20px;
  right: 40px;
  width: 80px;
  height: 80px;
  stroke: #b45309;
}

.party-hat-cutout {
  position: absolute;
  top: 40px;
  left: 35px;
  width: 40px;
  height: 40px;
  fill: #b45309;
}

/* 3. BOTTOM CARD BASE (Laying horizontal/flat) */
.card-base-panel {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: #fffdf5;
  border: 4px solid #b91c1c;
  border-top: 1px dashed rgba(185, 28, 28, 0.3);
  border-radius: 0 0 12px 12px;
  transform-origin: top center;
  transform: rotateX(-90deg);
  transform-style: preserve-3d;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 20px;
}

.popup-card.is-open .card-base-panel {
  transform: rotateX(-90deg);
}

/* Inscribed gold foil pocket & message (Image 3) */
.base-gold-pocket {
  position: relative;
  width: 84%;
  padding: 12px 16px;
  border: 1px solid rgba(217, 119, 6, 0.4);
  border-radius: 8px;
  background: rgba(254, 249, 195, 0.5);
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.base-pocket-bunting {
  width: 100%;
  height: 18px;
  stroke: #d97706;
  fill: none;
  margin-bottom: 4px;
}

.base-pocket-text {
  font-family: 'Caveat', cursive;
  font-size: 24px;
  color: #92400e;
  font-weight: 700;
  line-height: 1.2;
}

.base-pocket-sub {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  color: #b45309;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ==========================================================================
   THE 3-TIER HONEYCOMB PAPER CAKE (POP-UP CORE)
   ========================================================================== */
.cake-3d-wrapper {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateZ(10px);
  width: 260px;
  height: 220px;
  transform-style: preserve-3d;
  pointer-events: auto;
}

/* Pop-up unfolding transformation */
.cake-3d-wrapper {
  transform: translateX(-50%) translateZ(0) scale(0.1) rotateX(90deg);
  opacity: 0;
  transition: transform 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s, opacity 0.6s ease 0.3s;
}

.popup-card.is-open .cake-3d-wrapper {
  transform: translateX(-50%) translateZ(40px) scale(1) rotateX(0deg);
  opacity: 1;
}

/* Internal LED Glow illuminating the honeycomb tiers */
.cake-internal-light {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 160px;
  height: 140px;
  background: radial-gradient(circle, rgba(255, 230, 100, 0.95) 0%, rgba(245, 158, 11, 0.8) 40%, rgba(239, 68, 68, 0.4) 75%, transparent 100%);
  border-radius: 50%;
  filter: blur(14px);
  pointer-events: none;
  animation: ledPulse 2.5s ease-in-out infinite alternate;
  z-index: 1;
}

@keyframes ledPulse {
  0% { transform: translateX(-50%) scale(0.92); opacity: 0.8; }
  100% { transform: translateX(-50%) scale(1.08); opacity: 1; }
}

/* TIER BASE CONTAINER */
.cake-tier {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  transform-style: preserve-3d;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 5;
}

/* TIER 1: BOTTOM TIER ("BIRTHDAY") */
.tier-1 {
  bottom: 0px;
  width: 250px;
  height: 60px;
}

/* TIER 2: MIDDLE TIER ("HAPPY") */
.tier-2 {
  bottom: 60px;
  width: 190px;
  height: 52px;
}

/* TIER 3: TOP TIER */
.tier-3 {
  bottom: 112px;
  width: 130px;
  height: 44px;
}

/* Honeycomb Accordion Paper Ribs (Image 3) */
.honeycomb-accordion {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  background: repeating-linear-gradient(
    90deg,
    #fffdf5 0px,
    #fffdf5 4px,
    #fef08a 5px,
    #f59e0b 6px,
    #b45309 8px,
    #ffffff 9px,
    #fffdf5 13px
  );
  border-radius: 8px;
  box-shadow: 
    0 10px 25px rgba(245, 158, 11, 0.4),
    inset 0 2px 6px rgba(255, 255, 255, 0.9),
    inset 0 -4px 8px rgba(180, 83, 9, 0.3);
  overflow: hidden;
  border-bottom: 2px solid #b45309;
}

/* Laser-cut lettering banner across each tier */
.tier-cutout-banner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  z-index: 8;
  pointer-events: none;
}

.tier-1 .tier-cutout-banner {
  gap: 7px;
}

.cutout-letter {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 900;
  color: #dc2626; /* Crimson cut-out lettering like Image 3 */
  text-shadow: 
    0 0 8px rgba(254, 240, 138, 0.9),
    0 2px 4px rgba(0, 0, 0, 0.25);
  letter-spacing: 2px;
  transform: translateZ(5px);
}

.tier-2 .cutout-letter {
  font-size: 20px;
}

/* Honeycomb scallop frills (top & bottom edges) */
.honeycomb-scallop-top {
  position: absolute;
  top: -4px;
  left: 0;
  right: 0;
  height: 8px;
  background-image: radial-gradient(circle at 50% 0%, #dc2626 4px, transparent 5px);
  background-size: 10px 8px;
}

.honeycomb-scallop-bottom {
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 8px;
  background-image: radial-gradient(circle at 50% 100%, #dc2626 4px, transparent 5px);
  background-size: 10px 8px;
}

/* ==========================================================================
   THE 3D BIRTHDAY CANDLE & INTERACTIVE FLAME
   ========================================================================== */
.cake-candle-wrapper {
  position: absolute;
  bottom: 156px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  z-index: 20;
  transition: transform 0.2s ease;
}

.cake-candle-wrapper:hover {
  transform: translateX(-50%) scale(1.1);
}

/* Flame Core */
.candle-flame-container {
  position: relative;
  width: 18px;
  height: 26px;
  display: flex;
  justify-content: center;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.candle-flame {
  position: absolute;
  bottom: 2px;
  width: 14px;
  height: 24px;
  background: radial-gradient(ellipse at 50% 80%, #ffffff 0%, #fef08a 35%, #f59e0b 65%, #ef4444 95%);
  border-radius: 50% 50% 35% 35% / 60% 60% 40% 40%;
  box-shadow: 
    0 0 16px rgba(251, 191, 36, 0.9),
    0 0 30px rgba(245, 158, 11, 0.6);
  animation: flameFlicker 1.8s ease-in-out infinite alternate;
}

@keyframes flameFlicker {
  0% { transform: scale(1) rotate(-1deg); }
  25% { transform: scale(1.06, 0.96) rotate(2deg); }
  50% { transform: scale(0.96, 1.04) rotate(-2deg); }
  75% { transform: scale(1.08, 0.98) rotate(1deg); }
  100% { transform: scale(1) rotate(-1deg); }
}

/* Candle Wick */
.candle-wick {
  width: 2px;
  height: 7px;
  background: #451a03;
  margin-top: 1px;
}

/* Striped Candle Body (Image 3) */
.candle-body {
  width: 14px;
  height: 34px;
  background: repeating-linear-gradient(
    -45deg,
    #ffffff 0px,
    #ffffff 4px,
    #ef4444 5px,
    #ef4444 9px
  );
  border-radius: 3px 3px 2px 2px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3), inset 0 0 4px rgba(0, 0, 0, 0.2);
}

/* Smoke wisps after blowing out */
.flame-smoke {
  position: absolute;
  top: 0;
  width: 6px;
  height: 6px;
  background: rgba(226, 232, 240, 0.8);
  border-radius: 50%;
  filter: blur(2px);
  opacity: 0;
  pointer-events: none;
}

.candle-flame-container.is-extinguished .candle-flame {
  opacity: 0;
  transform: scale(0.1);
}

.candle-flame-container.is-extinguished .flame-smoke {
  animation: smokeCurl 1.8s ease-out forwards;
}

@keyframes smokeCurl {
  0% { opacity: 0.9; transform: translateY(0) scale(1); }
  50% { opacity: 0.6; transform: translateY(-30px) translateX(10px) scale(2.5); }
  100% { opacity: 0; transform: translateY(-70px) translateX(-15px) scale(4); }
}

/* ==========================================================================
   INTERACTIVE ACTION BAR & CELEBRATION
   ========================================================================== */
.cake-bottom-actions {
  position: absolute;
  bottom: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  z-index: 1050;
}

.blow-candle-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 28px;
  background: linear-gradient(135deg, #d4af37, #fef08a, #d4af37);
  background-size: 200% auto;
  color: #0f172a;
  border: none;
  border-radius: 9999px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 25px rgba(212, 175, 55, 0.5);
  transition: all 0.3s ease;
  animation: btnGlow 3s ease infinite;
}

@keyframes btnGlow {
  0%, 100% { background-position: 0% center; box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4); }
  50% { background-position: 100% center; box-shadow: 0 8px 35px rgba(254, 240, 138, 0.7); }
}

.blow-candle-btn:hover {
  transform: translateY(-2px) scale(1.04);
}

.blow-candle-btn:active {
  transform: translateY(1px) scale(0.98);
}

.cake-instructions-tip {
  color: rgba(254, 240, 138, 0.8);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px;
  letter-spacing: 0.5px;
}

/* Confetti Canvas */
#confetti-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2000;
}

/* Wish Banner Pop-up after candle is blown */
.birthday-wish-card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  width: 90%;
  max-width: 420px;
  background: rgba(15, 23, 42, 0.95);
  border: 2px solid #d4af37;
  border-radius: 16px;
  padding: 30px 24px;
  text-align: center;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), 0 0 35px rgba(212, 175, 55, 0.4);
  backdrop-filter: blur(16px);
  opacity: 0;
  pointer-events: none;
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 2100;
}

.birthday-wish-card.show {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.wish-card-sparkle {
  font-size: 36px;
  margin-bottom: 12px;
}

.wish-card-title {
  font-family: 'Playfair Display', serif;
  font-size: 26px;
  color: #fef08a;
  margin-bottom: 8px;
}

.wish-card-text {
  font-family: 'Caveat', cursive;
  font-size: 22px;
  color: #ffffff;
  line-height: 1.5;
  margin-bottom: 20px;
}

.wish-card-close-btn {
  padding: 8px 24px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid #d4af37;
  color: #fef08a;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s;
}

.wish-card-close-btn:hover {
  background: rgba(212, 175, 55, 0.3);
}

.wish-card-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}

/* ==========================================================================
   WATCH VIDEO: "MUJIB" BUTTON & THEATER MODAL
   ========================================================================== */
.watch-video-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 280px;
  padding: 13px 28px;
  background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 50%, #d4af37 100%);
  color: #ffffff;
  border: 1px solid rgba(254, 240, 138, 0.6);
  border-radius: 9999px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  box-shadow: 0 8px 25px rgba(37, 99, 235, 0.6), 0 0 20px rgba(212, 175, 55, 0.4);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  animation: videoGlow 2.5s ease-in-out infinite alternate;
}

@keyframes videoGlow {
  0% { box-shadow: 0 8px 25px rgba(37, 99, 235, 0.5), 0 0 15px rgba(212, 175, 55, 0.3); transform: scale(1); }
  100% { box-shadow: 0 12px 35px rgba(37, 99, 235, 0.8), 0 0 25px rgba(254, 240, 138, 0.6); transform: scale(1.03); }
}

.watch-video-btn:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 14px 40px rgba(37, 99, 235, 0.9), 0 0 30px rgba(254, 240, 138, 0.8);
}

.secondary-video-btn {
  max-width: 240px;
  padding: 10px 22px;
  font-size: 13px;
  background: rgba(11, 21, 45, 0.85);
  border: 1px solid #d4af37;
  color: #fef08a;
  animation: none;
}

.secondary-video-btn:hover {
  background: rgba(29, 78, 216, 0.6);
  color: #ffffff;
}

.letter-video-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 20px;
  background: rgba(29, 78, 216, 0.1);
  border: 1px solid rgba(29, 78, 216, 0.4);
  color: #1d4ed8;
  border-radius: 9999px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
}

.letter-video-btn:hover {
  background: #1d4ed8;
  color: #ffffff;
  transform: translateY(-1px);
}

/* Video Modal Backdrop & Card */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 3500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.video-modal.active {
  opacity: 1;
  pointer-events: auto;
}

.video-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 7, 18, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.video-modal-card {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 680px;
  background: #0b152d;
  border: 2px solid #d4af37;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.9), 0 0 40px rgba(212, 175, 55, 0.4);
  transform: scale(0.92);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}

.video-modal.active .video-modal-card {
  transform: scale(1);
}

.video-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: rgba(15, 27, 56, 0.95);
  border-bottom: 1px solid rgba(212, 175, 55, 0.3);
}

.video-badge {
  display: block;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #d4af37;
  font-weight: 700;
  margin-bottom: 2px;
}

.video-title {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  color: #ffffff;
  letter-spacing: 0.5px;
}

.video-close-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(254, 240, 138, 0.4);
  color: #fef08a;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.25s ease;
}

.video-close-btn:hover {
  background: rgba(212, 175, 55, 0.35);
  transform: scale(1.08);
}

.video-frame {
  position: relative;
  width: 100%;
  background: #000000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.video-frame video {
  width: 100%;
  max-height: 72vh;
  object-fit: contain;
  display: block;
  outline: none;
}