/* =============================================================
   SKYLINE V2 — atmospheric depth pass
   Branch: skyline-v2 · concept only, not yet approved to launch

   This file loads AFTER the inline <style> block in index.html,
   so every rule here wins on equal specificity. Nothing in the
   original CSS was deleted — remove the one <link> tag in
   index.html and the v1 skyline comes straight back.

   What it does:
     1. Sorts every building into far / mid / near depth tiers
        and gives each tier its own colour, contrast and horizon.
     2. Replaces the hard-edged 1100px content scrim with a
        feathered one, so the centre of the city stops being a
        black rectangle.
     3. Adds a real sky gradient, two haze layers and a receding
        ground plane.
     4. Flattens the grab-bag rooflines into one vocabulary.
     5. Parks the easter eggs (planes, statue, rooftop beacon)
        for this concept.
   ============================================================= */


/* -------------------------------------------------------------
   1. DEPTH TOKENS

   The recolour chain does the heavy lifting. grayscale(1) then
   sepia(1) collapses every rogue hue in the v1 skyline — the
   magenta tower, the cornflower low cluster, the white-blue
   domes, the orange pyramid — onto a single base tone.
   hue-rotate() then places that tone, and saturate/brightness
   set how far away it reads. opacity() lives inside the filter
   on purpose: the towers' fade-in keyframes animate the
   `opacity` property, so setting it there would fight them.
   ------------------------------------------------------------- */

:root {
    --sky-far:  grayscale(1) sepia(1) hue-rotate(163deg) saturate(.70) brightness(1.16) opacity(.55);
    --sky-mid:  grayscale(1) sepia(1) hue-rotate(150deg) saturate(1.25) brightness(1.24) opacity(.82);
    --sky-near: saturate(1.1)  brightness(1.12) opacity(1);

    /* How far above the viewport floor each tier's base sits.
       Bases higher up the screen = further away. */
    --sky-horizon: 7vh;

    /* Haze / ground body colour, as bare channels for rgba(). */
    --sky-body: 10, 10, 14;
    --sky-air:  90, 150, 170;
    --sky-ink:  0, 255, 200;
}

body.sunset-mode {
    --sky-far:  grayscale(1) sepia(1) hue-rotate(-10deg) saturate(.70) brightness(1.02) opacity(.52);
    --sky-mid:  grayscale(1) sepia(1) hue-rotate(2deg)   saturate(1.6) brightness(1.15) opacity(.80);
    --sky-near: saturate(1.1)  brightness(1.12) opacity(1);

    --sky-body: 14, 10, 8;
    --sky-air:  190, 130, 80;
    --sky-ink:  255, 179, 71;
}


/* -------------------------------------------------------------
   2. TIER ASSIGNMENT

   Tier is driven by horizontal position, not size. The centre of
   the screen is the deepest part of the city so the hero copy
   always sits against haze; the left and right edges hold the
   near, full-contrast anchors.
   ------------------------------------------------------------- */

/* FAR — the recessed centre (35%–72% across) */
.bg-tower-3,
.bg-tower-4,
.bg-tower-7,
.bg-tower-8,
.bg-tower-9,
.bg-tower-11 {
    filter: var(--sky-far);
    bottom: var(--sky-horizon);
    z-index: 0;
}

/* MID — the shoulders either side of centre */
.bg-tower-1,
.bg-tower-2,
.bg-tower-5,
.bg-tower-6,
.bg-tower-10,
.bg-tower-12,
.bg-cluster-low-1,
.fg-building-3 {
    filter: var(--sky-mid);
    bottom: calc(var(--sky-horizon) * .34);
    z-index: 2;
}

/* NEAR — the two anchor towers and the front row */
.modernist-tower,
.secondary-tower,
.fg-building-1,
.fg-building-2,
.fg-building-4 {
    filter: var(--sky-near);
    bottom: 0;
    z-index: 5;
}

/* .fg-building-2 is the only near-tier element still off palette in
   v1 — it is built from rgba(100,150,255) and rgba(100,200,255).
   Collapsed onto cyan like the far tiers; it is a small foreground
   block, so losing its internal two-tone costs nothing. */
.fg-building-2 {
    filter: grayscale(1) sepia(1) hue-rotate(141deg) saturate(2.1) brightness(1.15);
}

/* The entrance canopy sat at full amber right at the frame edge and
   read as a stray box rather than a building detail. */
