/* =========================================================================
   Earned OSRS — "Waypost" theme
   Rustic, hand-forged OSRS grit: iron/rust/moss/parchment on deep charcoal
   stone, CSS-driven wood-grain and stone-grain texture (no illustration),
   blunt line-icons, plain typographic badge mark. Mobile-first; breakpoints
   at 768px (tablet) and 1200px (desktop). Motion is intentionally minimal —
   opacity-only scroll reveal, no parallax, no hover-lift/scale, no ambient
   looping animation anywhere on the page.
   ========================================================================= */

/* ---------- Design tokens ---------- */
:root {
  /* Backgrounds */
  --bg-base: #1C1815;      /* deep base background */
  --bg-panel: #2E2620;     /* alternating section panel */
  --bg-elevated: #3A3530;  /* cards */
  --bg-footer: #161310;    /* darkest, footer only */

  /* Text */
  --text-primary: #E8DFC8;   /* 13.3:1 on base */
  --text-muted: #B7AD95;    /* 7.9:1 on base */

  /* Rust accent */
  --rust: #A6512C;         /* large text / UI / borders / buttons — 3.2:1 on base, large-text/UI only */
  --rust-hover: #8B4326;   /* manual darken for button hover, no glow/scale */
  --rust-link: #D97748;    /* inline links / small text — 5.6:1 on base */
  --btn-label: #FFF8ED;    /* label text on rust fill — 5.2:1 on rust */

  /* Secondary accents */
  --moss: #7C8A5E;         /* body-size safe, 4.75:1 on base */
  --bronze: #9C7A45;       /* large text / UI / icons / badges ONLY (~4.4:1) — do not use at body-copy size */
  --bronze-body: #B08D57;  /* use instead of --bronze if a bronze tone is ever needed at body-copy size */

  /* Parchment — sparing, ONE callout type only (About pull-quote) */
  --parchment: #D8C9A3;
  --parchment-ink: #2E2620; /* 9.0:1 on parchment */

  /* Focus ring — distinct from rust, used on every interactive element */
  --focus-ring: #FFD9A0;

  /* Type */
  --font-display: "Vollkorn", Georgia, serif;
  --font-body: "Inter", "Public Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-stamp: "Special Elite", "Courier New", monospace; /* small tags/badges ONLY — never headings or body copy */

  /* Motion — pulled back deliberately: fade only, short, once-only (see main.js) */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --reveal-duration: 260ms;
  --reveal-distance: 8px;

  /* Layout */
  --nav-height: 72px;
  --max-content-width: 1200px;

  /* Shared low-opacity CSS textures (wood grain / stone grain) — no images,
     no illustration, capped opacity per design spec. */
  --wood-grain: repeating-linear-gradient(
    97deg,
    rgba(140, 90, 50, 0.05) 0px,
    rgba(140, 90, 50, 0.05) 1px,
    transparent 1px,
    transparent 6px
  );
  --stone-grain:
    radial-gradient(circle at 16% 22%, rgba(0, 0, 0, 0.05) 0, transparent 2.5%),
    radial-gradient(circle at 68% 58%, rgba(0, 0, 0, 0.045) 0, transparent 3%),
    radial-gradient(circle at 40% 84%, rgba(255, 255, 255, 0.025) 0, transparent 2%),
    radial-gradient(circle at 88% 12%, rgba(0, 0, 0, 0.04) 0, transparent 2%);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background-color: var(--bg-base);
  background-image: var(--stone-grain);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 1200px) {
  body { font-size: 18px; }
}

img { max-width: 100%; display: block; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; line-height: 1.15; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }

/* Visually-hidden but screen-reader-accessible utility (used to preserve
   gallery caption context on "Photo Pending" placeholder panels). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Focus visibility (hard requirement: 2px focus-ring, 2px offset) ---------- */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -3rem;
  background: var(--rust);
  color: var(--btn-label);
  font-weight: 700;
  padding: 0.75rem 1.25rem;
  border-radius: 4px;
  z-index: 1000;
  transition: top 150ms var(--ease-out);
}
.skip-link:focus {
  top: 1rem;
}

