/* =============================================================================
   stay-loader.css
   (wwwroot/css/stay-loader.css)
   -----------------------------------------------------------------------------
   The Stay branded loader overlay. A warm, light sunset canvas (not the dark
   Tenant+ canvas) — Stay is a bright, optimistic surface. The hero stage shows
   the sun rising over the bay while the striped beach umbrella opens, then the
   IKHAYALAMI wordmark + "Stay" sub settle in. Self-contained, namespaced
   .stayl-*. Shown only on first landing into Stay (see stay-loader.js).
   ============================================================================= */

.stayl-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Bright sunset wash — white at top easing into warm cream/peach. */
    background: radial-gradient(1200px 700px at 50% 24%, #FFFFFF 0%, #FFF7EE 52%, #FFE9CF 100%);
    color: #1A1A1F;
    font-family: 'DM Sans', 'Inter', system-ui, sans-serif;
    opacity: 0;
    transition: opacity 160ms ease;
    overflow: hidden;
}

    .stayl-overlay.stayl-show {
        opacity: 1;
    }

    .stayl-overlay.stayl-hide {
        opacity: 0;
        pointer-events: none;
    }

/* ── Hero stage ─────────────────────────────────────────────────────────── */
.stayl-stage {
    width: 280px;
    height: 220px;
    position: relative;
    margin-bottom: 16px;
}

.stayl-scene {
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Ambient haze breathes gently. */
.stayl-haze {
    transform-origin: 140px 150px;
    animation: staylHaze 3.4s ease-in-out infinite;
}

@keyframes staylHaze {
    0%, 100% {
        opacity: 0.7;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.06);
    }
}

/* Rising sun — emerges from behind the horizon. */
.stayl-sun {
    transform: translateY(46px);
    animation: staylSunRise 1.6s cubic-bezier(.22, 1, .36, 1) forwards;
    filter: drop-shadow(0 0 22px rgba(245, 138, 38, 0.45));
}

@keyframes staylSunRise {
    from {
        transform: translateY(46px);
    }

    to {
        transform: translateY(0);
    }
}

.stayl-sun-bands {
    opacity: 0;
    animation: staylFadeIn 0.5s ease forwards 0.9s;
}

/* Rays fade + grow in after the sun starts rising. */
.stayl-rays line {
    opacity: 0;
    transform-origin: 140px 168px;
    animation: staylRay 0.5s ease forwards;
}

    .stayl-rays line:nth-child(1) {
        animation-delay: 0.7s;
    }

    .stayl-rays line:nth-child(2) {
        animation-delay: 0.8s;
    }

    .stayl-rays line:nth-child(3) {
        animation-delay: 0.85s;
    }

    .stayl-rays line:nth-child(4) {
        animation-delay: 0.95s;
    }

    .stayl-rays line:nth-child(5) {
        animation-delay: 1.0s;
    }

@keyframes staylRay {
    from {
        opacity: 0;
        transform: scale(0.6);
    }

    to {
        opacity: 0.7;
        transform: scale(1);
    }
}

/* Concentric rings pulse outward. */
.stayl-ring {
    stroke-opacity: 0.16;
    stroke-width: 2;
    transform-origin: 140px 168px;
    animation: staylRing 2.6s ease-out infinite;
}

.stayl-ring--2 {
    animation-delay: 0.45s;
    stroke-opacity: 0.12;
}

.stayl-ring--3 {
    animation-delay: 0.9s;
    stroke-opacity: 0.08;
}

@keyframes staylRing {
    0% {
        transform: scale(0.72);
        opacity: 0;
    }

    35% {
        opacity: 1;
    }

    100% {
        transform: scale(1.12);
        opacity: 0;
    }
}

/* Gulls drift. */
.stayl-gull {
    opacity: 0;
    animation: staylGull 0.6s ease forwards;
}

.stayl-gull--1 {
    animation-delay: 1.0s;
}