.entrance-canopy {
    opacity: .45;
}

/* The left anchor was running into the nav bar. Shorten it so the
   crown reads as a silhouette against sky rather than a clip. */
.modernist-tower {
    height: 66vh;
    max-height: 740px;
}


/* -------------------------------------------------------------
   3. SKY

   v1 had three radial blobs on flat #0a0a0e, which gave the sky
   no vertical structure at all. A top-to-horizon gradient is the
   cheapest way to make the backdrop read as air.
   ------------------------------------------------------------- */

#architectural-bg {
    background:
        radial-gradient(ellipse 60% 40% at 50% 104%, rgba(var(--sky-ink), .07) 0%, transparent 72%),
        radial-gradient(ellipse 40% 45% at 10% 86%,  rgba(var(--sky-ink), .05) 0%, transparent 60%),
        radial-gradient(ellipse 40% 45% at 90% 80%,  rgba(255, 140, 0, .045)  0%, transparent 60%),
        linear-gradient(to bottom,
            #04040a 0%,
            #06060d 38%,
            #0a0b13 72%,
            #0d1018 100%);
}

body.sunset-mode #architectural-bg {
    background:
        radial-gradient(ellipse 55% 40% at 72% 30%,  rgba(255, 179, 71, .16) 0%, transparent 62%),
        radial-gradient(ellipse 45% 35% at 88% 42%,  rgba(255, 120, 0, .10)  0%, transparent 58%),
        radial-gradient(ellipse 70% 40% at 50% 104%, rgba(255, 160, 64, .07) 0%, transparent 72%),
        linear-gradient(to bottom,
            #0a0705 0%,
            #120c08 40%,
            #1a110c 74%,
            #221610 100%);
}

/* Sunset's sun disc — nudged onto the horizon line and softened. */
body.sunset-mode #architectural-bg::before {
    top: auto;
    bottom: 24vh;
    right: 18%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle,
        rgba(255, 228, 190, .20) 0%,
        rgba(255, 179,  71, .12) 22%,
        rgba(255, 120,   0, .06) 42%,
        transparent 65%);
}


/* -------------------------------------------------------------
   4. HAZE LAYERS

   Two bands, interleaved between the tiers, so the far city
   dissolves into the ground before the mid city does. This is
   what sells the distance — more than any colour change.
   ------------------------------------------------------------- */

.sky-haze {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

/* Sits on top of the far tier only.

   The band peaks at the horizon line, NOT at the bottom of the
   viewport: haze accumulates with distance, so the nearest ground
   — the very bottom of the screen — is the clearest part of the
   image. It is also lit rather than black, because real haze
   lifts distant objects toward the sky tone instead of darkening
   them. */
.sky-haze-deep {
    z-index: 1;
    height: 58vh;
    background:
        /* the lit horizon band itself */
        linear-gradient(to top,
            rgba(var(--sky-air), 0)    0%,
            rgba(var(--sky-air), .10)  8%,
            rgba(var(--sky-air), .16) 15%,
            rgba(var(--sky-air), .09) 28%,
            rgba(var(--sky-air), .03) 45%,
            transparent 66%),
        /* a narrow glow right where the far bases meet the ground */
        linear-gradient(to top,
            transparent 2%,
            rgba(var(--sky-ink), .13)  9%,
            rgba(var(--sky-ink), .07) 17%,
            rgba(var(--sky-ink), .02) 26%,
            transparent 38%),
        /* just enough body to seat the far tier, clearing downward */
        linear-gradient(to top,
            rgba(var(--sky-body), .38)  0%,
            rgba(var(--sky-body), .62)  9%,
            rgba(var(--sky-body), .46) 22%,
            rgba(var(--sky-body), .22) 40%,
            rgba(var(--sky-body), .06) 62%,
            transparent 100%);
}

/* Sits on top of the mid tier and the ground plane. Same shape,
   shallower and weaker — the mid city is closer, so less air. */
.sky-haze-low {
    z-index: 4;
    height: 34vh;
    background:
        linear-gradient(to top,
            rgba(var(--sky-air), 0)    0%,
            rgba(var(--sky-air), .05)  6%,
            rgba(var(--sky-air), .09) 13%,
            rgba(var(--sky-air), .04) 26%,
            transparent 48%),
        linear-gradient(to top,
            rgba(var(--sky-body), .10)  0%,
            rgba(var(--sky-body), .30)  7%,
            rgba(var(--sky-body), .20) 20%,
            rgba(var(--sky-body), .06) 40%,
            transparent 100%);
}

/* -------------------------------------------------------------
   5. GROUND PLANE

   v1's .plaza-grid was a flat repeating grid at 60% opacity,
   which read as a texture rather than a floor. Tipping it in
   perspective and masking it toward the horizon turns it into
   ground the city can actually stand on.
   ------------------------------------------------------------- */

.plaza-grid {
    left: -100%;
    width: 300%;
    height: 200vh;
    z-index: 3;
    opacity: 1;
    transform: perspective(560px) rotateX(65deg);
    transform-origin: bottom center;
    background-image:
        repeating-linear-gradient(90deg,
            transparent 0 95px, rgba(var(--sky-ink), .30) 95px 96px),
        repeating-linear-gradient(0deg,
            transparent 0 63px, rgba(var(--sky-ink), .20) 63px 64px),
        linear-gradient(to top, rgba(var(--sky-ink), .06), transparent 60%);
    -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .7) 28%, rgba(0, 0, 0, .25) 58%, transparent 85%);
            mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .7) 28%, rgba(0, 0, 0, .25) 58%, transparent 85%);
}