/* ---------- Section headings shared ---------- */
.section-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.625rem, 1.35rem + 1.4vw, 2.5rem); /* 26px -> 40px */
  color: var(--text-primary);
}
.section-heading--center { text-align: center; }
.section-subheading {
  max-width: 60ch;
  color: var(--text-muted);
  margin: 0.75rem auto 0;
}
.section-heading--center + .section-subheading { text-align: center; }

/* ---------- Fleuron / divider ornament ---------- */
.fleuron {
  display: block;
  color: var(--parchment-ink);
  opacity: 0.55;
  font-size: 0.9rem;
  text-align: center;
  margin: 0.75rem 0;
}

/* ---------- Generic icon base (blunt line-icon set, see js/main.js ICONS) ---------- */
.icon {
  display: inline-block;
  flex-shrink: 0;
  vertical-align: middle;
}

/* ---------- Small stamped label utility (Special Elite, tracked, uppercase) ---------- */
.stamp-label {
  font-family: var(--font-stamp);
  text-transform: uppercase;
  font-size: 0.8125rem; /* 13px */
  letter-spacing: 0.06em;
}

/* =========================================================================
   Sticky nav
   ========================================================================= */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-height);
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 200ms var(--ease-out), border-color 200ms var(--ease-out);
}

.site-nav.is-scrolled {
  background-color: rgba(28, 24, 21, 0.96);
  background-image: var(--wood-grain);
  border-bottom: 2px solid var(--rust);
  backdrop-filter: blur(6px);
}

.site-nav__inner {
  position: relative;
  max-width: var(--max-content-width);
  margin: 0 auto;
  height: 100%;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.site-nav__brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  min-height: 44px;
  flex-shrink: 0;
}

.site-nav__badge { border-radius: 50%; flex-shrink: 0; }

.site-nav nav {
  position: relative;
  min-width: 0;
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

/* Mobile: horizontally scrollable pill nav, no hamburger, labels always visible */
.site-nav__list {
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  max-width: 100%;
  padding: 0.25rem;
}

.site-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
  padding: 0.6rem 0.9rem;
  min-height: 44px;
  border-radius: 6px;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--text-primary);
  border: 1px solid rgba(166, 81, 44, 0.4);
  background-color: rgba(58, 53, 48, 0.6);
  transition: background-color 150ms var(--ease-out), border-color 150ms var(--ease-out), color 150ms var(--ease-out);
}

.site-nav__link .icon { flex-shrink: 0; }
/* Hover/active feedback is a border-color shift rather than a text-color
   shift: --rust-link doesn't reach 4.5:1 against this pill's lighter
   background, so the affordance color change happens on the border while
   text stays --text-primary (already high-contrast on every nav background). */
.site-nav__link:hover { border-color: var(--rust); }
.site-nav__link.is-active { border-color: var(--rust); }

.site-nav__link--discord {
  background-color: rgba(166, 81, 44, 0.16);
}

/* Sliding underline indicator — desktop only; hidden on the mobile pill nav.
   This is a functional way-finding indicator (not decorative flourish), so
   it's kept — but shortened from the previous timing to stay in the spirit
   of a generally quieter site. */
.site-nav__indicator { display: none; }

