/**
 * @license
 * Copyright (c) 2026 Elson Lleshi
 * All Rights Reserved. Unauthorized use prohibited.
 * SPDX-License-Identifier: UNLICENSED
 *
 * Homepage LIVE construction scene, fixed behind the whole page: soft sky +
 * drifting clouds + a tower crane + a terrace of UK houses that build up as you
 * scroll (heights and the crane's lift are driven per-frame by scroll-build.js).
 * The shell goes up first, then the finishing details fade in. Decorative
 * (pointer-events: none).
 */

/* Lift page content above the fixed scene. NOT the header (fixed navbar must stay
   in the root stacking context). Content sits on the scene; cards stay opaque. */
body > .page-banner,
body > section,
body > #footer-include { position: relative; z-index: 1; }

/* Let the scene show THROUGH the page. The hero is transparent; opaque cards keep
   text readable. Alt bands become frosted; navy bands become slightly see-through. */
body > section.alt-bg,
body > .faq-preview-section { background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(2px); }
body > .savings-section,
body > .cta-section {
    background: linear-gradient(135deg, rgba(14, 39, 66, 0.9), rgba(20, 58, 99, 0.88));
}

/* Cards on the homepage go slightly translucent (frosted) so the construction
   scene reads through them across the whole scroll, text staying legible. */
body > section .feature-card,
body > section .value-card,
body > section .work-card,
body > section .process-step,
body > section .faq-preview-card,
body > section .testimonial-highlight,
body > section .info-box {
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(3px);
}

/* ── The scene ────────────────────────────────────────────────────────────── */
#sb-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background: linear-gradient(180deg, #b6d2ea 0%, #cfe0f0 36%, #e6eef6 72%, #f1f5f9 100%);

    /* Subtle Yorkshire palette (rgb triplets, used at low alpha behind content) */
    --sb-stone:    198, 150, 86;    /* honey sandstone walls (warmer) */
    --sb-stone-dk: 170, 120, 64;    /* deeper stone (chimneys, sills) */
    --sb-slate:     84,  92, 102;   /* slate-grey roof */
    --sb-glass:     64,  84, 104;   /* window glass */
    --sb-frame:    248, 248, 244;   /* white frames / glazing bars */
    --sb-door:      32,  52,  80;   /* painted navy front door */
}

/* Drifting clouds */
.sb-cloud {
    position: absolute;
    background: #ffffff;
    border-radius: 50%;
    opacity: 0.75;
    filter: blur(1px);
    box-shadow: 40px 8px 0 -6px #fff, 84px 16px 0 -12px #fff, -38px 12px 0 -8px #fff;
}
.sb-cloud.c1 { width: 90px; height: 34px; top: 12%; left: -160px; animation: sb-drift 46s linear infinite; }
.sb-cloud.c2 { width: 64px; height: 26px; top: 24%; left: -160px; opacity: 0.6; animation: sb-drift 64s linear infinite 8s; }
.sb-cloud.c3 { width: 110px; height: 40px; top: 7%;  left: -200px; opacity: 0.5; animation: sb-drift 82s linear infinite 20s; }
@keyframes sb-drift { from { transform: translateX(0); } to { transform: translateX(115vw); } }

.sb-stack {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.sb-ground { position: absolute; bottom: 0; left: 0; right: 0; height: 5px; background: rgba(var(--sb-slate), 0.35); }

/* A single detailed UK townhouse. The house is a column that grows upward
   (column-reverse → ground floor at the bottom); stage heights are driven inline
   by JS so growth tracks scroll exactly, floor by floor. */
.sb-building {
    position: relative;
    z-index: 2;
    width: clamp(300px, 40vw, 560px);
    display: flex;
    align-items: flex-end;
}
.sb-house {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column-reverse;
    align-items: stretch;
}
.sb-stage { height: 0; overflow: hidden; opacity: 0; }

/* Finishing details start hidden; JS fades them in after the shell is up. */
.sb-bay, .sb-door, .sb-ff .sb-win, .sb-sf .sb-win, .sb-chimney, .sb-dormer { opacity: 0; }

/* Walls live on the floor stages — warm Yorkshire sandstone. */
.sb-gf, .sb-ff, .sb-sf {
    background: rgba(var(--sb-stone), 0.20);
    border-left: 3px solid rgba(var(--sb-stone-dk), 0.55);
    border-right: 3px solid rgba(var(--sb-stone-dk), 0.55);
}

/* Ground floor: a bay window + a panelled door with canopy */
.sb-gf { display: flex; align-items: flex-end; justify-content: space-around; padding: 0 8%; gap: 8%; }
.sb-bay {
    width: 42%; height: 60%;
    display: flex; align-items: stretch; gap: 4px; padding: 5px 6px;
    background: rgba(var(--sb-glass), 0.12);
    border: 2px solid rgba(var(--sb-stone-dk), 0.55); border-bottom: none;
    border-radius: 4px 4px 0 0;
    position: relative;
}
.sb-bay .sb-win { flex: 1; height: 100%; }
.sb-bay .sb-win::before { display: none; }   /* the bay has its own sill */
.sb-bay::after { content: ''; position: absolute; bottom: 0; left: -6%; width: 112%; height: 4px; background: rgba(var(--sb-stone-dk), 0.6); border-radius: 1px; }
.sb-door {
    width: 24%; height: 64%;
    background: rgba(var(--sb-door), 0.7);
    border-radius: 4px 4px 0 0;
    box-shadow: inset 0 0 0 2px rgba(var(--sb-frame), 0.35);  /* panel outline */
    position: relative;
}
.sb-door::before { content: ''; position: absolute; top: -7px; left: -14%; width: 128%; height: 7px; background: rgba(var(--sb-stone-dk), 0.7); border-radius: 3px 3px 0 0; }  /* canopy */
.sb-door::after  { content: ''; position: absolute; top: 50%; right: 16%; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }                              /* knob */

/* Upper floors: three sash windows each */
.sb-ff, .sb-sf { display: flex; align-items: center; justify-content: space-around; padding: 0 9%; }
.sb-ff .sb-win, .sb-sf .sb-win { width: 24%; height: 50%; }

.sb-win {
    background: rgba(var(--sb-glass), 0.38);
    border-radius: 2px;
    box-shadow: inset 0 0 0 2px rgba(var(--sb-frame), 0.7);  /* white frame */
    position: relative;
}
.sb-win::after { content: ''; position: absolute; inset: 0; background:
    linear-gradient(rgba(var(--sb-frame),0.7), rgba(var(--sb-frame),0.7)) center/100% 2px no-repeat,
    linear-gradient(rgba(var(--sb-frame),0.7), rgba(var(--sb-frame),0.7)) center/2px 100% no-repeat; }
.sb-win::before { content: ''; position: absolute; bottom: -4px; left: -12%; width: 124%; height: 3px; background: rgba(var(--sb-stone-dk), 0.6); border-radius: 1px; }  /* sill */
.sb-win.lit { background: var(--gold); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.5), 0 0 12px rgba(200, 162, 76, 0.6); animation: sb-flicker 5s ease-in-out infinite; }
/* Flicker via brightness, not opacity — opacity is used to fade details in. */
@keyframes sb-flicker { 0%, 100% { filter: brightness(1); } 45% { filter: brightness(0.78); } 70% { filter: brightness(1.15); } }

