/* ============================================================================
   Alhambra — Atmosphere System
   World-class ambient imagery that never fights the words.
   - A photographic/architectural layer sits BEHIND a controlled scrim so text
     stays crisp; a faint Moorish zellige lattice unifies every page.
   - Image slots are CSS variables that DEFAULT to refined gradients, so the
     site looks finished with zero photos. To use a real (licensed) photo,
     swap one line: e.g.  --atmos-hero: url("assets/img/hero.jpg");
   - Link this AFTER each page's own <style>. Additive + non-destructive.
   ========================================================================== */

:root{
  --atmos-zellige: url("assets/zellige.svg");

  /* Scrims — darkest where text/UI lands, so copy never loses contrast. */
  --atmos-scrim:       linear-gradient(180deg, rgba(12,15,14,.32) 0%, rgba(12,15,14,.62) 55%, rgba(12,15,14,.86) 100%);
  --atmos-scrim-left:  linear-gradient(90deg,  rgba(12,15,14,.86) 0%, rgba(12,15,14,.55) 45%, rgba(12,15,14,.20) 100%);

  /* IMAGE SLOTS — elegant gradient by default. Replace any with url("…") to
     drop in a licensed photograph (Alhambra architecture / Cayman / material). */
  --atmos-hero:  linear-gradient(155deg,#1c221e 0%,#2c2d23 42%,#0c0f0e 100%);
  --atmos-login: linear-gradient(160deg,#12161a 0%,#20251f 55%,#0c0f0e 100%);
  --atmos-cta:   linear-gradient(140deg,#14181a 0%,#241f17 60%,#0c0f0e 100%);
  --atmos-band:  linear-gradient(150deg,#1a201d 0%,#0c0f0e 100%);
}

/* ── Faint lattice on dark content sections (safe: these are colour-only bgs) ── */
.bg-ink{
  background-image: var(--atmos-zellige);
  background-repeat: repeat;
  background-size: 300px 300px;
}

/* ── The ambient layer: drop <div class="atmos-layer atmos-layer--hero"></div>
      as the FIRST child of a position:relative; overflow:hidden container.
      It paints photo → scrim → zellige, behind the real content. ── */
.atmos-layer{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-repeat: repeat, no-repeat, no-repeat;
  background-position: center, center, center;
  background-size: 300px 300px, cover, cover;
  animation: atmosIn 1.4s ease both, atmosDrift 34s ease-in-out 1.4s infinite alternate;
  will-change: transform, opacity;
}
.atmos-layer--hero  { background-image: var(--atmos-zellige), var(--atmos-scrim),      var(--atmos-hero); }
.atmos-layer--login { background-image: var(--atmos-zellige), var(--atmos-scrim-left), var(--atmos-login); }
.atmos-layer--cta   { background-image: var(--atmos-zellige), var(--atmos-scrim),      var(--atmos-cta); }
.atmos-layer--band  { background-image: var(--atmos-zellige), var(--atmos-scrim),      var(--atmos-band); }

/* keep real content above the ambient layer */
.atmos-host{ position:relative; }
.atmos-host > *:not(.atmos-layer){ position:relative; z-index:1; }

@keyframes atmosIn   { from{opacity:0} to{opacity:1} }
@keyframes atmosDrift{ from{transform:scale(1.03) translate3d(0,0,0)} to{transform:scale(1.09) translate3d(-1.4%,-1.2%,0)} }

@media (prefers-reduced-motion: reduce){
  .atmos-layer{ animation: atmosIn .6s ease both; }
}