/* Public home — the one scenic Liquid Glass surface.
   Dark frosted panels over a dusk scene; glass needs rich light behind it. */

body.home-scene {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px;
    min-height: 100vh;
    color: var(--text-primary);
    background: linear-gradient(165deg, #C7D8F8 0%, #A8C2F3 45%, #8FACEE 100%);
}

/* Light blooms the glass can refract: sun at the horizon, cool aurora above. */
body.home-scene .mesh-gradient { filter: blur(90px); }

body.home-scene .mesh-1 {
    width: 46vw; height: 46vw;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.60) 0%, rgba(190, 212, 255, 0.25) 50%, transparent 72%);
    top: -12%; right: -8%; left: auto;
}

body.home-scene .mesh-2 {
    width: 56vw; height: 56vw;
    background: radial-gradient(circle, rgba(47, 107, 255, 0.55) 0%, rgba(47, 107, 255, 0.22) 52%, transparent 74%);
    top: 10%; left: -14%; right: auto; bottom: auto;
}

body.home-scene .mesh-3 {
    width: 38vw; height: 38vw;
    background: radial-gradient(circle, rgba(249, 115, 22, 0.55) 0%, rgba(249, 115, 22, 0.22) 52%, transparent 72%);
    bottom: -10%; left: 10%;
}

body.home-scene .mesh-4 {
    width: 34vw; height: 34vw;
    background: radial-gradient(circle, rgba(30, 64, 175, 0.45) 0%, rgba(30, 64, 175, 0.18) 52%, transparent 74%);
    bottom: 6%; right: -6%; top: auto;
}

body.home-scene .mesh-5 {
    width: 26vw; height: 26vw;
    background: radial-gradient(circle, rgba(147, 183, 255, 0.40) 0%, transparent 68%);
    top: 48%; left: 42%;
}

/* ── Liquid Glass ornaments: organic lenses floating behind the hero.
   Crisp (unlike the blurred mesh blooms) so they read as objects that bend
   the light field behind them — home only, never on workspaces. ── */
.glass-ornament {
    position: fixed;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(90% 90% at 24% 20%, rgba(255, 255, 255, 0.50) 0%, rgba(255, 255, 255, 0.10) 36%, transparent 62%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.34) 0%, rgba(143, 172, 238, 0.24) 40%, rgba(47, 107, 255, 0.20) 74%, rgba(249, 115, 22, 0.12) 100%);
    backdrop-filter: blur(9px) saturate(1.7) brightness(1.06);
    -webkit-backdrop-filter: blur(9px) saturate(1.7) brightness(1.06);
    border: 1.5px solid rgba(255, 255, 255, 0.65);
    box-shadow:
        0 30px 70px rgba(42, 74, 165, 0.26),
        inset 0 2px 14px rgba(255, 255, 255, 0.75),
        inset 0 -14px 30px rgba(47, 107, 255, 0.16),
        inset 12px -8px 28px rgba(249, 115, 22, 0.10);
}

/* Specular curve along the upper-left, like light sliding off the lens. */
.glass-ornament::before {
    content: '';
    position: absolute;
    left: 10%;
    top: 8%;
    width: 46%;
    height: 34%;
    border-radius: 60% 70% 65% 75% / 70% 60% 75% 65%;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.05) 72%);
    filter: blur(4px);
    opacity: 0.8;
}

/* One hot sparkle where the rim catches the sun. */
.glass-ornament::after {
    content: '';
    position: absolute;
    right: 13%;
    top: 18%;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 70%);
}

.glass-ornament--a {
    width: clamp(280px, 30vw, 470px);
    height: clamp(240px, 26vw, 410px);
    top: 5%;
    right: 6%;
    border-radius: 58% 42% 55% 45% / 52% 58% 42% 48%;
    rotate: -8deg;
    animation: ornament-drift-a 26s ease-in-out infinite alternate;
}

.glass-ornament--b {
    width: clamp(150px, 16vw, 250px);
    height: clamp(130px, 14vw, 220px);
    bottom: 7%;
    left: 7%;
    border-radius: 45% 55% 48% 52% / 58% 44% 56% 42%;
    rotate: 10deg;
    opacity: 0.92;
    animation: ornament-drift-b 34s ease-in-out infinite alternate;
    animation-delay: -11s;
}

