/* Living Landscape — quiet immersion layers for the public landing hero.
   Attaches only under [data-living-landscape]. Preserves Elysium brand tokens.

   Phase 0 composition: Community in Bloom is presented with object-fit:contain
   (desktop/ultrawide) so the full 1536×1024 narrative is preserved; warm cosmic
   atmosphere letterboxes unused side/edge space rather than cropping top/bottom.
   Mobile may use limited cover for readability — see mobile rules below.

   Phase 0 landmark controls are withheld until the canonical Phase 1 artwork
   and governed Landmark Anchor architecture can provide truthful spatial
   orientation. Landmark CSS below remains restore-ready for Phase 1; visible
   nav is not constructed in Phase 0 (see interaction-model.js). */

.ll-root {
  --ll-cam-x: 0px;
  --ll-cam-y: 0px;
  --ll-cam-zoom: 1;
  --ll-par-x: 0px;
  --ll-par-y: 0px;
  --ll-par-far-x: 0px;
  --ll-par-far-y: 0px;
  --ll-season-glow: rgba(212, 165, 116, 0.12);
  --ll-season-mist: rgba(212, 165, 116, 0.035);
  --ll-star-density: 1;
  /* Warm cosmic letterbox field behind contained artwork.
     Soft continuity into painting edges — no extra drama/darkening of the PNG. */
  --ll-art-void:
    radial-gradient(ellipse 72% 58% at 50% 44%, rgba(72, 52, 36, 0.42), transparent 74%),
    radial-gradient(ellipse 98% 74% at 50% 48%, rgba(28, 20, 14, 0.58), transparent 82%),
    linear-gradient(
      180deg,
      rgba(14, 14, 20, 0.28) 0%,
      rgba(42, 30, 20, 0.36) 40%,
      rgba(18, 14, 24, 0.42) 100%
    );
  position: relative;
  isolation: isolate;
}

.ll-viewport {
  position: absolute;
  inset: -8% -6%;
  z-index: 0;
  pointer-events: none;
  transform: translate3d(var(--ll-cam-x), var(--ll-cam-y), 0)
    scale(var(--ll-cam-zoom));
  transform-origin: 50% 40%;
  will-change: transform;
}

.ll-layer {
  position: absolute;
  inset: 0;
}

.ll-layer--far {
  z-index: 0;
  background:
    radial-gradient(1px 1px at 18% 22%, rgba(255, 255, 255, calc(0.35 * var(--ll-star-density))), transparent),
    radial-gradient(1px 1px at 72% 38%, rgba(255, 255, 255, calc(0.18 * var(--ll-star-density))), transparent),
    radial-gradient(1.5px 1.5px at 48% 12%, rgba(212, 165, 116, calc(0.28 * var(--ll-star-density))), transparent),
    radial-gradient(1px 1px at 86% 70%, rgba(255, 255, 255, calc(0.12 * var(--ll-star-density))), transparent);
  transform: translate3d(var(--ll-par-far-x), var(--ll-par-far-y), 0);
}

/* Canonical artwork — decorative atmosphere only (no motion, no focus, no clicks).
   Desktop / tablet / ultrawide: contain + center — full composition, no top/bottom crop.
   Side letterboxing is intentional atmospheric void (warm cosmic mist/glow). */
.ll-layer--art {
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ll-art-void);
}

.ll-layer--art .ll-art-img,
.ll-layer--art img {
  display: block;
  flex: 0 1 auto;
  /* Proportional fit; never stretch; never cover-crop on desktop/ultrawide.
     Cap at intrinsic 1536×1024 — no irresponsible upscale. */
  width: auto;
  height: auto;
  max-width: min(100%, 1536px);
  max-height: min(100%, 1024px);
  aspect-ratio: 1536 / 1024;
  object-fit: contain;
  object-position: 50% 50%;
  opacity: 0.38;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  /* Soft edge dissolve into cosmic field — does not recolor the PNG.
     Longer, staggered falloff so letterbox sides read as atmosphere, not a frame cut. */
  -webkit-mask-image: radial-gradient(
    ellipse 104% 96% at 50% 48%,
    #000 40%,
    rgba(0, 0, 0, 0.88) 56%,
    rgba(0, 0, 0, 0.55) 72%,
    rgba(0, 0, 0, 0.22) 86%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 104% 96% at 50% 48%,
    #000 40%,
    rgba(0, 0, 0, 0.88) 56%,
    rgba(0, 0, 0, 0.55) 72%,
    rgba(0, 0, 0, 0.22) 86%,
    transparent 100%
  );
}

