/* Page atmospheres. Pointer-events none; reduced-motion keeps a static layer.
   Mesh/aurora/dusk blobs animate transform+opacity (compositor), not background-position.
   Fog sheets are tiled SVG fractalNoise. Grain is a separate overlay. */

@property --hero-shine {
  syntax: "<color>";
  inherits: false;
  initial-value: transparent;
}

.atm-layer {
  display: none;
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  /* layout+paint only: size containment zeroes auto boxes and fights inset:0 */
  contain: layout paint;
}
body[class*="atm-"]:not(.atm-none) .atm-layer { display: block; }
/* Raise in-flow chrome above the fixed layer. Do not force position on
   sticky headers or fixed decorative siblings (pack-layer, motion-pause). */
body[class*="atm-"]:not(.atm-none) > .announcement,
body[class*="atm-"]:not(.atm-none) > .perks,
body[class*="atm-"]:not(.atm-none) > .page-banner,
body[class*="atm-"]:not(.atm-none) > main,
body[class*="atm-"]:not(.atm-none) > .site-footer {
  position: relative;
  z-index: 1;
}
body[class*="atm-"]:not(.atm-none) > .site-header {
  z-index: 20;
}

.atm-blob,
.atm-fog,
.atm-grain,
.atm-sweep {
  position: absolute;
  pointer-events: none;
  display: none;
}
.atm-blob {
  width: min(58vmax, 920px);
  height: min(58vmax, 920px);
  border-radius: 50%;
  filter: blur(72px);
  background: radial-gradient(
    circle at 38% 36%,
    color-mix(in srgb, var(--accent) 46%, transparent),
    transparent 68%
  );
  opacity: 0.55;
}
.atm-blob-a { top: -18%; left: -12%; }
.atm-blob-b {
  right: -16%;
  top: -8%;
  width: min(48vmax, 760px);
  height: min(48vmax, 760px);
  background: radial-gradient(
    circle at 60% 40%,
    color-mix(in srgb, var(--header) 38%, transparent),
    transparent 70%
  );
}
.atm-blob-c {
  left: 22%;
  bottom: -22%;
  width: min(52vmax, 820px);
  height: min(52vmax, 820px);
  background: radial-gradient(
    circle at 50% 50%,
    color-mix(in srgb, var(--text) 12%, transparent),
    transparent 72%
  );
}
.atm-grain {
  inset: 0;
  opacity: 0.18;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
.atm-fog {
  inset-block: -18%;
  width: 220%;
  left: -40%;
  opacity: 0.28;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='600'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.008 0.016' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)' opacity='.85'/%3E%3C/svg%3E");
  background-size: 55% 100%;
  mask-image: linear-gradient(180deg, transparent, #000 28%, #000 72%, transparent);
}
.atm-fog-b {
  opacity: 0.18;
  animation-direction: reverse;
  filter: invert(1);
}
.atm-sweep {
  inset: -20% -30%;
  background: linear-gradient(
    115deg,
    transparent 38%,
    color-mix(in srgb, var(--accent) 22%, transparent) 50%,
    transparent 62%
  );
  opacity: 0.35;
}

body.theme-noir .atm-grain,
body.theme-cyber .atm-grain,
body.theme-retro .atm-grain,
body.theme-ink .atm-grain { mix-blend-mode: overlay; }

body.atm-mesh .atm-blob,
body.atm-aurora .atm-blob,
body.atm-dusk .atm-blob,
body.atm-marble .atm-blob { display: block; }
body.atm-mesh .atm-blob-a,
body.atm-aurora .atm-blob-a,
body.atm-dusk .atm-blob-a,
body.atm-marble .atm-blob-a { animation: atm-blob-a 28s ease-in-out infinite alternate; }
body.atm-mesh .atm-blob-b,
body.atm-aurora .atm-blob-b,
body.atm-dusk .atm-blob-b,
body.atm-marble .atm-blob-b { animation: atm-blob-b 34s ease-in-out infinite alternate; }
body.atm-mesh .atm-blob-c,
body.atm-dusk .atm-blob-c,
body.atm-marble .atm-blob-c { display: block; animation: atm-blob-c 40s ease-in-out infinite alternate; }

body.atm-aurora .atm-blob-a { filter: blur(90px); opacity: 0.7; }
body.atm-aurora .atm-blob-b {
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 72%);
}

body.atm-grain .atm-grain,
body.atm-paper .atm-grain { display: block; }
body.atm-paper .atm-layer {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, transparent), transparent 42%);
}
body.atm-paper .atm-blob-a { display: block; opacity: 0.28; filter: blur(100px); animation: atm-blob-a 36s ease-in-out infinite alternate; }

body.atm-grid .atm-layer {
  opacity: 0.28;
  background-image:
    linear-gradient(color-mix(in srgb, var(--text) 14%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--text) 14%, transparent) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, #000 40%, transparent 82%);
}