/* Lenses drift like they're suspended in water: slow enough that the motion
   is felt rather than watched. Base rotation lives on `rotate`, so keyframes
   only nudge position and tilt. */
@keyframes ornament-drift-a {
    0%   { translate: 0 0; rotate: -8deg; }
    50%  { translate: -14px 12px; rotate: -5.5deg; }
    100% { translate: 8px 20px; rotate: -9.5deg; }
}

@keyframes ornament-drift-b {
    0%   { translate: 0 0; rotate: 10deg; }
    50%  { translate: 12px -10px; rotate: 12.5deg; }
    100% { translate: -8px -18px; rotate: 8.5deg; }
}

@media (max-width: 900px) {
    .glass-ornament--a {
        top: 2%;
        right: -14%;
        opacity: 0.75;
    }

    .glass-ornament--b { display: none; }
}

.welcome-container {
    width: 100%;
    max-width: 660px;
    position: relative;
    z-index: 2;
}

/* ── Hero: one dark frosted panel ── */

.hero-panel {
    padding: 48px 48px 40px;
    border-radius: var(--radius-24);
    background: rgba(255, 255, 255, 0.42);
    backdrop-filter: blur(30px) saturate(1.6);
    -webkit-backdrop-filter: blur(30px) saturate(1.6);
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    border-top-color: rgba(255, 255, 255, 1);
    box-shadow:
        0 24px 60px rgba(42, 74, 165, 0.30),
        0 6px 18px rgba(42, 74, 165, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.home-eyebrow {
    margin: 0 0 8px;
    text-align: center;
    font-size: var(--fs-micro);
    line-height: var(--lh-micro);
    font-weight: var(--fw-medium);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(60, 60, 67, 0.60);
}

.home-title {
    margin: 0 0 12px;
    text-align: center;
    font-size: clamp(40px, 5vw, 52px);
    line-height: 1.12;
    font-weight: var(--fw-semibold);
    letter-spacing: -0.5px;
    color: var(--text-primary);
}

/* The accent word: intense orange italic (typographic, not a button) */
.home-subtitle em {
    font-style: italic;
    font-weight: var(--fw-semibold);
    background: linear-gradient(100deg, #EA580C 0%, #F97316 60%, #FB8C3C 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Book a stay keeps a warm hint in its icon only */
.portal-grid > .portal-tile:nth-child(2) .portal-icon {
    background: rgba(249, 115, 22, 0.14);
    border-color: rgba(249, 115, 22, 0.30);
    color: #EA580C;
}

.home-subtitle {
    margin: 0 auto 36px;
    max-width: 44ch;
    text-align: center;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: rgba(60, 60, 67, 0.78);
}

/* ── Portal tiles ── */

.portal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.portal-tile {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 72px;
    padding: 14px 16px;
    border-radius: var(--radius-16);
    background: rgba(255, 255, 255, 0.50);
    backdrop-filter: blur(14px) saturate(1.3);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    border: 1px solid rgba(255, 255, 255, 0.90);
    box-shadow:
        0 10px 26px rgba(42, 74, 165, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    color: var(--text-primary);
    text-decoration: none;
    transition: background-color var(--dur-sm) var(--ease),
        border-color var(--dur-sm) var(--ease),
        transform var(--dur-sm) var(--ease),
        box-shadow var(--dur-sm) var(--ease);
}

.portal-tile:hover {
    background: rgba(255, 255, 255, 0.68);
    border-color: #FFFFFF;
    transform: translateY(-3px);
    box-shadow:
        0 18px 40px rgba(42, 74, 165, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.portal-tile:active {
    transform: translateY(0);
    background: rgba(255, 255, 255, 0.78);
    box-shadow: var(--soft-inset);
}

.portal-tile:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.portal-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-12);
    background: #F5F5F7;
    border: 1px solid rgba(0, 0, 0, 0.05);
    color: rgba(28, 28, 32, 0.80);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 1px 2px rgba(50, 60, 110, 0.08);
}

.portal-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    text-align: left;
}

.home-cta-label {
    font-size: var(--fs-label);
    line-height: var(--lh-label);
    font-weight: var(--fw-semibold);
    color: inherit;
}

.home-cta-hint {
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
    font-weight: var(--fw-regular);
    color: rgba(60, 60, 67, 0.65);
}

.portal-chevron {
    margin-left: auto;
    flex-shrink: 0;
    display: inline-flex;
    color: rgba(60, 60, 67, 0.40);
    transition: transform var(--dur-sm) var(--ease), color var(--dur-sm) var(--ease);
}

.portal-tile:hover .portal-chevron {
    color: rgba(60, 60, 67, 0.80);
    transform: translateX(2px);
}

/* Primary: the one filled action. */
.portal-tile--primary {
    background: linear-gradient(180deg, #5A8CFF 0%, var(--accent) 55%, #1D4FD8 100%);
    border: 1px solid rgba(255, 255, 255, 0.40);
    border-top-color: rgba(255, 255, 255, 0.60);
    box-shadow:
        0 14px 34px var(--accent-glow),
        0 4px 10px rgba(29, 79, 216, 0.35),
        inset 0 1.5px 0 rgba(255, 255, 255, 0.55),
        inset 0 -3px 6px rgba(21, 52, 150, 0.45);
    color: #FFFFFF;
}

.portal-tile--primary:active {
    box-shadow:
        0 4px 14px rgba(37, 99, 235, 0.35),
        inset 0 2px 6px rgba(0, 0, 60, 0.28);
}

.portal-tile--primary .portal-icon {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.24);
    color: #FFFFFF;
}

.portal-tile--primary .home-cta-hint {
    color: rgba(255, 255, 255, 0.75);
}

.portal-tile--primary .portal-chevron {
    color: rgba(255, 255, 255, 0.75);
}

.portal-tile--primary:hover {
    background: linear-gradient(180deg, #6B99FF 0%, #3D77FF 55%, #2459E6 100%);
    border-color: rgba(255, 255, 255, 0.55);
    box-shadow:
        0 20px 44px var(--accent-glow),
        0 6px 14px rgba(29, 79, 216, 0.40),
        inset 0 1.5px 0 rgba(255, 255, 255, 0.60),
        inset 0 -3px 6px rgba(21, 52, 150, 0.45);
}

#staffWorkspaceBtn[hidden] {
    display: none;
}

/* ── Signed-in strip ── */

/* display:flex would defeat the UA [hidden] rule. */
.logout-section[hidden] {
    display: none;
}

.logout-section {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-bottom: 28px;
    padding: 12px 16px;
    border-radius: var(--radius-12);
    background: rgba(255, 255, 255, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.7);
}

.logout-section p {
    margin: 0;
    font-size: var(--fs-label);
    line-height: var(--lh-label);
    color: rgba(60, 60, 67, 0.80);
}

.logout-section p:last-child {
    flex-basis: 100%;
    font-size: var(--fs-caption);
    color: rgba(60, 60, 67, 0.60);
}

.logout-section strong {
    color: var(--text-primary);
    font-weight: var(--fw-semibold);
}

.logout-section .logout-btn {
    margin-left: auto;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.85);
    color: var(--text-primary);
    box-shadow: none;
}

.logout-section .logout-btn:hover {
    background: rgba(255, 255, 255, 0.8);
    color: var(--text-primary);
}

/* ── Footnote ── */

.home-footnote {
    margin: 20px 4px 0;
    text-align: center;
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 10px rgba(30, 50, 120, 0.45);
}

/* ── Responsive ── */

@media (max-width: 768px) {
    .hero-panel {
        padding: 36px 24px 28px;
    }

    .portal-grid {
        grid-template-columns: 1fr;
    }

    .portal-tile {
        min-height: 64px;
    }
}

@media (max-width: 480px) {
    body.home-scene {
        padding: 16px;
    }

    .hero-panel {
        padding: 32px 18px 24px;
    }
}

/* ── Preferences ── */

@media (prefers-reduced-motion: reduce) {
    .fade-up,
    .fade-up-d1,
    .fade-up-d2 {
        animation: none !important;
        opacity: 1 !important;
    }

    .portal-tile:hover {
        transform: none;
    }

    .glass-ornament {
        animation: none !important;
        translate: none;
    }
}

@media (prefers-reduced-transparency: reduce) {
    .hero-panel {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(255, 255, 255, 0.96);
    }

    .glass-ornament { display: none; }
}