/*
 * Premium architectural atmosphere — v2.2
 * -----------------------------------------
 * A richer, clearly alive background that remains subordinate to the approved
 * typography and product interfaces. Motion is limited to long, clean light,
 * depth and reflection curves. No particles, dots, networks or decorative UI.
 */

.experience-shell {
  --ambient-breath: .5;
  --ambient-slow-breath: .5;
  --ambient-intensity: .74;
  --ambient-primary-x: 0px;
  --ambient-primary-y: 0px;
  --ambient-secondary-x: 0px;
  --ambient-secondary-y: 0px;
  --ambient-reflection-x: 0px;
  --ambient-reflection-y: 0px;
  --ambient-depth-x: 0px;
  --ambient-depth-y: 0px;
  --ambient-architecture-x: 0px;
  --ambient-architecture-y: 0px;
  --ambient-architecture-rotate: 0deg;
  --ambient-architecture-front-x: 0px;
  --ambient-architecture-front-y: 0px;
  --ambient-architecture-front-rotate: 0deg;
  --ambient-horizon-x: 0px;
  --ambient-horizon-y: 0px;
  --ambient-grain-x: 0px;
  --ambient-grain-y: 0px;
  --surface-reflection-position: 50%;
  --ambient-base-accent-alpha: .056;
  --ambient-base-neutral-alpha: .028;
  --ambient-primary-opacity: .60;
  --ambient-primary-scale: 1.03;
  --ambient-secondary-opacity: .46;
  --ambient-depth-opacity: .43;
  --ambient-architecture-opacity: .56;
  --ambient-architecture-front-opacity: .48;
  --ambient-horizon-opacity: .40;
  --ambient-reflection-opacity: .44;
  --surface-reflection-opacity: .105;
  --ambient-shadow-x: 0px;
  --ambient-shadow-y: 0px;
}

.ambient-environment,
.ambient-environment > div {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ambient-environment {
  z-index: 0;
  overflow: hidden;
  contain: strict;
  background: #06070a;
}

/* Richer tonal foundation: dark, but not empty or flat. */
.ambient-base {
  background:
    radial-gradient(
      ellipse 86% 82% at 82% 28%,
      rgba(var(--accent-rgb), var(--ambient-base-accent-alpha)),
      rgba(var(--accent-rgb), calc(var(--ambient-base-accent-alpha) * .22)) 42%,
      transparent 72%
    ),
    radial-gradient(
      ellipse 64% 70% at 14% 90%,
      rgba(188, 199, 218, var(--ambient-base-neutral-alpha)),
      transparent 70%
    ),
    linear-gradient(145deg, #0d1016 0%, #090b10 32%, #07080c 61%, #050609 100%);
}

.ambient-light {
  inset: auto !important;
  border-radius: 50%;
  transform: translate3d(0, 0, 0);
  will-change: transform, opacity;
}

.ambient-light--primary {
  top: -29vh;
  right: -19vw;
  width: 96vw;
  height: 99vh;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 255, 255, .135) 0%,
    rgba(225, 233, 244, .072) 18%,
    rgba(var(--accent-rgb), .072) 35%,
    rgba(var(--accent-rgb), .023) 54%,
    transparent 74%
  );
  opacity: var(--ambient-primary-opacity);
  transform: translate3d(var(--ambient-primary-x), var(--ambient-primary-y), 0) scale(var(--ambient-primary-scale));
}

.ambient-light--secondary {
  left: -26vw;
  bottom: -34vh;
  width: 82vw;
  height: 90vh;
  background: radial-gradient(
    ellipse at center,
    rgba(210, 220, 236, .085) 0%,
    rgba(116, 132, 158, .045) 33%,
    rgba(var(--accent-rgb), .018) 54%,
    transparent 74%
  );
  opacity: var(--ambient-secondary-opacity);
  transform: translate3d(var(--ambient-secondary-x), var(--ambient-secondary-y), 0);
}

/*
 * Large architectural planes. They read as spatial material and light, not as
 * graphic decoration. Their motion is only a few pixels over several seconds.
 */
.ambient-architecture {
  inset: -12vh -10vw !important;
  will-change: transform, opacity;
}

.ambient-architecture--rear {
  clip-path: polygon(32% 0, 100% 0, 100% 57%, 72% 50%, 19% 28%);
  background:
    linear-gradient(154deg, rgba(255,255,255,.072) 0%, rgba(255,255,255,.018) 34%, rgba(0,0,0,.05) 72%),
    linear-gradient(98deg, rgba(var(--accent-rgb),.035), transparent 56%);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.035);
  opacity: var(--ambient-architecture-opacity);
  transform: translate3d(var(--ambient-architecture-x), var(--ambient-architecture-y), 0) rotate(var(--ambient-architecture-rotate)) scale(1.055);
}