@media (min-width: 1200px) {
  .site-nav__list { overflow: visible; padding: 0; gap: 0.25rem; }
  .site-nav__link {
    background: none;
    border: 1px solid transparent;
    border-radius: 4px;
  }
  .site-nav__link--discord {
    background: var(--rust);
    color: var(--btn-label);
    border-radius: 4px;
    font-weight: 600;
  }
  .site-nav__link--discord:hover { background: var(--rust-hover); color: var(--btn-label); border-color: transparent; }

  .site-nav__indicator {
    display: block;
    position: absolute;
    bottom: -1px;
    height: 2px;
    background: var(--rust);
    transition: transform 220ms var(--ease-out), width 220ms var(--ease-out);
    transform: translateX(0);
    width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-nav__indicator { transition: none; }
}

/* =========================================================================
   Hero
   ========================================================================= */
.hero {
  position: relative;
  min-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 1.25rem 5rem;
  overflow: hidden;
  background-color: var(--bg-base);
}

/* Static (non-animated) wood + stone texture, capped low opacity. No glow,
   no drift/parallax — flat, grounded backdrop only. */
.hero__backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--wood-grain), var(--stone-grain);
}

.hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 640px;
}

.hero__badge { margin-bottom: 1.25rem; border-radius: 50%; }

.hero__wordmark {
  font-size: clamp(2.125rem, 1.7rem + 2.2vw, 3.75rem); /* 34px -> 60px */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text-primary);
}

.hero__tagline {
  margin-top: 1rem;
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
  color: var(--text-muted);
  max-width: 42ch;
}

