/* =============================================================================
   Sunrise Auto Sales — design system
   =============================================================================
   A single self-contained stylesheet. It replaces Bootstrap, the Ducatibox
   theme CSS and the ten jQuery plugin stylesheets that main.css used to pull in
   through a chain of 21 @imports (a serial download waterfall of ~1MB before
   anything could paint).

   Load order inside this file:
     1. Tokens          design decisions as custom properties
     2. Reset           modern normalisation
     3. Typography      the type scale
     4. Layout          container, grid, section rhythm
     5. Components      buttons, forms, badges, cards, gallery, header, footer
     6. Utilities       a deliberately small set
     7. Motion          animations, all gated behind prefers-reduced-motion
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Brand ---------------------------------------------------------------- */
  --red-500: #d8271c;
  --red-600: #b81f16;
  --red-700: #8f1710;
  --red-050: #fdf0ef;

  /* Neutrals — a true neutral ramp, cool-shifted at the dark end so large
     charcoal fields read as "premium" rather than muddy. */
  --ink-950: #0b0e13;
  --ink-900: #12161d;
  --ink-800: #1b2029;
  --ink-700: #2a313d;
  --ink-600: #3d4653;
  --ink-500: #5b6672;
  --ink-400: #838d99;
  --ink-300: #b3bbc4;
  --ink-200: #d8dde2;
  --ink-100: #eceff2;
  --ink-050: #f6f8f9;
  --white: #ffffff;

  /* Status ---------------------------------------------------------------- */
  --green-500: #17795e;
  --green-050: #e8f5f1;
  --amber-500: #b7791f;
  --amber-050: #fdf6e7;

  /* Semantic -------------------------------------------------------------- */
  --bg: var(--white);
  --bg-subtle: var(--ink-050);
  --bg-inverse: var(--ink-950);
  --surface: var(--white);
  --text: var(--ink-900);
  --text-muted: var(--ink-500);
  --text-inverse: var(--white);
  --text-inverse-muted: var(--ink-300);
  --border: var(--ink-200);
  --border-strong: var(--ink-300);
  --accent: var(--red-500);

  /* Typography ------------------------------------------------------------ */
  --font-display: "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* Fluid type scale. clamp() means no breakpoint-by-breakpoint font sizing. */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
  --text-3xl: clamp(1.875rem, 1.5rem + 1.5vw, 2.75rem);
  --text-4xl: clamp(2.25rem, 1.7rem + 2.4vw, 3.75rem);
  --text-5xl: clamp(2.75rem, 1.9rem + 3.6vw, 4.75rem);

  /* Spacing — a 4px base scale. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Section rhythm scales with the viewport so mobile does not feel airy and
     desktop does not feel cramped. */
  --section-y: clamp(3.5rem, 2rem + 6vw, 7rem);

  /* Radii ----------------------------------------------------------------- */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-full: 999px;

  /* Elevation — low-alpha layered shadows read as premium; single hard
     shadows read as cheap. */
  --shadow-sm: 0 1px 2px rgba(11, 14, 19, 0.06), 0 1px 3px rgba(11, 14, 19, 0.04);
  --shadow: 0 2px 4px rgba(11, 14, 19, 0.04), 0 6px 16px rgba(11, 14, 19, 0.07);
  --shadow-lg: 0 4px 8px rgba(11, 14, 19, 0.05), 0 16px 40px rgba(11, 14, 19, 0.1);
  --shadow-xl: 0 8px 16px rgba(11, 14, 19, 0.06), 0 28px 64px rgba(11, 14, 19, 0.14);

  /* Motion ---------------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 140ms;
  --duration: 240ms;
  --duration-slow: 420ms;

  /* Layout ---------------------------------------------------------------- */
  --container: 1280px;
  --container-narrow: 860px;
  --gutter: clamp(1rem, 0.6rem + 2vw, 2.5rem);
  --header-h: 76px;
}

/* -----------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Offset anchor targets so the sticky header never covers them. */
  scroll-padding-top: calc(var(--header-h) + var(--space-4));
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* The `hidden` attribute only sets `display: none` via the UA stylesheet, so
   any component rule that sets an explicit display (our overlays use grid and
   flex) silently overrides it. Without this guard a "hidden" fixed-position
   overlay stays in the layout at full viewport size with pointer-events
   enabled — invisible, but swallowing every click on the page beneath it. */
[hidden] {
  display: none !important;
}

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

img {
  height: auto;
  /* Neutral placeholder while a lazy image is still in flight. */
  background-color: var(--ink-100);
}

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

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

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

ul,
ol {
  list-style: none;
  padding: 0;
}

table {
  border-collapse: collapse;
  width: 100%;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Visible only to screen readers. */
.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;
}

.skip-link {
  position: absolute;
  top: 0;
  left: var(--space-4);
  transform: translateY(-120%);
  z-index: 200;
  padding: var(--space-3) var(--space-5);
  background: var(--accent);
  color: var(--white);
  font-weight: 600;
  border-radius: 0 0 var(--radius) var(--radius);
  transition: transform var(--duration) var(--ease-out);
}

