/* ==========================================================================
   Crunchy Pup — main stylesheet (every page loads this one file)
   ==========================================================================
   Brand palette (visual identity v4.4):
     Bone Broth Beige  #FAF7F2  → backgrounds
     Activated Charcoal #222222 → text
     Deep Kelp Green   #2E4A39  → accents, links, buttons
     Roasted Sweet Potato #A84B2F → alert / error states ONLY, never decoration
   Type: Alice (display headings) + Montserrat (body and UI).

   HOW THIS FILE IS ORGANIZED (search for the numbers):
     1. Design tokens (colors, spacing, type sizes)
     2. Base + accessibility (reset, focus rings, skip link)
     3. Header and navigation
     4. Buttons and links
     5. Sections, headings, layout helpers
     6. Pebble photo shapes (the organic image masks used everywhere)
     7. Cards (crew, VIP gallery, blog)
     8. Signup form (email + SMS)
     9. Footer
     10. Page-specific styles (about, vip, blog, legal, shop)
     11. Motion: reveal utilities + reduced-motion fallback
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. FONTS — self-hosted .woff2 per brand guidelines §5
   Files live in site/fonts/. font-display: swap means text shows
   immediately in a fallback while the brand font loads.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Alice";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/alice-400-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/montserrat-400-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/montserrat-500-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/montserrat-600-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/montserrat-700-latin.woff2") format("woff2");
}

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* ======================================================================
     DESIGN CONTROLS — the safe-to-tweak knobs
     Change a number here and it updates everywhere on the site at once.
     (To ask Claude: "make the polaroid effect softer" or "give images a
     thin cream border" — these are the values that get adjusted.)
     ---------------------------------------------------------------------- */
  --photo-grain: 0.9;        /* polaroid grain + vignette strength. 0 = off (clean photo), 0.9 = current, up to ~1.4 = moodier/grainier */
  --photo-filter: saturate(1.14) contrast(1.04) brightness(1.03) sepia(0.06); /* photo color warmth. More sepia = warmer; saturate(1) contrast(1) brightness(1) sepia(0) = untouched */
  --photo-border: none;      /* border around every photo. none = current. Example: 6px solid var(--warm-sand) for a cream frame */
  /* --shadow (below) is the drop-shadow depth under photos and cards. */
  /* ====================================================================== */

  --beige: #FAF7F2;
  --charcoal: #222222;
  --kelp: #2E4A39;
  --sweet-potato: #A84B2F;   /* alerts only */

  /* Official variants from the brand guidelines' extended color matrix */
  --kelp-hover: #3B5E49;     /* "Hover Green": CTA hover states */
  --kelp-pressed: #21362A;   /* "Deepest Kelp": pressed/active states */
  --kelp-deep: #21362A;      /* kept as alias for older rules */
  --warm-sand: #EBE5D9;      /* secondary section backgrounds (footer) */
  --toasted-beige: #DED5C4;  /* borders and dividers */
  --slate: #666666;          /* muted/secondary text (passes AA on beige) */

  --kelp-06: rgba(46, 74, 57, 0.06);
  --kelp-10: rgba(46, 74, 57, 0.10);
  --kelp-16: rgba(46, 74, 57, 0.16);
  --line: var(--toasted-beige);
  --shadow: 0 18px 44px -18px rgba(34, 34, 34, 0.22);

  --font-display: "Alice", "Georgia", serif;
  --font-body: "Montserrat", "Segoe UI", -apple-system, sans-serif;

  /* Fluid type scale */
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: clamp(1.15rem, 1rem + 0.6vw, 1.375rem);
  --text-h3: clamp(1.35rem, 1.15rem + 0.9vw, 1.75rem);
  --text-h2: clamp(1.9rem, 1.4rem + 2.2vw, 3rem);
  --text-h1: clamp(2.5rem, 1.6rem + 4.5vw, 4.75rem);

  --container: 1180px;
  --pad: clamp(1.25rem, 4vw, 2.5rem);
  --section-gap: clamp(4.5rem, 10vw, 8.5rem);
  --radius: 20px;
}

/* --------------------------------------------------------------------------
   2. BASE + ACCESSIBILITY
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--beige);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  overflow-x: clip; /* no horizontal scroll, ever */
}

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

/* The hidden attribute always wins, even over display rules like .btn.
   (Without this, "hiding" the signup button left it visible.) */