.hero__proof {
  margin-top: 1.25rem;
  font-family: var(--font-stamp);
  text-transform: uppercase;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

/* No scroll-cue element in the hero — removed entirely per direction and
   not to be reintroduced. */

/* =========================================================================
   Buttons
   ========================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  padding: 0.85rem 1.5rem;
  border-radius: 6px;
  font-weight: 600;
  font-size: 1rem;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.btn .icon { flex-shrink: 0; }

.btn--primary {
  background-color: var(--rust);
  color: var(--btn-label);
  border: 1px solid var(--rust);
}
.btn--primary:hover { background-color: var(--rust-hover); border-color: var(--rust-hover); }

.btn--ghost {
  background: transparent;
  color: var(--rust-link);
  border: 1.5px solid var(--rust);
}
.btn--ghost:hover {
  background-color: rgba(166, 81, 44, 0.12);
  color: var(--text-primary);
}

.btn--footer {
  background-color: var(--rust);
  color: var(--btn-label);
  border: 1px solid var(--rust);
  font-size: 0.9rem;
  padding: 0.65rem 1.25rem;
}
.btn--footer:hover { background-color: var(--rust-hover); border-color: var(--rust-hover); }

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}

/* =========================================================================
   About
   ========================================================================= */
.about {
  position: relative;
  background-color: var(--bg-panel);
  background-image: var(--stone-grain);
  padding: 4.5rem 1.25rem;
}

/* Iron/rust divider with a slightly uneven (jagged) edge, marking the top of
   this panel section — CSS clip-path only, no illustration. */
.about::before,
.events::before,
.gallery::before {
  content: "";
  display: block;
  height: 3px;
  max-width: var(--max-content-width);
  margin: 0 auto 0;
  background-color: var(--rust);
  clip-path: polygon(
    0 40%, 4% 0, 8% 60%, 12% 10%, 16% 70%, 20% 15%, 24% 55%, 28% 5%,
    32% 65%, 36% 20%, 40% 50%, 44% 0, 48% 60%, 52% 10%, 56% 70%, 60% 20%,
    64% 55%, 68% 5%, 72% 65%, 76% 15%, 80% 50%, 84% 0, 88% 60%, 92% 10%,
    96% 70%, 100% 20%, 100% 100%, 0 100%
  );
  opacity: 0.6;
}

.about__inner {
  max-width: var(--max-content-width);
  margin: 0 auto;
  display: grid;
  gap: 2.5rem;
}

.about__text p { max-width: 65ch; color: var(--text-primary); }
.about__text .btn { margin-top: 1.75rem; }

.about__aside {
  display: grid;
  gap: 1.5rem;
}

/* Supporting visual: honest "photo pending" placeholder, same frame
   treatment as the Gallery section (see .photo-pending below). The frame
   (border/inset-shadow/overflow-hidden) lives on the inner wrapper so the
   stamped "Est." badge can overlap its edge without being clipped. */
.about__visual {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
}

.about__visual-frame {
  width: 100%;
  height: 100%;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid #100D0B;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.35);
}

.stamp-badge {
  position: absolute;
  bottom: -0.6rem;
  right: 0.75rem;
  /* --bg-base, not --bg-elevated: bronze-gold only verifies to ~4.4:1
     against the darker base tone per the palette spec. */
  background-color: var(--bg-base);
  border: 1.5px solid var(--bronze);
  color: var(--bronze); /* badge use — allowed at this size per palette rules */
  font-family: var(--font-stamp);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  padding: 0.35rem 0.6rem;
  border-radius: 3px;
  transform: rotate(-2deg);
}

/* Single sparing use of the parchment-light callout treatment, per design
   direction: reserved for this About pull-quote only, not repeated elsewhere
   (e.g. NOT used on event cards). */
.about__card {
  display: block;
  background-color: var(--parchment);
  color: var(--parchment-ink);
  border-radius: 6px;
  padding: 2rem 1.75rem;
  text-align: center;
}

.about__quote {
  font-family: var(--font-display);
  font-weight: 600;
  font-style: italic;
  font-size: 1.1rem;
  color: var(--parchment-ink);
}

.about__quote-attribution {
  margin-top: 0.75rem;
  font-size: 0.85rem;
  color: var(--parchment-ink);
  opacity: 0.85; /* still comfortably clears 4.5:1 against --parchment at this size */
}

@media (min-width: 768px) {
  .about__inner {
    grid-template-columns: 3fr 2fr;
    align-items: start;
  }
}

/* =========================================================================
   Shared "Photo Pending" placeholder panel
   (used by the Gallery grid and the About supporting visual)
   ========================================================================= */
.photo-pending {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: var(--bg-elevated);
  background-image: var(--stone-grain);
  color: var(--text-muted);
}

.photo-pending__icon { color: var(--text-muted); }

.photo-pending__label {
  font-family: var(--font-stamp);
  text-transform: uppercase;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

/* =========================================================================
   Events
   ========================================================================= */
.events {
  position: relative;
  background-color: var(--bg-base);
  padding: 4.5rem 1.25rem;
}

.events__inner {
  max-width: var(--max-content-width);
  margin: 0 auto;
  text-align: center;
}

.events__grid {
  margin-top: 2.5rem;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  text-align: left;
}

@media (min-width: 768px) {
  .events__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1200px) {
  .events__grid { grid-template-columns: repeat(4, 1fr); }
}

/* Dark elevated card, cream text, iron corner brackets (two opposing
   corners via ::before/::after — CSS marks, no illustration). No
   hover-lift/scale: this card isn't interactive on its own. */
.event-card {
  position: relative;
  background-color: var(--bg-elevated);
  background-image: var(--wood-grain);
  border: 1px solid rgba(166, 81, 44, 0.35);
  border-radius: 4px;
  padding: 1.75rem 1.5rem;
}

.event-card::before,
.event-card::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: var(--rust);
  border-style: solid;
  pointer-events: none;
}
.event-card::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.event-card::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }

.event-card__icon {
  width: 36px;
  height: 36px;
  margin-bottom: 0.75rem;
  color: var(--rust-link);
}

/* Category tag: Special Elite small caps, always paired with visible text
   (never color alone). Alternates moss / bronze-gold across cards for
   variety while keeping the text label as the primary signal. Sits on its
   own --bg-base chip (rather than directly on the card's --bg-elevated
   background) so moss/bronze text hits the contrast ratios verified against
   --bg-base in the palette spec — both fall short of 4.5:1 for small text
   directly on the lighter --bg-elevated card surface. */
