/* ==========================================================================
   BROCA — Cinematic hero (homepage #hero only)
   Turns the existing architectural photograph into a full-bleed background
   blended into the dark palette with layered gradients.

   TO REVERT: remove the <link rel="stylesheet" href="hero-cinematic.css">
   line from index.html (and restore main.js from the backup folder).
   Every rule here is scoped to .hero, so nothing outside the hero changes.
   ========================================================================== */

/* ---- 1. Photograph: full-bleed cover instead of a framed strip ---------- */
.hero .golden-reveal.hero-architecture-photo{
  position:absolute;inset:0;top:0;left:0;translate:none;
  width:100%;height:100%;
  overflow:hidden;z-index:0;
  -webkit-mask-image:none;mask-image:none;      /* no hard side cut-outs */
}
.hero .golden-reveal .hero-architecture-photo__image{
  position:absolute;left:0;top:0;
  width:100%;height:108%;                       /* bottom headroom for the slow upward parallax drift */
  object-fit:cover;
  object-position:50% 12%;                      /* keep the tower crown clear of the nav */
  /* tame the pale sky glow; keep the warm sunset natural */
  filter:saturate(.86) brightness(.8) contrast(1.05);
  transform-origin:50% 40%;
  will-change:transform;
}

/* ---- 2. Layered grading: top, sides, vignette, bottom fade --------------- */
.hero .hero-architecture-photo::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    /* top: pull the bright sky down so the nav and logo sit in shadow */
    linear-gradient(to bottom, rgba(8,9,9,.52) 0%, rgba(8,9,9,.22) 16%, rgba(8,9,9,0) 34%),
    /* sides: soft cinematic falloff, no visible edge */
    linear-gradient(to right, rgba(8,9,9,.42) 0%, rgba(8,9,9,0) 22%, rgba(8,9,9,0) 78%, rgba(8,9,9,.42) 100%),
    /* gentle vignette keeps the eye on the tower and headline */
    radial-gradient(ellipse 120% 90% at 50% 38%, rgba(8,9,9,0) 58%, rgba(8,9,9,.3) 100%),
    /* bottom: long fade into the page background (#080909) behind the copy */
    linear-gradient(to top, #080909 0%, rgba(8,9,9,.88) 13%, rgba(8,9,9,.5) 32%, rgba(8,9,9,0) 56%);
}

/* the original radial backdrop and decorative grid now sit beneath/over the photo quietly */
.hero{background:#080909}
.hero .hero-grid{z-index:1;opacity:.45}
.hero::after{z-index:1}                         /* existing bottom fade stays on top of the photo */
.hero .hero-index{z-index:2;color:rgba(214,190,140,.75)}

/* ---- 3. Copy over the image: readable without a visible box ------------- */
.hero .hero__copy{z-index:3}
.hero .hero__copy:not(.hero__copy--two)::before{
  content:'';position:absolute;z-index:-1;pointer-events:none;
  inset:-18% 4% -12%;
  background:radial-gradient(closest-side, rgba(8,9,9,.4), rgba(8,9,9,0));
}
.hero .hero__title{text-shadow:0 2px 24px rgba(0,0,0,.35)}
.hero .hero__sub{color:#cfcabd;text-shadow:0 1px 18px rgba(0,0,0,.6)}
.hero .hero__copy > .eyebrow{text-shadow:0 1px 12px rgba(0,0,0,.6)}
.hero .hero-secondary{color:#ddd8cc;border-color:rgba(221,216,204,.35)}

/* ---- 4. Light theme: same scene, fades into the light page --------------- */
[data-theme=light] .hero{background:var(--bg)}
[data-theme=light] .hero .golden-reveal .hero-architecture-photo__image{filter:saturate(.8) brightness(.86) contrast(1.03)}
[data-theme=light] .hero .hero-architecture-photo::after{
  background:
    linear-gradient(to bottom, rgba(18,16,12,.42) 0%, rgba(18,16,12,.16) 16%, rgba(18,16,12,0) 34%),
    linear-gradient(to right, rgba(18,16,12,.32) 0%, rgba(18,16,12,0) 22%, rgba(18,16,12,0) 78%, rgba(18,16,12,.32) 100%),
    linear-gradient(to top, var(--bg) 0%, rgba(250,249,246,.95) 20%, rgba(250,249,246,.74) 36%, rgba(250,249,246,0) 62%);
}
[data-theme=light] .hero .hero__copy:not(.hero__copy--two)::before{background:radial-gradient(closest-side, rgba(250,249,246,.7), rgba(250,249,246,0))}
[data-theme=light] .hero .hero__title{text-shadow:0 2px 26px rgba(250,249,246,.7)}
[data-theme=light] .hero .hero__sub{color:var(--muted);text-shadow:none}
[data-theme=light] .hero .hero__copy > .eyebrow{text-shadow:none}
[data-theme=light] .hero .hero-secondary{color:var(--ink-soft);border-color:var(--line)}

/* ---- 5. Phones: taller frame, tower kept centred ------------------------ */
@media (max-width:600px){
  .hero .golden-reveal.hero-architecture-photo{top:0;height:100%}
  .hero .golden-reveal .hero-architecture-photo__image{object-position:50% 22%}
  .hero .hero-architecture-photo::after{
    background:
      linear-gradient(to bottom, rgba(8,9,9,.5) 0%, rgba(8,9,9,.18) 14%, rgba(8,9,9,0) 30%),
      linear-gradient(to right, rgba(8,9,9,.3) 0%, rgba(8,9,9,0) 20%, rgba(8,9,9,0) 80%, rgba(8,9,9,.3) 100%),
      linear-gradient(to top, #080909 0%, rgba(8,9,9,.9) 22%, rgba(8,9,9,.55) 42%, rgba(8,9,9,0) 64%);
  }
  [data-theme=light] .hero .hero-architecture-photo::after{
    background:
      linear-gradient(to bottom, rgba(18,16,12,.4) 0%, rgba(18,16,12,.14) 14%, rgba(18,16,12,0) 30%),
      linear-gradient(to top, var(--bg) 0%, rgba(250,249,246,.96) 26%, rgba(250,249,246,.76) 44%, rgba(250,249,246,0) 68%);
  }
}

@media (prefers-reduced-motion:reduce){
  .hero .golden-reveal .hero-architecture-photo__image{will-change:auto;transform:none!important}
}