/* Roof: pitched, two chimneys with pots, a central dormer
   (reveals bottom-up as the stage grows) */
.sb-roof { position: relative; }
.sb-roof::before {
    content: '';
    position: absolute; left: -3px; right: -3px; bottom: 0; top: 26%;
    background: rgba(var(--sb-slate), 0.5);
    clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
}
/* Chimneys sit nearer the ridge, base sunk into the slope so they read as
   part of the roof (the lower portion overlaps the slate triangle). */
.sb-chimney { position: absolute; top: 4%; width: 9%; height: 54%; background: rgba(var(--sb-stone-dk), 0.62); border-radius: 1px; }
.sb-chimney.left  { left: 30%; }
.sb-chimney.right { left: 70%; }
.sb-chimney::after { content: ''; position: absolute; top: -4px; left: -22%; width: 144%; height: 5px; background: rgba(var(--sb-stone-dk), 0.72); border-radius: 1px; }  /* pot */
.sb-dormer { position: absolute; bottom: 0; left: 42%; width: 16%; height: 36%; background: rgba(var(--sb-glass), 0.3); border: 2px solid rgba(var(--sb-stone-dk), 0.55); border-bottom: none; }
.sb-dormer::before { content: ''; position: absolute; top: -8px; left: -16%; width: 132%; height: 9px; background: rgba(var(--sb-slate), 0.5); clip-path: polygon(0% 100%, 50% 0%, 100% 100%); }  /* dormer roof */

/* ── Tower crane: gentle sway; the lift (trolley + cable + hook + load) is
   positioned per-frame by JS to deliver each floor as it rises. ──────────── */
.sb-crane {
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: clamp(180px, 30vw, 480px);
    width: clamp(240px, 34vw, 460px);
    height: 86vh;
    z-index: 1;
    transform-origin: 60% 100%;
    animation: sb-sway 9s ease-in-out infinite;
}
@keyframes sb-sway { 0%, 100% { transform: rotate(-0.8deg); } 50% { transform: rotate(0.8deg); } }
.sb-crane-mast { position: absolute; left: 60%; bottom: 0; width: 5px; height: 100%; background: rgba(14, 39, 66, 0.34); }
.sb-crane-jib  { position: absolute; left: -4%; top: 7%; width: 78%; height: 5px; background: rgba(14, 39, 66, 0.34); }
.sb-crane-tail { position: absolute; left: 72%; top: 4%; width: 5px; height: 5%; background: rgba(14, 39, 66, 0.28); }
.sb-crane-acab { position: absolute; left: 56%; top: 6.2%; width: 16px; height: 12px; background: rgba(14, 39, 66, 0.3); }

/* Lifting assembly — left/cable height/load set inline by JS. */
.sb-lift { position: absolute; left: 6%; top: 7.5%; width: 30px; }
.sb-cable { position: absolute; left: 14px; top: 0; width: 2px; height: 14px; background: rgba(14, 39, 66, 0.34); }
.sb-hook  { position: absolute; left: 8px; top: 14px; width: 14px; height: 9px; border: 3px solid rgba(14, 39, 66, 0.34); border-top: none; border-radius: 0 0 6px 6px; }
.sb-load  { position: absolute; left: 3px; top: 20px; width: 24px; height: 16px; background: rgba(200, 162, 76, 0.55); border: 2px solid rgba(14, 39, 66, 0.3); }

@media (prefers-reduced-motion: reduce) {
    .sb-cloud, .sb-crane, .sb-win.lit { animation: none; }
}

@media (max-width: 760px) {
    .sb-crane { display: none; }
    .sb-building { width: min(74vw, 360px); }
    body > section.alt-bg, body > .faq-preview-section { backdrop-filter: none; background: rgba(255, 255, 255, 0.72); }
}

@media print { #sb-bg { display: none !important; } }