/* Modern elegant styles for graduation invitation */
:root {
  --primary-color: #1a1a2e;
  --secondary-color: #16213e;
  --accent-color: #0f3460;
  --gold-color: #d4af37;
  --light-gold: #f7d794;
  --cream-color: #ffeaa7;
  --dark-color: #2d3436;
  --light-color: #ffffff;
  --glass-bg: rgba(255, 255, 255, 0.1);
  --glass-border: rgba(255, 255, 255, 0.2);
  --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  --gradient-gold: linear-gradient(135deg, #d4af37 0%, #f7d794 50%, #d4af37 100%);
  --gradient-dark: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.1);
  --shadow-medium: 0 15px 40px rgba(0, 0, 0, 0.15);
  --shadow-strong: 0 20px 50px rgba(0, 0, 0, 0.25);
  --transition-fast: 0.3s ease;
  --transition-smooth: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  --border-radius: 15px;
}

/* Modern Glass Morphism Opening Modal with Enhanced Gradient */
.opening-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('../img/modal.webp');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Changed to move content to the top */
  padding-top: 8vh; /* Added padding to push content down from the top */
  align-items: center;
  z-index: 9999;
  transition: all var(--transition-smooth);
  backdrop-filter: blur(20px);
  overflow: hidden;
}

.opening-modal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 20%, rgba(255, 215, 0, 0.25) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(255, 140, 0, 0.2) 0%, transparent 60%),
    radial-gradient(circle at 60% 40%, rgba(128, 0, 0, 0.3) 0%, transparent 45%),
    radial-gradient(circle at 40% 70%, rgba(255, 69, 0, 0.15) 0%, transparent 55%),
    radial-gradient(circle at 90% 30%, rgba(165, 42, 42, 0.2) 0%, transparent 40%),
    linear-gradient(45deg, rgba(139, 0, 0, 0.1) 0%, rgba(255, 140, 0, 0.05) 100%);
  animation: enhancedBgShift 25s ease-in-out infinite alternate;
}

@keyframes enhancedBgShift {
  0% { 
    transform: scale(1) rotate(0deg);
    opacity: 0.7;
    filter: hue-rotate(0deg);
  }
  33% { 
    transform: scale(1.05) rotate(0.5deg);
    opacity: 0.9;
    filter: hue-rotate(5deg);
  }
  66% { 
    transform: scale(0.98) rotate(-0.3deg);
    opacity: 0.8;
    filter: hue-rotate(-3deg);
  }
  100% { 
    transform: scale(1.02) rotate(0.2deg);
    opacity: 1;
    filter: hue-rotate(2deg);
  }
}

.opening-modal.fade-out {
  opacity: 0;
  visibility: hidden;
  transform: scale(0.85);
  filter: blur(10px);
  animation: modalExit 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Modern Modal Exit Animation */
@keyframes modalExit {
  0% {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    filter: blur(0px);
    backdrop-filter: blur(20px);
  }
  30% {
    transform: scale(1.02) rotateX(2deg);
    filter: blur(2px);
  }
  60% {
    transform: scale(0.92) rotateX(-1deg);
    opacity: 0.6;
    filter: blur(5px);
    backdrop-filter: blur(15px);
  }
  90% {
    transform: scale(0.85) rotateX(0deg);
    opacity: 0.1;
    filter: blur(10px);
    backdrop-filter: blur(5px);
  }
  100% {
    opacity: 0;
    visibility: hidden;
    transform: scale(0.75) translateY(-50px);
    filter: blur(15px);
    backdrop-filter: blur(0px);
  }
}

/* Main Content Enter Animation */
.main-content-enter {
  opacity: 0;
  transform: translateY(50px) scale(0.95);
  filter: blur(8px);
  animation: mainContentEnter 1s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards;
}

@keyframes mainContentEnter {
  0% {
    opacity: 0;
    transform: translateY(50px) scale(0.95);
    filter: blur(8px);
  }
  20% {
    opacity: 0.3;
    transform: translateY(30px) scale(0.97);
    filter: blur(5px);
  }
  50% {
    opacity: 0.7;
    transform: translateY(10px) scale(0.99);
    filter: blur(2px);
  }
  80% {
    opacity: 0.9;
    transform: translateY(-2px) scale(1.01);
    filter: blur(0px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px) scale(1);
    filter: blur(0px);
  }
}

/* Particle Transition Effect */
.transition-particles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  pointer-events: none;
  opacity: 0;
}

.transition-particles.active {
  opacity: 1;
  animation: particleTransition 1.5s ease-out forwards;
}

@keyframes particleTransition {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  20% {
    opacity: 1;
    transform: scale(1);
  }
  80% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    opacity: 0;
    transform: scale(1.2);
  }
}

/* Logo Morphing Transition */
.logo-morph-transition {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  z-index: 9998;
  opacity: 0;
  pointer-events: none;
  transition: all 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.logo-morph-transition.active {
  opacity: 1;
  animation: logoMorphTransition 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes logoMorphTransition {
  0% {
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
    opacity: 1;
    filter: brightness(1) blur(0px);
  }
  25% {
    transform: translate(-50%, -50%) scale(1.1) rotate(2deg);
    opacity: 0.8;
    filter: brightness(1.2) blur(1px);
  }
  50% {
    transform: translate(-50%, -50%) scale(0.8) rotate(-1deg);
    opacity: 0.6;
    filter: brightness(1.4) blur(3px);
  }
  75% {
    transform: translate(-50%, -50%) scale(0.6) rotate(1deg);
    opacity: 0.3;
    filter: brightness(1.6) blur(5px);
  }
  100% {
    transform: translate(-50%, -50%) scale(0.4) rotate(0deg);
    opacity: 0;
    filter: brightness(2) blur(8px);
  }
}

.opening-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 120px; /* Increased space between logo and button for larger logo */
  position: relative;
  z-index: 2;
}

.logo-container {
  margin-bottom: 0; /* Replaced with gap in the new parent container */
  width: 75vw; /* Default for desktop - Increased for larger screens */
  max-width: 800px; /* Increased for better desktop visibility */
  animation: logoFloat 6s ease-in-out infinite;
  position: relative;
  z-index: 2;
  padding: 0;
  background: transparent;
  backdrop-filter: none;
  border-radius: 0;
  border: none;
  box-shadow: none; /* Removed box-shadow */
  transition: all 0.3s ease;
}

@keyframes logoFloat {
  0%, 100% {
    transform: translateY(0px) rotate(0deg) scale(1);
  }
  25% {
    transform: translateY(-20px) rotate(1deg) scale(1.02);
  }
  50% {
    transform: translateY(-25px) rotate(0deg) scale(1.05);
  }
  75% {
    transform: translateY(-15px) rotate(-1deg) scale(1.02);
  }
}

.logo-container img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 5px 15px rgba(0,0,0,0.1));
  transition: all 0.3s ease;
}

.logo-container:hover img {
  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.5)) drop-shadow(0 8px 20px rgba(212, 175, 55, 0.5));
  transform: scale(1.05);
}

.open-invitation-btn {
  background: var(--gradient-gold);
  color: var(--dark-color);
  border: none;
  padding: 15px 30px; /* Adjusted padding */
  border-radius: 50px;
  font-size: 16px; /* Adjusted font size */
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-medium);
  transition: all var(--transition-smooth);
  position: relative;
  z-index: 2;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 15px;
  text-transform: uppercase;
  letter-spacing: 1px;
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255,255,255,0.2);
}

.open-invitation-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  transition: left 0.5s;
}

.open-invitation-btn:hover::before {
  left: 100%;
}

.open-invitation-btn:hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: var(--shadow-strong);
  background: linear-gradient(135deg, #f7d794 0%, #d4af37 50%, #f7d794 100%);
}

.open-invitation-btn:active {
  transform: translateY(-2px) scale(1.02);
}