.stayl-gull--2 {
    animation-delay: 1.15s;
}

@keyframes staylGull {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 0.6;
        transform: translateY(0);
    }
}

/* Sea + sand settle in. */
.stayl-sea {
    opacity: 0;
    animation: staylFadeIn 0.5s ease forwards 0.4s;
}

.stayl-sand {
    opacity: 0;
    animation: staylFadeIn 0.5s ease forwards 0.55s;
}

@keyframes staylFadeIn {
    to {
        opacity: 1;
    }
}

/* Umbrella opens (scales up from the pole top) then settles. */
.stayl-umbrella {
    opacity: 0;
    animation: staylFadeIn 0.3s ease forwards 0.35s;
}

.stayl-canopy {
    transform-origin: 66px 120px;
    transform: scale(0.15);
    animation: staylUmbrellaPop 0.7s cubic-bezier(.34, 1.56, .64, 1) forwards 0.4s;
}

.stayl-umbrella-shadow {
    opacity: 0;
    animation: staylFadeIn 0.4s ease forwards 0.9s;
}

@keyframes staylUmbrellaPop {
    0% {
        transform: scale(0.15) translateY(6px);
    }

    60% {
        transform: scale(1.06) translateY(0);
    }

    100% {
        transform: scale(1) translateY(0);
    }
}

/* ── Wordmark ───────────────────────────────────────────────────────────── */
.stayl-wordmark {
    font-family: 'Clash Display', 'DM Sans', sans-serif;
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #0E0E11;
    opacity: 0;
    animation: staylRise 0.5s ease forwards 0.5s;
}

.stayl-i--sky {
    color: #56C4F8;
}

.stayl-i--orange {
    color: #F58220;
}

.stayl-wordmark-sub {
    margin-top: 2px;
    font-family: 'Clash Display', 'DM Sans', sans-serif;
    font-size: 1.0rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    background: linear-gradient(135deg, #F58220, #F89622 55%, #56C4F8);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0;
    animation: staylRise 0.5s ease forwards 0.62s;
}

.stayl-tagline {
    margin-top: 6px;
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #B07B43;
    opacity: 0;
    animation: staylRise 0.5s ease forwards 0.74s;
}

@keyframes staylRise {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Status cycler ──────────────────────────────────────────────────────── */
.stayl-status {
    margin-top: 24px;
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: #6C757D;
    min-height: 20px;
    opacity: 0;
    animation: staylFadeIn 0.4s ease forwards 0.85s;
}

/* ── Progress bar ───────────────────────────────────────────────────────── */
.stayl-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: rgba(245, 130, 32, 0.10);
    overflow: hidden;
}

.stayl-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #F58220 0%, #F89622 45%, #56C4F8 100%);
    box-shadow: 0 0 12px rgba(245, 130, 32, 0.4);
    animation: staylProgress 1.6s cubic-bezier(.4, 0, .2, 1) forwards 0.3s;
}

@keyframes staylProgress {
    0% {
        width: 0%;
    }

    40% {
        width: 42%;
    }

    70% {
        width: 72%;
    }

    100% {
        width: 100%;
    }
}

/* ── Footer credit ──────────────────────────────────────────────────────── */
.stayl-credit {
    position: absolute;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.66rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(176, 123, 67, 0.6);
    white-space: nowrap;
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .stayl-sun, .stayl-ring, .stayl-umbrella, .stayl-canopy, .stayl-haze,
    .stayl-rays line, .stayl-gull, .stayl-sun-bands, .stayl-umbrella-shadow,
    .stayl-wordmark, .stayl-wordmark-sub, .stayl-tagline, .stayl-status,
    .stayl-sea, .stayl-sand, .stayl-progress-fill {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ── Small phones ───────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .stayl-stage {
        width: 232px;
        height: 182px;
    }

    .stayl-wordmark {
        font-size: 1.45rem;
    }

    .stayl-wordmark-sub {
        font-size: 0.9rem;
    }
}