/* -------------------------------------------------------------
   6. CONTENT SCRIM

   The single biggest problem in v1: a 1100px-wide rectangle at
   55% black, with hard vertical edges, sitting over the middle
   of the skyline. It is what made the city look like two props
   flanking a void. Same job, feathered edges, tuned in px so
   the near anchors stay crisp at any viewport width.
   ------------------------------------------------------------- */

.content-wrapper > section::before {
    width: 100vw;
    border: none;
    border-radius: 0;
    /* The stops are anchored to the centre in px, not in %, so the
       plateau always covers the 1100px text column and the feather
       always lives in the margin outside it — at any viewport width.
       v1 was a flat .55 with hard edges; this is denser than that
       where the copy actually sits, and fades to nothing at the frame
       edge so the near towers keep their contrast. */
    background: linear-gradient(90deg,
        rgba(var(--sky-body), 0)   0,
        rgba(var(--sky-body), .10) calc(50% - 620px),
        rgba(var(--sky-body), .45) calc(50% - 560px),
        rgba(var(--sky-body), .64) calc(50% - 470px),
        rgba(var(--sky-body), .67) 50%,
        rgba(var(--sky-body), .64) calc(50% + 470px),
        rgba(var(--sky-body), .45) calc(50% + 560px),
        rgba(var(--sky-body), .10) calc(50% + 620px),
        rgba(var(--sky-body), 0)   100%);
}


/* #hero carries .hero-frame, a 96%-opaque glass panel with its own
   blur and border, so the rectangular scrim behind it darkened
   nothing but the skyline either side of the card. Swapped for a
   soft elliptical halo centred on the card: same readability where
   the copy actually is, no straight edges anywhere, and the city
   fades into the panel instead of stopping dead against it.

   (The card's own opacity is deliberately left alone. Opening it up
   to show the city through the glass was tried and is not worth it —
   the far tier tops out below the card and the upper centre is empty
   sky, so there is nothing behind it to reveal.) */
.content-wrapper > #hero::before {
    width: 100vw;
    height: 110%;
    top: -5%;
    border: none;
    border-radius: 0;
    background: radial-gradient(ellipse 46% 58% at 50% 46%,
        rgba(var(--sky-body), .82)  0%,
        rgba(var(--sky-body), .76) 40%,
        rgba(var(--sky-body), .58) 62%,
        rgba(var(--sky-body), .30) 80%,
        rgba(var(--sky-body), .09) 92%,
        transparent 100%);
}


/* -------------------------------------------------------------
   7. ROOFLINES

   v1 ran a spire, a dome, two pyramids, a crystal, a finial and
   a setback all at once. The pyramids and the dome were also the
   worst offenders on colour. Flattened into the same mechanical
   penthouse the main tower already uses; the spire, antenna,
   finial and setbacks stay, so there's still variety.
   ------------------------------------------------------------- */