.open-invitation-btn i {
  font-size: 20px;
  /* animation: pulse 2s infinite; */
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

/* Graduate Character Animation for Opening with Divine Light Effects */
.opening-character {
  position: absolute;
  bottom: 60px;
  right: 30px;
  width: 280px; /* Increased to accommodate larger character */
  height: 280px; /* Increased to accommodate larger character */
  z-index: 9999; /* Lower than wave-container */
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Add light rays effect behind the graduate */
.opening-character::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 320px; /* Increased to match larger character */
  height: 320px; /* Increased to match larger character */
  transform: translate(-50%, -50%);
  background: 
    conic-gradient(from 0deg, 
      transparent 0deg, 
      rgba(255, 255, 255, 0.08) 10deg, 
      transparent 20deg, 
      rgba(255, 255, 255, 0.04) 30deg, 
      transparent 40deg, 
      rgba(255, 255, 255, 0.06) 50deg, 
      transparent 60deg, 
      rgba(255, 255, 255, 0.05) 70deg, 
      transparent 80deg, 
      rgba(255, 255, 255, 0.09) 90deg, 
      transparent 100deg, 
      rgba(255, 255, 255, 0.03) 110deg, 
      transparent 120deg,
      rgba(255, 255, 255, 0.07) 130deg,
      transparent 360deg);
  border-radius: 50%;
  animation: lightRaysRotation 20s linear infinite;
  z-index: -2;
  opacity: 0.5; /* Reduced from 0.7 for subtler effect */
}

@keyframes lightRaysRotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* Graduate Student Image with Glowing White Light Effect */
.graduate-student-img {
  width: 250px; /* Increased to better match speech bubble */
  height: auto;
  max-width: 250px; /* Increased to better match speech bubble */
  filter: drop-shadow(0 8px 25px rgba(0,0,0,0.25))
          drop-shadow(0 0 30px rgba(255, 255, 255, 0.4))
          drop-shadow(0 0 60px rgba(255, 255, 255, 0.3))
          drop-shadow(0 0 90px rgba(255, 255, 255, 0.15));
  animation: studentEntrance 1.2s ease-out 0.3s both,
             studentFloat 3s ease-in-out 1.5s infinite,
             divineGlow 4s ease-in-out infinite alternate;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
}

/* Graduate Student Video with same styling as image */
.graduate-student-video {
  width: 250px; /* Increased to match image size */
  height: auto;
  max-width: 250px; /* Increased to match image size */
  filter: drop-shadow(0 8px 25px rgba(0,0,0,0.25))
          drop-shadow(0 0 30px rgba(255, 255, 255, 0.4))
          drop-shadow(0 0 60px rgba(255, 255, 255, 0.3))
          drop-shadow(0 0 90px rgba(255, 255, 255, 0.15));
  animation: studentEntrance 1.2s ease-out 0.3s both,
             studentFloat 3s ease-in-out 1.5s infinite,
             divineGlow 4s ease-in-out infinite alternate;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  background: transparent;
  object-fit: contain;
}

/* Shared styles for both image and video elements */
#graduate-student {
  /* Ensure consistent styling regardless of element type */
  border: none;
  outline: none;
}

/* Add glowing aura around the graduate */
.graduate-student-img::before,
.graduate-student-video::before {
  content: '';
  position: absolute;
  top: -15px;
  left: -15px;
  right: -15px;
  bottom: -15px;
  background: radial-gradient(ellipse at center, 
    rgba(255, 255, 255, 0.2) 0%, 
    rgba(255, 255, 255, 0.1) 30%, 
    rgba(255, 255, 255, 0.03) 60%, 
    transparent 100%);
  border-radius: 50%;
  animation: auraBreathing 3s ease-in-out infinite alternate;
  z-index: -1;
  pointer-events: none;
}

@keyframes divineGlow {
  0% {
    filter: drop-shadow(0 8px 25px rgba(0,0,0,0.25))
            drop-shadow(0 0 25px rgba(255, 255, 255, 0.3))
            drop-shadow(0 0 50px rgba(255, 255, 255, 0.2))
            drop-shadow(0 0 75px rgba(255, 255, 255, 0.1));
  }
  100% {
    filter: drop-shadow(0 8px 25px rgba(0,0,0,0.25))
            drop-shadow(0 0 35px rgba(255, 255, 255, 0.5))
            drop-shadow(0 0 70px rgba(255, 255, 255, 0.3))
            drop-shadow(0 0 105px rgba(255, 255, 255, 0.2));
  }
}

@keyframes auraBreathing {
  0% {
    transform: scale(0.96);
    opacity: 0.4;
  }
  100% {
    transform: scale(1.04);
    opacity: 0.7;
  }
}

.graduate-student-img:hover,
.graduate-student-video:hover {
  transform: scale(1.03);
  filter: drop-shadow(0 12px 35px rgba(0,0,0,0.3))
          drop-shadow(0 0 45px rgba(255, 255, 255, 0.7))
          drop-shadow(0 0 90px rgba(255, 255, 255, 0.5))
          drop-shadow(0 0 135px rgba(255, 255, 255, 0.3));
  animation: studentEntrance 1.2s ease-out 0.3s both,
             studentFloat 2s ease-in-out infinite,
             studentExcited 0.5s ease-in-out infinite alternate,
             divineGlowIntense 2s ease-in-out infinite alternate;
}

@keyframes divineGlowIntense {
  0% {
    filter: drop-shadow(0 15px 40px rgba(0,0,0,0.4))
            drop-shadow(0 0 40px rgba(255, 255, 255, 0.9))
            drop-shadow(0 0 80px rgba(255, 255, 255, 0.6))
            drop-shadow(0 0 160px rgba(255, 255, 255, 0.4));
  }
  100% {
    filter: drop-shadow(0 15px 40px rgba(0,0,0,0.4))
            drop-shadow(0 0 80px rgba(255, 255, 255, 1.0))
            drop-shadow(0 0 160px rgba(255, 255, 255, 0.8))
            drop-shadow(0 0 240px rgba(255, 255, 255, 0.5));
  }
}

/* Graduate Character Head */
.student-head {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 65px;
  height: 70px;
  z-index: 5;
}

