/**
 * Premium Environment Mode — layered ambient background for marketing pages.
 * CSS-first: transform + opacity only. JS sets scroll/spotlight CSS variables.
 */

:root {
  --pa-env-base-a: #f5f5f7;
  --pa-env-base-b: #ebebed;
  --pa-env-accent: rgba(0, 113, 227, 0.07);
  --pa-env-warm: rgba(180, 120, 80, 0.06);
  --pa-env-bright: rgba(255, 255, 255, 0.12);
  --pa-env-calm: rgba(100, 130, 180, 0.05);
  --pa-env-tint: 0;
}

/* —— Shell (fixed behind content) —— */
body.pa-marketing-env {
  background-color: var(--pa2-canvas, var(--pa-env-base-a));
}

body.pa-marketing-env .wp-site-blocks,
body.pa-marketing-env #page,
body.pa-marketing-env main {
  position: relative;
  z-index: 1;
}

.pa-env {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
}

.pa-env__scroll {
  position: absolute;
  inset: -8% 0;
  will-change: transform;
}

.pa-env__scroll--back {
  z-index: 1;
}

.pa-env__scroll--mid {
  z-index: 2;
}

.pa-env__scroll--ambient {
  z-index: 3;
}

/* Layer 1 — base brand gradient */
.pa-env__base {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    165deg,
    var(--pa-env-base-a) 0%,
    var(--pa-env-base-b) 42%,
    #eef1f6 100%
  );
}

/* Layer 2 — static mesh (no obvious animation; see docs/DESIGN-PHILOSOPHY.md) */
.pa-env__mesh {
  position: absolute;
  inset: -15%;
  opacity: 0.75;
  background:
    radial-gradient(ellipse 55% 45% at 18% 28%, var(--pa-env-accent), transparent 58%),
    radial-gradient(ellipse 48% 42% at 82% 68%, rgba(140, 160, 210, 0.05), transparent 55%),
    radial-gradient(ellipse 60% 50% at 50% 100%, rgba(29, 29, 31, 0.02), transparent 62%);
  animation: none;
}

/* Layer 3 — grain (2% opacity) */
.pa-env__grain {
  position: absolute;
  inset: 0;
  z-index: 4;
  opacity: 0.022;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* Layer 4 — soft radial lighting (atmosphere tint via body data attr) */
.pa-env__glow {
  position: absolute;
  inset: -10%;
  opacity: calc(0.04 + var(--pa-env-tint, 0) * 0.02);
  background: radial-gradient(
    ellipse 70% 55% at 50% 20%,
    var(--pa-env-glow-color, rgba(255, 255, 255, 0.35)),
    transparent 68%
  );
  transition: opacity 800ms ease, background 1200ms ease;
}

body[data-pa-atmosphere="bright"] {
  --pa-env-glow-color: rgba(255, 255, 255, 0.5);
  --pa-env-tint: 0.15;
}

body[data-pa-atmosphere="contrast"] {
  --pa-env-glow-color: rgba(255, 255, 255, 0.28);
  --pa-env-base-a: #f3f3f5;
  --pa-env-tint: 0.08;
}

body[data-pa-atmosphere="warm"] {
  --pa-env-glow-color: rgba(255, 220, 180, 0.22);
  --pa-env-accent: rgba(180, 120, 80, 0.08);
  --pa-env-tint: 0.12;
}

body[data-pa-atmosphere="calm"] {
  --pa-env-glow-color: rgba(160, 185, 220, 0.2);
  --pa-env-accent: rgba(100, 130, 180, 0.06);
  --pa-env-tint: 0.06;
}

/* Layer 5 — depth shapes (off by default; philosophy: background supports content) */
.pa-env__shapes,
.pa-env__spotlight {
  display: none;
}

/* Tab inactive — pause ambient loops */
.pa-env.is-paused .pa-env__mesh,
.pa-env.is-paused .pa-env__shape {
  animation-play-state: paused !important;
}

/* Low-power / static mode — base only */
body.pa-env-static .pa-env__mesh,
body.pa-env-static .pa-env__shapes,
body.pa-env-static .pa-env__spotlight {
  display: none;
}

body.pa-env-static .pa-env__glow {
  opacity: 0.03;
}

/* —— Section overlap (scroll storytelling) —— */
html.pa-scroll-motion.pa-marketing-env .pa-reveal-section {
  margin-top: -0.5rem;
  padding-top: 0.5rem;
}

/* —— Image physicality —— */
html.pa-scroll-motion.pa-marketing-env .pa-portfolio-tile,
html.pa-scroll-motion.pa-marketing-env .pa2-services__card {
  box-shadow: 0 2px 16px rgba(29, 29, 31, 0.06);
}

/* —— Link micro (marketing content links) —— */
html.pa-scroll-motion.pa-marketing-env .pa2-services__cta,
html.pa-scroll-motion.pa-marketing-env .pa2-services__foot a {
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-size: 0 1px;
  background-repeat: no-repeat;
  transition: background-size 200ms var(--anim-ease, ease);
}

html.pa-scroll-motion.pa-marketing-env .pa2-services__cta:hover,
html.pa-scroll-motion.pa-marketing-env .pa2-services__cta:focus-visible,
html.pa-scroll-motion.pa-marketing-env .pa2-services__foot a:hover,
html.pa-scroll-motion.pa-marketing-env .pa2-services__foot a:focus-visible {
  background-size: 100% 1px;
}

/* —— Home hero: env recedes behind dark cover —— */
body.home .pa2-hero {
  isolation: isolate;
}

/* —— Reduced motion —— */
@media (prefers-reduced-motion: reduce) {
  .pa-env__mesh,
  .pa-env__shape {
    animation: none !important;
  }

  .pa-env__spotlight {
    display: none;
  }
}

@media (max-width: 767px) {
  .pa-env__shapes,
  .pa-env__spotlight {
    display: none;
  }

  .pa-env__mesh {
    animation-duration: 0s;
    animation: none;
  }

  .pa-env__grain {
    opacity: 0.015;
  }
}