[hidden] { display: none !important; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.12;
  margin: 0 0 0.6em;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h1 { font-size: var(--text-h1); }
/* Section headers run Deep Kelp Green per the brand type table
   (8:1 contrast on beige, well past WCAG AA for any size) */
h2 { font-size: var(--text-h2); color: var(--kelp); }
h3 { font-size: var(--text-h3); color: var(--kelp); }

p { margin: 0 0 1.1em; max-width: 62ch; }

a { color: var(--kelp); text-underline-offset: 3px; }
a:hover { color: var(--kelp-deep); }

::selection { background: var(--kelp); color: var(--beige); }

/* Visible keyboard focus everywhere */
:focus-visible {
  outline: 3px solid var(--kelp);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Skip link: hidden until focused */
.skip-link {
  position: absolute;
  left: 1rem; top: -4rem;
  z-index: 200;
  background: var(--kelp); color: var(--beige);
  padding: 0.75rem 1.25rem;
  border-radius: 8px;
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 1rem; color: var(--beige); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3. HEADER AND NAVIGATION
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: color-mix(in srgb, var(--beige) 86%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
}
.site-header.is-scrolled { border-bottom-color: var(--line); }

.header-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  gap: 1rem;
}

/* LOGO PLACEHOLDER ---------------------------------------------------------
   There is no final logo yet. The wordmark below is the stand-in.
   When the real logo arrives, replace the text inside <a class="brand">
   with an <img> in every page's header and footer (8 files), keeping the
   same link. Search the project for "brand-wordmark" to find them all.    */
.brand {
  font-family: var(--font-display);
  font-size: 1.45rem;
  color: var(--charcoal);
  text-decoration: none;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  min-height: 44px; /* tap target */
}
.brand .paw { color: var(--kelp); margin-right: 0.45rem; font-size: 1.1em; line-height: 1; }
.brand:hover { color: var(--kelp); }

.site-nav ul {
  list-style: none;
  display: flex;
  gap: clamp(0.25rem, 1.5vw, 1rem);
  margin: 0; padding: 0;
  align-items: center;
}
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.35rem 0.85rem;
  color: var(--charcoal);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 500;
  border-radius: 999px;
  transition: background 0.2s ease, color 0.2s ease;
}
.site-nav a:hover { background: var(--kelp-10); color: var(--kelp-deep); }
.site-nav a[aria-current="page"] { background: var(--kelp-10); color: var(--kelp-deep); }
.site-nav a.nav-cta {
  background: var(--kelp);
  color: var(--beige);
  font-weight: 600;
  padding: 0.35rem 1.1rem;
}
.site-nav a.nav-cta:hover { background: var(--kelp-hover); }

/* Mobile menu */
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: 12px;
  width: 48px; height: 48px;
  cursor: pointer;
  color: var(--charcoal);
  align-items: center;
  justify-content: center;
}
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: fixed;
    inset: 72px 0 auto 0;
    background: var(--beige);
    border-bottom: 1px solid var(--line);
    padding: 0.75rem var(--pad) 1.5rem;
    display: none;
    box-shadow: var(--shadow);
  }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0.25rem; }
  .site-nav a { min-height: 48px; font-size: 1.05rem; border-radius: 12px; }
  .site-nav a.nav-cta { justify-content: center; margin-top: 0.5rem; }
}

/* --------------------------------------------------------------------------
   4. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 52px;
  padding: 0.8rem 1.9rem;
  border-radius: 999px;
  border: 2px solid var(--kelp);
  background: var(--kelp);
  color: var(--beige);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700; /* Montserrat Bold for CTAs, per brand type table */
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.btn:hover {
  background: var(--kelp-hover);
  border-color: var(--kelp-hover);
  color: var(--beige);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -12px rgba(46, 74, 57, 0.5);
}
.btn:active {
  background: var(--kelp-pressed);
  border-color: var(--kelp-pressed);
  transform: translateY(0);
}

.btn--ghost {
  background: transparent;
  color: var(--kelp);
}
.btn--ghost:hover { background: var(--kelp-10); color: var(--kelp-deep); }

/* Buttons on dark kelp sections */
.on-kelp .btn { background: var(--beige); border-color: var(--beige); color: var(--kelp-deep); }
.on-kelp .btn:hover { background: #fff; border-color: #fff; }

.text-link {
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* --------------------------------------------------------------------------
   5. SECTIONS + LAYOUT
   -------------------------------------------------------------------------- */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--pad);
}

.section { padding-block: var(--section-gap); }
.section--tight { padding-block: calc(var(--section-gap) * 0.6); }

/* Dark kelp band */
.on-kelp {
  background: var(--kelp);
  color: var(--beige);
}
.on-kelp h1, .on-kelp h2, .on-kelp h3 { color: var(--beige); }
.on-kelp a { color: var(--beige); }

.eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kelp);
  margin-bottom: 1rem;
}
.on-kelp .eyebrow { color: color-mix(in srgb, var(--beige) 75%, var(--kelp)); }