.ambient-architecture--front {
  clip-path: polygon(0 73%, 31% 67%, 100% 42%, 100% 100%, 0 100%);
  background:
    linear-gradient(166deg, rgba(255,255,255,.026), rgba(8,10,14,.14) 38%, rgba(0,0,0,.28) 78%),
    linear-gradient(90deg, transparent 36%, rgba(var(--accent-rgb),.028) 82%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  opacity: var(--ambient-architecture-front-opacity);
  transform: translate3d(var(--ambient-architecture-front-x), var(--ambient-architecture-front-y), 0) rotate(var(--ambient-architecture-front-rotate)) scale(1.04);
}

/* Broad depth planes create parallax without resembling lines or a grid. */
.ambient-depth {
  inset: -20vh -18vw !important;
  background:
    linear-gradient(121deg, transparent 20%, rgba(255,255,255,.032) 43%, rgba(255,255,255,.008) 54%, transparent 69%),
    linear-gradient(148deg, transparent 48%, rgba(var(--accent-rgb),.035) 65%, rgba(var(--accent-rgb),.008) 72%, transparent 82%);
  opacity: var(--ambient-depth-opacity);
  transform: translate3d(var(--ambient-depth-x), var(--ambient-depth-y), 0) scale(1.07);
  will-change: transform, opacity;
}

/* A calm low horizon gives the environment weight and dimensionality. */
.ambient-horizon {
  inset: auto -18vw -29vh 19vw !important;
  height: 57vh;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(var(--accent-rgb), .095) 0%,
    rgba(154, 171, 194, .048) 27%,
    rgba(255,255,255,.014) 46%,
    transparent 72%
  );
  opacity: var(--ambient-horizon-opacity);
  transform: translate3d(var(--ambient-horizon-x), var(--ambient-horizon-y), 0) scale(1.04);
  will-change: transform, opacity;
}

/* Soft light travels through the environment, never over the typography itself. */
.ambient-reflection {
  inset: -39vh auto -39vh 23vw !important;
  width: 39vw;
  background: linear-gradient(
    104deg,
    transparent 0%,
    rgba(255,255,255,.009) 31%,
    rgba(255,255,255,.070) 48%,
    rgba(223,232,244,.020) 61%,
    transparent 100%
  );
  filter: blur(18px);
  opacity: var(--ambient-reflection-opacity);
  transform: translate3d(var(--ambient-reflection-x), var(--ambient-reflection-y), 0) skewX(-10deg);
  will-change: transform, opacity;
}

.ambient-shadow {
  background:
    radial-gradient(ellipse 68% 61% at 43% 47%, transparent 28%, rgba(0,0,0,.08) 68%, rgba(0,0,0,.27) 100%),
    linear-gradient(90deg, rgba(0,0,0,.10), transparent 31%, transparent 72%, rgba(0,0,0,.13));
  transform: translate3d(var(--ambient-shadow-x), var(--ambient-shadow-y), 0);
  will-change: transform;
}

.ambient-grain {
  inset: -8% !important;
  width: 116%;
  height: 116%;
  opacity: .032;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.62'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  mix-blend-mode: soft-light;
  transform: translate3d(var(--ambient-grain-x), var(--ambient-grain-y), 0);
  will-change: transform;
}

.ambient-vignette {
  box-shadow:
    inset 0 0 190px rgba(0,0,0,.18),
    inset 0 -130px 180px rgba(0,0,0,.19),
    inset 0 85px 130px rgba(0,0,0,.08);
}

/* Clean, slow material reflection on real and illustrative product surfaces. */
.product-window,
.app-shell,
.property-app,
.property-detail,
.consultant-app,
.procurement-brief,
.demand-panel {
  position: relative;
  isolation: isolate;
}

.product-window::after,
.app-shell::after,
.property-app::after,
.property-detail::after,
.consultant-app::after,
.procurement-brief::after,
.demand-panel::after {
  content: "";
  position: absolute;
  z-index: 8;
  inset: -24% auto -24% var(--surface-reflection-position);
  width: 20%;
  pointer-events: none;
  background: linear-gradient(102deg, transparent, rgba(255,255,255,.070), transparent);
  filter: blur(10px);
  opacity: var(--surface-reflection-opacity);
  transform: skewX(-12deg);
}

@media (prefers-reduced-motion: reduce) {
  .ambient-light,
  .ambient-depth,
  .ambient-architecture,
  .ambient-horizon,
  .ambient-reflection,
  .ambient-shadow,
  .ambient-grain { transform: none !important; }
}