/*
 * Global ambient architecture (page-owned, not section-owned):
 * Base (body) → Gradient → Soft light → Noise → Grid (scroll) → Sections → Cards
 *
 * Dark mode art direction: one continuous architectural space.
 * Neutral surfaces dominate; teal is reserved for interactive emphasis.
 * Grid and light breathe with scroll position — never restart per section.
 */

@layer utilities {
  .page-atmosphere {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
  }

  /*
   * Broad, low-opacity field lighting — invisible sources, not section blobs.
   * Light mode keeps a soft brand wash; dark mode leans neutral with restrained teal.
   */
  .page-atmosphere__gradient {
    position: absolute;
    inset: 0;
    background-image:
      radial-gradient(
        ellipse 90% 50% at 50% -8%,
        rgba(41, 161, 156, 0.12),
        transparent 58%
      ),
      radial-gradient(
        ellipse 55% 42% at 100% 28%,
        rgba(41, 161, 156, 0.05),
        transparent 55%
      ),
      radial-gradient(
        ellipse 50% 40% at 0% 62%,
        color-mix(in srgb, var(--brand-primary-dark) 6%, transparent),
        transparent 55%
      ),
      radial-gradient(
        ellipse 70% 45% at 50% 100%,
        rgba(41, 161, 156, 0.04),
        transparent 60%
      );
  }

  .dark .page-atmosphere__gradient {
    background-image:
      /* Hero crown — strongest lift, still soft */
      radial-gradient(
        ellipse 95% 48% at 50% -12%,
        rgba(232, 240, 238, 0.055),
        transparent 58%
      ),
      /* Quiet teal accent under the hero only */
      radial-gradient(
        ellipse 70% 36% at 48% 4%,
        rgba(41, 161, 156, 0.055),
        transparent 52%
      ),
      /* Mid-page cool lift (features / services rhythm) */
      radial-gradient(
        ellipse 80% 36% at 92% 32%,
        rgba(210, 225, 222, 0.028),
        transparent 62%
      ),
      /* Calm valley — deeper neutral, almost no chroma */
      radial-gradient(
        ellipse 70% 40% at 8% 58%,
        rgba(8, 14, 14, 0.35),
        transparent 60%
      ),
      /* Soft return of light before portfolio */
      radial-gradient(
        ellipse 75% 34% at 70% 74%,
        rgba(220, 232, 230, 0.022),
        transparent 58%
      ),
      /* Footer fade — near-black calm */
      radial-gradient(
        ellipse 90% 40% at 50% 108%,
        rgba(0, 0, 0, 0.28),
        transparent 55%
      );
  }

  /*
   * Scroll-linked grid — one continuous field across page height.
   * Opacity peaks / valleys track content density (hero → features → content
   * → portfolio → CTA off → footer whisper). Never compete with copy.
   */
  .page-atmosphere__grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.038;
    color: var(--foreground);
    background-image:
      linear-gradient(to right, currentColor 1px, transparent 1px),
      linear-gradient(to bottom, currentColor 1px, transparent 1px);
    background-size: 4rem 4rem;
    background-position: 0 0;
    /* Hero uses .hero-square-pattern; keep page grid off the first viewport */
    -webkit-mask-image:
      radial-gradient(ellipse 58% 10% at 78% 26%, rgba(0, 0, 0, 0.45) 0%, transparent 72%),
      radial-gradient(ellipse 65% 11% at 22% 40%, rgba(0, 0, 0, 0.32) 0%, transparent 70%),
      radial-gradient(ellipse 70% 12% at 50% 58%, rgba(0, 0, 0, 0.28) 0%, transparent 72%),
      radial-gradient(ellipse 55% 9% at 65% 78%, rgba(0, 0, 0, 0.12) 0%, transparent 70%),
      linear-gradient(
        to bottom,
        transparent 0%,
        transparent 16%,
        transparent 20%,
        rgba(0, 0, 0, 0.28) 26%,
        rgba(0, 0, 0, 0.16) 34%,
        transparent 40%,
        transparent 44%,
        rgba(0, 0, 0, 0.22) 50%,
        rgba(0, 0, 0, 0.12) 56%,
        transparent 62%,
        transparent 68%,
        rgba(0, 0, 0, 0.06) 74%,
        transparent 80%,
        transparent 88%,
        rgba(0, 0, 0, 0) 92%,
        transparent 96%,
        rgba(0, 0, 0, 0.1) 99%,
        transparent 100%
      );
    mask-image:
      radial-gradient(ellipse 58% 10% at 78% 26%, rgba(0, 0, 0, 0.45) 0%, transparent 72%),
      radial-gradient(ellipse 65% 11% at 22% 40%, rgba(0, 0, 0, 0.32) 0%, transparent 70%),
      radial-gradient(ellipse 70% 12% at 50% 58%, rgba(0, 0, 0, 0.28) 0%, transparent 72%),
      radial-gradient(ellipse 55% 9% at 65% 78%, rgba(0, 0, 0, 0.12) 0%, transparent 70%),
      linear-gradient(
        to bottom,
        transparent 0%,
        transparent 16%,
        transparent 20%,
        rgba(0, 0, 0, 0.28) 26%,
        rgba(0, 0, 0, 0.16) 34%,
        transparent 40%,
        transparent 44%,
        rgba(0, 0, 0, 0.22) 50%,
        rgba(0, 0, 0, 0.12) 56%,
        transparent 62%,
        transparent 68%,
        rgba(0, 0, 0, 0.06) 74%,
        transparent 80%,
        transparent 88%,
        rgba(0, 0, 0, 0) 92%,
        transparent 96%,
        rgba(0, 0, 0, 0.1) 99%,
        transparent 100%
      );
    -webkit-mask-composite: source-over;
    mask-composite: add;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: 100% 100%;
    -webkit-mask-size: 100% 100%;
  }

  /* Dark: slightly higher peak so hero can read ~15–18% relative; valleys stay near zero */
  .dark .page-atmosphere__grid {
    opacity: 0.048;
    color: rgb(228 236 234 / 0.9);
  }

  /* Shared light sources — large soft orbs spanning the viewport */
  .page-atmosphere__light {
    position: absolute;
    border-radius: 9999px;
    filter: blur(4px);
  }

  .page-atmosphere__light--primary {
    inset-inline-end: -18%;
    top: -4%;
    width: min(52rem, 96vw);
    height: min(52rem, 96vw);
    background-image: radial-gradient(
      circle,
      rgba(41, 161, 156, 0.09),
      transparent 68%
    );
  }

  .page-atmosphere__light--secondary {
    inset-inline-start: -20%;
    top: 42%;
    width: min(44rem, 88vw);
    height: min(44rem, 88vw);
    background-image: radial-gradient(
      circle,
      color-mix(in srgb, var(--brand-primary-dark) 8%, transparent),
      transparent 70%
    );
  }

  .page-atmosphere__light--tertiary {
    inset-inline-end: -10%;
    top: 68%;
    width: min(40rem, 82vw);
    height: min(40rem, 82vw);
    opacity: 0.85;
    background-image: radial-gradient(
      circle,
      rgba(41, 161, 156, 0.045),
      transparent 72%
    );
  }

  .dark .page-atmosphere__light--primary {
    background-image: radial-gradient(
      circle,
      rgba(236, 244, 242, 0.07),
      transparent 70%
    );
  }

  .dark .page-atmosphere__light--secondary {
    background-image: radial-gradient(
      circle,
      rgba(41, 161, 156, 0.04),
      transparent 72%
    );
  }

  .dark .page-atmosphere__light--tertiary {
    background-image: radial-gradient(
      circle,
      rgba(210, 224, 222, 0.035),
      transparent 74%
    );
  }

  .page-atmosphere__noise {
    position: absolute;
    inset: 0;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 180px 180px;
    mix-blend-mode: soft-light;
  }

  .dark .page-atmosphere__noise {
    opacity: 0.038;
  }

  .page-content {
    position: relative;
    z-index: 1;
  }

  /* Hero soft wash — strongest visual anchor; fades into shared canvas */
  .hero-atmosphere {
    background-color: transparent;
    background-image:
      radial-gradient(
        circle at 50% -8%,
        rgba(41, 161, 156, 0.1),
        transparent 52%
      ),
      linear-gradient(
        180deg,
        color-mix(in srgb, var(--brand-primary-dark) 5%, transparent) 0%,
        transparent 42%,
        transparent 100%
      );
  }

  /* Hero-only square grid — fades at container sides + bottom of hero */
  .hero-square-pattern {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.045;
    color: var(--foreground);
    background-image:
      linear-gradient(to right, currentColor 1px, transparent 1px),
      linear-gradient(to bottom, currentColor 1px, transparent 1px);
    background-size: 4rem 4rem;
    background-position: 0 0;
    -webkit-mask-image:
      linear-gradient(
        to right,
        transparent 0%,
        #000 12%,
        #000 88%,
        transparent 100%
      ),
      linear-gradient(
        to bottom,
        #000 0%,
        #000 68%,
        transparent 100%
      );
    mask-image:
      linear-gradient(
        to right,
        transparent 0%,
        #000 12%,
        #000 88%,
        transparent 100%
      ),
      linear-gradient(
        to bottom,
        #000 0%,
        #000 68%,
        transparent 100%
      );
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }

  .dark .hero-square-pattern {
    opacity: 0.055;
    color: rgb(228 236 234 / 0.9);
  }

  .dark .hero-atmosphere {
    background-image:
      radial-gradient(
        circle at 50% -6%,
        rgba(236, 244, 242, 0.06),
        transparent 48%
      ),
      radial-gradient(
        circle at 52% 8%,
        rgba(41, 161, 156, 0.07),
        transparent 46%
      ),
      linear-gradient(
        180deg,
        color-mix(in srgb, var(--brand-primary-dark) 14%, transparent) 0%,
        transparent 48%,
        transparent 100%
      );
  }

  /*
   * Local content highlight — sits behind a card / title / CTA panel.
   * Emphasis from the object, not a section wash.
   */
  .local-highlight {
    position: absolute;
    inset: 20% 12%;
    z-index: 0;
    pointer-events: none;
    border-radius: 9999px;
    background-image: radial-gradient(
      ellipse at center,
      color-mix(in srgb, var(--primary) 14%, transparent),
      transparent 70%
    );
    filter: blur(28px);
    opacity: 0.55;
  }

  .dark .local-highlight {
    background-image: radial-gradient(
      ellipse at center,
      rgba(41, 161, 156, 0.14),
      transparent 72%
    );
    opacity: 0.45;
    filter: blur(36px);
  }

  .local-highlight--soft {
    opacity: 0.35;
    inset: 24% 18%;
  }

  .dark .local-highlight--soft {
    opacity: 0.28;
    background-image: radial-gradient(
      ellipse at center,
      rgba(220, 232, 230, 0.08),
      transparent 72%
    );
  }

  .backdrop-glass-md {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  /*
   * Roadmap — sizing tokens only.
   * Atmosphere stays page-owned; section shell is transparent.
   */
  .timeline-section {
    --timeline-step-gap: 2.75rem;
    --timeline-connector: 3rem;
    --timeline-card-width: 20.5rem;
  }
}

@media (max-width: 1023px) {
  .timeline-section {
    --timeline-step-gap: 2rem;
    --timeline-connector: 2.5rem;
    --timeline-card-width: 100%;
  }
}

@media (max-width: 639px) {
  .timeline-section {
    --timeline-step-gap: 1.75rem;
  }
}