/* Graduation Cap */
.graduation-cap {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

.cap-top {
  width: 70px;
  height: 8px;
  background: linear-gradient(135deg, #1a1a1a 0%, #333 50%, #1a1a1a 100%);
  border-radius: 2px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  position: relative;
}

.cap-top::before {
  content: '';
  position: absolute;
  top: -3px;
  left: 50%;
  transform: translateX(-50%);
  width: 55px;
  height: 55px;
  background: linear-gradient(135deg, #2c2c2c 0%, #1a1a1a 50%, #0f0f0f 100%);
  border-radius: 50% 50% 20% 20%;
  box-shadow: 
    0 3px 8px rgba(0,0,0,0.4),
    inset 0 2px 4px rgba(255,255,255,0.1);
}

.cap-tassel {
  position: absolute;
  top: -2px;
  right: -8px;
  width: 3px;
  height: 25px;
  background: linear-gradient(to bottom, var(--gold-color) 0%, #b8860b 100%);
  border-radius: 1px;
  animation: tassleSwing 3s ease-in-out infinite 1.5s;
}

.cap-tassel::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  background: var(--gold-color);
  border-radius: 2px 2px 50% 50%;
}

/* Face */
.face {
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 55px;
  background: linear-gradient(135deg, #fdbcb4 0%, #fcb5a3 50%, #f7a991 100%);
  border-radius: 50% 50% 45% 45%;
  box-shadow: 
    0 3px 6px rgba(0,0,0,0.2),
    inset 0 2px 4px rgba(255,255,255,0.3);
}

/* Hair */
.hair {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 52px;
  height: 35px;
  background: linear-gradient(135deg, #8b4513 0%, #654321 50%, #4a2c17 100%);
  border-radius: 50% 50% 40% 40%;
  z-index: -1;
}

/* Student Eyes */
.student-eyes {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 35px;
  display: flex;
  justify-content: space-between;
}

.student-eyes .eye {
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 50%;
  box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
  position: relative;
  animation: studentBlink 4s infinite 1.5s;
}

.pupil {
  position: absolute;
  top: 3px;
  left: 4px;
  width: 5px;
  height: 5px;
  background: #333;
  border-radius: 50%;
  animation: eyeMovement 6s ease-in-out infinite 2s;
}

/* Student Nose */
.student-nose {
  position: absolute;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 4px;
  background: #f7a991;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* Student Mouth */
.student-mouth {
  position: absolute;
  top: 38px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 6px;
  border: 2px solid #d4685a;
  border-top: none;
  border-radius: 0 0 50% 50%;
  animation: studentSmile 5s ease-in-out infinite 1.8s;
}

/* Student Body */
.student-body {
  position: absolute;
  top: 75px;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 80px;
}

/* Graduation Gown */
.graduation-gown {
  position: relative;
  width: 100%;
  height: 100%;
}

.gown-body {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #1a1a1a 0%, #2c2c2c 50%, #1a1a1a 100%);
  border-radius: 15px 15px 25% 25%;
  box-shadow: 
    0 4px 8px rgba(0,0,0,0.3),
    inset 0 2px 4px rgba(255,255,255,0.1);
  border: 2px solid var(--gold-color);
}

.collar {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 15px;
  background: linear-gradient(135deg, var(--gold-color) 0%, #b8860b 100%);
  border-radius: 10px 10px 0 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Student Arms */
.student-arms {
  position: absolute;
  top: 85px;
  width: 100%;
}

.student-arm {
  position: absolute;
  width: 18px;
  height: 55px;
}

.student-arm.left-arm {
  left: 5px;
  transform-origin: top center;
  animation: studentWave 2.5s ease-in-out infinite 2s;
}

.student-arm.right-arm {
  right: 5px;
  transform-origin: top center;
}

.student-arm .upper-arm {
  width: 100%;
  height: 28px;
  background: linear-gradient(135deg, #fdbcb4 0%, #fcb5a3 100%);
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.1);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.student-arm .lower-arm {
  width: 100%;
  height: 27px;
  background: linear-gradient(135deg, #1a1a1a 0%, #2c2c2c 100%);
  border-radius: 8px;
  border: 1px solid var(--gold-color);
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  margin-top: -3px;
}

.student-arm .hand {
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  background: linear-gradient(135deg, #fdbcb4 0%, #fcb5a3 100%);
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.waving-hand {
  animation: handWave 1.5s ease-in-out infinite 2.5s;
}

/* Diploma */
.diploma {
  position: absolute;
  top: -15px;
  left: -8px;
  width: 25px;
  height: 4px;
  background: linear-gradient(135deg, #f4f4f4 0%, #e0e0e0 100%);
  border-radius: 2px;
  border: 1px solid var(--gold-color);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.diploma::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -2px;
  width: 3px;
  height: 6px;
  background: linear-gradient(135deg, #dc143c 0%, #b91c3c 100%);
  border-radius: 2px;
}

/* Student Legs */
.student-legs {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 70px;
  display: flex;
  justify-content: space-between;
}

.student-leg {
  width: 22px;
  height: 35px;
  background: linear-gradient(135deg, #1a1a1a 0%, #2c2c2c 100%);
  border-radius: 0 0 12px 12px;
  border: 2px solid var(--gold-color);
  box-shadow: 0 3px 6px rgba(0,0,0,0.3);
}

.student-leg::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 8px;
  background: linear-gradient(135deg, #2c2c2c 0%, #1a1a1a 100%);
  border-radius: 50%;
  border: 1px solid var(--gold-color);
}

.left-leg {
  animation: studentStepLeft 2s ease-in-out infinite 4s;
}

.right-leg {
  animation: studentStepRight 2s ease-in-out infinite 4.5s;
}

/* Animations for the image-based character */
@keyframes studentEntrance {
  0% {
    opacity: 0;
    transform: translateY(50px) scale(0.8);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes studentFloat {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-10px) rotate(1deg);
  }
}

@keyframes studentExcited {
  0% {
    transform: scale(1.05) rotate(-1deg);
  }
  100% {
    transform: scale(1.1) rotate(1deg);
  }
}

@keyframes speechBubbleEntrance {
  0% {
    opacity: 0;
    transform: translateX(-80%) translateY(20px) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateX(-80%) translateY(0) scale(1);
  }
}

@keyframes speechBubblePulse {
  0%, 100% {
    transform: translateX(-80%) scale(1);
  }
  50% {
    transform: translateX(-80%) scale(1.02);
  }
}

@keyframes speechBubbleExcited {
  0%, 100% {
    transform: translateX(-80%) scale(1);
  }
  50% {
    transform: translateX(-80%) scale(1.05) translateY(-3px);
  }
}

@keyframes studentWave {
  0%, 100% {
    transform: rotateZ(0deg) translateX(0px);
  }
  25% {
    transform: rotateZ(15deg) translateX(2px);
  }
  50% {
    transform: rotateZ(-10deg) translateX(-1px);
  }
  75% {
    transform: rotateZ(10deg) translateX(1px);
  }
}

@keyframes tassleSwing {
  0%, 100% {
    transform: rotateZ(0deg);
  }
  25% {
    transform: rotateZ(8deg);
  }
  50% {
    transform: rotateZ(0deg);
  }
  75% {
    transform: rotateZ(-5deg);
  }
}

@keyframes studentBlink {
  0%, 90%, 100% {
    transform: scaleY(1);
  }
  95% {
    transform: scaleY(0.1);
  }
}

@keyframes eyeMovement {
  0%, 20%, 80%, 100% {
    transform: translateX(0px);
  }
  40% {
    transform: translateX(2px);
  }
  60% {
    transform: translateX(-1px);
  }
}

@keyframes studentSmile {
  0%, 80%, 100% {
    border-color: #d4685a;
    transform: scale(1);
  }
  90% {
    border-color: #e74c3c;
    transform: scale(1.1);
  }
}

@keyframes studentStepLeft {
  0%, 50%, 100% {
    transform: translateY(0px) rotateX(0deg);
  }
  25% {
    transform: translateY(-2px) rotateX(10deg);
  }
}

@keyframes studentStepRight {
  0%, 50%, 100% {
    transform: translateY(0px) rotateX(0deg);
  }
  25% {
    transform: translateY(-2px) rotateX(-10deg);
  }
}

@keyframes studentWaveExcited {
  0%, 100% {
    transform: rotateZ(0deg) rotateY(0deg);
  }
  25% {
    transform: rotateZ(-30deg) rotateY(15deg);
  }
  50% {
    transform: rotateZ(-50deg) rotateY(20deg);
  }
  75% {
    transform: rotateZ(-30deg) rotateY(15deg);
  }
}

@keyframes studentBlinkExcited {
  0%, 70%, 100% {
    transform: scaleY(1);
  }
  80%, 90% {
    transform: scaleY(0.1);
  }
}

/* Robot Animations */
@keyframes robotBlink {
  0%, 85%, 100% {
    transform: scaleY(1);
    opacity: 1;
  }
  90%, 95% {
    transform: scaleY(0.1);
    opacity: 0.8;
  }
}

@keyframes robotTalk {
  0%, 50%, 100% {
    transform: translateX(-50%) scaleX(1);
  }
  25%, 75% {
    transform: translateX(-50%) scaleX(1.3);
  }
}

@keyframes robotHeartbeat {
  0%, 100% {
    box-shadow: inset 0 0 5px var(--gold-color);
    background: rgba(255,255,255,0.2);
  }
  50% {
    box-shadow: inset 0 0 15px var(--light-gold);
    background: rgba(255,255,255,0.4);
  }
}

@keyframes robotStepLeft {
  0%, 50%, 100% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-3px);
  }
}

@keyframes robotStepRight {
  0%, 50%, 100% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-3px);
  }
}

.opening-character .character-speech-bubble {
  position: absolute;
  bottom: 370px; /* Kembalikan ke posisi desktop asli */
  right: -120px;
  transform: translateX(-80%);
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border: 3px solid var(--gold-color);
  border-radius: 20px;
  padding: 16px 22px;
  width: 280px; /* Slightly increased for better proportion */
  max-width: calc(100vw - 40px);
  min-height: 65px;
  box-shadow:
    0 10px 30px rgba(0,0,0,0.2),
    inset 0 1px 0 rgba(255,255,255,0.8);
  animation: speechBubbleEntrance 0.8s ease-out 1.8s both,
             speechBubblePulse 3s ease-in-out 2.6s infinite;
  z-index: 10001;
}

/* Speech bubble tail */
.opening-character .character-speech-bubble::before {
  content: '';
  position: absolute;
  bottom: -15px;
  right: 60px; /* Adjusted for larger speech bubble */
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid var(--gold-color);
}

.opening-character .character-speech-bubble::after {
  content: '';
  position: absolute;
  bottom: -12px;
  right: 63px; /* Adjusted for larger speech bubble */
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 12px solid #ffffff;
}

@keyframes speechBubbleAppear {
  0% {
    opacity: 0;
    transform: translateX(-80%) scale(0.8) translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateX(-80%) scale(1) translateY(0);
  }
}

/* Force left alignment for all text inside speech bubble */
.opening-character .character-speech-bubble * {
  text-align: left !important;
  direction: ltr !important;
}

.speech-text {
  display: block;
  margin-bottom: 0;
  color: var(--dark-color);
  transition: all 0.3s ease;
  line-height: 1.4;
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  font-size: 15px;
  font-weight: 600;
  text-align: left !important;
  direction: ltr !important;
}

.speech-text sup {
  color: var(--dark-color);
}

/* PNG Bubble - Safari specific styling */
.opening-character .png-bubble {
  /* Inherit base bubble styles, override specific positioning */
  bottom: 370px; /* Default desktop position for PNG/Safari */
  right: -120px;
}

/* Video Bubble - Chrome/Android specific styling */  
.opening-character .video-bubble {
  /* Inherit base bubble styles, same positioning as PNG by default */
  bottom: 370px; /* Default desktop position for video/Chrome */
  right: -120px;
}

/* Character interaction on opening modal */
.opening-character:hover .graduate-student-img,
.opening-character:hover .graduate-student-video {
  animation: studentEntrance 1.2s ease-out 0.3s both,
             studentFloat 1.5s ease-in-out infinite,
             studentExcited 0.5s ease-in-out infinite alternate;
}

.opening-character:hover .character-speech-bubble {
  animation: speechBubbleEntrance 0.8s ease-out 1.8s both,
             speechBubbleExcited 0.5s ease-in-out infinite;
}

@keyframes studentExcited {
  0%, 100% {
    transform: scale(1) rotateY(0deg);
  }
  50% {
    transform: scale(1.05) rotateY(3deg);
  }
}

@keyframes studentWaveExcited {
  0%, 100% {
    transform: rotateZ(0deg) rotateY(0deg);
  }
  25% {
    transform: rotateZ(-30deg) rotateY(15deg);
  }
  50% {
    transform: rotateZ(-50deg) rotateY(20deg);
  }
  75% {
    transform: rotateZ(-30deg) rotateY(15deg);
  }
}

@keyframes studentBlinkExcited {
  0%, 70%, 100% {
    transform: scaleY(1);
  }
  85%, 90% {
    transform: scaleY(0.1);
  }
}

/* Sunset Ocean Wave Transition Effect - Based on gradient image */
.wave-ripple-transition {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  background: linear-gradient(180deg,
    #8B4513 0%,          /* Brown/copper top */
    #CD853F 15%,         /* Sandy brown */
    #F4A460 25%,         /* Sandy orange */
    #FF6347 35%,         /* Tomato/coral */
    #FF4500 45%,         /* Orange red */
    #FFB347 55%,         /* Peach */
    #FFA500 65%,         /* Orange */
    #FFD700 75%,         /* Gold */
    #FFFF99 85%,         /* Light yellow */
    #F0F8FF 100%         /* Alice blue bottom */
  );
}

.wave-ripple-transition.active {
  opacity: 1;
  animation: sunsetWaveContainer 2.5s ease-in-out forwards;
}

/* Flowing Wave Layers with Sunset Colors */
.wave-ripple-transition::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(45deg,
    rgba(139, 69, 19, 0.9) 0%,     /* Brown */
    rgba(205, 133, 63, 0.8) 10%,   /* Sandy brown */
    rgba(244, 164, 96, 0.8) 20%,   /* Sandy */
    rgba(255, 99, 71, 0.9) 30%,    /* Tomato */
    rgba(255, 69, 0, 0.8) 40%,     /* Red orange */
    rgba(255, 179, 71, 0.7) 50%,   /* Peach */
    rgba(255, 165, 0, 0.8) 60%,    /* Orange */
    rgba(255, 215, 0, 0.9) 70%,    /* Gold */
    rgba(255, 255, 153, 0.7) 80%,  /* Light yellow */
    rgba(240, 248, 255, 0.8) 100%  /* Alice blue */
  );
  transform: translateY(100%) scaleX(1.2);
  animation: sunsetWaveFlow 2.5s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
  border-radius: 50% 50% 0 0;
  filter: blur(1px);
}

.wave-ripple-transition::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80%;
  background: linear-gradient(135deg,
    rgba(255, 69, 0, 0.6) 0%,      /* Red orange */
    rgba(255, 140, 0, 0.7) 20%,    /* Dark orange */
    rgba(255, 215, 0, 0.8) 40%,    /* Gold */
    rgba(255, 255, 0, 0.6) 60%,    /* Yellow */
    rgba(255, 255, 153, 0.7) 80%,  /* Light yellow */
    rgba(240, 248, 255, 0.9) 100%  /* Alice blue */
  );
  transform: translateY(100%) scaleX(0.8);
  animation: sunsetWaveFlow 2.2s cubic-bezier(0.25, 0.1, 0.25, 1) 0.3s forwards;
  border-radius: 60% 40% 0 0;
  clip-path: polygon(0% 30%, 100% 10%, 100% 100%, 0% 100%);
}

@keyframes sunsetWaveContainer {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  25% {
    opacity: 1;
    transform: scale(1);
  }
  75% {
    opacity: 1;
    transform: scale(1.05);
  }
  100% {
    opacity: 0;
    transform: scale(1.1);
  }
}

@keyframes sunsetWaveFlow {
  0% {
    transform: translateY(100%) scaleX(1.2) rotateZ(0deg);
    border-radius: 50% 50% 0 0;
  }
  25% {
    transform: translateY(60%) scaleX(1.1) rotateZ(1deg);
    border-radius: 60% 40% 0 0;
  }
  50% {
    transform: translateY(20%) scaleX(1) rotateZ(-1deg);
    border-radius: 40% 60% 0 0;
  }
  75% {
    transform: translateY(-20%) scaleX(0.9) rotateZ(0.5deg);
    border-radius: 30% 70% 0 0;
  }
  100% {
    transform: translateY(-100%) scaleX(0.8) rotateZ(0deg);
    border-radius: 0;
  }
}

/* Additional Wave Particles */
.wave-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(212, 175, 55, 0.8);
  border-radius: 50%;
  animation: waveParticleFloat 2s ease-out forwards;
}

.wave-particle:nth-child(2n) {
  background: rgba(128, 0, 0, 0.6);
  width: 6px;
  height: 6px;
}

.wave-particle:nth-child(3n) {
  background: rgba(255, 255, 255, 0.7);
  width: 3px;
  height: 3px;
}

@keyframes waveParticleFloat {
  0% {
    opacity: 0;
    transform: translateY(100vh) scale(0) rotate(0deg);
  }
  20% {
    opacity: 1;
    transform: translateY(80vh) scale(0.5) rotate(45deg);
  }
  50% {
    opacity: 1;
    transform: translateY(50vh) scale(1) rotate(180deg);
  }
  80% {
    opacity: 0.8;
    transform: translateY(20vh) scale(0.7) rotate(270deg);
  }
  100% {
    opacity: 0;
    transform: translateY(-10vh) scale(0) rotate(360deg);
  }
}

/* Wave Foam Effect */
.wave-ripple-transition .wave-foam {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: linear-gradient(to bottom, 
    rgba(255, 255, 255, 0.8) 0%,
    rgba(212, 175, 55, 0.4) 50%,
    transparent 100%);
  animation: waveFoam 2s ease-out forwards;
  transform: translateY(-100px);
}

@keyframes waveFoam {
  0% {
    transform: translateY(-100px);
    opacity: 0;
  }
  30% {
    transform: translateY(0);
    opacity: 1;
  }
  70% {
    transform: translateY(50px);
    opacity: 0.8;
  }
  100% {
    transform: translateY(100px);
    opacity: 0;
  }
}

/* Elegant Fade Overlay */
.fade-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, 
    rgba(128, 0, 0, 0.9) 0%, 
    rgba(165, 42, 42, 0.8) 25%,
    rgba(139, 0, 0, 0.7) 50%,
    rgba(128, 0, 0, 0.9) 100%);
  z-index: 9997;
  opacity: 0;
  pointer-events: none;
  backdrop-filter: blur(0px);
  transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-overlay.active {
  opacity: 1;
  backdrop-filter: blur(10px);
  animation: fadeOverlay 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes fadeOverlay {
  0% {
    opacity: 0;
    backdrop-filter: blur(0px);
    transform: scale(1);
  }
  30% {
    opacity: 0.8;
    backdrop-filter: blur(5px);
    transform: scale(1.05);
  }
  70% {
    opacity: 0.6;
    backdrop-filter: blur(10px);
    transform: scale(1.02);
  }
  100% {
    opacity: 0;
    backdrop-filter: blur(0px);
    transform: scale(1);
  }
}

/* Golden Particles Effect */
.golden-particles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9996;
  opacity: 0;
  pointer-events: none;
}

.golden-particles.active {
  opacity: 1;
  animation: goldenParticles 2s ease-out forwards;
}

.golden-particles::before,
.golden-particles::after {
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  background: radial-gradient(circle, 
    rgba(212, 175, 55, 1) 0%, 
    rgba(255, 215, 0, 0.8) 50%,
    transparent 100%);
  border-radius: 50%;
  box-shadow: 
    20px 30px 0 rgba(212, 175, 55, 0.8),
    -15px 50px 0 rgba(255, 215, 0, 0.6),
    40px 70px 0 rgba(212, 175, 55, 0.7),
    -30px 90px 0 rgba(255, 215, 0, 0.5),
    60px 20px 0 rgba(212, 175, 55, 0.9),
    -50px 40px 0 rgba(255, 215, 0, 0.7),
    80px 60px 0 rgba(212, 175, 55, 0.6),
    -70px 80px 0 rgba(255, 215, 0, 0.8);
  animation: particleFloat 2s ease-out infinite;
}

.golden-particles::before {
  top: 20%;
  left: 10%;
  animation-delay: 0s;
}

.golden-particles::after {
  top: 60%;
  right: 10%;
  animation-delay: 0.5s;
}

@keyframes goldenParticles {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  20% {
    opacity: 1;
    transform: scale(1);
  }
  80% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    opacity: 0;
    transform: scale(1.3);
  }
}

@keyframes particleFloat {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
    opacity: 1;
  }
  25% {
    transform: translateY(-20px) rotate(90deg);
    opacity: 0.8;
  }
  50% {
    transform: translateY(-40px) rotate(180deg);
    opacity: 0.6;
  }
  75% {
    transform: translateY(-20px) rotate(270deg);
    opacity: 0.8;
  }
}

/* Smooth Content Transition */
#main-content {
  /* Removed default hidden state - content should be visible by default */
  transition: all 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

#main-content.content-loaded {
  opacity: 1;
  transform: translateY(0px);
}

/* Header Slide In */
.header-area {
  /* Removed default hidden state - header should be visible by default */
  transition: all 1s cubic-bezier(0.4, 0, 0.2, 1) 0.5s;
}

.header-area.header-loaded {
  transform: translateY(0px);
  opacity: 1;
}

/* Contact Form Placeholder Styling */
.form-contact .form-group .form-control::placeholder {
    color: #999;
    opacity: 1;
}

.form-contact .form-group .form-control:focus::placeholder {
    color: transparent;
    opacity: 0;
}

/* Map Iframe Styling */
.map-section iframe {
    border: 0;
}

/* Main Page Enhancements */
body {
  font-family: 'Playfair Display', serif;
  background-color: var(--light-color);
  color: var(--dark-color);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Cormorant Garamond', serif;
  letter-spacing: 1px;
}

.section-title {
  position: relative;
  margin-bottom: 50px;
  font-weight: 700;
  color: var(--primary-color);
}

.section-title::after {
  content: "";
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  background: var(--gold-gradient);
}

/* Gallery Enhancements */
.carousel {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}

.carousel .arrows button {
  background: var(--gold-gradient);
  color: var(--dark-color);
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 18px;
  box-shadow: var(--shadow-medium);
  transition: all var(--transition-fast);
}

.carousel .arrows button:hover {
  transform: scale(1.1);
}

/* Enhanced Animations for Modern UX */
@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}



/* Loading Animation for Smooth Transitions */
.page-transition {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.page-transition.loaded {
  opacity: 1;
  transform: translateY(0);
}

/* Enhanced Hover Effects */
.hover-lift {
  transition: all var(--transition-smooth);
}

.hover-lift:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-strong);
}

/* Improved Focus States for Accessibility */
.btn2:focus,
.form-control:focus,
.open-invitation-btn:focus {
  outline: 3px solid var(--gold-color);
  outline-offset: 2px;
}

/* Performance Optimizations */
* {
  box-sizing: border-box;
}

.gpu-accelerated {
  will-change: transform;
  transform: translateZ(0);
}

/* Animations */

.fade-in {
  /* animation: fadeIn 1s ease forwards; */
}

.delay-1 {
  animation-delay: 0.2s;
}

.delay-2 {
  animation-delay: 0.4s;
}

.delay-3 {
  animation-delay: 0.6s;
}

/* Modern Header Styles */
.header-area {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: var(--shadow-soft);
}

.main-header {
  background: var(--gradient-dark) !important;
  padding: 15px 0;
  transition: all var(--transition-smooth);
}

.main-header.header-sticky {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(20px);
  box-shadow: var(--shadow-medium);
}

.logo img {
  filter: drop-shadow(0 5px 15px rgba(0,0,0,0.3));
  transition: transform var(--transition-fast);
}

.logo:hover img {
  transform: scale(1.05);
}

.main-menu ul li a {
  color: var(--cream-color) !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 12px 20px;
  border-radius: 25px;
  transition: all var(--transition-fast);
  position: relative;
  overflow: hidden;
}

.main-menu ul li a::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: var(--gradient-gold);
  transition: left var(--transition-smooth);
  z-index: -1;
}

.main-menu ul li a:hover::before {
  left: 0;
}

.main-menu ul li a:hover {
  color: var(--dark-color) !important;
  transform: translateY(-2px);
}

/* Modern Hero Section */
.slider-area {
  background: var(--gradient-primary) !important;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

.slider-area::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 30% 40%, rgba(212, 175, 55, 0.2) 0%, transparent 50%),
    radial-gradient(circle at 70% 60%, rgba(102, 126, 234, 0.3) 0%, transparent 50%);
  z-index: 1;
}