.ll-layer--mid {
  z-index: 2;
  transform: translate3d(
    calc(var(--ll-par-x) * 0.55),
    calc(var(--ll-par-y) * 0.55),
    0
  );
}

.ll-layer--near {
  z-index: 3;
  transform: translate3d(var(--ll-par-x), var(--ll-par-y), 0);
}

.ll-mist {
  position: absolute;
  inset: 10% 5% 20%;
  background: radial-gradient(
    ellipse 70% 50% at 50% 60%,
    var(--ll-season-mist),
    transparent 70%
  );
  opacity: 0.72;
}

.ll-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 75% 45% at 50% 8%,
    var(--ll-season-glow),
    transparent 60%
  );
}

/* Ambient jobs — CSS only, capped by scheduler classes on .ll-root */
.ll-ambient--breathe .ll-glow {
  animation: ll-breathe 9s var(--ely-ease, ease-in-out) infinite alternate;
}

.ll-ambient--mist .ll-mist {
  animation: ll-mist-drift 14s ease-in-out infinite alternate;
}

.ll-ambient--drift .ll-layer--far {
  animation: ll-star-drift 40s linear infinite;
}

.ll-ambient--shimmer .ll-layer--near {
  animation: ll-shimmer 12s ease-in-out infinite alternate;
}

@keyframes ll-breathe {
  from { opacity: 0.75; transform: scale(1); }
  to { opacity: 1; transform: scale(1.03); }
}

@keyframes ll-mist-drift {
  from { transform: translate3d(-1.5%, 0, 0); }
  to { transform: translate3d(1.5%, -1%, 0); }
}

@keyframes ll-star-drift {
  from { opacity: 0.85; }
  to { opacity: 1; }
}

@keyframes ll-shimmer {
  from { opacity: 0.9; }
  to { opacity: 1; }
}

/* -------------------------------------------------------------------------
   Landmark exploration styles — Phase 1 restore surface.
   Phase 0 landmark controls are withheld until the canonical Phase 1 artwork
   and governed Landmark Anchor architecture can provide truthful spatial
   orientation. Do not construct visible .ll-landmark-nav in Phase 0.
   ------------------------------------------------------------------------- */
.ll-landmark-nav {
  position: relative;
  z-index: 2;
  max-width: 42rem;
  margin: 0 auto 1.75rem;
  padding: 0 0.25rem;
}

.ll-landmark-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.65rem;
  justify-content: center;
}

.ll-landmark-btn,
.ll-landmark-reset {
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(235, 228, 216, 0.86);
  background: rgba(12, 10, 8, 0.58);
  border: 1px solid rgba(212, 165, 116, 0.36);
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  min-height: 44px;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(232, 201, 168, 0.08),
    0 1px 10px rgba(0, 0, 0, 0.28);
  transition: color 0.28s var(--ely-ease, ease), border-color 0.28s var(--ely-ease, ease),
    background 0.28s var(--ely-ease, ease);
}

.ll-landmark-btn:hover,
.ll-landmark-btn:focus-visible,
.ll-landmark-reset:hover,
.ll-landmark-reset:focus-visible {
  color: #fef3c7;
  border-color: rgba(212, 165, 116, 0.45);
  background: rgba(212, 165, 116, 0.08);
  outline: none;
}