.skip-link:focus {
  transform: translateY(0);
}

/* -----------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  /* Display type wants tighter tracking than body copy. */
  letter-spacing: -0.02em;
  color: var(--text);
  text-wrap: balance;
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); }

p {
  text-wrap: pretty;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: currentColor;
  border-radius: var(--radius-full);
}

.lead {
  font-size: var(--text-lg);
  color: var(--text-muted);
  max-width: 62ch;
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-12);
}

.section-head__text {
  max-width: 64ch;
}

.section-head h2 {
  margin-top: var(--space-3);
}

.section-head .lead {
  margin-top: var(--space-4);
}

/* -----------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */

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

.container--narrow {
  max-width: var(--container-narrow);
}

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

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

.section--subtle {
  background: var(--bg-subtle);
}

.section--dark {
  background: var(--bg-inverse);
  color: var(--text-inverse);
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 {
  color: var(--text-inverse);
}

.section--dark .lead {
  color: var(--text-inverse-muted);
}

/* Auto-fitting grid: `--min` sets the smallest acceptable column width and the
   browser decides the column count. No breakpoint maintenance. */
.grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fill, minmax(min(var(--min, 280px), 100%), 1fr));
}

.grid--wide { --min: 340px; }
.grid--narrow { --min: 220px; }

.stack > * + * {
  margin-top: var(--flow, var(--space-4));
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

/* -----------------------------------------------------------------------------
   5. Components
   -------------------------------------------------------------------------- */

/* 5.1 Buttons ---------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  min-height: 48px; /* Comfortable touch target. */
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn--primary {
  background: var(--accent);
  color: var(--white);
  box-shadow: var(--shadow-sm);
}

.btn--primary:hover {
  background: var(--red-600);
  box-shadow: var(--shadow);
}

.btn--dark {
  background: var(--ink-900);
  color: var(--white);
}

.btn--dark:hover {
  background: var(--ink-800);
}

.btn--outline {
  background: transparent;
  color: var(--text);
  border-color: var(--border-strong);
}

.btn--outline:hover {
  border-color: var(--ink-900);
  background: var(--ink-050);
}

.btn--ghost {
  background: transparent;
  color: var(--text);
  padding-inline: var(--space-3);
}

.btn--ghost:hover {
  color: var(--accent);
}

/* On dark sections the outline variant needs inverted borders. */
.section--dark .btn--outline,
.btn--outline-inverse {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.35);
}

.section--dark .btn--outline:hover,
.btn--outline-inverse:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--white);
}

.btn--lg {
  min-height: 56px;
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-base);
}

.btn--sm {
  min-height: 38px;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
}

.btn--block {
  width: 100%;
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.55;
  pointer-events: none;
}

.btn__icon {
  width: 18px;
  height: 18px;
  flex: none;
}

/* 5.2 Badges ----------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.3em 0.7em;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--radius-full);
  background: var(--ink-100);
  color: var(--ink-700);
  white-space: nowrap;
}

.badge--accent { background: var(--red-050); color: var(--red-700); }
.badge--sold { background: var(--ink-900); color: var(--white); }
.badge--soon { background: var(--amber-050); color: var(--amber-500); }
.badge--deal { background: var(--green-050); color: var(--green-500); }
.badge--solid { background: var(--accent); color: var(--white); }

/* 5.3 Forms ------------------------------------------------------------------ */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.field__label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-700);
}

.field__label .req {
  color: var(--accent);
}

.field__hint {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.input,
.select,
.textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  min-height: 48px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: var(--text-base);
  color: var(--text);
  transition: border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}

.input::placeholder,
.textarea::placeholder {
  color: var(--ink-400);
}

.input:hover,
.select:hover,
.textarea:hover {
  border-color: var(--border-strong);
}

.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(216, 39, 28, 0.14);
}

.textarea {
  min-height: 130px;
  resize: vertical;
  line-height: 1.6;
}

/* Native select with a custom chevron drawn as an inline SVG data URI, so the
   control stays accessible and needs no JS plugin (the old build used
   jquery.nice-select for this). */
.select {
  appearance: none;
  padding-right: var(--space-10);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6672' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  background-size: 18px;
  cursor: pointer;
}

.field-row {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-muted);
  cursor: pointer;
}

.checkbox input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--accent);
  flex: none;
  cursor: pointer;
}

/* 5.4 Cards ------------------------------------------------------------------ */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--duration) var(--ease-out),
    box-shadow var(--duration) var(--ease-out),
    border-color var(--duration) var(--ease-out);
}

.card--pad {
  padding: var(--space-6);
}

.card--hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}

/* 5.5 Car card --------------------------------------------------------------- */

.car-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--duration) var(--ease-out),
    box-shadow var(--duration) var(--ease-out),
    border-color var(--duration) var(--ease-out);
}

.car-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}

.car-card__media {
  position: relative;
  /* A fixed ratio keeps every card the same height regardless of how the
     source photo was shot, and reserves space so lazy loads do not shift
     the layout. */
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ink-100);
}

.car-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.car-card:hover .car-card__media img {
  transform: scale(1.05);
}