.bg-tower-6-top,
.bg-tower-8-dome,
.bg-tower-11-crystal {
    top: -24px;
    left: 22%;
    right: auto;
    width: 56%;
    height: 24px;
    transform: none;
    border: 1px solid rgba(var(--sky-ink), .34);
    border-bottom: none;
    border-radius: 0;
    background: linear-gradient(to top, rgba(var(--sky-ink), .06), transparent 80%);
    box-shadow: none;
    filter: none;
}

.bg-tower-6-top::before,
.bg-tower-6-top::after,
.bg-tower-8-dome::before,
.bg-tower-8-dome::after,
.bg-tower-11-crystal::before,
.bg-tower-11-crystal::after {
    display: none;
}


/* -------------------------------------------------------------
   8. EASTER EGGS — PARKED FOR THIS CONCEPT

   Markup and v1 styles are untouched; this just hides them so
   the skyline can be judged on its own. Delete this rule to get
   the planes, the statue and the rooftop beacon back.
   ------------------------------------------------------------- */

.aircraft,
.boston-statue,
.tower-echo,
.tower-lightning,
.light-beam {
    display: none !important;
}


/* -------------------------------------------------------------
   9. LIT WINDOWS

   The towers were pure wireframe: every floor was a 1px rule with no
   light behind it, which is what made the city read as a drawing
   rather than a place. Each floor element becomes a shallow
   ribbon-window band instead — which is also the correct idiom for
   the midcentury curtain walls this skyline is built from.

   The scatter comes from layering three window runs at co-prime
   periods (10% / 30% / 23%). They only re-align every ~690% of a
   tower's width, so within any one building there is no visible
   repeat, and the sparsest run is warm — a few interiors lit against
   the cool structure. Per-row offsets break vertical alignment, and
   some floors are dimmed outright because a fully lit tower reads
   fake at night.

   No new markup is needed: [class*="floor"] matches every floor
   element in the scene (.floor-line, .bg-floor-1..12,
   .secondary-floor, .fg-floor-2..4) and nothing else in the page.
   ------------------------------------------------------------- */

[class*="floor"] {
    height: 4px;
    background-color: transparent;
    background-image:
        /* warm interiors — sparsest run */
        repeating-linear-gradient(to right,
            transparent 0 5%,
            rgba(255, 186, 120, .40) 5% 10.5%,
            transparent 10.5% 23%),
        /* brighter cool windows */
        repeating-linear-gradient(to right,
            transparent 0 12%,
            rgba(var(--sky-ink), .46) 12% 18%,
            transparent 18% 30%),
        /* base glazing run */
        repeating-linear-gradient(to right,
            transparent 0 2%,
            rgba(var(--sky-ink), .07) 2% 8%,
            transparent 8% 10%);
    box-shadow: 0 0 7px rgba(var(--sky-ink), .10);
    /* v1 faded each floor line out at the wall edges; keep that so the
       bands do not collide with the tower's own borders. */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
}

/* Stop the lit cells stacking into vertical columns. */
[class*="floor"]:nth-child(2n)   { background-position-x:  4%,  9%,  1%; }
[class*="floor"]:nth-child(3n)   { background-position-x: 13%,  2%,  5%; }
[class*="floor"]:nth-child(5n)   { background-position-x:  8%, 17%,  3%; }
[class*="floor"]:nth-child(7n+2) { background-position-x: 19%,  6%,  7%; }

/* Unlit and half-lit floors. Roughly half the floors are pulled
   down; an evenly lit tower is the giveaway that it is a texture. */
[class*="floor"]:nth-child(4n+3) { opacity: .34; }
[class*="floor"]:nth-child(6n+1) { opacity: .55; }
[class*="floor"]:nth-child(9n+5) { opacity: .12; }

/* De-sync the pattern between towers, otherwise every building in
   the city is visibly the same building at a different width. */
.bg-tower-2  [class*="floor"], .bg-tower-9  [class*="floor"] { background-position-x: 11%, 21%,  4%; }
.bg-tower-3  [class*="floor"], .bg-tower-10 [class*="floor"] { background-position-x: 17%,  7%, 12%; }
.bg-tower-4  [class*="floor"], .bg-tower-11 [class*="floor"] { background-position-x:  3%, 26%,  8%; }
.bg-tower-5  [class*="floor"], .bg-tower-12 [class*="floor"] { background-position-x: 22%, 14%, 16%; }
.bg-tower-7  [class*="floor"], .secondary-tower [class*="floor"] { background-position-x: 8%, 29%, 2%; }

