/* ============================================================================
   TENANT+ SCENE — tenant-scene.css
   ----------------------------------------------------------------------------
   Self-contained background experience for the TENANT+ tab (#tab-tenant-portal).

   v2 — The scene is now the LIST scene's white-sunset backdrop with a single
   insertion: a pastel JOHANNESBURG SKYLINE (art-print style — Hillbrow Tower
   in coral, Sentech Tower in sage, layered translucent blocks; no stadium).
   Everything else is lifted 1:1 from list-scene.css (ls→ts):

     • Sun top-right with slow "breathing" scale.
     • Three cloud banks clustered beside the sun, gentle local sway.
     • Three birds wheeling lazily at sun height.
     • Brown wild-grass band with swaying blades along the foot.
     • The shared background <video class="bg-video"> is suppressed on Tenant+
       exactly as .stay-mode / .list-mode do for their tabs.

     • The Tenant+ journey chrome stays glass: the theatre wrapper goes
       transparent, the role cards (.tp-tcard) become lightly frosted, and the
       branch screens (landlord registration form / tenant view) sit directly
       on the scene with a lightly frosted sticky header.

   ACTIVATION CONTRACT (kept in lock-step by tabs.js):
       #leftPanel gains ".tenant-mode" while the Tenant+ pill is active
       (data-mode="tenant"), and loses it on every other tab. The
       ".tenant-scene" element is relocated to be a DIRECT child of #leftPanel
       at parse time (see the relocation script in Index.cshtml), identical to
       .list-scene / .stay-scene.

   PERFORMANCE / A11Y: pure CSS transforms on composited layers; honours
   prefers-reduced-motion, Save-Data, and print; decorative only (aria-hidden,
   pointer-events:none). The skyline itself is static — zero animation cost.

   NAMESPACE: every selector is prefixed .tenant-scene / .ts-* / .tenant-mode
   and scoped under #leftPanel, so nothing here can bleed into Buy / Rent /
   Stay / List — or into the standalone /tenant-portal pages.
   ========================================================================== */

/* ── SCENE CONTAINER ────────────────────────────────────────────────────── */
.tenant-scene {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    display: none; /* shown only in tenant-mode */
    overflow: hidden;
}

.tenant-scene-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* ── SUN — slow "breathing" scale, anchored top-right (List timing) ─────── */
.ts-sun {
    transform-box: fill-box;
    transform-origin: center;
    animation: tsSunBreathe 9s ease-in-out infinite;
    will-change: transform;
}

@keyframes tsSunBreathe {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.04);
    }
}

/* ── CLOUDS — clustered beside the sun, gentle local sway (List anchors) ── */
.ts-cloud {
    will-change: transform;
}

.ts-cloud--a {
    animation: tsDriftA 26s ease-in-out infinite;
}

.ts-cloud--b {
    animation: tsDriftB 32s ease-in-out infinite;
}

.ts-cloud--c {
    animation: tsDriftC 38s ease-in-out infinite;
}

@keyframes tsDriftA {
    0%, 100% {
        transform: translate(1000px, 150px);
    }

    50% {
        transform: translate(1052px, 142px);
    }
}

@keyframes tsDriftB {
    0%, 100% {
        transform: translate(1120px, 235px);
    }

    50% {
        transform: translate(1062px, 243px);
    }
}

@keyframes tsDriftC {
    0%, 100% {
        transform: translate(940px, 95px);
    }

    50% {
        transform: translate(986px, 88px);
    }
}

/* ── BIRDS — slow, lazy wheeling near the sun's height (List anchors) ───── */
.ts-bird {
    will-change: transform;
}

.ts-bird--1 {
    animation: tsBird1 64s ease-in-out infinite;
}

.ts-bird--2 {
    animation: tsBird2 82s ease-in-out infinite;
}

.ts-bird--3 {
    animation: tsBird3 98s ease-in-out infinite;
}

@keyframes tsBird1 {
    0% {
        transform: translate(820px, 220px);
    }

    50% {
        transform: translate(1020px, 170px);
    }

    100% {
        transform: translate(820px, 220px);
    }
}

@keyframes tsBird2 {
    0% {
        transform: translate(950px, 160px);
    }

    50% {
        transform: translate(760px, 250px);
    }

    100% {
        transform: translate(950px, 160px);
    }
}

@keyframes tsBird3 {
    0% {
        transform: translate(700px, 260px);
    }

    50% {
        transform: translate(900px, 200px);
    }

    100% {
        transform: translate(700px, 260px);
    }
}

/* ── GRASS BLADES — gentle sway, pivoting at the base of each blade ─────── */
.ts-blade {
    transform-box: fill-box;
    transform-origin: bottom center;
    will-change: transform;
}

.ts-blade--1 {
    animation: tsSway1 6s ease-in-out infinite;
}

.ts-blade--2 {
    animation: tsSway2 7.5s ease-in-out infinite;
}

.ts-blade--3 {
    animation: tsSway3 6.8s ease-in-out infinite;
}

