* {
      box-sizing: border-box;
      scroll-behavior: smooth;
    }

    html, body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      overflow-x: hidden;
      background-color: #F4F3F0;
      color: #10243A;
      font-family: 'Philosopher', sans-serif;
    }

    body.fonts-loading {
      visibility: hidden;
    }
    body.fonts-ready {
      visibility: visible;
    }

    /* Scrollbar styling for right panel */
    .custom-scroll::-webkit-scrollbar {
      width: 4px;
    }
    .custom-scroll::-webkit-scrollbar-track {
      background: #F4F3F0;
    }
    .custom-scroll::-webkit-scrollbar-thumb {
      background: #BEB9AC;
      border-radius: 4px;
    }

    /* Desktop Left Panel styling */
    .desktop-panel {
      position: fixed;
      top: 0;
      left: 0;
      height: 100vh;
      width: 66.666667vw;
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #10243A;
      overflow: hidden;
    }

    .desktop-bg-image {
      position: absolute;
      inset: -5%;
      width: 110%;
      height: 110%;
      object-fit: cover;
      object-position: center;
      filter: brightness(0.68) contrast(1.05) sepia(0.15);
      animation: slowKenBurns 35s infinite alternate ease-in-out;
    }

    @keyframes slowKenBurns {
      0% { transform: scale(1) translate(0, 0); }
      100% { transform: scale(1.08) translate(-1%, -1%); }
    }

    .desktop-bg-overlay {
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 50% 50%, rgba(244, 243, 240, 0.15) 0%, rgba(16, 36, 58, 0.6) 70%, rgba(16, 36, 58, 0.85) 100%),
                  linear-gradient(180deg, rgba(16, 36, 58, 0.3) 0%, rgba(119, 113, 95, 0.2) 50%, rgba(16, 36, 58, 0.6) 100%);
      pointer-events: none;
    }

    /* Right Panel Container */
    .invitation-panel {
      margin-left: 66.666667vw;
      width: 33.333333vw;
      min-height: 100vh;
      min-height: 100dvh;
      height: 100dvh;
      position: relative;
      background-color: #BEB9AC;
    }

    /* Mobile Responsive Breakpoint Layout rules */
    @media (max-width: 767px) {
      .desktop-panel {
        display: none !important;
      }
      .invitation-panel {
        margin-left: 0 !important;
        width: 100vw !important;
        width: 100% !important;
        min-height: 100svh !important;
        min-height: 100dvh !important;
        height: 100dvh !important;
      }
    }

    /* Opening Overlay Modal */
    #opening-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      height: 100dvh;
      z-index: 50;
      transition: opacity 0.8s ease-in-out, visibility 0.8s ease-in-out;
      touch-action: none;
    }
    #opening-overlay.hidden-cover {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    /* Soft Gradient Overlay for Cover Text Contrast */
    .cover-gradient-overlay {
      background: linear-gradient(
        180deg, 
        rgba(16,36,58,0.15) 0%, 
        rgba(16,36,58,0.35) 50%, 
        rgba(16,36,58,0.75) 85%, 
        rgba(16,36,58,0.90) 100%
      );
    }

    /* Pulsing button animation */
    @keyframes pulseSoft {
      0%, 100% {
        transform: scale(1);
        box-shadow: 0 6px 20px rgba(0,0,0,0.15);
      }
      50% {
        transform: scale(1.04);
        box-shadow: 0 10px 25px rgba(0,0,0,0.22);
      }
    }
    .animate-pulse-btn {
      animation: pulseSoft 2.5s infinite ease-in-out;
    }

    /* Soft Pop-Up Scroll Reveal CSS */
    .reveal {
      opacity: 0;
      filter: blur(4px);
      transform: translateY(64px) scale(0.91);
      transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), filter 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
      will-change: opacity, filter, transform;
    }
    .reveal.active {
      opacity: 1;
      filter: blur(0);
      transform: translateY(0) scale(1);
    }

    .event-slide-card {
      transform: translateX(-72px) translateY(24px) scale(0.93);
    }
    .event-slide-card:nth-child(1) {
      transition-delay: 0s;
    }
    .event-slide-card:nth-child(2) {
      transition-delay: 0.18s;
    }
    .event-slide-card:nth-child(3) {
      transition-delay: 0.36s;
    }

    /* Leaf-shaped curved corners for slideshow */
    .leaf-shape-left {
      border-radius: 60px 8px 60px 8px;
    }
    .leaf-shape-right {
      border-radius: 8px 60px 8px 60px;
    }

    /* 3D Circular Album / Coverflow Carousel Styling */
    .gallery-3d-stage {
      perspective: 1000px;
      position: relative;
      height: 390px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      touch-action: pan-y;
      user-select: none;
      overflow: hidden;
    }

    .gallery-3d-card {
      position: absolute;
      width: 205px;
      aspect-ratio: 4 / 5;
      border-radius: 1.25rem;
      overflow: hidden;
      cursor: pointer;
      transition: transform 0.55s cubic-bezier(0.25, 1, 0.5, 1), 
                  filter 0.55s cubic-bezier(0.25, 1, 0.5, 1), 
                  opacity 0.55s cubic-bezier(0.25, 1, 0.5, 1),
                  box-shadow 0.55s cubic-bezier(0.25, 1, 0.5, 1);
      will-change: transform, filter, opacity;
      border: 2px solid rgba(255, 255, 255, 0.75);
      background-color: #BEB9AC;
    }

    .gallery-3d-card img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }

    /* Section Video Background - Fixed Sticky Viewport */
    .sticky-video-bg {
      position: sticky;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      height: 100dvh;
      margin-bottom: -100vh;
      margin-bottom: -100dvh;
      pointer-events: none;
      z-index: 0;
      overflow: hidden;
    }
    .sticky-video-bg video {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      object-position: center;
      filter: brightness(0.95) contrast(1.02);
      transform: translateZ(0);
      backface-visibility: hidden;
      will-change: transform;
    }
    .clear-video-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(244, 243, 240, 0.55) 0%, rgba(244, 243, 240, 0.45) 50%, rgba(244, 243, 240, 0.55) 100%);
      pointer-events: none;
    }

    .text-readable-shadow {
      text-shadow: 0 1px 3px rgba(255, 255, 255, 0.9), 0 2px 6px rgba(244, 243, 240, 0.8);
    }