.event-card__tag {
  display: inline-block;
  font-family: var(--font-stamp);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--moss);
  background-color: var(--bg-base);
  padding: 0.2rem 0.5rem;
  border-radius: 3px;
  margin-bottom: 0.5rem;
}
.event-card:nth-child(even) .event-card__tag { color: var(--bronze); }

.event-card__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.75rem); /* 20px -> 28px */
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.event-card__description {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-bottom: 1rem;
}

.event-card__cadence {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--btn-label);
  background-color: var(--rust);
  padding: 0.35rem 0.75rem;
  border-radius: 4px;
  letter-spacing: 0.01em;
}

/* =========================================================================
   Gallery
   ========================================================================= */
.gallery {
  position: relative;
  background-color: var(--bg-panel);
  background-image: var(--stone-grain);
  padding: 4.5rem 1.25rem;
}

.gallery__inner {
  max-width: var(--max-content-width);
  margin: 0 auto;
  text-align: center;
}

.gallery__grid {
  margin-top: 2.5rem;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(2, 1fr);
  text-align: left;
}

@media (min-width: 768px) {
  .gallery__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1200px) {
  .gallery__grid { grid-template-columns: repeat(4, 1fr); }
}

/* Frame shared by both real-photo tiles and "photo pending" tiles, so the
   grid stays visually consistent either way: thin dark iron border, subtle
   inset shadow (like a photo tacked to a board). aspect-ratio comes from
   the --aspect custom property set inline by main.js (4/3 default, 3/2 for
   a few entries for variety). */
.gallery-item {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: var(--aspect, 4 / 3);
  background-color: var(--bg-elevated);
  border: 1px solid #100D0B;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.35);
}

.gallery-item__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Caption bar is always visible (not hover-dependent) so it works the same
   on touch devices as with mouse/keyboard. Dark gradient scrim guarantees
   readable contrast regardless of the photo's underlying brightness. */
.gallery-item__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.5rem 0.85rem 0.65rem;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
  color: var(--text-primary);
  font-size: 0.85rem;
}

/* Iron corner brackets (two opposing corners), same treatment as event cards. */
.gallery-item__corner {
  position: absolute;
  width: 16px;
  height: 16px;
  border-color: var(--rust);
  border-style: solid;
  z-index: 2;
  pointer-events: none;
  opacity: 0.9;
}
.gallery-item__corner--tl { top: 6px; left: 6px; border-width: 2px 0 0 2px; }
.gallery-item__corner--br { bottom: 6px; right: 6px; border-width: 0 2px 2px 0; }

/* =========================================================================
   Footer
   ========================================================================= */
.site-footer {
  background-color: var(--bg-footer);
  border-top: 3px solid var(--rust);
  padding: 3.5rem 1.25rem 2.5rem;
  text-align: center;
}

.site-footer__inner {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

.site-footer__badge { border-radius: 50%; }

.site-footer__links ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
}

.site-footer__links a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  min-width: 44px;
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.9rem;
  padding: 0.5rem 0.25rem;
  transition: color 150ms ease;
}
.site-footer__links a:hover { color: var(--rust-link); }

.site-footer__copyright {
  color: var(--text-muted);
  font-size: 0.8rem;
  max-width: 50ch;
}

/* =========================================================================
   Scroll-reveal — opacity fade only (max 8px rise), short duration,
   triggers once via IntersectionObserver in main.js and never re-triggers
   on scroll-up. No parallax anywhere on the site.
   ========================================================================= */
[data-reveal] {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition: opacity var(--reveal-duration) var(--ease-out), transform var(--reveal-duration) var(--ease-out);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Staggered fade for card/tile groups — index set inline via --stagger by main.js */
[data-reveal-group] > * {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition: opacity var(--reveal-duration) var(--ease-out), transform var(--reveal-duration) var(--ease-out);
  transition-delay: calc(var(--stagger, 0) * 60ms);
}
[data-reveal-group] > .is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal-group] > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}