/* VC4 blue version: the Home hero's living district, ported from the reference site (Dave's home.html).
   The scene box and the record labels use the Technical hero's .b-scene styles in blue/blue.css (the reference's
   site.css scene3d and tags); this file adds what only Home has: its scene size, the reconciliation chip, the
   optional labels and the light hero copy. Every selector is scoped to .b-home-hero / .b-home-scene. */

/* ---------- Hero copy on the calm background: dark navy text, the buttons keep their colours ---------- */
html[data-blue] .b-home-hero .hero-bottom { grid-template-columns: minmax(0, 560px); }
html[data-blue] .b-home-hero .hero-copy { max-width: 560px; position: relative; z-index: 2; }
html[data-blue] .b-home-hero .hero-eyebrow { color: #138E96; }
html[data-blue] .b-home-hero .hero-sub { color: rgba(2, 38, 63, .8); }
html[data-blue] .b-home-hero .hero-sub strong { color: #02263F; }
html[data-blue] .b-home-hero .hero-kinetic { color: #02263F; }

/* ---------- Scene box: the reference's .scene3d values (site.css), below the menu bar like Technical ---------- */
/* the hero is tall enough that the scene box gets the reference's height at desktop size (about 600px below the menu bar) */
@media (min-width: 901px) { html[data-blue] .b-home-hero { min-height: 640px; } }
.b-home-hero > .b-home-scene { position: absolute; top: 40px; bottom: 0; right: max(-2%, calc((100vw - 1680px) / 2)); width: min(66%, 1080px); z-index: 1; pointer-events: none; }
/* no WebGL: the still of the same scene fades in */
.b-home-hero > .b-home-scene.no3d { animation: bHomeFadeStill 1s ease both; }
.b-home-scene.no3d .rtag { display: none; }
@keyframes bHomeFadeStill { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Reconciliation chip: hangs off the front edge of the island and reports on the district above it ---------- */
.b-home-scene .rtag { position: absolute; left: 0; top: 0; will-change: transform, opacity; opacity: 0; }
.b-home-scene .rpin { position: absolute; left: -.75px; top: 0; width: 1.5px; height: 22px; background: linear-gradient(rgba(19, 142, 150, .2), #138E96); }
.b-home-scene .recon { position: absolute; left: 0; top: 22px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px;
    background: rgba(255, 255, 255, .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 14px; padding: 10px 14px;
    white-space: nowrap; box-shadow: 0 18px 40px -16px rgba(2, 38, 63, .3); font: 400 13px/1.35 'Lato', sans-serif; color: #02263F; transition: box-shadow .5s ease; }
.b-home-scene .recon .ok { width: 30px; height: 30px; border-radius: 50%; background: #DCE7E9; display: grid; place-items: center; color: #138E96;
    transition: background .4s, color .4s, transform .6s cubic-bezier(.34, 1.56, .64, 1); }
.b-home-scene .recon #reconTx { display: block; }
/* a change in the record flashes the chip and rolls the new text in */
.b-home-scene .recon.flash { box-shadow: 0 0 0 4px rgba(19, 142, 150, .18), 0 18px 40px -16px rgba(2, 38, 63, .3); }
.b-home-scene .recon.flash .ok { background: #138E96; color: #fff; transform: scale(1.12); }
.b-home-scene .recon.flash #reconTx { animation: bHomeRollIn .6s cubic-bezier(.16, 1, .3, 1); }
@keyframes bHomeRollIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.b-home-scene .recon small { display: block; font: 900 10px/1 'Lato', sans-serif; letter-spacing: .12em; color: #138E96; text-transform: uppercase; margin-bottom: 4px; }
.b-home-scene .recon b { font-weight: 700; }

/* ---------- Smaller screens: the reference's breakpoints ---------- */
@media (max-width: 1100px) {
    .b-home-hero > .b-home-scene { width: 62%; right: -10%; }
}
@media (max-width: 900px) {
    /* tablet and phone: the scene runs straight under the copy */
    html[data-blue] .b-home-hero { flex-direction: column; align-items: stretch; }
    .b-home-hero > .b-home-scene { position: relative; top: auto; right: auto; width: auto; height: min(100vw, 540px); margin-top: -36px; }
    .b-home-scene .recon { font-size: 12px; padding: 8px 12px; }
}
/* the labels keep full size down to 561px (blue.css shrinks Technical's from 900px) */
@media (min-width: 561px) and (max-width: 900px) { .b-home-scene .tag .in { transform: translateX(-50%); } }
@media (max-width: 699px) { .b-home-scene .rpin { display: none; } }
@media (max-width: 560px) {
    .b-home-hero > .b-home-scene { height: min(124vw, 520px); margin-top: -64px; }
    .b-home-scene .tag.opt { display: none; }
}