@keyframes tsSway1 {
    0%, 100% {
        transform: rotate(-3deg);
    }

    50% {
        transform: rotate(3deg);
    }
}

@keyframes tsSway2 {
    0%, 100% {
        transform: rotate(2.5deg);
    }

    50% {
        transform: rotate(-2.5deg);
    }
}

@keyframes tsSway3 {
    0%, 100% {
        transform: rotate(-2deg);
    }

    50% {
        transform: rotate(2deg);
    }
}

/* ── MODE WIRING ─────────────────────────────────────────────────────────
   1 — reveal the scene only while the Tenant+ pill is active */
#leftPanel.tenant-mode .tenant-scene {
    display: block !important;
}

/* 2 — remove the shared background video + all its managed layers */
#leftPanel.tenant-mode .bg-video,
#leftPanel.tenant-mode .bg-video-fallback,
#leftPanel.tenant-mode .bg-shape-strip,
#leftPanel.tenant-mode [class*="bg-video"] {
    display: none !important;
}

/* 3 — kill the right-edge fade overlay on the search section */
#leftPanel.tenant-mode.search-section::after,
#leftPanel.tenant-mode .search-section::after {
    display: none !important;
}

/* 4 — clear the content chain so the scene reads through to the journey:
   .search-wrapper → .dynamic-tabs-container → #tab-tenant-portal */
#leftPanel.tenant-mode .search-wrapper,
#leftPanel.tenant-mode .dynamic-tabs-container,
#leftPanel.tenant-mode #tab-tenant-portal {
    background: transparent !important;
}

/* ── TRANSPARENT JOURNEY WRAPPER ─────────────────────────────────────────
   .tp-journey paints a full white-grey gradient backdrop (+ radial brand
   tints). On Tenant+ the scene IS the backdrop, so the journey goes clear;
   the panels inside have no fill of their own and inherit the glass. */
#leftPanel.tenant-mode .tp-journey,
#leftPanel.tenant-mode .tp-jpanel,
#leftPanel.tenant-mode .tp-theater {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* ── ROLE CARDS (.tp-tcard) — lightly frosted ────────────────────────────
   Stock: rgba(255,255,255,0.85) + backdrop blur(20px) saturate(180%). The
   20px blur smears the scene into an opaque-looking milk (the exact trap we
   hit on the List cards), so we override BOTH alpha and blur with !important. */
#leftPanel.tenant-mode .tp-tcard {
    background: rgba(255, 255, 255, 0.5) !important;
    -webkit-backdrop-filter: saturate(120%) blur(6px) !important;
    backdrop-filter: saturate(120%) blur(6px) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}

/* Their decorative orbs stay, but soften so they don't re-opaque the card. */
#leftPanel.tenant-mode .tp-tcard-bg {
    opacity: 0.55 !important;
}

/* ── BRANCH SCREENS (landlord form / tenant view) ────────────────────────
   The branch panel sits on the (now transparent) journey. Its sticky header
   (back arrow + stepper) was a 92% white bar — make it a light glass strip so
   the scene reads beneath while the stepper stays legible. Form fields keep
   their own solid input styling for legibility — only the chrome goes glass. */
#leftPanel.tenant-mode .tp-jheader {
    background: rgba(255, 255, 255, 0.45) !important;
    -webkit-backdrop-filter: saturate(115%) blur(5px) !important;
    backdrop-filter: saturate(115%) blur(5px) !important;
    border-bottom-color: rgba(255, 255, 255, 0.4) !important;
}

/* Step panes / form sections inside the branch carry no fill of their own —
   assert transparent so no later stylesheet re-opaques them. */
#leftPanel.tenant-mode .tp-jstep,
#leftPanel.tenant-mode .tp-jid-pane {
    background: transparent !important;
}

/* ── MOTION & DATA PREFERENCES ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .ts-sun,
    .ts-cloud--a, .ts-cloud--b, .ts-cloud--c,
    .ts-bird--1, .ts-bird--2, .ts-bird--3,
    .ts-blade {
        animation: none !important;
    }
    /* Clouds + birds are drawn at the SVG origin and positioned purely by
       their animation transforms — freeze them at the keyframe anchors so
       the composition still reads. Blades are drawn in place, so stopping
       their sway is enough. */
    .ts-cloud--a {
        transform: translate(1000px, 150px);
    }

    .ts-cloud--b {
        transform: translate(1120px, 235px);
    }

    .ts-cloud--c {
        transform: translate(940px, 95px);
    }

    .ts-bird--1 {
        transform: translate(820px, 220px);
    }

    .ts-bird--2 {
        transform: translate(950px, 160px);
    }

    .ts-bird--3 {
        transform: translate(700px, 260px);
    }
}

@media (prefers-reduced-data: reduce) {
    .ts-sun, .ts-cloud, .ts-bird, .ts-blade {
        animation-duration: 120s !important;
    }
}

@media print {
    .tenant-scene {
        display: none !important;
    }
}