/* ================================================================ ABAYA DISTRICT — LUXURY SPLASH SCREEN Standalone; load in before styles.css ================================================================ */ /* ── Prevent FOUC while splash is active ── */ body.splash-active { overflow: hidden; } /* ── Overlay ── */ #luxury-splash { position: fixed; inset: 0; z-index: 99999; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #080705; overflow: hidden; /* exit transition */ transition: opacity .7s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.4,0,.2,1); } #luxury-splash.splash-exit { opacity: 0; transform: scale(1.04); pointer-events: none; } /* ── Geometric star-tile background ── */ .splash-bg { position: absolute; inset: -10%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpolygon fill='%23C8A951' fill-opacity='.055' points='60,6 67,42 100,22 82,55 114,60 82,65 100,98 67,78 60,114 53,78 20,98 38,65 6,60 38,55 20,22 53,42'/%3E%3C/svg%3E"); opacity: 0; animation: splashBgReveal 1.4s .1s ease forwards; will-change: opacity; } /* ── Radial glow centre ── */ .splash-glow { position: absolute; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(200,169,81,.13) 0%, rgba(200,169,81,.05) 40%, transparent 70% ); opacity: 0; animation: splashBgReveal .9s .4s ease forwards; pointer-events: none; } /* ── Inner container ── */ .splash-inner { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 2rem; max-width: 420px; width: 100%; } /* ── Logo mark ── */ .splash-mark { width: 76px; height: 76px; border-radius: 50%; background: conic-gradient(from 135deg, #6b5520, #C8A951, #E8D28C, #C8A951, #6b5520); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 1px rgba(200,169,81,.2), 0 0 40px rgba(200,169,81,.25), 0 0 80px rgba(200,169,81,.08); opacity: 0; transform: scale(.55) rotate(-20deg); animation: splashMarkIn .65s .25s cubic-bezier(.34,1.4,.64,1) forwards; margin-bottom: 1.6rem; will-change: transform, opacity; } .splash-mark svg { filter: drop-shadow(0 1px 6px rgba(0,0,0,.4)); } /* ── Thin ring that spins around mark ── */ .splash-ring { position: absolute; width: 96px; height: 96px; border-radius: 50%; border: 1px solid rgba(200,169,81,.25); border-top-color: rgba(200,169,81,.7); opacity: 0; animation: splashRingIn .5s .55s ease forwards, splashSpin 2.4s .55s linear infinite; will-change: transform; } /* ── Brand name ── */ .splash-brand { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(2rem, 6vw, 3.2rem); font-weight: 600; font-style: italic; color: #FBFAF7; letter-spacing: .015em; line-height: 1.1; clip-path: inset(0 0 100% 0); animation: splashClipReveal .7s .55s cubic-bezier(.25,.46,.45,.94) forwards; will-change: clip-path; } /* ── Sub brand ── */ .splash-sub { font-family: 'Jost', sans-serif; font-size: .65rem; font-weight: 500; letter-spacing: .32em; text-transform: uppercase; color: #C8A951; margin-top: .45rem; opacity: 0; animation: splashFadeUp .6s .9s ease forwards; } /* ── Ornamental divider ── */ .splash-ornament { display: flex; align-items: center; gap: 1rem; margin: 1.6rem 0 1.4rem; opacity: 0; animation: splashFadeUp .5s 1.05s ease forwards; } .splash-ornament-line { flex: 1; height: 1px; max-width: 90px; background: linear-gradient(90deg, transparent, rgba(200,169,81,.45)); } .splash-ornament-line:last-child { background: linear-gradient(90deg, rgba(200,169,81,.45), transparent); } .splash-ornament-diamond { width: 6px; height: 6px; background: #C8A951; transform: rotate(45deg); flex-shrink: 0; box-shadow: 0 0 8px rgba(200,169,81,.5); } /* ── Tagline ── */ .splash-tagline { font-family: 'Jost', sans-serif; font-size: .8rem; color: rgba(255,255,255,.45); letter-spacing: .06em; opacity: 0; animation: splashFadeUp .5s 1.1s ease forwards; margin-bottom: 2rem; } /* ── Progress bar ── */ .splash-progress-wrap { width: 140px; height: 1px; background: rgba(255,255,255,.08); border-radius: 1px; overflow: hidden; opacity: 0; animation: splashFadeUp .4s 1.2s ease forwards; } .splash-progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg, #6b5520, #C8A951, #E8D28C); border-radius: 1px; animation: splashProgressFill 1.3s 1.35s cubic-bezier(.4,0,.2,1) forwards; will-change: width; } /* ── Skip hint ── */ .splash-skip { position: absolute; bottom: 2rem; right: 2rem; font-family: 'Jost', sans-serif; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.25); cursor: pointer; opacity: 0; animation: splashFadeUp .4s 1.4s ease forwards; transition: color .2s ease; user-select: none; border: none; background: none; padding: .5rem; } .splash-skip:hover { color: rgba(200,169,81,.7); } /* ── Page-transition curtain (cross-page) ── */ #page-curtain { position: fixed; inset: 0; z-index: 98000; background: #080705; transform: scaleY(0); transform-origin: bottom; pointer-events: none; } #page-curtain.curtain-in { animation: curtainIn .35s cubic-bezier(.4,0,.2,1) forwards; } #page-curtain.curtain-out { animation: curtainOut .45s cubic-bezier(.4,0,.2,1) forwards; } /* ================================================================ KEYFRAMES ================================================================ */ @keyframes splashBgReveal { to { opacity: 1; } } @keyframes splashMarkIn { to { opacity: 1; transform: scale(1) rotate(0deg); } } @keyframes splashRingIn { to { opacity: 1; } } @keyframes splashSpin { to { transform: rotate(360deg); } } @keyframes splashClipReveal { to { clip-path: inset(0 0 0% 0); } } @keyframes splashFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes splashProgressFill { to { width: 100%; } } @keyframes curtainIn { from { transform: scaleY(0); transform-origin: bottom; } to { transform: scaleY(1); transform-origin: bottom; } } @keyframes curtainOut { from { transform: scaleY(1); transform-origin: top; } to { transform: scaleY(0); transform-origin: top; } } /* ── Reduced motion ── */ @media (prefers-reduced-motion: reduce) { #luxury-splash, .splash-bg, .splash-glow, .splash-mark, .splash-ring, .splash-brand, .splash-sub, .splash-ornament, .splash-tagline, .splash-progress-wrap, .splash-progress-bar, .splash-skip { animation: none !important; opacity: 1 !important; transform: none !important; clip-path: none !important; } #luxury-splash { transition: opacity .3s ease; } } /* ── Mobile tweaks ── */ @media (max-width: 480px) { .splash-mark { width: 60px; height: 60px; } .splash-ring { width: 78px; height: 78px; } .splash-ornament-line { max-width: 60px; } .splash-skip { bottom: 1.25rem; right: 1.25rem; } }