:root {
        --bg-dark: #050505;
        --bg-card: #121212;
        --cyber-green: #00ff41;
        --math-gold: #d4af37;
        --text-main: #f5f5f5;
      }

      body {
        background-color: var(--bg-dark);
        color: var(--text-main);
        font-family: "Inter", sans-serif;
        overflow-x: hidden;
        scroll-behavior: smooth;
      }

      .font-code {
        font-family: "Fira Code", monospace;
      }
      .font-script {
        font-family: "Great Vibes", cursive;
      }
      .font-elegant {
        font-family: "Cinzel", serif;
      }
      .font-tech {
        font-family: "Orbitron", sans-serif;
      }
      .font-luxury {
        font-family: "Cormorant Garamond", serif;
      }

      /* --- 3D & ANIMATION UTILITIES --- */
      .perspective-container {
        perspective: 1000px;
        transform-style: preserve-3d;
      }
      .card-3d {
        transform-style: preserve-3d;
        transition: transform 0.1s ease-out;
        will-change: transform;
      }
      .card-3d-content {
        transform: translateZ(20px);
      }
      .card-3d button {
        transform: translateZ(40px);
        position: relative;
        z-index: 50;
        cursor: pointer;
      }

      /* Reveal Animation Base */
      .reveal-on-scroll {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
        transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
        filter: blur(5px);
        content-visibility: auto;
        contain-intrinsic-size: 1px 900px;
      }
      .reveal-on-scroll.is-visible {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
      }

      /* Staggered Delay for Love Story Items */
      .stagger-delay-1 {
        transition-delay: 100ms;
      }
      .stagger-delay-2 {
        transition-delay: 300ms;
      }
      .stagger-delay-3 {
        transition-delay: 500ms;
      }
      .stagger-delay-4 {
        transition-delay: 700ms;
      }

      /* New Animation: Slow Zoom for Cover */
      @keyframes ken-burns {
        0% {
          transform: scale(1);
        }
        100% {
          transform: scale(1.1);
        }
      }
      .animate-ken-burns {
        animation: ken-burns 20s infinite alternate ease-in-out;
      }

      /* New Animation: Shimmer for Gift Cards */
      @keyframes shimmer {
        0% {
          transform: translateX(-100%) skewX(-15deg);
        }
        100% {
          transform: translateX(200%) skewX(-15deg);
        }
      }
      .shimmer-effect {
        position: absolute;
        top: 0;
        left: 0;
        width: 50%;
        height: 100%;
        background: linear-gradient(
          to right,
          rgba(255, 255, 255, 0) 0%,
          rgba(255, 255, 255, 0.1) 50%,
          rgba(255, 255, 255, 0) 100%
        );
        animation: shimmer 3s infinite;
      }

      @keyframes slideInRight {
        from {
          opacity: 0;
          transform: translateX(-20px);
        }
        to {
          opacity: 1;
          transform: translateX(0);
        }
      }
      .animate-slide-in {
        animation: slideInRight 0.4s ease-out forwards;
      }

      .bg-matrix {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
        background: radial-gradient(circle at 50% 50%, #0a1a0f, #000000);
        pointer-events: none;
      }

      .floating-symbol {
        position: absolute;
        color: rgba(212, 175, 55, 0.15);
        font-family: "Times New Roman", serif;
        animation: floatUp 15s infinite linear;
        z-index: -1;
        text-shadow: 0 0 5px rgba(212, 175, 55, 0.3);
      }

      .binary-rain {
        position: absolute;
        color: rgba(0, 255, 65, 0.08);
        writing-mode: vertical-rl;
        text-orientation: upright;
        animation: rainDown 10s infinite linear;
        z-index: -1;
        font-size: 10px;
      }

      @keyframes floatUp {
        0% {
          transform: translateY(110vh) rotate(0deg) scale(0.8);
          opacity: 0;
        }
        20% {
          opacity: 0.6;
        }
        80% {
          opacity: 0.6;
        }
        100% {
          transform: translateY(-10vh) rotate(360deg) scale(1.2);
          opacity: 0;
        }
      }

      @keyframes rainDown {
        0% {
          transform: translateY(-100vh);
          opacity: 0;
        }
        50% {
          opacity: 0.5;
        }
        100% {
          transform: translateY(100vh);
          opacity: 0;
        }
      }

      .glass-card {
        background: rgba(20, 20, 20, 0.6);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(212, 175, 55, 0.2);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5),
          inset 0 0 20px rgba(255, 255, 255, 0.02);
        transform-style: preserve-3d;
      }

      .glitch {
        position: relative;
      }
      .glitch::before,
      .glitch::after {
        content: attr(data-text);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
      .glitch::before {
        left: 2px;
        text-shadow: -1px 0 #ff00c1;
        clip: rect(44px, 450px, 56px, 0);
        animation: glitch-anim 5s infinite linear alternate-reverse;
      }
      .glitch::after {
        left: -2px;
        text-shadow: -1px 0 #00fff9;
        clip: rect(44px, 450px, 56px, 0);
        animation: glitch-anim2 5s infinite linear alternate-reverse;
      }
      @keyframes glitch-anim {
        0% {
          clip: rect(10px, 9999px, 30px, 0);
        }
        20% {
          clip: rect(80px, 9999px, 100px, 0);
        }
        100% {
          clip: rect(40px, 9999px, 60px, 0);
        }
      }
      @keyframes glitch-anim2 {
        0% {
          clip: rect(60px, 9999px, 90px, 0);
        }
        20% {
          clip: rect(10px, 9999px, 50px, 0);
        }
        100% {
          clip: rect(120px, 9999px, 140px, 0);
        }
      }

      .story-ring {
        background: linear-gradient(
          45deg,
          var(--cyber-green),
          var(--math-gold)
        );
        padding: 2px;
        border-radius: 50%;
        transition: transform 0.3s ease;
      }
      .story-ring:hover {
        transform: scale(1.1) rotate(5deg);
      }

      .phone-frame {
        max-width: 480px;
        margin: 0 auto;
        min-height: 100vh;
        border-left: 1px solid #222;
        border-right: 1px solid #222;
        position: relative;
        background: rgba(0, 0, 0, 0.95);
        box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);
      }

      .no-scrollbar::-webkit-scrollbar {
        display: none;
      }
      .no-scrollbar {
        -ms-overflow-style: none;
        scrollbar-width: none;
      }

      /* Custom style for active play/pause button */
      .play-pause-btn.playing {
        color: var(--cyber-green);
        text-shadow: 0 0 10px var(--cyber-green);
      }

      /* Elegant event card styles */
      .event-card-elegant {
        position: relative;
        overflow: hidden;
        padding: 1.2rem 1.1rem;
        border-radius: 1rem;
        border: 1px solid rgba(212, 175, 55, 0.28);
        background: linear-gradient(
          155deg,
          rgba(20, 20, 20, 0.92) 0%,
          rgba(8, 8, 8, 0.96) 100%
        );
        box-shadow: 0 16px 30px rgba(0, 0, 0, 0.42),
          inset 0 1px 0 rgba(255, 255, 255, 0.05);
      }

      .event-card-elegant::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 1rem;
        background: radial-gradient(
          circle at top right,
          rgba(212, 175, 55, 0.15),
          transparent 48%
        );
        pointer-events: none;
      }

      .event-title {
        font-family: "Cinzel", serif;
        letter-spacing: 0.05em;
        text-transform: uppercase;
      }

      .event-subline {
        width: 3.5rem;
        height: 1px;
        background: linear-gradient(to right, rgba(212, 175, 55, 0.8), transparent);
      }

      .event-detail-item {
        display: flex;
        gap: 0.65rem;
        align-items: flex-start;
      }

      .event-detail-label {
        min-width: 56px;
        font-family: "Fira Code", monospace;
        font-size: 0.63rem;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: #9ca3af;
      }

      .event-detail-value {
        font-family: "Cormorant Garamond", serif;
        font-size: 1.05rem;
        line-height: 1.3;
        color: #f3f4f6;
      }

      .event-icon-badge {
        width: 2rem;
        height: 2rem;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(212, 175, 55, 0.45);
        background: rgba(0, 0, 0, 0.55);
      }