.banner {
  position: relative;
  z-index: 2;
}

.banner .content {
  text-align: center;
  color: var(--light-color);
  padding: 100px 20px;
}

.banner .content > div:first-child {
  font-size: 24px;
  font-weight: 300;
  margin-bottom: 20px;
  opacity: 0;
  /* animation: fadeInUp 1s ease forwards 0.5s; */
}

.banner .content > div:nth-child(2) {
  font-size: 4rem;
  font-weight: 700;
  margin-bottom: 30px;
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  opacity: 0;
  /* animation: fadeInUp 1s ease forwards 1s; */
}

.banner .content button {
  background: var(--gradient-gold);
  color: var(--dark-color);
  border: none;
  padding: 20px 40px;
  border-radius: 50px;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-medium);
  transition: all var(--transition-smooth);
  text-transform: uppercase;
  letter-spacing: 2px;
  opacity: 0;
  /* animation: fadeInUp 1s ease forwards 1.5s; */
}

.banner .content button:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-strong);
}

/* Modern Section Styles */
.Our-story-area {
  background: linear-gradient(135deg, #f8f9ff 0%, #e8f0ff 100%);
  padding: 100px 0;
  position: relative;
}

.story-caption {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  padding: 40px;
  border-radius: var(--border-radius);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-medium);
}

