/* ─── RESET ─────────────────────────────────────────── */
 
 *,
 *::before,
 *::after {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }
 /* ─────────────────────────────────────────────────────
           PRELOADER
        ───────────────────────────────────────────────────── */
 
 #preloader {
     position: fixed;
     inset: 0;
     display: flex;
     justify-content: center;
     align-items: center;
     z-index: 9999;
     overflow: hidden;
     background: #ffffff;
     height: 100vh;
 }
 /* Subtle grain overlay */
 
 #preloader::before {
     content: '';
     position: absolute;
     inset: 0;
     background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
     opacity: 0.04;
     pointer-events: none;
     z-index: 1;
 }
 /* ─── CONTENT ────────────────────────────────────────── */
 
 .preloader-content {
     position: relative;
     z-index: 5;
     text-align: center;
     max-width: 640px;
     padding: 40px 30px;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 0;
     /* Fade in on load */
     animation: contentFadeIn 1.2s cubic-bezier(.25, .46, .45, .94) forwards;
     font-family: 'Cormorant Garamond', Georgia, serif;
 }
 
 @keyframes contentFadeIn {
     from {
         opacity: 0;
         transform: translateY(18px);
     }
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }
 /* Logo placeholder — replace <img> src with your actual logo */
 
 .preloader-img {
     /* width: 140px;
     height: 140px; */
     margin-bottom: 36px;
     opacity: 0.92;
 }
 /* Ornamental divider above quote */
 
 .ornament {
     display: flex;
     align-items: center;
     gap: 14px;
     margin-bottom: 28px;
     opacity: 0.35;
 }
 
 .ornament-line {
     width: 60px;
     height: 1px;
     background: linear-gradient(to right, transparent, #c9a96e);
 }
 
 .ornament-line.right {
     background: linear-gradient(to left, transparent, #c9a96e);
 }
 
 .ornament-diamond {
     width: 5px;
     height: 5px;
     background: #c9a96e;
     transform: rotate(45deg);
 }
 /* Quote text */
 
 .quote {
     font-family: 'Cormorant Garamond', Georgia, serif;
     font-size: clamp(18px, 2.4vw, 24px);
     font-style: italic;
     font-weight: 300;
     color: #c9a96e;
     line-height: 1.75;
     letter-spacing: 0.02em;
     text-shadow: 0 0 40px rgba(201, 169, 110, 0.2);
     margin-bottom: 20px;
     position: relative;
 }
 
 .quote::before {
     content: '\201C';
     font-family: 'Cormorant Garamond', Georgia, serif;
     font-size: 5em;
     color: #c9a96e;
     opacity: 0.18;
     position: absolute;
     top: -0.28em;
     left: -0.15em;
     line-height: 1;
     pointer-events: none;
 }
 /* Author */
 
 .author {
     font-family: 'Cinzel', serif;
     font-size: clamp(10px, 1.1vw, 12px);
     font-weight: 400;
     letter-spacing: 0.22em;
     text-transform: uppercase;
     color: #c9a96e;
     opacity: 0.7;
     margin-top: 4px;
 }
 /* Pulsing progress dot row */
 
 .progress-dots {
     display: flex;
     gap: 10px;
     margin-top: 48px;
 }
 
 .progress-dots span {
     width: 5px;
     height: 5px;
     border-radius: 50%;
     background: #c9a96e;
     opacity: 0.2;
     animation: dotPulse 1.8s ease-in-out infinite;
 }
 
 .progress-dots span:nth-child(1) {
     animation-delay: 0s;
 }
 
 .progress-dots span:nth-child(2) {
     animation-delay: 0.3s;
 }
 
 .progress-dots span:nth-child(3) {
     animation-delay: 0.6s;
 }
 
 @keyframes dotPulse {
     0%,
     100% {
         opacity: 0.2;
         transform: scale(1);
     }
     50% {
         opacity: 0.9;
         transform: scale(1.5);
     }
 }
 /* ─── DOORS ──────────────────────────────────────────── */
 
 .door {
     position: absolute;
     top: 0;
     width: 50%;
     height: 100%;
     z-index: 10;
     pointer-events: none;
     transition: transform 1.2s cubic-bezier(.77, 0, .18, 1);
     /* White panel matching bg */
     background: #ffffff;
     /* Subtle edge glow on the seam side */
     overflow: hidden;
 }
 /* Inner sheen on doors */
 
 .door::after {
     content: '';
     position: absolute;
     top: 0;
     width: 1px;
     height: 100%;
     background: linear-gradient(to bottom, transparent 0%, rgba(201, 169, 110, 0.5) 40%, rgba(201, 169, 110, 0.5) 60%, transparent 100%);
     opacity: 0;
     transition: opacity 0.4s ease;
 }
 
 .left-door {
     left: 0;
     transform: translateX(-100%);
 }
 
 .left-door::after {
     right: 0;
 }
 
 .right-door {
     right: 0;
     transform: translateX(100%);
 }
 
 .right-door::after {
     left: 0;
 }
 /* When closing → doors slide to center */
 
 .preloader-hide #preloader {
     display: none !important;
 }
 
 #preloader.closing .left-door {
     transform: translateX(0);
 }
 
 #preloader.closing .right-door {
     transform: translateX(0);
 }
 
 #preloader.closing .door::after {
     opacity: 1;
 }
 /* Fade out content as doors close */
 
 #preloader.closing .preloader-content {
     opacity: 0;
     transition: opacity 0.5s ease;
 }
 /* Doors fully closed — kill preloader bg so page shows through when they open */
 
 #preloader.reveal {
     background: transparent;
 }
 
 #preloader.reveal .preloader-content {
     display: none;
 }
 /* Open → doors fling outward, page visible behind */
 
 #preloader.open .left-door {
     transform: translateX(-100%);
 }
 
 #preloader.open .right-door {
     transform: translateX(100%);
 }
 
 #preloader.open .door::after {
     opacity: 0;
 }
 /* ─────────────────────────────────────────────────────
           DEMO PAGE CONTENT (behind the preloader)
        ───────────────────────────────────────────────────── */
 
 .page-content {
     text-align: center;
 }
 
 .page-content h1 {
     font-family: 'Cinzel', serif;
     font-size: clamp(28px, 5vw, 56px);
     font-weight: 400;
     letter-spacing: 0.08em;
     color: #c9a96e;
     margin-bottom: 16px;
 }
 
 .page-content p {
     font-family: 'Cormorant Garamond', Georgia, serif;
     font-size: 18px;
     font-style: italic;
     color: #a88a55;
 }