.ll-landmark-btn:focus-visible,
.ll-landmark-reset:focus-visible {
  outline: 2px solid var(--ely-focus, #e0b87a);
  outline-offset: 3px;
}

.ll-landmark-reset {
  display: block;
  margin: 0.75rem auto 0;
  border-style: dashed;
  opacity: 0.8;
}

.ll-a11y-live {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Keep hero copy above landscape layers */
.ll-root > .ely-hero-inner,
.ll-root > .ll-landmark-nav,
.ll-root > .ll-a11y-live {
  position: relative;
  z-index: 2;
}

.ll-root > .ely-hero-glow {
  z-index: 1;
}

/* Mobile profile: quieter layers; limited crop allowed for readability
   while preserving bridge / valley / horizon band (object-position 50% 42%). */
.ll-profile--mobile .ll-viewport {
  inset: -4% -2%;
  opacity: 0.85;
}

.ll-profile--mobile .ll-layer--art .ll-art-img,
.ll-profile--mobile .ll-layer--art img {
  opacity: 0.28;
  /* Limited cover: may crop side atmosphere; keep valley/horizon/bridge in frame */
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: 50% 42%;
}

.ll-profile--mobile .ll-landmark-nav {
  margin-bottom: 1.25rem;
}

/* Tablet / portrait: still contain — full composition preferred when height allows */
@media (max-width: 1024px) {
  .ll-layer--art .ll-art-img,
  .ll-layer--art img {
    object-position: 50% 50%;
  }
}

/* Narrow phones without mobile profile class (JS-off): limited cover for hero density */
@media (max-width: 767px) {
  .ll-layer--art .ll-art-img,
  .ll-layer--art img {
    opacity: 0.3;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: 50% 42%;
  }
}

/* Ultra-wide: contain + centered; atmosphere fills side letterboxing — never cover-crop */
@media (min-width: 1600px) {
  .ll-layer--art .ll-art-img,
  .ll-layer--art img {
    width: auto;
    height: auto;
    max-width: min(100%, 1536px);
    max-height: min(100%, 1024px);
    aspect-ratio: 1536 / 1024;
    object-fit: contain;
    object-position: 50% 50%;
  }
}

/* Landscape phones: limited cover favoring horizon / hill / bridge band */
@media (max-height: 480px) and (orientation: landscape) {
  .ll-layer--art .ll-art-img,
  .ll-layer--art img {
    opacity: 0.26;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: 50% 40%;
  }
}

.ll-interaction--list-first .ll-landmark-list {
  justify-content: flex-start;
}

@media (max-width: 767px) {
  .ll-landmark-btn,
  .ll-landmark-reset {
    font-size: 0.68rem;
    padding: 0.38rem 0.7rem;
    min-height: 44px;
  }
}

/* -------------------------------------------------------------------------
   Phase 0 hero polish — honor the painting (typography / optical sit /
   readability / CTA stewardship). Scoped to [data-living-landscape].
   No landmark UI. No CTA color redesign. No darker / more dramatic art.
   Works with JS off (attribute selector, not .ll-root alone).
   ------------------------------------------------------------------------- */

/* Soft vertical wash behind copy only — readability over bright valley mist
   without dimming the painting field. */
[data-living-landscape] > .ely-hero-inner {
  position: relative;
  z-index: 2;
}

[data-living-landscape] > .ely-hero-inner::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 8%;
  bottom: 6%;
  width: min(100%, 46rem);
  transform: translateX(-50%);
  pointer-events: none;
  background: radial-gradient(
    ellipse 70% 55% at 50% 42%,
    rgba(12, 10, 8, 0.28),
    rgba(12, 10, 8, 0.1) 55%,
    transparent 78%
  );
}

/* Optical sit: Sun → River → Bridge → Headline → First Stone → CTA.
   Desktop/laptop nudge copy slightly down so bridge/valley leads the eye into type;
   leave breathing room above CTAs for the First Stone band. */
@media (min-width: 768px) {
  [data-living-landscape].ely-hero {
    padding-top: 5.5rem;
    padding-bottom: 7.75rem;
  }

  [data-living-landscape] > .ely-hero-inner {
    transform: translateY(0.55rem);
  }
}

@media (min-width: 1600px) {
  [data-living-landscape].ely-hero {
    padding-top: 5.75rem;
    padding-bottom: 8rem;
  }

  [data-living-landscape] > .ely-hero-inner {
    transform: translateY(0.75rem);
  }
}

/* Typography harmony — restrain scale; soft hierarchy vs valley corridor */
[data-living-landscape] .ely-kicker {
  letter-spacing: 0.28em;
  color: rgba(253, 230, 138, 0.62);
  margin-bottom: 1.15rem;
}

[data-living-landscape] h1 {
  font-size: clamp(2.1rem, 4.6vw, 3.25rem);
  line-height: 1.14;
  margin-bottom: 1.35rem;
  max-width: 48rem;
  text-shadow:
    0 1px 18px rgba(12, 10, 8, 0.42),
    0 0 36px rgba(12, 10, 8, 0.22);
}

[data-living-landscape] h1 em {
  color: rgba(254, 243, 199, 0.92);
}

[data-living-landscape] .ely-lead {
  font-size: clamp(1rem, 1.7vw, 1.15rem);
  line-height: 1.68;
  margin-bottom: 2.75rem;
  max-width: 38rem;
  color: rgba(212, 201, 186, 0.88);
  text-shadow: 0 1px 14px rgba(12, 10, 8, 0.38);
}

/* CTA stewardship — spacing / weight only; colors untouched */
[data-living-landscape] .ely-cta-row {
  gap: 0.85rem;
}

@media (min-width: 640px) {
  [data-living-landscape] .ely-cta-row {
    gap: 0.85rem 1rem;
    justify-content: center;
  }
}

[data-living-landscape] .ely-cta-gold {
  box-shadow: 0 0 28px -10px rgba(212, 165, 116, 0.38);
}

[data-living-landscape] .ely-cta-outline {
  background: rgba(26, 21, 16, 0.38);
}

/* Mobile / short landscape: quieter polish; keep limited cover crop honest */
@media (max-width: 767px) {
  [data-living-landscape].ely-hero {
    padding: 2.75rem 1.25rem 4rem;
  }

  [data-living-landscape] > .ely-hero-inner {
    transform: none;
  }

  [data-living-landscape] > .ely-hero-inner::before {
    width: min(100%, 22rem);
    background: radial-gradient(
      ellipse 78% 58% at 50% 40%,
      rgba(12, 10, 8, 0.32),
      rgba(12, 10, 8, 0.08) 58%,
      transparent 80%
    );
  }

  [data-living-landscape] .ely-kicker {
    margin-bottom: 1rem;
  }

  [data-living-landscape] h1 {
    margin-bottom: 1.1rem;
  }

  [data-living-landscape] .ely-lead {
    margin-bottom: 1.85rem;
  }
}

@media (max-height: 480px) and (orientation: landscape) {
  [data-living-landscape].ely-hero {
    padding: 1.75rem 1.25rem 2.25rem;
  }

  [data-living-landscape] > .ely-hero-inner {
    transform: none;
  }

  [data-living-landscape] .ely-kicker {
    margin-bottom: 0.65rem;
  }

  [data-living-landscape] h1 {
    font-size: clamp(1.65rem, 4.5vw, 2.25rem);
    margin-bottom: 0.75rem;
  }

  [data-living-landscape] .ely-lead {
    margin-bottom: 1.15rem;
    font-size: 0.95rem;
  }

  [data-living-landscape] .ely-cta-row {
    gap: 0.65rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ll-viewport,
  .ll-layer,
  .ll-mist,
  .ll-glow,
  .ll-layer--art .ll-art-img,
  .ll-layer--art img {
    animation: none !important;
    transition: none !important;
  }

  .ll-ambient--breathe .ll-glow,
  .ll-ambient--mist .ll-mist,
  .ll-ambient--drift .ll-layer--far,
  .ll-ambient--shimmer .ll-layer--near {
    animation: none !important;
  }

  .ll-viewport {
    transform: none;
  }
}