/* ============================================================================= AYAL TOURS — SITE PRELOADER Enqueued globally (every page) via ayal_enqueue_assets() in functions.php. Markup lives at the top of header.php, right after . Depends on: ayal-tokens (for --ease-out, --ayal-green, --font-body) ============================================================================= */ .ayal-preloader { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; background-color: #FFFFFF; clip-path: circle(150% at 50% 50%); transition: background-color 900ms var(--ease-out), clip-path 1100ms cubic-bezier(0.65, 0, 0.35, 1), opacity 400ms linear; } /* Background swaps to brand green once progress crosses 82% */ .ayal-preloader.is-green { background-color: var(--ayal-green, #4B5D3A); } /* Reveal — circle shrinks to nothing, uncovering the page beneath it */ .ayal-preloader.is-revealing { clip-path: circle(0% at 50% 50%); } /* Fully done — removed from interaction/paint once the reveal transition ends */ .ayal-preloader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; } /* Prevents scroll/interaction with the page while the preloader is up */ body.ayal-preloading { overflow: hidden; } /* ── Logo, bar, percentage ───────────────────────────────────────────────────── */ .ayal-preloader__content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 22px; } .ayal-preloader__logo { width: 100px; height: 100px; object-fit: contain; transition: filter 500ms var(--ease-out); } /* Logo goes white once the background turns green — same technique as the header's transparent-state logo */ .ayal-preloader.is-green .ayal-preloader__logo { filter: brightness(0) invert(1); } .ayal-preloader__logo-text { font-family: var(--font-heading, serif); font-size: 22px; font-weight: 400; letter-spacing: 0.02em; color: var(--ayal-charcoal, #1F1F1F); transition: color 500ms var(--ease-out); } .ayal-preloader.is-green .ayal-preloader__logo-text { color: #FFFFFF; } .ayal-preloader__bar-track { width: 160px; height: 2px; border-radius: 2px; background: rgba(75, 93, 58, 0.15); overflow: hidden; transition: background-color 500ms var(--ease-out); } .ayal-preloader.is-green .ayal-preloader__bar-track { background: rgba(255, 255, 255, 0.25); } .ayal-preloader__bar-fill { width: 0%; height: 100%; background: var(--ayal-green, #4B5D3A); transition: width 120ms linear, background-color 500ms var(--ease-out); } .ayal-preloader.is-green .ayal-preloader__bar-fill { background: #FFFFFF; } .ayal-preloader__percent { font-family: var(--font-body, sans-serif); font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ayal-charcoal-3, #6B6B6B); transition: color 500ms var(--ease-out); } .ayal-preloader.is-green .ayal-preloader__percent { color: rgba(255, 255, 255, 0.75); } /* ── Ripple rings — play only during the reveal ─────────────────────────────── */ .ayal-preloader__ripple-rings { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 1; } .ayal-preloader__ring { position: absolute; width: 70px; height: 70px; border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 50%; opacity: 0; } .ayal-preloader.is-revealing .ayal-preloader__ring { animation: ayal-preloader-ripple 1100ms ease-out forwards; } .ayal-preloader.is-revealing .ayal-preloader__ring:nth-child(2) { animation-delay: 110ms; } .ayal-preloader.is-revealing .ayal-preloader__ring:nth-child(3) { animation-delay: 220ms; } @keyframes ayal-preloader-ripple { 0% { opacity: 0.85; transform: scale(0.5); } 100% { opacity: 0; transform: scale(7); } } /* ── Reduced motion ──────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .ayal-preloader { transition: opacity 300ms linear !important; clip-path: none !important; } .ayal-preloader.is-revealing { clip-path: none !important; } .ayal-preloader__ring { display: none; } }