.lead { font-size: var(--text-lg); }

.grid-2 {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (min-width: 820px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-2 > .order-first-desktop { order: -1; }
}

/* --------------------------------------------------------------------------
   6. PEBBLE PHOTO SHAPES
   Organic, river-stone image masks. The brand's signature visual device.
   -------------------------------------------------------------------------- */
.pebble {
  position: relative;
  overflow: hidden;
  border-radius: 58% 42% 55% 45% / 52% 55% 45% 48%;
  box-shadow: var(--shadow);
  border: var(--photo-border); /* controlled by the design-controls knob */
}
.pebble img { width: 100%; height: 100%; object-fit: cover; }
.pebble--b { border-radius: 44% 56% 48% 52% / 55% 44% 56% 45%; }
.pebble--c { border-radius: 52% 48% 60% 40% / 45% 52% 48% 55%; }

/* Warm Polaroid treatment (brand guidelines §7): every important photo gets
   a touch of hand-processed warmth and film grain instead of looking like
   clean corporate stock. Add the "photo-warm" class alongside "pebble". */
.photo-warm img {
  filter: var(--photo-filter); /* controlled by the design-controls knob */
}
.photo-warm::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 120% at 28% 18%, rgba(244, 227, 197, 0.26), rgba(168, 75, 47, 0.05) 55%, rgba(34, 34, 34, 0.16) 100%),
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyMjAnIGhlaWdodD0nMjIwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC45JyBudW1PY3RhdmVzPScyJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PGZlQ29sb3JNYXRyaXggdHlwZT0nc2F0dXJhdGUnIHZhbHVlcz0nMCcvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbHRlcj0ndXJsKCUyM24pJy8+PC9zdmc+");
  background-size: cover, 220px 220px;
  mix-blend-mode: soft-light;
  opacity: var(--photo-grain); /* controlled by the design-controls knob */
  pointer-events: none;
}

/* Soft kelp halo behind a pebble */
.pebble-halo { position: relative; }
.pebble-halo::before {
  content: "";
  position: absolute;
  inset: -7%;
  background: var(--kelp-10);
  border-radius: 46% 54% 50% 50% / 55% 46% 54% 45%;
  z-index: 0;
  transform: rotate(-4deg);
}
.pebble-halo .pebble { z-index: 1; }

/* --------------------------------------------------------------------------
   7. CARDS
   -------------------------------------------------------------------------- */
.card-grid {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.pillar-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.pillar-card h3 { margin-bottom: 0.4em; }
.pillar-card p { margin-bottom: 0; font-size: var(--text-sm); }
.pillar-card .pillar-mark {
  width: 52px; height: 52px;
  border-radius: 46% 54% 50% 50% / 55% 46% 54% 45%;
  background: var(--kelp-10);
  color: var(--kelp);
  display: grid;
  place-items: center;
  margin-bottom: 1.1rem;
}
.pillar-card .pillar-mark svg { width: 26px; height: 26px; }

/* Crew cards (home + about) */
.crew-card { text-align: center; }
.crew-card .pebble { aspect-ratio: 4 / 5; margin-bottom: 1.25rem; }
.crew-card .pebble img { transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.crew-card:hover .pebble img { transform: scale(1.045) rotate(0.5deg); }
.crew-card h3 { margin-bottom: 0.15em; }
.crew-card .crew-role {
  color: var(--kelp);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.crew-card p { margin: 0.5rem auto 0; font-size: var(--text-sm); }

/* --------------------------------------------------------------------------
   8. SIGNUP FORM (Klaviyo)
   -------------------------------------------------------------------------- */
.signup-panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) * 1.4);
  padding: clamp(1.75rem, 4vw, 3rem);
  box-shadow: var(--shadow);
  max-width: 620px;
}
.on-kelp .signup-panel { border-color: transparent; }

.field { margin-bottom: 1.25rem; }
.field label {
  display: block;
  font-weight: 600;
  font-size: var(--text-sm);
  margin-bottom: 0.4rem;
  color: var(--charcoal);
}
.field .hint { font-weight: 400; color: var(--slate); }

.field input[type="email"],
.field input[type="tel"] {
  width: 100%;
  min-height: 52px;
  padding: 0.7rem 1rem;
  font: inherit;
  color: var(--charcoal);
  background: var(--beige);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  transition: border-color 0.2s ease;
}
.field input:focus {
  outline: none;
  border-color: var(--kelp);
  box-shadow: 0 0 0 3px var(--kelp-16);
}
.field input[aria-invalid="true"] { border-color: var(--sweet-potato); }

.consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
  margin-bottom: 1.25rem;
}
.consent input[type="checkbox"] {
  width: 24px; height: 24px;
  margin-top: 2px;
  accent-color: var(--kelp);
  cursor: pointer;
}
.consent label {
  font-size: var(--text-xs);
  line-height: 1.55;
  color: var(--slate);
  cursor: pointer;
}

.form-msg {
  border-radius: 12px;
  padding: 0.9rem 1.1rem;
  font-size: var(--text-sm);
  font-weight: 500;
  margin-top: 1rem;
}
.form-msg--error {
  background: rgba(168, 75, 47, 0.1);
  border: 1px solid rgba(168, 75, 47, 0.4);
  color: var(--sweet-potato);
}
.form-msg--success {
  background: var(--kelp-10);
  border: 1px solid var(--kelp-16);
  color: var(--kelp-deep);
}
.form-msg[hidden] { display: none; }

/* --------------------------------------------------------------------------
   9. FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--warm-sand);
  border-top: 1px solid var(--line);
  padding: clamp(2.5rem, 6vw, 4rem) 0 2rem;
  margin-top: var(--section-gap);
}
.site-footer.no-gap { margin-top: 0; }
.footer-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  margin-bottom: 2.5rem;
}
.site-footer .brand { font-size: 1.3rem; }
.site-footer .footer-h {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kelp);
  margin-bottom: 0.75rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--charcoal);
  text-decoration: none;
  font-size: var(--text-sm);
}
.site-footer li a:hover { color: var(--kelp); text-decoration: underline; }
.footer-note { font-size: var(--text-xs); color: var(--slate); max-width: 70ch; }
.footer-legal {
  border-top: 1px solid var(--line);
  padding-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--slate);
}

/* --------------------------------------------------------------------------
   10. PAGE-SPECIFIC
   -------------------------------------------------------------------------- */

/* Inner-page hero (About, VIP, Blog, etc.) */
.page-hero {
  padding-top: calc(72px + clamp(3rem, 8vw, 6rem));
  padding-bottom: clamp(2rem, 5vw, 4rem);
}
.page-hero .lead { max-width: 56ch; }

/* VIP gallery */
.vip-grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  /* reserve one card row so the page doesn't jump while the data loads */
  min-height: clamp(300px, 45vw, 400px);
}
.vip-card {
  text-decoration: none;
  color: var(--charcoal);
  display: block;
}
.vip-card .pebble { aspect-ratio: 1; margin-bottom: 1rem; }
.vip-card .pebble img { transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.vip-card:hover .pebble img { transform: scale(1.05); }
.vip-card h3 { margin-bottom: 0.1em; }
.vip-card .vip-human { font-size: var(--text-sm); color: var(--slate); }
.vip-card .vip-name { font-size: var(--text-h3); margin-bottom: 0.1em; }

.sample-badge {
  display: inline-block;
  background: var(--kelp-10);
  border: 1px dashed var(--kelp);
  color: var(--kelp-deep);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  margin-top: 0.5rem;
}

/* VIP detail */
.vip-detail-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
}
@media (min-width: 780px) {
  .vip-detail-grid { grid-template-columns: minmax(280px, 420px) 1fr; align-items: start; }
}
.vip-detail-grid .pebble { aspect-ratio: 4 / 5; }

/* Blog */
.post-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  max-width: 680px;
}
.post-card time { font-size: var(--text-xs); color: var(--slate); letter-spacing: 0.06em; }
.post-body { max-width: 680px; }
.post-body p { max-width: none; }

.placeholder-note {
  background: rgba(168, 75, 47, 0.08);
  border: 1px dashed var(--sweet-potato);
  color: var(--sweet-potato);
  border-radius: 12px;
  padding: 0.85rem 1.1rem;
  font-size: var(--text-sm);
  font-weight: 500;
  margin: 1.25rem 0;
  max-width: 680px;
}

/* Legal pages */
.legal-body { max-width: 720px; }
.legal-body h2 { font-size: var(--text-h3); margin-top: 2.2em; }
.legal-body p { max-width: none; }

/* CTA band reused across inner pages */
.cta-band { text-align: center; }
.cta-band .btn { margin-top: 1rem; }
.cta-band p { margin-inline: auto; }

/* --------------------------------------------------------------------------
   11. MOTION
   .reveal elements fade/rise in as they scroll into view (js/main.js).
   Everything degrades gracefully: without JS or with reduced motion,
   content is simply visible.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  body.js .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  }
  body.js .reveal.is-visible { opacity: 1; transform: none; }
  body.js .reveal[data-delay="1"] { transition-delay: 0.12s; }
  body.js .reveal[data-delay="2"] { transition-delay: 0.24s; }
}

@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;
  }
}