/* The far tier keeps fewer lights — distance eats the faint ones
   first, so far towers should read as sparser, not just dimmer. */
.bg-tower-3 [class*="floor"]:nth-child(2n),
.bg-tower-4 [class*="floor"]:nth-child(2n),
.bg-tower-7 [class*="floor"]:nth-child(3n),
.bg-tower-8 [class*="floor"]:nth-child(2n),
.bg-tower-9 [class*="floor"]:nth-child(3n),
.bg-tower-11 [class*="floor"]:nth-child(2n) {
    opacity: .16;
}


/* -------------------------------------------------------------
   10. MOBILE

   v1 hid every building but one and dropped it to 7% opacity,
   which left phones with a blank background. Keep the far and
   mid cities — the haze and the scrim already guarantee the
   copy stays readable — and drop only the near detail.
   ------------------------------------------------------------- */

@media (max-width: 768px) {

    /* v1 put a full-screen backdrop-filter here purely to mute the
       noise. The tiers do that now, and this costs a composited
       layer on every scroll frame. */
    body::before {
        display: none;
    }

    /* At phone width the skyline is competing with a full-bleed text
       column, so it has to be brighter to survive the scrim at all —
       the desktop tier values wash out to nothing here. */
    body {
        --sky-far: grayscale(1) sepia(1) hue-rotate(163deg) saturate(.8)  brightness(1.6) opacity(.58);
        --sky-mid: grayscale(1) sepia(1) hue-rotate(150deg) saturate(1.3) brightness(1.6) opacity(.74);
    }

    body.sunset-mode {
        --sky-far: grayscale(1) sepia(1) hue-rotate(-10deg) saturate(.85) brightness(1.55) opacity(.60);
        --sky-mid: grayscale(1) sepia(1) hue-rotate(2deg)   saturate(1.7) brightness(1.55) opacity(.76);
    }

    .bg-tower-1,
    .bg-tower-2,
    .bg-tower-3,
    .bg-tower-4,
    .bg-tower-5,
    .bg-tower-6,
    .bg-tower-8,
    .bg-tower-9,
    .bg-tower-10,
    .bg-tower-11,
    .bg-tower-12 {
        display: block !important;
    }

    /* Everything shrinks toward the horizon so a phone gets a whole
       skyline rather than one clipped tower. */
    .bg-tower-1,  .bg-tower-2,  .bg-tower-3,
    .bg-tower-4,  .bg-tower-5,  .bg-tower-6,
    .bg-tower-7,  .bg-tower-8,  .bg-tower-9,
    .bg-tower-10, .bg-tower-11, .bg-tower-12,
    .bg-cluster-low-1,
    .modernist-tower,
    .secondary-tower {
        transform: scale(.62);
        transform-origin: bottom center;
    }

    .bg-tower-7 {
        left: 46% !important;
        opacity: 1 !important;
    }

    /* Front row is too close to read at phone width. */
    .fg-building-1,
    .fg-building-2,
    .fg-building-3,
    .fg-building-4 {
        display: none;
    }

    .plaza-grid {
        height: 150vh;
        opacity: .55;
        transform: perspective(300px) rotateX(64deg);
    }

    .sky-haze-deep { height: 48vh; }
    .sky-haze-low  { height: 26vh; }

    /* There is no room to feather horizontally at phone width, so the
       scrim goes flat — but light. The cards and .hero-frame already
       carry their own near-opaque backgrounds, so this only has to
       hold section headers, and anything heavier blankets the city. */
    .content-wrapper > section::before {
        background: rgba(var(--sky-body), .55);
    }

    .content-wrapper > #hero::before {
        height: 100%;
        top: 0;
        background: rgba(var(--sky-body), .38);
    }
}


/* -------------------------------------------------------------
   11. REDUCED MOTION
   ------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .modernist-tower,
    .secondary-tower,
    .tower-main,
    .bg-tower-1, .bg-tower-2,  .bg-tower-3,  .bg-tower-4,
    .bg-tower-5, .bg-tower-6,  .bg-tower-7,  .bg-tower-8,
    .bg-tower-9, .bg-tower-10, .bg-tower-11, .bg-tower-12,
    .bg-cluster-low-1,
    .fg-building-1, .fg-building-2, .fg-building-3, .fg-building-4,
    #architectural-bg::before {
        animation: none !important;
        opacity: 1;
    }
}