/* ==========================================================================
   Cadence landing — M3 base layer.
   Reset, document typography on the M3 type scale, layout containers,
   section rhythm, the .reveal contract shared with js/reveal.js + js/ready.js
   (body.js-ready hides; .is-visible un-hides), the #themeSweep full-screen
   theme-change wash from js/theme.js, and the global focus ring.
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem; /* clear the sticky top app bar on anchor jumps */
}

body {
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  font: var(--md-sys-typescale-body-large);
  font-family: var(--font-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

img, svg, video { display: block; max-width: 100%; }

input, button, textarea, select { font: inherit; color: inherit; }

button { cursor: pointer; background: none; border: none; padding: 0; }

a {
  color: var(--md-sys-color-primary);
  text-decoration-color: color-mix(in srgb, var(--md-sys-color-primary) 40%, transparent);
  text-underline-offset: 3px;
}
a:hover { text-decoration-color: currentColor; }

::selection {
  background: color-mix(in srgb, var(--md-sys-color-primary) 32%, transparent);
  color: var(--md-sys-color-on-surface);
}

/* M3 focus ring: 3px primary, offset, only for keyboard focus. */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--md-sys-color-primary);
  outline-offset: 2px;
  border-radius: var(--md-sys-shape-corner-small);
}

/* Headings default to the M3 type ramp; sections override scale steps. */
h1, h2, h3, h4 { font-family: var(--font-brand); font-weight: 600; letter-spacing: var(--tracking-headline); }
h1 { font: var(--md-sys-typescale-display-large); letter-spacing: var(--tracking-display); }
h2 { font: var(--md-sys-typescale-headline-large); letter-spacing: var(--tracking-headline); }
h3 { font: var(--md-sys-typescale-title-large); }
p  { font: var(--md-sys-typescale-body-large); }
strong { font-weight: 650; }

code {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
}

/* ---- Layout -------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--container-max) + 2 * var(--container-pad));
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.container--narrow { max-width: 50rem; }

.section { padding-block: var(--section-pad); }

.section--tint {
  background:
    radial-gradient(42rem 26rem at 6% -10%,
      color-mix(in srgb, var(--md-sys-color-primary) 9%, transparent), transparent 62%),
    radial-gradient(38rem 28rem at 98% 110%,
      color-mix(in srgb, var(--md-sys-color-tertiary) 8%, transparent), transparent 60%),
    linear-gradient(180deg,
      transparent 0%,
      color-mix(in srgb, var(--md-sys-color-surface-container-low) 60%, transparent) 16%,
      color-mix(in srgb, var(--md-sys-color-surface-container-low) 60%, transparent) 84%,
      transparent 100%);
}
[data-theme="light"] .section--tint {
  background:
    radial-gradient(42rem 26rem at 6% -10%,
      color-mix(in srgb, var(--md-sys-color-primary) 7%, transparent), transparent 62%),
    radial-gradient(38rem 28rem at 98% 110%,
      color-mix(in srgb, var(--md-sys-color-secondary) 6%, transparent), transparent 60%),
    linear-gradient(180deg,
      transparent 0%,
      color-mix(in srgb, var(--md-sys-color-surface-container-low) 45%, transparent) 16%,
      color-mix(in srgb, var(--md-sys-color-surface-container-low) 45%, transparent) 84%,
      transparent 100%);
}

/* Legacy utility classes kept from the old markup */
.w-full { width: 100%; }
.max-w-full { max-width: 100%; }
.overflow-x-hidden { overflow-x: hidden; }
.overflow-x-hidden { clip-path: inset(0); } /* belt & braces against mockup bleed */

/* Accent span inside headings — brand green, never a different hue */
.accent-text { color: var(--color-accent-strong); }

/* ---- Reveal contract (js/ready.js + js/reveal.js) ------------------------
   Elements marked .reveal start hidden once JS is live, then stagger in via
   .is-visible. Without JS nothing is ever hidden. GSAP also drives some of
   these; both systems converge on opacity/transform so they compose safely. */
body.js-ready .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity var(--md-sys-motion-duration-long2) var(--md-sys-motion-easing-decelerate),
    transform var(--md-sys-motion-duration-long2) var(--md-sys-motion-easing-emphasized);
  will-change: opacity, transform;
}
body.js-ready .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  body.js-ready .reveal { opacity: 1; transform: none; }
}

/* ---- Theme switch reveal (js/theme.js) ------------------------------------
   View Transitions API: when the palette flips, the OLD frame keeps being
   displayed while the NEW frame is revealed by a clip-path circle expanding
   from the toggle button. Because the old pixels stay on screen outside the
   circle, text and layout remain fully visible for the whole animation —
   there is no solid overlay hiding the page. Browsers without view
   transitions simply switch instantly (js/theme.js handles that path). */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 2; }

/* Legacy fallback layer, kept inert: js/theme.js no longer activates it. */
#themeSweep {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background: var(--theme-sweep-color, transparent);
  opacity: 0;
  clip-path: circle(0% at var(--sweep-x, 90%) var(--sweep-y, 4%));
}

/* ---- Scrollbar (subtle, tokenized) --------------------------------------- */
@supports (scrollbar-width: thin) {
  html { scrollbar-width: thin; scrollbar-color: var(--md-sys-color-outline-variant) transparent; }
}