.story-caption h3 {
  color: var(--primary-color);
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 30px;
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.story-caption p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--dark-color);
  margin-bottom: 20px;
}

.story-img img {
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-medium);
  transition: transform var(--transition-smooth);
}

.story-img:hover img {
  transform: scale(1.05);
}

/* Service Area Modern Styling */
.service-area {
  background: var(--gradient-dark);
  padding: 100px 0;
  color: var(--light-color);
}

.section-tittle h3 {
  color: var(--light-color);
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 50px;
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.singl-services {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  padding: 40px;
  border-radius: var(--border-radius);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-medium);
  transition: transform var(--transition-smooth);
  height: 100%;
}

.singl-services:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-strong);
}

.top-caption h4 {
  color: var(--gold-color);
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 15px;
}

.bottom-caption span {
  color: var(--light-gold) !important;
  font-size: 1.2rem;
  font-weight: 600;
}

/* Contact Form Modern Styling */
.contact-section {
  background: linear-gradient(135deg, #f8f9ff 0%, #e8f0ff 100%);
  padding: 100px 0;
}

.contact-title {
  color: var(--primary-color);
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 50px;
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.form-control {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  border: 2px solid var(--glass-border);
  border-radius: var(--border-radius);
  padding: 15px 20px;
  font-size: 16px;
  color: var(--dark-color);
  transition: all var(--transition-fast);
}

.form-control:focus {
  border-color: var(--gold-color);
  box-shadow: 0 0 0 0.2rem rgba(212, 175, 55, 0.25);
  background: rgba(255,255,255,0.9);
}

.btn2 {
  background: var(--gradient-gold);
  color: var(--dark-color);
  border: none;
  padding: 15px 30px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-medium);
  transition: all var(--transition-smooth);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 10px;
}

.btn2:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-strong);
}

