/**
 * base.css — element defaults, the ambient background, the scroll-reveal
 * mechanic and the keyframes the whole site shares.
 *
 * The mockups lean on a small set of slow, looping "om" animations for the
 * temple-lamp feel; they all live here so a single prefers-reduced-motion
 * block can switch them off.
 */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0;
  text-wrap: pretty;
}

p { margin: 0; text-wrap: pretty; }

a {
  color: var(--maroon-600);
  text-decoration-color: #cdbda2;
  text-underline-offset: 3px;
}
a:hover { color: var(--maroon-800); }

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

input, textarea, select, button { font: inherit; color: inherit; }
input::placeholder, textarea::placeholder { color: var(--ink-6); }

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(224, 163, 37, .28);
}

button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* The `hidden` attribute has to beat any component's own `display`, or a
   .searchbox__clear { display:flex } quietly un-hides itself. */
[hidden] { display: none !important; }

/* Icons are sized by the element that holds them unless told otherwise. */
.icon { width: 1em; height: 1em; flex-shrink: 0; display: block; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--gold);
  color: var(--gold-ink);
  padding: 12px 20px;
  border-radius: 0 0 var(--radius-sm) 0;
  font-weight: 700;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Ambient radiance ----------
   Two slow-drifting gold/maroon blooms fixed behind everything. Purely
   decorative; sits under the page at z-index 0 with the content at 1. */
.ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.ambient span {
  position: absolute;
  border-radius: 50%;
  display: block;
}
.ambient span:nth-child(1) {
  top: -14vh; left: -8vw; width: 60vw; height: 60vw;
  background: radial-gradient(circle, rgba(224, 163, 37, .26), rgba(224, 163, 37, 0) 66%);
  animation: om-drift-a 26s ease-in-out infinite;
}
.ambient span:nth-child(2) {
  bottom: -22vh; right: -12vw; width: 64vw; height: 64vw;
  background: radial-gradient(circle, rgba(107, 30, 47, .18), rgba(107, 30, 47, 0) 66%);
  animation: om-drift-b 32s ease-in-out infinite;
}
.ambient span:nth-child(3) {
  top: 38%; left: 44%; width: 34vw; height: 34vw;
  background: radial-gradient(circle, rgba(47, 93, 86, .14), rgba(47, 93, 86, 0) 68%);
  animation: om-drift-b 40s ease-in-out infinite;
}

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

/* ---------- Scroll reveal ----------
   js/reveal.js unsets these once the element enters the viewport, and has a
   timeout fallback so content can never stay invisible. */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s ease, transform .8s var(--ease-out);
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* ---------- Shared keyframes ---------- */
@keyframes om-drift-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(4vw, 3vh, 0) scale(1.12); }
}
@keyframes om-drift-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.06); }
  50% { transform: translate3d(-5vw, -4vh, 0) scale(1); }
}
@keyframes om-bloom {
  0%, 100% { opacity: .42; transform: scale(1); }
  50% { opacity: .9; transform: scale(1.1); }
}
@keyframes om-halo {
  0%, 100% { opacity: .5; }
  50% { opacity: 1; }
}
@keyframes om-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
@keyframes om-expand {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}
@keyframes om-pop {
  from { opacity: 0; transform: scale(.94); }
  to { opacity: 1; transform: none; }
}
@keyframes om-spin { to { transform: rotate(360deg); } }
@keyframes om-pin {
  0%, 100% { transform: translate(-50%, -100%) translateY(0); }
  50% { transform: translate(-50%, -100%) translateY(-4px); }
}
@keyframes om-shimmer {
  from { background-position: 120% 0; }
  to { background-position: -120% 0; }
}

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