@layer threshold.foundation, threshold.atmosphere, threshold.topology, threshold.interaction, threshold.restraint;

@layer threshold.foundation {
  body[data-complexity] {
    overflow-x: hidden;
  }

  body[data-complexity] :where(main, section, article, nav, header, footer, div) {
    min-width: 0;
  }

  body[data-complexity] :where(img, svg, canvas, video) {
    max-width: 100%;
  }
}

@layer threshold.atmosphere {
  body[data-complexity~="atmosphere"] {
    --threshold-atmosphere-opacity: 1;
  }

  body[data-complexity~="editorial"] {
    --threshold-reading-width: 68ch;
  }
}

@layer threshold.topology {
  body[data-complexity~="topology"] :where([data-destination-layer], #archive, .hub-shell, #flower-container) {
    isolation: isolate;
  }
}

@layer threshold.interaction {
  body.threshold-reveal-arrival {
    animation: threshold-chamber-arrival 800ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .threshold-reveal-arrival-layer {
    position: fixed;
    inset: 0;
    z-index: 2147483646;
    pointer-events: none;
    border: 3px solid rgba(var(--threshold-reveal-color), 0.55);
    background: radial-gradient(circle at center, rgba(var(--threshold-reveal-color), 0.2), transparent 48%);
    box-shadow: inset 0 0 36px rgba(var(--threshold-reveal-color), 0.32);
    animation: threshold-arrival-field 850ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .threshold-reveal-arrival-layer::before,
  .threshold-reveal-arrival-layer::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    translate: -50% -50%;
  }

  .threshold-reveal-arrival-layer::before {
    width: min(34vw, 260px);
    aspect-ratio: 1;
    border: 1px solid rgba(var(--threshold-reveal-color), 0.5);
    box-shadow: 0 0 28px rgba(var(--threshold-reveal-color), 0.25);
  }

  .threshold-reveal-arrival-layer::after {
    width: min(9vw, 62px);
    aspect-ratio: 1;
    background: rgba(var(--threshold-reveal-color), 0.5);
    box-shadow: 0 0 30px rgba(var(--threshold-reveal-color), 0.55);
  }

  @keyframes threshold-chamber-arrival {
    from { opacity: 0; filter: brightness(0.35) saturate(1.5); }
    45% { opacity: 1; filter: brightness(1.16) saturate(1.18); }
    to { opacity: 1; filter: none; }
  }

  @keyframes threshold-arrival-field {
    from { opacity: 0; scale: 0.94; }
    38% { opacity: 1; scale: 1; }
    to { opacity: 0; scale: 1.025; }
  }

  body[data-complexity~="interaction"] :where(button, a, input, textarea, select):focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
  }
}

@layer threshold.restraint {
  @media (max-width: 720px) {
    .hub-page :where(.hub-connection-layer, .hub-shell) {
      max-width: 100vw;
      overflow: hidden;
    }
  }

  body[data-motion="bounded"] :where(
    .entry-core,
    .entry-orbit,
    #flower-pulse,
    .hub-core,
    .hub-node,
    .hub-node-pulse,
    .weather-particle,
    .mythology-pulse
  ) {
    --pulse-scale: 1;
    animation-timing-function: linear;
  }

  body[data-motion="bounded"] :where(.entry-core, #flower-pulse, .hub-node-pulse, .mythology-pulse) {
    scale: 1 !important;
  }

  body[data-motion="bounded"] :where(.entry-core, #flower-pulse, .hub-node-pulse, .mythology-pulse)::before,
  body[data-motion="bounded"] :where(.entry-core, #flower-pulse, .hub-node-pulse, .mythology-pulse)::after {
    scale: 1 !important;
  }

  @media (prefers-reduced-motion: reduce) {
    body[data-complexity] *,
    body[data-complexity] *::before,
    body[data-complexity] *::after {
      scroll-behavior: auto !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
}