/* Sound Control Button */
.sound-control {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--gradient-gold);
  color: var(--dark-color);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
}

/* Wave Animation - Enhanced with Smooth Gradients */
.wave-container {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 15vh; /* Reduced height */
  overflow: hidden;
  z-index: 10000; /* Above opening-character */
}

.wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%; /* Make wider to avoid cuts */
  height: 80px; /* Reduced height */
  background-size: 2000px 80px; /* Doubled for seamless loop */
  background-repeat: repeat-x;
  animation: wave-flow 25s linear infinite; /* Linear for smooth movement */
}

.wave:nth-of-type(1) {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 80" preserveAspectRatio="none"><defs><linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:rgba(255,87,34,0.9);stop-opacity:1" /><stop offset="30%" style="stop-color:rgba(255,152,0,0.8);stop-opacity:1" /><stop offset="60%" style="stop-color:rgba(255,193,7,0.7);stop-opacity:1" /><stop offset="100%" style="stop-color:rgba(255,235,59,0.5);stop-opacity:1" /></linearGradient></defs><path d="M 0 30 Q 250 10 500 30 T 1000 30 Q 1250 10 1500 30 T 2000 30 L 2000 80 L 0 80 Z" fill="url(%23grad1)"></path></svg>');
  animation-duration: 20s;
  animation-delay: 0s;
  opacity: 0.9;
  bottom: 0;
}

.wave:nth-of-type(2) {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 80" preserveAspectRatio="none"><defs><linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:rgba(156,39,176,0.8);stop-opacity:1" /><stop offset="35%" style="stop-color:rgba(233,30,99,0.7);stop-opacity:1" /><stop offset="70%" style="stop-color:rgba(255,87,34,0.6);stop-opacity:1" /><stop offset="100%" style="stop-color:rgba(255,193,7,0.4);stop-opacity:1" /></linearGradient></defs><path d="M 0 45 Q 167 25 333 45 T 667 45 Q 833 25 1000 45 T 1333 45 Q 1500 25 1667 45 T 2000 45 L 2000 80 L 0 80 Z" fill="url(%23grad2)"></path></svg>');
  animation-duration: 30s;
  animation-delay: -10s;
  opacity: 0.8;
  bottom: 10px;
  animation-direction: reverse;
}

.wave:nth-of-type(3) {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 80" preserveAspectRatio="none"><defs><linearGradient id="grad3" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:rgba(63,81,181,0.7);stop-opacity:1" /><stop offset="40%" style="stop-color:rgba(156,39,176,0.6);stop-opacity:1" /><stop offset="80%" style="stop-color:rgba(233,30,99,0.5);stop-opacity:1" /><stop offset="100%" style="stop-color:rgba(255,87,34,0.3);stop-opacity:1" /></linearGradient></defs><path d="M 0 55 Q 200 35 400 55 T 800 55 Q 1000 35 1200 55 T 1600 55 Q 1800 35 2000 55 L 2000 80 L 0 80 Z" fill="url(%23grad3)"></path></svg>');
  animation-duration: 25s;
  animation-delay: -5s;
  opacity: 0.7;
  bottom: 20px;
}

@keyframes wave-flow {
  0% {
    background-position-x: 0;
  }
  100% {
    background-position-x: -2000px; /* Match the doubled width */
  }
}

/* Responsive Design */
/* Extra Large Screens (1920px and above) - Even bigger for high-res displays */
@media (min-width: 1920px) {
  .logo-container {
    width: 80vw;
    max-width: 1000px; /* Even larger for 4K+ screens */
  }
  
  .opening-character {
    width: 320px;
    height: 320px;
    bottom: 80px;
    right: 50px;
  }
  
  .graduate-student-img,
  .graduate-student-video {
    width: 280px;
    max-width: 280px;
  }
  
  .opening-character .character-speech-bubble {
    bottom: 350px; /* Kembalikan ke posisi extra large screen asli */
    width: 320px;
    padding: 20px 26px;
    font-size: 17px;
  }
  
  .opening-character .character-speech-bubble::before {
    right: 70px;
  }
  
  .opening-character .character-speech-bubble::after {
    right: 73px;
  }
}

/* Large Screens (1440px to 1919px) */
@media (min-width: 1440px) and (max-width: 1919px) {
  .logo-container {
    width: 75vw;
    max-width: 850px;
  }
  
  .opening-character {
    width: 280px;
    height: 280px;
    bottom: 70px;
    right: 40px;
  }
  
  .graduate-student-img,
  .graduate-student-video {
    width: 250px;
    max-width: 250px;
  }
  
  .opening-character .character-speech-bubble {
    bottom: 320px; /* Kembalikan ke posisi large screen asli */
    width: 300px;
    font-size: 16px;
  }
  
  .opening-character .character-speech-bubble::before {
    right: 65px;
  }
  
  .opening-character .character-speech-bubble::after {
    right: 68px;
  }
}

@media (max-width: 1200px) {
  .banner .content > div:nth-child(2) {
    font-size: 3rem;
  }
  
  .logo-container {
    width: 70vw;
    max-width: 600px;
  }
  
  .opening-character {
    width: 250px;
    height: 250px;
    bottom: 50px;
    right: 25px;
  }
  
  .graduate-student-img,
  .graduate-student-video {
    width: 220px;
    max-width: 220px;
  }
  
  .opening-character .character-speech-bubble {
    bottom: 250px; /* Kembalikan ke posisi 1200px asli */
    width: 250px;
  }
}

@media (max-width: 768px) {
    .logo-container {
        width: 90vw; /* Larger logo on mobile */
        max-width: 500px; /* Increased */
    }

    .opening-content {
        gap: 45px; /* Reduced gap for tablets */
    }

    .wave-container {
        height: 12vh; /* Further reduced height on mobile */
    }

    .wave {
        height: 60px; /* Smaller height */
        background-size: 1500px 60px; /* Smaller on mobile */
        animation-duration: 25s; /* Slower animation on mobile */
    }

    .wave:nth-of-type(1) {
        animation-duration: 25s;
        bottom: 0;
    }

    .wave:nth-of-type(2) {
        animation-duration: 35s;
        bottom: 10px;
    }

    .wave:nth-of-type(3) {
        animation-duration: 30s;
        bottom: 20px;
    }
}

@media (max-width: 576px) {
  .banner .content > div:nth-child(2) {
    font-size: 2rem;
  }
  
  .logo-container {
    width: 100vw; /* Increased */
    max-width: 450px; /* Increased */
    margin-bottom: 0; /* Replaced with gap on parent */
  }

  .opening-content {
    gap: 120px; /* Further reduced gap for mobile */
  }
  
  .main-menu ul li a {
    padding: 10px 15px;
    font-size: 14px;
  }

  .open-invitation-btn {
    padding: 12px 25px;
    font-size: 14px;
    gap: 10px;
  }
  
  .opening-character {
    width: 220px;
    height: 220px;
    bottom: 40px;
    right: 20px;
  }
  
  .graduate-student-img,
  .graduate-student-video {
    width: 240px; /* Increased from 190px for better mobile visibility */
    max-width: 240px;
  }

  .opening-character .character-speech-bubble {
    font-size: 10px;
    padding: 10px 14px;
    bottom: 280px; /* Increased from 220px for larger character */
    right: -5px; /* Adjusted for larger character */
    transform: translateX(-80%);
    width: 170px;
    max-width: calc(100vw - 30px);
    min-height: 45px;
    border-radius: 12px;
    text-align: left !important;
    direction: ltr !important;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* PNG bubble specific positioning for mobile */
  .opening-character .png-bubble {
    bottom: 280px; /* Safari PNG positioning */
    right: -5px;
  }

  /* Video bubble specific positioning for mobile */
  .opening-character .video-bubble {
    bottom: 280px; /* Chrome/Android video positioning */
    right: -5px;
  }
  
  .opening-character .character-speech-bubble::before {
    right: 40px;
    left: auto;
    transform: none;
  }
  
  .opening-character .character-speech-bubble::after {
    right: 43px;
    left: auto;
    transform: none;
  }
  
  .opening-character .character-speech-bubble * {
    text-align: left !important;
    direction: ltr !important;
  }

  .speech-text {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 5px; /* Adjusted for mobile */
  }

  .speech-text sup {
    color: white;
  }
}

@media (max-width: 480px) {
  .opening-character {
    width: 180px; /* Updated to match new sizing */
    height: 180px; /* Updated to match new sizing */
    bottom: 20px;
    right: 15px;
  }

  .graduate-student-img,
  .graduate-student-video {
    width: 200px; /* Increased from 150px for better small mobile visibility */
    max-width: 200px;
  }

  .opening-character .character-speech-bubble {
    font-size: 9px;
    padding: 8px 12px;
    bottom: 240px; /* Increased from 200px for larger character */
    right: -70px; /* Adjusted for larger character */
    transform: translateX(-75%);
    width: 150px;
    max-width: calc(100vw - 25px);
    min-height: 40px;
  }

  /* PNG bubble specific positioning for small mobile */
  .opening-character .png-bubble {
    bottom: 240px; /* Safari PNG positioning */
    right: -70px;
  }

  /* Video bubble specific positioning for small mobile */
  .opening-character .video-bubble {
    bottom: 240px; /* Chrome/Android video positioning */
    right: -70px;
  }
  
  .opening-character .character-speech-bubble::before {
    right: 35px;
    left: auto;
    transform: none;
  }
  
  .opening-character .character-speech-bubble::after {
    right: 38px;
    left: auto;
    transform: none;
  }
}

/* Hide default scroll up button */
#scrollUp { 
  display: none !important; 
}

