/**
 * Motion system — subtle scroll scene accents (homepage).
 * Atmosphere is a uniform wash; scenes only nudge tint slightly.
 * No continuous drift — cheaper on iGPU, calmer for accessibility.
 */

@property --atm-veil {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

@property --atm-mesh-opacity {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

html {
  transition:
    --atm-veil 900ms var(--ease-soft, cubic-bezier(0.22, 1, 0.36, 1)),
    --atm-mesh-opacity 900ms var(--ease-soft, cubic-bezier(0.22, 1, 0.36, 1));
}

/* Shared calm baseline — scenes stay close so scroll never “flips” puddles */
html[data-scene="hero"],
html[data-scene="services"],
html[data-scene="process"],
html[data-scene="status"],
html[data-scene="faq"],
html[data-scene="reviews"],
html[data-scene="contact"],
html[data-scene="footer"] {
  --atm-brand: 0.07;
  --atm-accent: 0.045;
  --atm-cool: 0.04;
  --atm-soft: 0.012;
  --atm-mesh-brand: 0.04;
  --atm-mesh-accent: 0.03;
  --atm-mesh-cool: 0.025;
  --atm-mesh-soft: 0.012;
  --atm-veil: 0.06;
  --atm-mesh-opacity: 1;
  --atm-shift-x: 0%;
  --atm-shift-y: 0%;
  --atm-shift-scale: 1;
  --atm-shift-rot: 0deg;
}

html[data-scene="hero"] {
  --atm-brand: 0.085;
  --atm-accent: 0.04;
  --atm-veil: 0.02;
}

html[data-scene="services"] {
  --atm-brand: 0.07;
  --atm-accent: 0.05;
  --atm-veil: 0.05;
}

html[data-scene="process"] {
  --atm-brand: 0.075;
  --atm-accent: 0.04;
  --atm-veil: 0.06;
}

html[data-scene="status"] {
  --atm-brand: 0.055;
  --atm-accent: 0.065;
  --atm-veil: 0.07;
}

html[data-scene="faq"] {
  --atm-brand: 0.06;
  --atm-accent: 0.045;
  --atm-veil: 0.08;
}

html[data-scene="reviews"] {
  --atm-brand: 0.05;
  --atm-accent: 0.04;
  --atm-veil: 0.1;
}

html[data-scene="contact"] {
  --atm-brand: 0.05;
  --atm-accent: 0.045;
  --atm-cool: 0.05;
  --atm-veil: 0.1;
}

html[data-scene="footer"] {
  --atm-brand: 0.04;
  --atm-accent: 0.035;
  --atm-cool: 0.04;
  --atm-veil: 0.12;
  --atm-mesh-opacity: 0.95;
}

@media (prefers-reduced-motion: reduce) {
  html {
    transition: none;
  }
}

/* Skip layout/paint for offscreen blocks (no CLS when sized) */
.brands,
.faq,
.reviews,
.contact {
  content-visibility: auto;
  contain-intrinsic-size: auto 480px;
}

.surface-panel {
  background: var(--surface-float);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--depth-shadow);
}