body.atm-dots .atm-layer {
  opacity: 0.28;
  background-image: radial-gradient(color-mix(in srgb, var(--text) 35%, transparent) 1px, transparent 1.2px);
  background-size: 18px 18px;
}

body.atm-fog .atm-fog,
body.atm-mist .atm-fog { display: block; animation: atm-fog-drift 48s linear infinite; }
body.atm-fog .atm-blob-c,
body.atm-mist .atm-blob-a { display: block; opacity: 0.35; filter: blur(110px); animation: atm-blob-a 32s ease-in-out infinite alternate; }
body.atm-mist .atm-layer {
  background: repeating-linear-gradient(
    100deg,
    transparent 0 72px,
    color-mix(in srgb, var(--header) 18%, transparent) 88px 110px
  );
}

body.atm-rays .atm-layer {
  background: conic-gradient(
    from 210deg at 50% -10%,
    transparent 0deg,
    color-mix(in srgb, var(--accent) 16%, transparent) 28deg,
    transparent 52deg,
    color-mix(in srgb, var(--accent) 10%, transparent) 78deg,
    transparent 110deg
  );
  opacity: 0.85;
}
body.atm-rays .atm-sweep { display: block; animation: atm-sweep-move 16s ease-in-out infinite alternate; }

body.atm-ripples .atm-layer {
  background:
    repeating-radial-gradient(
      circle at 50% 42%,
      transparent 0 28px,
      color-mix(in srgb, var(--accent) 12%, transparent) 29px 30px
    );
  mask-image: radial-gradient(circle at 50% 42%, #000 0 38%, transparent 72%);
  opacity: 0.55;
}

body.atm-spark .atm-layer {
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, color-mix(in srgb, var(--accent) 80%, #fff), transparent 70%),
    radial-gradient(1px 1px at 28% 72%, color-mix(in srgb, var(--text) 50%, transparent), transparent 70%),
    radial-gradient(1.4px 1.4px at 61% 24%, color-mix(in srgb, var(--accent) 70%, #fff), transparent 70%),
    radial-gradient(1px 1px at 81% 64%, color-mix(in srgb, var(--text) 45%, transparent), transparent 70%),
    radial-gradient(1.2px 1.2px at 44% 88%, color-mix(in srgb, var(--accent) 60%, #fff), transparent 70%),
    radial-gradient(1px 1px at 93% 12%, color-mix(in srgb, var(--text) 40%, transparent), transparent 70%);
  animation: atm-twinkle 7s ease-in-out infinite alternate;
}

body.atm-marble .atm-layer {
  background: linear-gradient(118deg, transparent 40%, color-mix(in srgb, var(--header) 18%, transparent) 48%, transparent 56%);
}
body.atm-marble .atm-blob-a { filter: contrast(1.08) blur(80px); }

body.atm-dusk .atm-layer {
  background: linear-gradient(180deg, transparent 46%, color-mix(in srgb, var(--accent) 16%, transparent) 100%);
}
body.atm-dusk .atm-sweep { display: block; opacity: 0.22; animation: atm-sweep-move 22s ease-in-out infinite alternate; }

body.atm-scan .atm-layer {
  background: repeating-linear-gradient(
    180deg,
    transparent 0 7px,
    color-mix(in srgb, var(--text) 8%, transparent) 8px
  );
  opacity: 0.35;
}
body.atm-scan .atm-sweep {
  display: block;
  inset: auto 0;
  height: 18%;
  top: 0;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent) 18%, transparent), transparent);
  animation: atm-scan 9s linear infinite;
  opacity: 0.8;
}

body.atm-orbit .atm-layer {
  background: conic-gradient(
    from 0deg,
    transparent 0 70%,
    color-mix(in srgb, var(--accent) 22%, transparent) 80%,
    transparent 92%
  );
  mask-image: radial-gradient(circle at center, transparent 42%, #000 58%, transparent 72%);
  animation: atm-spin 48s linear infinite;
}

body.view-home .block-hero {
  position: relative;
  isolation: isolate;
  --hero-shine: color-mix(in srgb, var(--accent) 18%, transparent);
}
body.view-home .block-hero::before {
  content: "";
  position: absolute;
  width: min(42rem, 70vw);
  height: min(42rem, 70vw);
  right: -12%;
  top: -18%;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle, var(--hero-shine), transparent 70%);
  animation: atm-hero-glow 12s ease-in-out infinite alternate;
}
body.view-home .block-hero .hero-copy {
  position: relative;
  z-index: 1;
}
body.view-home.atm-fog .block-hero .hero-copy,
body.view-home.atm-mist .block-hero .hero-copy,
body.view-home.atm-paper .block-hero .hero-copy,
body.view-home.atm-dusk .block-hero .hero-copy {
  max-width: 40rem;
  padding: 1.35rem 1.5rem;
  border-radius: var(--radius-lg, 22px);
  background: color-mix(in srgb, var(--surface, #fff) 72%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
}

body.journey-txn .atm-blob,
body.journey-txn .atm-fog,
body.journey-txn .atm-sweep,
body.journey-txn .block-hero::before {
  animation: none !important;
  opacity: 0.2;
}
body.rm-opacity-only .atm-blob,
body.rm-opacity-only .atm-fog {
  animation: atm-twinkle 9s ease-in-out infinite alternate !important;
}
body.rm-opacity-only:not(.atm-scan) .atm-sweep,
body.rm-opacity-only .block-hero::before,
body.rm-static .atm-blob,
body.rm-static .atm-fog,
body.rm-static .atm-sweep,
body.rm-static .block-hero::before {
  animation: none !important;
}

@keyframes atm-blob-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(8%, 6%, 0) scale(1.08); }
}
@keyframes atm-blob-b {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-10%, 8%, 0) scale(1.12); }
}
@keyframes atm-blob-c {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(6%, -7%, 0); }
}
@keyframes atm-fog-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(18%, 0, 0); }
}
@keyframes atm-sweep-move {
  from { transform: translate3d(-18%, 0, 0) rotate(8deg); }
  to { transform: translate3d(18%, 0, 0) rotate(8deg); }
}
@keyframes atm-hero-glow {
  from { opacity: 0.45; transform: scale(1); }
  to { opacity: 0.9; transform: scale(1.12); --hero-shine: color-mix(in srgb, var(--accent) 28%, transparent); }
}
@keyframes atm-twinkle {
  from { opacity: 0.45; }
  to { opacity: 1; }
}
@keyframes atm-scan {
  from { transform: translateY(-20%); }
  to { transform: translateY(520%); }
}
@keyframes atm-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.block.surface-contrast {
  background: color-mix(in srgb, var(--header) 88%, var(--bg));
}
.block.surface-accent {
  background: color-mix(in srgb, var(--accent) 10%, var(--bg));
}
.block.surface-glass {
  background: color-mix(in srgb, var(--surface, #fff) 55%, transparent);
  backdrop-filter: blur(10px);
}

.block-hero.variant-poster {
  min-height: min(54vh, 480px);
  display: grid;
  align-items: end;
  overflow: hidden;
  padding: 0;
}
.block-hero.variant-poster .hero-media {
  grid-area: 1 / 1;
  min-height: min(54vh, 480px);
  background-size: cover;
  background-position: center;
}
.block-hero.variant-poster .block-inner {
  grid-area: 1 / 1;
  position: relative;
  z-index: 1;
  padding: 3.5rem 0 2.2rem;
}
.block-hero.variant-poster .hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--bg) 82%, transparent));
}
.block-hero.variant-poster { position: relative; }
.block-hero.variant-poster .hero-media { position: absolute; inset: 0; }