/* Animations for smooth page loading */
.fade-in-section {
  opacity: 0;
  transform: translateY(30px);
  transition: all 1s ease;
}

.fade-in-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Enhanced Transition Effects */
/* Smooth Transition State */
body.transitioning {
    overflow: hidden;
    cursor: wait;
}

/* Content Reveal Animations */
.content-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.content-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered Animation for Multiple Elements */
.stagger-animation {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.stagger-animation:nth-child(1) { transition-delay: 0.1s; }
.stagger-animation:nth-child(2) { transition-delay: 0.2s; }
.stagger-animation:nth-child(3) { transition-delay: 0.3s; }
.stagger-animation:nth-child(4) { transition-delay: 0.4s; }
.stagger-animation:nth-child(5) { transition-delay: 0.5s; }

.stagger-animation.animate {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Enhanced Logo Transition */
.logo-transition-effect {
    position: relative;
    overflow: hidden;
}

.logo-transition-effect::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(212, 175, 55, 0.4) 20%, 
        rgba(255, 215, 0, 0.6) 50%, 
        rgba(212, 175, 55, 0.4) 80%, 
        transparent 100%);
    transition: left 1s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

.logo-transition-effect.active::before {
    left: 100%;
}

/* Elegant Section Transitions */
.section-slide-in {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.section-slide-in.from-right {
    transform: translateX(50px);
}

.section-slide-in.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Floating Elements Animation */
.float-element {
    animation: gentleFloat 4s ease-in-out infinite;
}

.float-element:nth-child(odd) {
    animation-delay: -2s;
}

@keyframes gentleFloat {
    0%, 100% {
        transform: translateY(0px) rotateX(0deg);
    }
    25% {
        transform: translateY(-10px) rotateX(1deg);
    }
    50% {
        transform: translateY(-15px) rotateX(0deg);
    }
    75% {
        transform: translateY(-5px) rotateX(-1deg);
    }
}

/* Premium Loading Effect */
.premium-loader {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    z-index: 10001;
    opacity: 0;
}

.premium-loader.active {
    opacity: 1;
    animation: premiumLoaderShow 0.3s ease-out forwards;
}

.premium-loader::before,
.premium-loader::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    animation: premiumSpin 1.5s ease-in-out infinite;
}

.premium-loader::before {
    width: 60px;
    height: 60px;
    border: 3px solid transparent;
    border-top: 3px solid rgba(212, 175, 55, 0.8);
    border-right: 3px solid rgba(212, 175, 55, 0.4);
}

.premium-loader::after {
    width: 40px;
    height: 40px;
    top: 10px;
    left: 10px;
    border: 2px solid transparent;
    border-bottom: 2px solid rgba(128, 0, 0, 0.6);
    border-left: 2px solid rgba(128, 0, 0, 0.3);
    animation-direction: reverse;
    animation-duration: 1s;
}

@keyframes premiumLoaderShow {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes premiumSpin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* ===============================
   Modern Futuristic Rundown Section - Performance Optimized
   =============================== */

.rundown-section {
    background: linear-gradient(135deg, #800000 0%, #a83232 100%);
    position: relative;
    overflow: hidden;
    transform: translateZ(0);
    contain: layout style paint;
}

.rundown-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 20% 80%, rgba(212, 175, 55, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.04) 0%, transparent 50%);
    pointer-events: none;
    will-change: auto;
}

@keyframes backgroundFloat {
    0%, 100% { transform: translateY(0px) scale(1); }
    50% { transform: translateY(-20px) scale(1.02); }
}

/* Section Title for Rundown */
.rundown-section .section-title h2 {
    color: #fff;
    font-size: 3rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 1rem;
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.rundown-section .section-title p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.2rem;
    text-align: center;
    margin-bottom: 3rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Timeline Container - Performance Optimized */
.rundown-timeline {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 0;
    contain: layout style;
}

/* Main Timeline Line - GPU Accelerated */
.timeline-line {
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateZ(0);
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, 
        rgba(212, 175, 55, 0.15) 0%,
        rgba(212, 175, 55, 0.4) 50%,
        rgba(212, 175, 55, 0.15) 100%
    );
    border-radius: 2px;
    z-index: 1;
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.2);
    will-change: transform;
}

.timeline-progress {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, 
        #f7d794 0%,
        #d4af37 50%,
        #f7d794 100%
    );
    border-radius: 2px;
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.4);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    contain: layout style paint;
}

@keyframes timelineProgress {
    0% { height: 0%; }
    50% { height: 60%; }
    100% { height: 100%; }
}

/* Rundown Item - Performance Optimized */
.rundown-item {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 4rem;
    opacity: 1;
    transform-style: preserve-3d;
    perspective: 800px;
    box-shadow: 0 12px 32px rgba(30,30,60,0.18), 0 2px 8px rgba(212,175,55,0.10);
    border-radius: 18px;
    background: none;
    z-index: 3;
    will-change: transform;
    contain: layout style paint;
}

.rundown-item:nth-child(even) {
    flex-direction: row-reverse;
}

.rundown-item:nth-child(even) .rundown-content {
    text-align: right;
    margin-right: 4rem;
    margin-left: 0;
}

.rundown-item:nth-child(odd) .rundown-content {
    margin-left: 4rem;
}

/* Remove heavy animations by default */
.rundown-item.animate-on-scroll {
    opacity: 0;
    transform: perspective(800px) rotateY(35deg) scale(0.92) skewY(6deg);
    box-shadow: 0 24px 64px rgba(30,30,60,0.22), 0 4px 16px rgba(212,175,55,0.18);
    filter: drop-shadow(0 0 24px #d4af37aa);
    transition:
        transform 0.8s cubic-bezier(.25,.8,.25,1),
        opacity 0.8s,
        box-shadow 0.8s;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(15px) translateZ(0);
    }
    to {
        opacity: 1;
        transform: translateY(0) translateZ(0);
    }
}

/* Rundown Marker - Optimized */
.rundown-marker {
    position: relative;
    z-index: 10;
    flex-shrink: 0;
}

.marker-circle {
    width: 90px;
    height: 90px;
    background: linear-gradient(135deg, 
        rgba(212, 175, 55, 0.85) 0%,
        rgba(247, 215, 148, 0.65) 50%,
        rgba(212, 175, 55, 0.85) 100%
    );
    border: 3px solid rgba(212, 175, 55, 0.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
    transition: transform 0.2s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 
        0 0 15px rgba(212, 175, 55, 0.25),
        0 3px 12px rgba(0, 0, 0, 0.15);
    will-change: transform;
    contain: layout style paint;
}

.marker-circle::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.06) 50%, transparent 70%);
    transform: rotate(45deg) translateZ(0);
    transition: opacity 0.2s ease;
    opacity: 0;
}

.marker-circle:hover::before {
    opacity: 1;
}

.marker-circle i {
    font-size: 2rem;
    color: #1a1a2e;
    font-weight: 900;
    transition: transform 0.2s ease;
    z-index: 2;
}

