/* ═══════════════════════════════════════════
   COMPONENTS — reusable UI building blocks
   ═══════════════════════════════════════════

   All public-site components: nav, hero, buttons, sections, wave
   divider, footer, cookie notice, scroll-reveal animations. No
   hardcoded colors or sizes — everything references tokens.css.

   Loaded AFTER tokens.css and base.css. */

/* ═══════════════════════════════════════════
   NAVIGATION
   ═══════════════════════════════════════════

   Three-layer structure:
     .nav         — fixed-position shell
     .nav-bg      — absolutely positioned sibling holding the glass
                    (background + backdrop-filter + bottom border).
                    A real <div>, not a pseudo-element, because Safari
                    drops ::before + backdrop-filter mid-frame during
                    scroll transitions between high-contrast sections.
     .nav-inner   — content container, lifted above .nav-bg via z-index */

/* Nav rules (.nav, .nav-bg, .nav-inner, .nav-brand, .nav-logo,
   .nav-brand-text, .nav-title, .nav-links, .nav-link + ::after,
   .nav-toggle + active states) plus the responsive @media block
   moved to @sms/design-components → Nav.svelte.

   `.map-link` moved to @sms/design-components → Footer.svelte. */

/* ═══════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════

   Three layers:
     1. Background on .hero::before so positioning can switch between
        absolute (default) and fixed (.hero--immersive).
     2. Optional .hero-notes overlay (music symbols).
     3. Own content (logo, headings, buttons). */

/* `.hero`, `.hero::before`, `.hero--full`, `.hero-notes` (wrapper)
   moved to @sms/design-components → Hero.svelte. */

/* `.note`, `.clef`, `.sym-N` positioning, @keyframes floatNote, and
   the reduced-motion override moved to @sms/design-components →
   HeroNotes.svelte. */

/* Hero content + logo + h1 + sub + buttons + fadeInUp moved to
   @sms/design-components → Hero.svelte. */

/* ═══════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════ */

/* `.btn` and friends moved to @sms/design-components → Button.svelte. */

/* ═══════════════════════════════════════════
   SECTIONS — shared headings & container
   ═══════════════════════════════════════════ */

section {
	padding: 6rem var(--space-8);
}
.container {
	max-width: var(--w-content);
	margin: 0 auto;
}

/* `.section-label`, `.section-title`, `.section-desc` moved to
   @sms/design-components → section/{SectionLabel,SectionTitle,
   SectionDesc}.svelte. The compound-component shape lets each
   typographic role own its own scope without escaping via
   :global(). About-us bespoke layout still works because
   <Section.Label> / <Section.Title> are placed inside the
   about-grid sidebar — each component creates its own scoped
   element. */

/* ═══════════════════════════════════════════
   CARD — moved to @sms/design-components
   ═══════════════════════════════════════════

   `.card`, `.card--lg` and `.card--hover` are the design system's now:
   css/card.css, synced to static/css/card.css and linked from app.html
   just before this file. Admin loads the same file, so every SMS site
   renders one card. */

/* ═══════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════ */

/* Footer rules moved to @sms/design-components → Footer.svelte. */

/* ═══════════════════════════════════════════
   COOKIE NOTICE
   ═══════════════════════════════════════════ */

/* Cookie-notice rules moved to @sms/design-components → CookieNotice.svelte. */

/* ═══════════════════════════════════════════
   SCROLL-REVEAL ANIMATIONS
   ═══════════════════════════════════════════

   Class-based: initial state in CSS so cards never show before they
   fade in (no flash-of-visible-content). JS adds .reveal then switches
   to .is-visible when the IntersectionObserver triggers. */
.reveal {
	opacity: 0;
	transform: translateY(20px);
	transition:
		opacity 0.7s var(--easing-emphasized),
		transform 0.7s var(--easing-emphasized);
	/* --reveal-i is set per element (0..6) in JS; capped so the last
     card in a long list doesn't get an unreasonable delay. */
	transition-delay: calc(var(--reveal-i, 0) * 60ms);
}
.reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Section-level reveal — Section.Root's <section id> fades + lifts
   as it enters viewport. Slightly larger translate distance and
   longer duration than card reveals so the heading-to-content
   rhythm reads as deliberate. The cards inside the section
   continue to use their own .reveal stagger; the two layers
   compose: section announces itself, cards arrive in sequence
   underneath. */
.reveal-section {
	opacity: 0;
	transform: translateY(40px);
	transition:
		opacity 0.9s var(--easing-emphasized),
		transform 0.9s var(--easing-emphasized);
}
.reveal-section.is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.reveal,
	.reveal-section {
		animation: none !important;
		transition: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
	/* Hero + cookie-notice reduced-motion rules moved to their respective components. */
}

/* ═══════════════════════════════════════════
   RESPONSIVE — mobile adaptation of nav & hero
   ═══════════════════════════════════════════ */

@media (max-width: 768px) {
	/* Nav, hero, button mobile overrides all moved to their respective
     components in @sms/design-components. */
	section {
		padding: var(--space-16) var(--space-6);
	}
}