.block-products.variant-rail .product-grid,
.block-categories.variant-rail .category-tiles {
  display: flex;
  overflow-x: auto;
  gap: 0.9rem;
  padding-bottom: 0.4rem;
  scroll-snap-type: x mandatory;
}
.block-products.variant-rail .product-grid > *,
.block-categories.variant-rail .category-tiles > * {
  flex: 0 0 min(220px, 70%);
  scroll-snap-align: start;
}

.block-cta.variant-split .block-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) auto;
  align-items: center;
  gap: 1rem;
}
.block-lookbook.variant-frame .lookbook-strip {
  outline: 1px solid var(--line);
  box-shadow: 0 18px 40px color-mix(in srgb, var(--text) 12%, transparent);
}

.block-quote .quote-text {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  line-height: 1.25;
  margin: 0;
}
.block-quote .quote-by { color: var(--muted); margin: 0.8rem 0 0; }
.block-stats .stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
}
.block-stats .stat-value {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  display: block;
}
.block-faq details {
  border-bottom: 1px solid var(--line);
  padding: 0.7rem 0;
}
.block-faq summary { cursor: pointer; font-weight: 600; }
.block-divider { padding-block: 0.4rem; }
.block-divider.variant-line hr { border: 0; border-top: 1px solid var(--line); }
.block-divider.variant-space { min-height: 2.4rem; }
.block-divider.variant-ornament hr {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
.block-trust .trust-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1.2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.block-marquee {
  overflow: hidden;
}
.block-marquee .marquee-track {
  display: flex;
  gap: 3rem;
  width: max-content;
  animation: atm-marquee 28s linear infinite;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  white-space: nowrap;
}
.block-marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes atm-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .atm-layer,
  .atm-blob,
  .atm-fog,
  .atm-sweep,
  .block-hero::before,
  .block-marquee .marquee-track {
    animation: none !important;
    transform: none !important;
  }
}
@media (max-width: 800px) {
  .block-cta.variant-split .block-inner { grid-template-columns: 1fr; }
  body.atm-orbit .atm-layer,
  body.atm-scan .atm-sweep { animation: none; }
}