.car-card__badges {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  right: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  pointer-events: none;
  z-index: 2;
}

.car-card__count {
  position: absolute;
  bottom: var(--space-3);
  right: var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.25em 0.6em;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--white);
  background: rgba(11, 14, 19, 0.66);
  backdrop-filter: blur(6px);
  border-radius: var(--radius-full);
  z-index: 2;
}

.car-card__count svg {
  width: 14px;
  height: 14px;
}

/* Sold and coming-soon cars stay visible but read as unavailable. */
.car-card--unavailable .car-card__media img {
  filter: grayscale(0.85) brightness(0.92);
}

.car-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-5);
  gap: var(--space-4);
}

.car-card__title {
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.car-card__title a::after {
  /* Stretch the link over the whole card so the entire surface is clickable
     while the accessible name stays on the title alone. */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.car-card__trim {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: var(--space-1);
}

.car-card__specs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  padding-block: var(--space-4);
  border-block: 1px solid var(--border);
  margin-block: auto 0;
}

.car-card__spec {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--ink-600);
}

.car-card__spec svg {
  width: 15px;
  height: 15px;
  color: var(--ink-400);
  flex: none;
}

.car-card__footer {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-4);
}

.car-card__price {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.car-card__price-now {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text);
}

.car-card__price-was {
  font-size: var(--text-sm);
  color: var(--ink-400);
  text-decoration: line-through;
}

.car-card__price-note {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.car-card__cta {
  position: relative;
  z-index: 2; /* Paint above the stretched title link... */

  /* ...but do not take the click.
     The card is made clickable by an overlay on the title link
     (.car-card__title a::after, z-index 1). Raising this element to z-index 2
     put it above that overlay, so a click landing exactly on the "View Details"
     button hit this <span> and did nothing — the dead spot was the one place a
     visitor is most likely to aim.

     The element is aria-hidden and purely decorative, so it can keep its
     stacking order for painting while letting pointer events fall through to
     the link beneath. */
  pointer-events: none;
}

/* The button's own :hover no longer fires now that it ignores pointer events,
   so drive its hover state from the card instead. */
.car-card:hover .car-card__cta,
.car-card:focus-within .car-card__cta {
  background: var(--brand, #e63329);
  border-color: var(--brand, #e63329);
  color: #fff;
}

/* List view: media beside body instead of above it. */
.car-grid--list .car-card {
  flex-direction: row;
}

.car-grid--list .car-card__media {
  flex: 0 0 38%;
  aspect-ratio: auto;
}

.car-grid--list .car-card__body {
  flex: 1;
}

@media (max-width: 640px) {
  .car-grid--list .car-card {
    flex-direction: column;
  }
  .car-grid--list .car-card__media {
    flex: none;
    aspect-ratio: 4 / 3;
  }
}

/* When list view is active the grid collapses to a single column. */
.car-grid--list {
  grid-template-columns: 1fr;
}

/* 5.6 Spec list (details page) ------------------------------------------------ */

.spec-grid {
  display: grid;
  gap: var(--space-1);
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
}

.spec-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border);
}

.spec-item__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.spec-item__label svg {
  width: 18px;
  height: 18px;
  color: var(--ink-400);
  flex: none;
}

.spec-item__value {
  font-weight: 600;
  font-size: var(--text-sm);
  text-align: right;
}

/* 5.7 Feature list ------------------------------------------------------------ */

.feature-list {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
}

.feature-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
}

.feature-list svg {
  width: 18px;
  height: 18px;
  color: var(--green-500);
  flex: none;
  margin-top: 2px;
}

/* 5.8 Empty state ------------------------------------------------------------- */

.empty {
  text-align: center;
  padding: var(--space-16) var(--space-6);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--bg-subtle);
}

.empty svg {
  width: 48px;
  height: 48px;
  color: var(--ink-300);
  margin: 0 auto var(--space-4);
}

/* -----------------------------------------------------------------------------
   6. Utilities — kept deliberately small
   -------------------------------------------------------------------------- */

.text-center { text-align: center; }
.text-muted { color: var(--text-muted); }
.mx-auto { margin-inline: auto; }
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.w-full { width: 100%; }
.hide { display: none !important; }

@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
}

@media (min-width: 769px) {
  .hide-desktop { display: none !important; }
}

/* -----------------------------------------------------------------------------
   7. Motion
   -------------------------------------------------------------------------- */

/* Scroll-reveal. Elements start shifted and are un-hidden by an
   IntersectionObserver adding .is-visible (see /js/sunrise.js). If JS never
   runs, the no-js rule below guarantees content is still shown. */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--duration-slow) var(--ease-out),
    transform var(--duration-slow) var(--ease-out);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger children within a revealed group. */
.reveal[data-delay="1"] { transition-delay: 80ms; }
.reveal[data-delay="2"] { transition-delay: 160ms; }
.reveal[data-delay="3"] { transition-delay: 240ms; }
.reveal[data-delay="4"] { transition-delay: 320ms; }

.no-js .reveal {
  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;
    scroll-behavior: auto !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}