/* Modern Story Section Design with Apple-inspired aesthetic */
    .story-section {
      position: relative;
      padding: 5rem 0; /* Further reduced padding for better proportions */
      background-color: var(--cream-bg); /* Dark background */
      background-image: url("data:image/svg+xml,%3Csvg width='40' height='20' viewBox='0 0 40 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23c6a57c' fill-opacity='0.03'%3E%3Cpath d='M8 8c0-1.5-1.2-3-3-3-2.5 0-4.5-2-4.5-4.5h1.5c0 1.5 1.2 3 3 3 2.5 0 4.5 2 4.5 4.5 0 1.5 1.2 3 3 3 2.5 0 4.5 2 4.5 4.5 0 1.5 1.2 3 3 3v1.5c-2.5 0-4.5-2-4.5-4.5 0-1.5-1.2-3-3-3-2.5 0-4.5-2-4.5-4.5zm21-1.5l6 6-1 1-6-6 1-1z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
      overflow: hidden;
      box-shadow: inset 0 2px 10px rgba(0,0,0,0.2); /* Subtle inset shadow */
    }
    
    .love-story-container {
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 5%;
      position: relative;
      z-index: 3;
    }
    
    .intro-section {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 5rem;  /* More refined gap */
      align-items: center;
      margin-bottom: 6rem;  /* Smaller margin */
    }
    
    .intro-text {
      opacity: 0;
      transform: translateY(50px);
    }
    
    .intro-text.active {
      opacity: 1;
      transform: translateY(0);
      transition: all 1.2s cubic-bezier(0.19, 1, 0.22, 1);
    }
    
    .intro-image {
      position: relative;
      overflow: hidden;
      border-radius: 0;
      box-shadow: 0 20px 40px rgba(0,0,0,0.3);
      opacity: 0;
      transform: translateY(50px);
    }
    
    .intro-image.active {
      opacity: 1;
      transform: translateY(0);
      transition: all 1.2s cubic-bezier(0.19, 1, 0.22, 1) 0.2s;
    }
    
    .intro-image img {
      width: 100%;
      height: auto;
      max-height: 400px;
      object-fit: contain;
      display: block;
      transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
      border-radius: 12px; /* Apple-style rounded corners */
    }
    
    .intro-image:hover img {
      transform: scale(1.02); /* More subtle hover effect */
    }
    
    .section-title {
      font-family: 'CASTELAR', serif;
      font-size: clamp(2.5rem, 6vw, 3.8rem);
      margin-bottom: 2rem;
      position: relative;
      display: inline-block;
      color: var(--gold);
      text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    }
    
    .intro-highlight {
      font-family: 'Julius Sans One', sans-serif;
      font-size: clamp(1.2rem, 2vw, 1.5rem);
      color: var(--gold);
      margin-bottom: 2rem;
      letter-spacing: 0.1em;
    }
    
    .intro-description {
      font-size: clamp(1rem, 1.2vw, 1.2rem);
      line-height: 1.9;
      margin-bottom: 2.5rem;
      max-width: 600px;
      letter-spacing: 0.02em;
      color: #dddddd;
      text-shadow: none;
    }
    
    /* Modern Story Cards Layout */
    .story-cards {
      position: relative;
      margin-top: 6rem;
      display: flex;
      flex-direction: column;
      gap: 6rem;
    }
    
    /* Minecraft Hearts Animation */
    .love-story-header {
      position: relative;
      display: inline-block;
    }
    
    .love-story-hearts {
      position: absolute;
      top: -20px;
      right: -60px;
      width: 120px;
      height: 80px;
      z-index: 10;
      pointer-events: none;
      overflow: visible;
    }
    
    .minecraft-heart {
      position: absolute;
      z-index: 100;
      pointer-events: none;
      transform-origin: center;
      filter: drop-shadow(0 0 3px rgba(255, 0, 0, 0.4));
    }
    
    .heart-svg {
      width: 100%;
      height: 100%;
    }
    
    /* Enhanced Love Story Card */
    .love-story-card .story-card-title {
      cursor: pointer;
      transition: color 0.3s ease, transform 0.3s ease;
      font-size: clamp(2rem, 3.5vw, 3rem); /* LARGER FONT SIZE */
      color: #B30000; /* Reddish color to evoke love */
      text-shadow: 0px 2px 8px rgba(198, 165, 124, 0.6); /* Gold shadow for luxury feel */
      border-bottom: 3px solid var(--gold); /* Thicker border */
      position: relative;
      padding-left: 0; /* Remove space for the heart */
    }
    
    /* Removed heart emoji decoration */
    
    .love-story-card .story-card-title:hover {
      color: var(--gold);
      transform: scale(1.05); /* Slightly more dramatic scale */
      text-shadow: 0px 3px 12px rgba(198, 165, 124, 0.8); /* Enhanced shadow on hover */
    }
    
    .interact-hint {
      font-size: 0.8rem;
      color: var(--gold);
      opacity: 0.7;
      font-style: italic;
      margin-top: 1rem;
      transition: opacity 0.3s ease;
      cursor: pointer;
    }
    
    .interact-hint:hover {
      opacity: 1;
    }
    
    /* Decorative Elements */
    .decorative-icon {
      position: absolute;
      width: 60px;
      height: 60px;
      opacity: 0.5;
      z-index: 1;
    }
    
    .cat-icon {
      background: url('assets/images/cat.svg') center/contain no-repeat;
      filter: brightness(0) invert(80%) sepia(38%) saturate(4523%) hue-rotate(358deg) brightness(89%) contrast(84%);
    }
    
    .agave-icon {
      background: url('assets/images/agave.svg') center/contain no-repeat;
      filter: brightness(0) invert(80%) sepia(38%) saturate(4523%) hue-rotate(358deg) brightness(89%) contrast(84%);
    }
    
    .decorative-1 {
      top: 10%;
      right: 5%;
      animation: float1 20s infinite alternate ease-in-out;
    }
    
    .decorative-2 {
      top: 50%;
      left: 5%;
      animation: float2 25s infinite alternate ease-in-out;
    }
    
    .decorative-3 {
      top: 80%;
      right: 10%;
      animation: float3 22s infinite alternate ease-in-out;
    }
    
    @keyframes float1 {
      0% { transform: translate(0, 0) rotate(0deg); }
      100% { transform: translate(20px, -20px) rotate(15deg); }
    }
    
    @keyframes float2 {
      0% { transform: translate(0, 0) rotate(0deg); }
      100% { transform: translate(-20px, 20px) rotate(-15deg); }
    }
    
    @keyframes float3 {
      0% { transform: translate(0, 0) rotate(0deg); }
      100% { transform: translate(15px, 15px) rotate(10deg); }
    }
    
    .agave-connection::before {
      content: '';
      position: absolute;
      top: -2px;
      left: 0;
      width: 100%;
      height: 6px;
      background: radial-gradient(ellipse at left, rgba(198, 165, 124, 0.4), transparent 80%);
      opacity: 0;
      transition: opacity 1s ease;
    }
    
    .agave-connection.right {
      width: calc(50% - 30px);
      margin-left: 25px;
    }
    
    .agave-connection.left {
      width: calc(50% - 30px);
      margin-left: calc(-50% - 15px);
      background: linear-gradient(to left, rgba(198, 165, 124, 0.9), transparent);
      transform-origin: right center;
    }
    
    .agave-connection.active {
      transform: scaleX(1);
      opacity: 1;
    }
    
    .agave-connection.active::before {
      opacity: 1;
    }
    
    .timeline-marker {
      position: absolute;
      top: 0;
      left: 50%;
      width: 20px;
      height: 20px;
      background: var(--gold);
      border-radius: 50%;
      transform: translateX(-50%) scale(0);
      box-shadow: 0 0 0 4px rgba(198, 165, 124, 0.3), 0 0 0 8px rgba(198, 165, 124, 0.1), 0 0 20px rgba(198, 165, 124, 0.5);
      z-index: 3;
      opacity: 0;
      animation: pulseMarker 1.5s cubic-bezier(0.19, 1, 0.22, 1) forwards 0.5s;
    }
    
    @keyframes pulseMarker {
      0% { transform: translateX(-50%) scale(0); opacity: 0; }
      70% { transform: translateX(-50%) scale(1.2); opacity: 1; }
      100% { transform: translateX(-50%) scale(1); opacity: 1; }
    }
    
    .timeline-end {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      z-index: 2;
      opacity: 0;
      transition: opacity 1s ease 1.5s;
    }
    
    .timeline-end.active {
      opacity: 1;
    }
    
    .timeline-end .agave-icon {
      width: 50px;
      height: 50px;
      filter: invert(80%) sepia(38%) saturate(4523%) hue-rotate(358deg) brightness(89%) contrast(84%);
      opacity: 0.9;
      transform: translateY(20px);
      animation: pulseEnd 3s infinite alternate ease-in-out;
    }
    
    @keyframes pulseEnd {
      0% { transform: translateY(20px) scale(1); filter: invert(80%) sepia(38%) saturate(4523%) hue-rotate(358deg) brightness(89%) contrast(84%); }
      100% { transform: translateY(20px) scale(1.1); filter: invert(80%) sepia(38%) saturate(4523%) hue-rotate(358deg) brightness(100%) contrast(90%); }
    }
    
    .story-card {
      position: relative;
      width: 100%;
      z-index: 3;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6rem; /* Reduced gap for better proportions */
      align-items: center;
      padding: 2.5rem 0; /* Reduced padding */
    }
    
    .story-card:nth-child(even) {
      direction: rtl;
    }
    
    .story-card:nth-child(even) .story-card-content {
      direction: ltr;
    }
    
    .story-card:last-child {
      margin-bottom: 2rem;
    }
    
    .story-card-content {
      padding: 0;
      opacity: 0;
      transform: translateY(50px);
      transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
    }
    
    .story-card.active .story-card-content {
      opacity: 1;
      transform: translateY(0);
    }
    
    .story-card-media {
      position: relative;
      overflow: hidden;
      padding: 1.5rem; /* Smaller padding */
      display: flex;
      justify-content: center;
      align-items: center;
      background: transparent;
      transition: transform 0.5s ease;
      transform-style: preserve-3d;
      border-radius: 16px; /* Apple-style rounded corners */
    }
    
    .story-card-media img {
      max-height: 350px; /* Reduced from 500px to prevent layout blowing up */
      width: auto;
      max-width: 100%; /* Full width allowed */
      object-fit: contain;
      display: block;
      transition: all 0.7s cubic-bezier(0.19, 1, 0.22, 1);
      filter: drop-shadow(0 15px 30px rgba(0,0,0,0.25)); /* Enhanced shadow for more presence */
      transform-origin: bottom center;
      will-change: transform, filter;
      transform-style: preserve-3d;
      border-radius: 12px; /* More pronounced Apple-style rounded corners */
    }
    
    .story-card-media:hover img {
      transform: scale(1.02) translateY(-6px); /* More subtle movement */
      filter: drop-shadow(0 20px 35px rgba(0,0,0,0.3)) brightness(1.01); /* More subtle shadow */
    }
    
    /* Modern Apple-style shadow effect */
    .story-card-media::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      width: 70%; /* Smaller radius */
      height: 30px; /* Shorter shadow */
      background: radial-gradient(ellipse at center, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0) 70%);
      transform: translateX(-50%) scaleX(0.8);
      opacity: 0;
      transition: all 0.5s ease;
      filter: blur(8px); /* More refined blur */
      z-index: -1;
      border-radius: 50%; /* Rounded shadow base */
    }
    
    .story-card-media:hover::after {
      opacity: 0.7;
      transform: translateX(-50%) scaleX(0.85);
    }
    
    .story-card-title {
      font-family: 'CASTELAR', serif;
      font-size: clamp(1.5rem, 2.5vw, 2.2rem);
      margin-bottom: 1.5rem;
      color: var(--gold);
      letter-spacing: 0.08em;
      position: relative;
      display: inline-block;
      padding-bottom: 1rem;
      border-bottom: 2px solid var(--gold);
    }
    
    .story-card-text {
      font-size: clamp(1rem, 1.2vw, 1.1rem);
      line-height: 1.8;
      margin-bottom: 2rem;
      color: #dddddd;
    }
    
    .story-card-text p {
      margin-bottom: 1.5rem;
    }
    
    .story-card-text p:last-child {
      margin-bottom: 0;
    }
    
    /* Modern Quote Design */
    .cinematic-quote {
      position: relative;
      padding: 6rem 0;
      margin: 6rem 0;
      background-color: var(--black);
      background-image: url('assets/images/sphynx_background.webp');
      background-position: center;
      background-size: cover;
      background-attachment: fixed;
      overflow: hidden;
      z-index: 2;
    }
    
    .cinematic-quote::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.7);
      z-index: 0;
    }
    
    .quote-content {
      max-width: 900px;
      margin: 0 auto;
      text-align: center;
      padding: 0 2rem;
      position: relative;
      z-index: 2;
    }
    
    .quote-text {
      font-family: 'Cormorant', serif;
      font-size: clamp(1.5rem, 3vw, 2.5rem);
      line-height: 1.5;
      font-style: italic;
      color: var(--white);
      margin-bottom: 2rem;
      position: relative;
    }
    
    .quote-text::before {
      content: '\201C';
      font-family: 'Cormorant', serif;
      font-size: 8rem;
      position: absolute;
      top: -4rem;
      left: -2rem;
      color: var(--gold);
      opacity: 0.3;
    }
    
    .quote-text::after {
      content: '\201D';
      font-family: 'Cormorant', serif;
      font-size: 8rem;
      position: absolute;
      bottom: -6rem;
      right: -2rem;
      color: var(--gold);
      opacity: 0.3;
    }
    
    .quote-attribution {
      font-family: 'Julius Sans One', sans-serif;
      font-size: clamp(1rem, 1.5vw, 1.2rem);
      color: var(--gold);
      letter-spacing: 0.1em;
      margin-top: 2rem;
    }    /* Collection Showcase - Modern Look */
    .collection-showcase {
      position: relative;
      padding: 5rem 0 7rem;
      z-index: 2;
      overflow: hidden;
      background-color: #1a1a1a ;
    }
    
    .collection-title {
      text-align: center;
      margin-bottom: 4rem;
    }
    
    .collection-title h2 {
      font-family: 'CASTELAR', serif;
      font-size: clamp(2rem, 4vw, 3rem);
      color: var(--gold);
      margin-bottom: 1.5rem;
    }
    
    .collection-title p {
      font-family: 'Julius Sans One', sans-serif;
      font-size: clamp(1rem, 1.5vw, 1.2rem);
      color: var(--gold);
      max-width: 700px;
      margin: 0 auto;
    }
    
    /* Collection Image Styling */
    .collection-image {
      position: relative;
      overflow: hidden;
      box-shadow: 0 20px 40px rgba(0,0,0,0.3);
      opacity: 0;
      transform: translateY(50px);
      transition: all 1.2s cubic-bezier(0.19, 1, 0.22, 1);
      max-width: 1000px;
      margin: 0 auto;
    }
    
    .collection-image.active {
      opacity: 1;
      transform: translateY(0);
    }
    
    .collection-image img {
      width: 100%;
      height: auto;
      display: block;
      transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1);
    }
    
    .collection-image:hover img {
      transform: scale(1.02);
    }
    
    .collection-overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      padding: 6rem 2rem 2rem;
      background: linear-gradient(to top, rgba(0,0,0,0.9), rgba(0,0,0,0.4) 70%, transparent);
      transform: translateY(0);
      transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    }
    
    .collection-image:hover .collection-overlay {
      padding-bottom: 3rem;
    }
    
    /* Media Queries for Collection Layout */
    @media (max-width: 992px) {
      .collection-image {
        max-width: 90%;
      }
    }
    
    @media (max-width: 576px) {
      .collection-image {
        max-width: 100%;
      }
    }
      .collection-overlay-title {
      font-family: 'CASTELAR', serif;
      font-size: clamp(1.8rem, 3vw, 2.5rem);
      margin-bottom: 0.8rem;
      color: var(--white);
      text-shadow: 0 2px 4px rgba(0,0,0,0.3);
      transform: translateY(5px);
      opacity: 0.9;
      transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    }
    
    .collection-image:hover .collection-overlay-title {
      transform: translateY(0);
      opacity: 1;
    }
    
    .collection-overlay-text {
      font-size: clamp(0.9rem, 1.2vw, 1.1rem);
      line-height: 1.6;
      color: #dddddd;
      max-width: 600px;
      transform: translateY(5px);
      opacity: 0.8;
      transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1) 0.1s;
    }
    
    .collection-image:hover .collection-overlay-text {
      transform: translateY(0);
      opacity: 1;
    }
    
    /* Floating Elements Background */
    .floating-elements {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      pointer-events: none;
      z-index: 1;
    }
    
    .floating-element {
      position: absolute;
      opacity: 0.03;
      pointer-events: none;
    }
    
    .floating-agave {
      width: 20vw;
      height: 20vw;
      max-width: 300px;
      max-height: 300px;
      background: url('assets/images/agave.svg') center/contain no-repeat;
      filter: brightness(0) invert(1) sepia(1) saturate(5) hue-rotate(350deg);
    }
    
    .floating-cat {
      width: 15vw;
      height: 15vw;
      max-width: 200px;
      max-height: 200px;
      background: url('assets/images/cat.svg') center/contain no-repeat;
      filter: brightness(0) invert(1) sepia(1) saturate(5) hue-rotate(350deg);
    }
    
    .floating-1 {
      top: 15%;
      left: 5%;
      animation: float1 70s infinite ease-in-out;
    }
    
    .floating-2 {
      top: 60%;
      left: 80%;
      animation: float2 90s infinite ease-in-out;
    }
    
    .floating-3 {
      top: 70%;
      left: 10%;
      animation: float3 80s infinite ease-in-out;
    }
    
    .floating-4 {
      top: 20%;
      left: 85%;
      animation: float4 100s infinite ease-in-out;
    }
    
    @keyframes float1 {
      0%, 100% { transform: translate(0, 0) rotate(0deg); }
      25% { transform: translate(100px, -80px) rotate(30deg); }
      50% { transform: translate(200px, 100px) rotate(-20deg); }
      75% { transform: translate(80px, 50px) rotate(10deg); }
    }
    
    @keyframes float2 {
      0%, 100% { transform: translate(0, 0) rotate(0deg); }
      25% { transform: translate(-100px, 50px) rotate(-20deg); }
      50% { transform: translate(-200px, -100px) rotate(40deg); }
      75% { transform: translate(-50px, -50px) rotate(-10deg); }
    }
    
    @keyframes float3 {
      0%, 100% { transform: translate(0, 0) rotate(0deg); }
      25% { transform: translate(80px, -100px) rotate(-15deg); }
      50% { transform: translate(-60px, -150px) rotate(25deg); }
      75% { transform: translate(100px, -50px) rotate(-35deg); }
    }
    
    @keyframes float4 {
      0%, 100% { transform: translate(0, 0) rotate(0deg); }
      25% { transform: translate(-120px, 80px) rotate(25deg); }
      50% { transform: translate(-60px, 200px) rotate(-30deg); }
      75% { transform: translate(-160px, 100px) rotate(15deg); }
    }
    
    /* Modern CTA Section */
    .cta-section {
      position: relative;
      padding: 10rem 0;
      text-align: center;
      background-color: var(--black);
      background-image: url('assets/images/sphynx_background.webp');
      background-position: center;
      background-size: cover;
      background-attachment: fixed;
    }
    
    .cta-section::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.7);
      z-index: 0;
    }
    
    .cta-container {
      max-width: 900px;
      margin: 0 auto;
      padding: 0 2rem;
      position: relative;
      z-index: 2;
    }
    
    .cta-title {
      font-family: 'CASTELAR', serif;
      font-size: clamp(1.8rem, 3vw, 3rem);
      margin-bottom: 2rem;
      color: var(--white);
      letter-spacing: 0.1em;
      opacity: 0;
      transform: translateY(30px);
    }
    
    .cta-title.active {
      opacity: 1;
      transform: translateY(0);
      transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
    }
    
    .cta-subtitle {
      font-family: 'Julius Sans One', sans-serif;
      font-size: clamp(1rem, 1.5vw, 1.2rem);
      margin-bottom: 3rem;
      color: var(--gold);
      letter-spacing: 0.2em;
      opacity: 0;
      transform: translateY(30px);
    }
    
    .cta-subtitle.active {
      opacity: 1;
      transform: translateY(0);
      transition: all 1s cubic-bezier(0.19, 1, 0.22, 1) 0.1s;
    }
    
    .cta-buttons {
      display: flex;
      justify-content: center;
      gap: 2rem;
      flex-wrap: wrap;
      opacity: 0;
      transform: translateY(30px);
    }
    
    .cta-buttons.active {
      opacity: 1;
      transform: translateY(0);
      transition: all 1s cubic-bezier(0.19, 1, 0.22, 1) 0.2s;
    }
    
    .cta-btn {
      display: inline-block;
      padding: 1.2rem 3.5rem;
      background: transparent;
      border: 2px solid var(--gold);
      border-radius: 12px;
      color: var(--gold);
      text-transform: uppercase;
      letter-spacing: 0.2em;
      text-decoration: none;
      font-size: 1.2rem;
      font-weight: 400;
      transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
      position: relative;
      overflow: hidden;
    }
    
    .cta-btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: var(--gold);
      transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
      z-index: -1;
    }
    
    .cta-btn:hover { color: #111111; }
    
    .cta-btn:hover::before {
      left: 0;
    }
    
    .primary-btn { background: var(--gold); color: #111111; }
    
    .primary-btn::before { background: #b8956e; }

    .primary-btn:hover {
      color: #111111 !important;
    }

      /* Duplicate collection image styling removed */
      /* Cat SVG Pouring Tequila Animation */
    .tequila-flow {
      position: absolute;
      left: 50%;
      top: 0;
      height: 100%;
      width: 4px;
      z-index: 0;
      overflow: hidden;
      transform: translateX(-50%);
    }
    
    /* Removed duplicate pouring-cat declaration as it was defined earlier */
    
    .pouring-cat.active {
      opacity: 1;
      animation: tiltCat 3s infinite alternate ease-in-out;
    }
    
    .tequila-drop {
      position: absolute;
      left: 0;
      width: 100%;
      height: 20px;
      background: linear-gradient(to bottom, var(--gold) 0%, rgba(198, 165, 124, 0.3) 100%);
      border-radius: 50% 50% 0 0;
      animation: dropFall 2s infinite;
      opacity: 0;
    }
    
    .tequila-drop.active {
      opacity: 1;
    }
    
    .tequila-stream {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 0%;
      background: linear-gradient(to right, 
        rgba(198, 165, 124, 0.1), 
        rgba(198, 165, 124, 0.8) 50%, 
        rgba(198, 165, 124, 0.1)
      );
      box-shadow: 0 0 10px rgba(198, 165, 124, 0.3);
      opacity: 0;
      transform-origin: top center;
    }
    
    .tequila-stream.active {
      opacity: 1;
      animation: streamGrow 10s forwards cubic-bezier(0.19, 1, 0.22, 1);
    }
    
    @keyframes tiltCat {
      0% { transform: translateX(-50%) rotate(0deg); }
      100% { transform: translateX(-50%) rotate(15deg); }
    }
    
    @keyframes dropFall {
      0% { top: 0; opacity: 1; height: 10px; width: 100%; }
      80% { opacity: 0.7; height: 15px; width: 80%; }
      100% { top: 100%; opacity: 0; height: 5px; width: 50%; }
    }
    
    @keyframes streamGrow {
      0% { height: 0%; }
      100% { height: 100%; }
    }
    
    /* Responsive Media Queries */
    @media (max-width: 1200px) {
      .timeline::before {
        left: 2rem;
      }
      
      .timeline-marker {
        left: 2rem;
      }
      
      .timeline-end {
        left: 2rem;
      }
      
      .story-card {
        grid-template-columns: 1fr;
        gap: 3rem;
      }
      
      .story-card,
      .story-card:nth-child(even) {
        direction: ltr;
      }
      
      .story-card-content {
        padding: 0;
      }
    }
    
    @media (max-width: 992px) {
      .intro-section {
        grid-template-columns: 1fr;
        gap: 3rem;
      }
      
      .cinematic-quote {
        padding: 4rem 0;
        margin: 3rem 0 6rem;
      }
      
      .collection-title {
        margin-bottom: 3rem;
      }
      
      .cta-section {
        padding: 6rem 0;
      }
    }
    
    @media (max-width: 768px) {
      .story-hero {
        height: 90vh;
      }
      
      .hero-content {
        padding: 0 1.5rem;
      }
      
      .hero-title {
        font-size: clamp(2.5rem, 10vw, 6rem);
      }
      
      .hero-subtitle {
        font-size: clamp(1rem, 2vw, 1.5rem);
        letter-spacing: 0.5em;
      }
      
      .story-timeline {
        padding: 6rem 0;
      }
      
      .intro-section {
        margin-bottom: 6rem;
      }
      
      .cinematic-quote {
        padding: 3rem 0;
        margin: 2rem 0 5rem;
      }
      
      .quote-text::before,
      .quote-text::after {
        width: 60px;
        height: 60px;
      }
      
      .quote-text::before {
        top: -30px;
        left: -30px;
      }
      
      .quote-text::after {
        bottom: -30px;
        right: -30px;
      }
    }
    
    @media (max-width: 576px) {
      .hero-title {
        font-size: clamp(2rem, 8vw, 4rem);
      }
      
      .hero-subtitle {
        font-size: 1rem;
        letter-spacing: 0.3em;
      }
      
      .scroll-indicator {
        bottom: 2rem;
      }
      
      .story-timeline {
        padding: 4rem 0;
      }
      
      .timeline::before {
        left: 1.5rem;
      }
      
      .timeline-marker {
        left: 1.5rem;
      }
      
      .timeline-end {
        left: 1.5rem;
      }
      
      .section-title {
        font-size: clamp(2rem, 5vw, 2.5rem);
      }
      
      .intro-section {
        margin-bottom: 4rem;
      }
      
      .cinematic-quote {
        padding: 3rem 0;
        margin: 1rem 0 4rem;
      }
      
      .cta-btn {
        padding: 1rem 2rem;
        font-size: 1rem;
      }
        .cta-buttons {
        gap: 1.5rem;
      }
    }
    
    /* Mobile-specific fixes for decade highlight text */
    @media (max-width: 768px) {
      .decade-highlight {
        font-size: clamp(1.8rem, 6vw, 3.2rem) !important; /* Bigger on mobile */
        letter-spacing: 0.1em; /* Tighter spacing for mobile readability */
        padding: 0 0.5rem; /* Comfortable mobile padding */
        line-height: 1.3; /* Better line spacing if text wraps */
      }
    }
    
    @media (max-width: 480px) {
      .decade-highlight {
        font-size: clamp(2rem, 8vw, 3.5rem) !important; /* Even bigger on small mobile */
        letter-spacing: 0.05em; /* Very tight spacing for small screens */
        padding: 0 0.25rem; /* Minimal padding for maximum space */
        word-spacing: 0.1em; /* Slight word spacing adjustment */
      }
    }
    
    @media (max-width: 360px) {
      .decade-highlight {
        font-size: clamp(1.6rem, 9vw, 2.8rem) !important; /* Responsive for very small screens */
        letter-spacing: 0.02em; /* Minimal letter spacing */
      }
    }
  
.promo-video-wrapper {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
  transition: all 0.3s ease;
  z-index: 10;
}
.promo-video-wrapper:hover {
  transform: scale(1.02);
  box-shadow: 0 25px 50px rgba(0,0,0,0.3);
}
.love-story-container {
  display: block; /* Override any grid */
}