.rundown-item:hover .marker-circle {
    transform: scale(1.03) translateZ(0);
    border-color: #f7d794;
    box-shadow: 
        0 0 20px rgba(212, 175, 55, 0.4),
        0 4px 16px rgba(0, 0, 0, 0.2);
}

.rundown-item:hover .marker-circle i {
    color: #0f3460;
    transform: scale(1.02) translateZ(0);
}

/* Rundown Content - Performance Optimized */
.rundown-content {
    flex: 1;
    background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
    color: #800000;
    backdrop-filter: blur(16px);
    border: 2.5px solid #d4af37;
    border-radius: 28px;
    padding: 2.5rem;
    transition:
        transform 0.6s cubic-bezier(.25,.8,.25,1),
        border-color 0.6s;
    position: relative;
    overflow: visible;
    will-change: transform;
    contain: layout style paint;
    transform-style: preserve-3d;
}

.rundown-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent 0%,
        rgba(212, 175, 55, 0.05) 50%,
        transparent 100%
    );
    transition: left 0.4s ease;
}

.rundown-item:hover .rundown-content::before {
    left: 100%;
}

.rundown-number {
    font-size: 1.1rem;
    font-weight: 800;
    color: #1a1a2e;
    margin-bottom: 0.8rem;
    display: inline-block;
    padding: 0.5rem 1rem;
    border: 2px solid #d4af37;
    border-radius: 25px;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.2), rgba(247, 215, 148, 0.3));
    text-shadow: none;
}

.rundown-content h4 {
    font-size: 1.6rem;
    font-weight: 700;
    color: #800000;
    margin-bottom: 1rem;
    text-shadow: 0 2px 8px rgba(128,0,0,0.18);
    line-height: 1.3;
}

.rundown-content p {
    font-size: 1.1rem;
    color: #800000;
    line-height: 1.7;
    margin: 0;
    font-weight: 500;
}

.rundown-item:hover .rundown-content {
    transform: translateY(-4px);
    box-shadow: 
        0 16px 48px rgba(0, 0, 0, 0.15),
        0 4px 16px rgba(212, 175, 55, 0.15);
    border-color: rgba(212, 175, 55, 0.6);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .rundown-timeline {
        padding: 1rem 2rem;
    }
    
    .timeline-line {
        left: 3rem;
        transform: translateX(0);
    }
    
    .rundown-item,
    .rundown-item:nth-child(even) {
        flex-direction: row;
    }
    
    .rundown-content,
    .rundown-item:nth-child(even) .rundown-content {
        text-align: left;
        margin-left: 3rem;
        margin-right: 0;
    }
    
    .rundown-marker {
        margin-left: -3rem;
    }
    
    .marker-circle {
        width: 80px;
        height: 80px;
    }
}

@media (max-width: 768px) {
    .rundown-timeline {
        padding: 1rem;
    }
    
    .timeline-line {
        left: 2rem;
    }
    
    .marker-circle {
        width: 70px;
        height: 70px;
    }
    
    .marker-circle i {
        font-size: 1.6rem;
    }
    
    .rundown-content {
        padding: 2rem;
        margin-left: 2.5rem;
    }
    
    .rundown-marker {
        margin-left: -2rem;
    }
    
    .rundown-content h4 {
        font-size: 1.4rem;
    }
    
    .rundown-content p {
        font-size: 1rem;
    }
    
    .rundown-number {
        font-size: 1rem;
        padding: 0.4rem 0.8rem;
    }
}

@media (max-width: 480px) {
    .rundown-timeline {
        padding: 0.5rem;
    }
    
    .timeline-line {
        left: 1.5rem;
    }
    
    .marker-circle {
        width: 60px;
        height: 60px;
    }
    
    .marker-circle i {
        font-size: 1.4rem;
    }
    
    .rundown-content {
        padding: 1.5rem;
        margin-left: 2rem;
    }
    
    .rundown-marker {
        margin-left: -1.5rem;
    }
    
    .rundown-content h4 {
        font-size: 1.2rem;
    }
    
    .rundown-number {
        font-size: 0.9rem;
        padding: 0.3rem 0.6rem;
    }
    
    .rundown-content p {
        font-size: 0.9rem;
    }
}

/* Enhanced Animation Delays - Reduced for smoother performance */
.rundown-item:nth-child(2) { animation-delay: 0.05s; }
.rundown-item:nth-child(3) { animation-delay: 0.1s; }
.rundown-item:nth-child(4) { animation-delay: 0.15s; }
.rundown-item:nth-child(5) { animation-delay: 0.2s; }
.rundown-item:nth-child(6) { animation-delay: 0.25s; }
.rundown-item:nth-child(7) { animation-delay: 0.3s; }
.rundown-item:nth-child(8) { animation-delay: 0.35s; }
.rundown-item:nth-child(9) { animation-delay: 0.4s; }
.rundown-item:nth-child(10) { animation-delay: 0.45s; }
.rundown-item:nth-child(11) { animation-delay: 0.5s; }
.rundown-item:nth-child(12) { animation-delay: 0.55s; }
.rundown-item:nth-child(13) { animation-delay: 0.6s; }
.rundown-item:nth-child(14) { animation-delay: 0.65s; }
.rundown-item:nth-child(15) { animation-delay: 0.7s; }
.rundown-item:nth-child(16) { animation-delay: 0.75s; }

/* Advanced Performance optimizations with AOS support */
@media (prefers-reduced-motion: no-preference) {
    .rundown-item {
        animation-play-state: paused;
    }
    
    .rundown-item.aos-animate {
        animation-play-state: running;
    }
    
    /* Ensure AOS animations are smooth */
    [data-aos] {
        transition-property: transform, opacity;
        transition-timing-function: ease-out-cubic;
    }
    
    [data-aos^="fade"] {
        opacity: 0;
        transition-property: opacity, transform;
    }
    
    [data-aos^="slide"] {
        transition-property: transform;
    }
    
    [data-aos^="zoom"] {
        opacity: 0;
        transition-property: opacity, transform;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rundown-item {
        animation: none;
        opacity: 1;
        transform: none;
    }
    
    .marker-circle,
    .rundown-content {
        transition: none;
    }
    
    /* Disable AOS animations for reduced motion users */
    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* Passive event listeners support for smoother scrolling */
* {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* Optimize rendering performance */
.rundown-section {
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000px;
    perspective: 1000px;
}

/* GPU layer promotion for heavy animation elements */
.timeline-line,
.marker-circle,
.rundown-content {
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Reduce layout thrashing */
.rundown-timeline {
    contain: layout style paint;
}

/* Critical rendering optimizations */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Minimize repaints during hover */
.rundown-item:hover .marker-circle,
.rundown-item:hover .rundown-content {
    will-change: transform;
}

.rundown-item:not(:hover) .marker-circle,
.rundown-item:not(:hover) .rundown-content {
    will-change: auto;
}

/* Disable expensive visual effects on low-end devices */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Progressive enhancement for high-performance devices */
@supports (backdrop-filter: blur(10px)) {
    .rundown-content {
        backdrop-filter: blur(8px);
    }
}

@supports not (backdrop-filter: blur(10px)) {
    .rundown-content {
        background: rgba(255, 255, 255, 0.95);
    }
}

/* Rundown Section Styles - moved from main.php for clean code */
.rundown-bg-waves {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
    background-repeat: repeat;
    opacity: 1;
    background: none;
    pointer-events: none;
}
.rundown-bg-waves .wave {
    position: absolute;
    left: 0;
    width: 200%;
    height: 80px;
    border-radius: 40% 60% 60% 40% / 60% 40% 60% 40%;
    background: linear-gradient(90deg, #fff 0%, #ffe066 60%, #fff 100%);
    opacity: 0.7;
    animation: rundownWaveAnim 14s linear infinite;
    top: 0;
    z-index: 3;
    box-shadow: 0 8px 32px 0 rgba(255, 255, 255, 0.18);
}
.rundown-bg-waves .wave.wave2 {
    top: 40px;
    opacity: 0.5;
    animation-duration: 18s;
    animation-delay: -7s;
    background: linear-gradient(90deg, #ffe066 0%, #fff 80%);
    z-index: 4;
}
.rundown-bg-waves .wave.wave3 {
    top: 70px;
    opacity: 0.35;
    animation-duration: 22s;
    animation-delay: -11s;
    background: linear-gradient(90deg, #fff 0%, #ffe066 100%);
    z-index: 5;
}
@keyframes rundownWaveAnim {
    0% { left: 0; }
    100% { left: -50%; }
}