/* ==========================================================================
   themes/arz-faraya.css — Apex Holding · Arz Faraya
   PURPOSE: The world-SPECIFIC layout and decoration for the Arz Faraya page —
   the parallax ridge hero and its snowfall layer, the manifesto band, the
   residence cards and their plan thumbnails, the four-season set-piece, the
   orientation map, the masonry gallery and its lightbox, and the enquiry band.

   CONTRACT OBSERVED
   - This file NEVER redefines a --w-* semantic token. tokens.css owns those.
     The four-season accent nudge is written at runtime by arz-faraya.js onto
     the section element; all this file contributes is the transition that lets
     that change tween, and it is switched off under reduced motion.
   - Every local value is namespaced --af-*. Every local class is namespaced
     .af-*. Shared component classes (.card, .chip, .panel, .media-frame,
     .route-card, .lightbox, .btn, .eyebrow, .stat) are used as published and
     only ever extended, never re-implemented.
   - Transform and opacity only on anything tied to scroll or pointer.
   - Nothing is hidden outside a .js-scoped rule.

   Loaded LAST on arz-faraya/index.html, after motion.css.
   ========================================================================== */


/* --------------------------------------------------------------------------
   0. WORLD-LOCAL VALUES
   Materials that are Arz Faraya's alone: the snow used by the particle layer,
   the depth of the hero, and the shared card-lift geometry.
   -------------------------------------------------------------------------- */

[data-world="arz-faraya"] {
  --af-snow: #F5F6F4;
  --af-hero-min: min(100svh, 54rem);
  --af-lift: -4px;
  --af-scene-ratio: 16 / 9;
}


/* --------------------------------------------------------------------------
   1. RIDGE HERO
   Five stacked SVG layers, each drawn in the same 1600x900 coordinate space so
   the ridgelines register with one another, each driven by [data-parallax] at
   a different rate. The layers are inset 24px beyond the frame top and bottom
   so the 12px parallax cap can never expose an edge.
   -------------------------------------------------------------------------- */

.af-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-block-size: var(--af-hero-min);
  padding-block: calc(var(--header-h) + var(--space-9)) var(--space-11);
  overflow: hidden;
  isolation: isolate;
}

.af-hero__scene {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.af-hero__layer {
  position: absolute;
  inset: -24px 0;
}

.af-hero__layer--sky {
  inset: 0;
}

.af-hero__art {
  inline-size: 100%;
  block-size: 100%;
}

/* Legibility scrim: dark from the reading edge, dark again at the foot so the
   hero hands off to the manifesto band without a seam. */
.af-hero__veil {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(
      to right,
      color-mix(in srgb, var(--w-base) 84%, transparent),
      color-mix(in srgb, var(--w-base) 34%, transparent) 52%,
      transparent 78%
    ),
    linear-gradient(
      to top,
      var(--w-base) 2%,
      color-mix(in srgb, var(--w-base) 45%, transparent) 22%,
      transparent 58%
    );
}

/* --- Hero copy --------------------------------------------------------- */

.af-hero__inner {
  position: relative;
  inline-size: 100%;
  max-inline-size: var(--maxw-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.af-hero__inner > * + * {
  margin-block-start: var(--space-5);
}

.af-hero__title {
  max-inline-size: 14ch;
  font-size: var(--step-6);
  line-height: var(--lh-tight);
}

.af-hero__lede {
  max-inline-size: 44ch;
  font-size: var(--step-1);
  color: var(--w-text-dim);
}

.af-hero__lede em {
  color: var(--w-accent-soft);
  font-style: italic;
}

.af-hero__actions {
  margin-block-start: var(--space-7);
}

.af-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5) var(--space-8);
  margin-block-start: var(--space-8);
  padding-block-start: var(--space-5);
  border-block-start: 1px solid var(--w-line);
}

.af-hero__facts > li {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.af-hero__fact-key {
  font-family: var(--font-utility);
  font-size: var(--step--1);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--w-text-dim);
}

.af-hero__fact-val {
  font-size: var(--step-0);
  color: var(--w-text);
}

/* --- Scroll cue -------------------------------------------------------- */

.af-hero__cue {
  position: absolute;
  inset-block-end: var(--space-5);
  inset-inline-end: var(--gutter);
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 3.5rem;
  color: var(--w-accent-soft);
}

.af-hero__cue-line {
  inline-size: 1px;
  block-size: 2.25rem;
  background-image: linear-gradient(to bottom, transparent, currentColor);
  transform-origin: top center;
  transition: transform var(--dur-micro) var(--ease-out-soft);
}

.af-hero__cue:hover .af-hero__cue-line,
.af-hero__cue:focus-visible .af-hero__cue-line {
  transform: scaleY(1.25);
}


/* --------------------------------------------------------------------------
   2. SNOWFALL
   A density-capped particle layer built by arz-faraya.js. Each flake is a
   single span animated by the shared apex-snow-drift keyframe — transform and
   opacity only, no per-flake JavaScript loop, no timers. The module pauses the
   whole layer by writing data-paused on the container when the hero leaves the
   viewport or the tab is hidden, and builds nothing at all under reduced
   motion. will-change is deliberately absent: a permanently promoted layer per
   flake costs more memory than the compositor saves.
   -------------------------------------------------------------------------- */

.af-hero__snow {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.af-flake {
  position: absolute;
  inset-block-start: -2%;
  inline-size: var(--af-flake-size, 4px);
  block-size: var(--af-flake-size, 4px);
  border-radius: 50%;
  background-color: var(--af-snow);
  opacity: 0;
  animation: apex-snow-drift var(--af-flake-dur, 14s) linear var(--af-flake-delay, 0s) infinite;
}

.af-hero__snow[data-paused="true"] .af-flake {
  animation-play-state: paused;
}


/* --------------------------------------------------------------------------
   3. THE MANIFESTO
   Two columns on wide viewports: the statement holds the left rail while the
   passage runs beside it. A cedar-toned ground separates it from the hero.
   -------------------------------------------------------------------------- */

/* The one cedar band in the page. It carries running text only — no raised
   surfaces — so the lighter ground never has to compete with a card. */
.af-manifesto {
  background-color: var(--w-base-2);
}

.af-manifesto__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8) var(--space-10);
}

.af-manifesto__lead > * + * {
  margin-block-start: var(--space-4);
}

.af-manifesto__lead h2 {
  font-size: var(--step-4);
  max-inline-size: 16ch;
}

.af-manifesto__body p {
  font-size: var(--step-1);
  line-height: var(--lh-loose);
  color: var(--w-text-dim);
}

.af-manifesto__body p:first-child {
  color: var(--w-text);
}

.af-manifesto__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: var(--space-5) var(--space-8);
  margin: 0;
}

/* The value slot holds a placeholder tag rather than a figure, so it must not
   inherit the display face's very large size. */
.af-manifesto__stats .stat__value {
  font-size: var(--step-0);
}

@media (min-width: 60em) {
  .af-manifesto__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
    align-items: start;
  }

  .af-manifesto__lead {
    position: sticky;
    inset-block-start: calc(var(--header-h) + var(--space-8));
  }

  .af-manifesto__stats {
    grid-column: 1 / -1;
    margin-block-start: var(--space-6);
  }
}


/* --------------------------------------------------------------------------
   4. THE RESIDENCES
   Each card IS the control — a single <button> carrying .card, so the whole
   surface opens the panel with one tab stop and one accessible name. The
   engaged state is a soft lift over a hearth-amber underglow.
   -------------------------------------------------------------------------- */

.af-residence {
  inline-size: 100%;
  text-align: start;
  cursor: pointer;
}

/* .card__media / .card__title are spans here, so they need the display the
   component's own rules assume. */
.af-residence .card__media,
.af-residence .card__title {
  display: block;
}

/* The literal here is the drawing's own ground, matched exactly to the <rect>
   that opens each plan SVG, so no seam shows while the artwork paints. It is
   artwork colour, not a UI colour — no component reads it. */
.af-residence__media {
  --card-media-ratio: 16 / 11;
  background-color: #22362A;
}

/* Sizing comes from `.card__media > svg` in components.css; this only adds the
   slow push-in the card performs when it is engaged. */
.af-plan {
  transition: transform var(--dur-reveal) var(--ease-out-soft);
}

.af-residence__note {
  color: var(--w-text-dim);
  font-size: var(--step--1);
  line-height: var(--lh-body);
}

.af-residence__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-block-start: auto;
  padding-block-start: var(--space-4);
  color: var(--w-accent-soft);
  font-family: var(--font-utility);
  font-size: var(--step--1);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}

.af-residence__arrow {
  display: inline-block;
  transition: transform var(--dur-micro) var(--ease-out-soft);
}

/* Hearth-amber underglow. Sits under the card, never over it, so the plan
   thumbnail keeps its own contrast.

   SPECIFICITY NOTE: these cards also carry [data-reveal], and motion.css ends
   the reveal with `.js [data-reveal].is-in { transform: none }` at (0,3,0). The
   grid ancestor is in the selector purely to match that weight so the lift is
   not silently cancelled once the card has revealed. */
.af-residences__grid .af-residence:hover,
.af-residences__grid .af-residence:focus-visible,
.af-residences__grid .af-residence[aria-expanded="true"] {
  transform: translateY(var(--af-lift));
  border-color: var(--w-accent);
  box-shadow:
    var(--shadow-2),
    0 22px 46px -22px var(--w-glow),
    0 0 0 1px color-mix(in srgb, var(--w-accent) 22%, transparent);
}

.af-residence:hover .af-plan,
.af-residence:focus-visible .af-plan {
  transform: scale(1.03);
}

.af-residence:hover .af-residence__arrow,
.af-residence:focus-visible .af-residence__arrow {
  transform: translateX(5px);
}

.af-residences__grid .af-residence:active {
  transform: translateY(0);
}


/* --------------------------------------------------------------------------
   4b. PHOTOGRAPHIC FRAMES

   .media-frame is published as a "photo pending" slot: dashed rule, hatched
   ground, and `object-fit: cover` on whatever it holds. Cover crops whenever
   the frame's ratio and the picture's ratio disagree, which is exactly the
   "half cut" the client reported.

   Every photograph on this page now declares a --frame-ratio equal to its own
   intrinsic ratio, so nothing is cropped. This class is the second line of
   defence: `contain` means that if a source file is ever swapped for one of a
   different shape, the whole photograph still shows — it mattes against the
   frame's ground instead of losing its edges. It also drops the pending-slot
   decoration, which a real photograph has no use for.
   -------------------------------------------------------------------------- */

.af-frame--photo {
  padding: 0;
  border-style: solid;
  border-color: var(--w-line);
  background-image: none;
}

.af-frame--photo > img {
  object-fit: contain;
  object-position: center center;
}




/* --------------------------------------------------------------------------
   5. FOUR SEASONS — the set-piece

   *** TOKEN NUDGE CONTRACT ***
   arz-faraya.js writes --w-accent / --w-accent-soft / --w-accent-2 / --w-glow /
   --w-focus onto .af-seasons when the season changes. Because tokens.css
   registers those names with @property and inherits:true, the single transition
   below tweens the whole section — eyebrow, rules, chips, focus ring and glow —
   with no per-element wiring. Grounds and text colours are deliberately NOT
   nudged, so every contrast ratio in the section is fixed by construction.
   -------------------------------------------------------------------------- */

.af-seasons {
  background-color: var(--w-base);
  transition:
    --w-accent var(--dur-world) var(--ease-in-out-cinema),
    --w-accent-soft var(--dur-world) var(--ease-in-out-cinema),
    --w-accent-2 var(--dur-world) var(--ease-in-out-cinema),
    --w-glow var(--dur-world) var(--ease-in-out-cinema),
    --w-focus var(--dur-world) var(--ease-in-out-cinema);
}

.af-seasons__head {
  max-width: var(--maxw-prose);
  margin-block-end: var(--space-6);
}

/* --- Tablist ----------------------------------------------------------- */

.af-seasons__tablist {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block-end: var(--space-8);
  padding-block-end: var(--space-5);
  border-block-end: 1px solid var(--w-line);
}

.af-season__tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-block-size: 2.75rem;
  padding: var(--space-2) var(--space-6);
  border: 1px solid var(--w-line);
  border-radius: var(--radius-pill);
  background-color: transparent;
  color: var(--w-text-dim);
  font-family: var(--font-utility);
  font-size: var(--step--1);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  white-space: nowrap;
  transition:
    background-color var(--dur-micro) var(--ease-out-soft),
    border-color var(--dur-micro) var(--ease-out-soft),
    color var(--dur-micro) var(--ease-out-soft);
}

.af-season__tab:hover {
  border-color: var(--w-accent);
  color: var(--w-text);
}

.af-season__tab[aria-selected="true"] {
  background-color: var(--w-accent);
  border-color: var(--w-accent);
  color: var(--w-base);
}

/* --- Panels ------------------------------------------------------------ */

.af-season__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  align-items: center;
}

.af-season__scene {
  overflow: hidden;
  border: 1px solid var(--w-line);
  border-radius: var(--radius-md);
  background-color: var(--w-base-2);
  aspect-ratio: var(--af-scene-ratio);
}

.af-season__scene > svg {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.af-season__copy > * + * {
  margin-block-start: var(--space-4);
}

.af-season__copy h3 {
  font-size: var(--step-3);
  color: var(--w-accent-soft);
}

.af-season__copy p {
  color: var(--w-text-dim);
  line-height: var(--lh-loose);
}

.af-season__note {
  font-size: var(--step--1);
}

@media (min-width: 52em) {
  .af-season__panel {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--space-8);
  }
}

/* --- Crossfade, scoped to .js -------------------------------------------
   With scripting the panels are stacked in one grid cell and cross-faded; the
   module un-hides the incoming panel, lets it paint, then hides the outgoing
   one after the fade. Without scripting the tablist is removed and all four
   panels simply stack down the page — the same content, no interaction. */

.js .af-seasons__panels {
  display: grid;
  align-items: start;
}

.js .af-season__panel {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity var(--dur-reveal) var(--ease-out-soft);
}

.js .af-season__panel.is-active {
  opacity: 1;
}

html:not(.js) .af-seasons__tablist {
  display: none;
}

html:not(.js) .af-season__panel + .af-season__panel {
  margin-block-start: var(--space-9);
}


/* --------------------------------------------------------------------------
   6. THE LOCATION
   -------------------------------------------------------------------------- */

/* As with the plan thumbnails, the literal is the map drawing's own ground,
   matched to its opening <rect> so the rounded corners do not flash. */
.af-map {
  overflow: hidden;
  border: 1px solid var(--w-line);
  border-radius: var(--radius-lg);
  background-color: #1B2E23;
}

.af-map > svg {
  inline-size: 100%;
  block-size: auto;
}

/* SVG text does not inherit the page's font stack, so the map labels ask for
   it by name. Sizes and fills stay on the elements themselves, because they
   are drawn in viewBox units rather than CSS pixels. */
.af-map__label {
  font-family: var(--font-utility);
  letter-spacing: var(--track-wide);
}

.af-map__label--sub {
  letter-spacing: var(--track-normal);
}

.af-map figcaption {
  padding: var(--space-4) var(--space-5);
  border-block-start: 1px solid var(--w-line);
  background-color: var(--w-base-2);
  margin-block-start: 0;
}

.af-location__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  margin-block-start: var(--space-7);
}

/* The legend is a short column beside the route card on wide viewports, so it
   holds its own top edge rather than stretching to the card's height. */
.af-location__chips {
  align-content: flex-start;
  --cluster-space: var(--space-3);
}

/* Legend entries are labels, not controls — they keep the chip's shape and
   colour but must not pretend to be pressable. */
.af-chip {
  cursor: default;
}

.af-chip::before {
  content: "";
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: 50%;
  background-color: var(--w-accent-2);
  flex: none;
}

.af-chip--site {
  border-color: var(--w-accent);
  color: var(--w-text);
}

.af-chip--site::before {
  background-color: var(--w-accent);
}

.af-chip:hover {
  border-color: var(--w-line);
  color: var(--w-text-dim);
}

.af-chip--site:hover {
  border-color: var(--w-accent);
  color: var(--w-text);
}

@media (min-width: 60em) {
  .af-location__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: start;
    gap: var(--space-8);
  }
}


/* --------------------------------------------------------------------------
   7. GALLERY
   True masonry via CSS columns: every frame keeps its own aspect ratio, so the
   grid reads as a contact sheet rather than a row of identical crops. Each
   item is a button that opens the shared lightbox.
   -------------------------------------------------------------------------- */

.af-gallery {
  columns: 3 17rem;
  column-gap: var(--space-5);
}

.af-gallery__item {
  display: block;
  inline-size: 100%;
  margin-block-end: var(--space-5);
  padding: 0;
  border: 0;
  background: none;
  text-align: start;
  break-inside: avoid;
  cursor: pointer;
  transition: transform var(--dur-micro) var(--ease-out-soft);
}

.af-gallery__frame {
  transition:
    border-color var(--dur-micro) var(--ease-out-soft),
    box-shadow var(--dur-reveal) var(--ease-out-soft);
}

.af-gallery__frame > svg {
  opacity: 0.85;
}

.af-gallery__frame .placeholder {
  position: relative;
  background-color: color-mix(in srgb, var(--w-base) 82%, transparent);
}

.af-gallery__caption {
  display: block;
  margin-block-start: var(--space-3);
  color: var(--w-text-dim);
  font-family: var(--font-utility);
  font-size: var(--step--1);
  letter-spacing: var(--track-wide);
  transition: color var(--dur-micro) var(--ease-out-soft);
}

/* Same specificity note as the residence cards: these carry [data-reveal], so
   the lift must match the weight of `.js [data-reveal].is-in`. */
.af-gallery .af-gallery__item:hover,
.af-gallery .af-gallery__item:focus-visible {
  transform: translateY(var(--af-lift));
}

.af-gallery__item:hover .af-gallery__frame,
.af-gallery__item:focus-visible .af-gallery__frame {
  border-color: var(--w-accent);
  box-shadow: 0 20px 44px -22px var(--w-glow);
}

.af-gallery__item:hover .af-gallery__caption,
.af-gallery__item:focus-visible .af-gallery__caption {
  color: var(--w-accent-soft);
}


/* --------------------------------------------------------------------------
   8. LIGHTBOX
   Extends the shared .lightbox. The [hidden] guard is namespaced so it cannot
   affect any other world's use of the component: an author `display: grid`
   outranks the user-agent rule behind [hidden], and without this the closed
   viewer would sit permanently over the page.
   -------------------------------------------------------------------------- */

.af-lightbox[hidden] {
  display: none;
}

.af-lightbox__controls {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* The stage scrolls rather than squashing: clamping a frame that owns an
   aspect-ratio in both axes would distort it, so height is left intrinsic. */
.af-lightbox__stage {
  align-content: center;
  padding: var(--space-2);
  overflow: auto;
  overscroll-behavior: contain;
}

.af-lightbox__stage .media-frame {
  inline-size: min(100%, 58rem);
  border-style: solid;
  border-color: var(--w-line);
}

.af-lightbox__stage .media-frame > svg {
  opacity: 1;
}

.af-lightbox__stage .placeholder {
  position: relative;
  background-color: color-mix(in srgb, var(--w-base) 82%, transparent);
}


/* --------------------------------------------------------------------------
   9. ENQUIRE & HELP
   -------------------------------------------------------------------------- */

.af-enquire {
  background-color: var(--w-base-2);
}

.af-enquire__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}

.af-enquire__block {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-7);
  border: 1px solid var(--w-line);
  border-radius: var(--radius-md);
  background-color: var(--w-surface);
}

.af-enquire__block--group {
  border-inline-start: 2px solid var(--w-accent);
}

.af-enquire__title {
  font-family: var(--font-utility);
  font-size: var(--step--1);
  font-weight: 400;
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  color: var(--w-accent-soft);
}

.af-enquire__list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3) var(--space-5);
  font-size: var(--step--1);
}

.af-enquire__list dt {
  font-family: var(--font-utility);
  font-weight: 400;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--w-text-dim);
}

.af-enquire__list dd {
  color: var(--w-text);
}

.af-enquire__block p {
  color: var(--w-text-dim);
}

.af-enquire__note {
  margin-block-start: auto;
  font-size: var(--step--1);
  line-height: var(--lh-body);
}

@media (min-width: 52em) {
  .af-enquire__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-7);
  }
}

@media (max-width: 34em) {
  .af-enquire__list {
    grid-template-columns: 1fr;
    gap: var(--space-1) 0;
  }

  .af-enquire__list dd {
    margin-block-end: var(--space-3);
  }
}


/* --------------------------------------------------------------------------
   10. RESIDENCE PANELS
   -------------------------------------------------------------------------- */

.af-panel__specs {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3) var(--space-5);
  font-size: var(--step--1);
}

.af-panel__specs dt {
  font-family: var(--font-utility);
  font-weight: 400;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--w-text-dim);
}

.af-panel__note {
  font-size: var(--step--1);
  color: var(--w-text-dim);
}

/* With scripting off the panels are ordinary blocks at the foot of <main>, so
   they need the page's own width limit rather than a drawer's. */
html:not(.js) .af-panel {
  max-inline-size: var(--maxw-content);
  margin-inline: auto;
  padding-inline: var(--gutter);
}


/* --------------------------------------------------------------------------
   11. NARROW VIEWPORTS
   -------------------------------------------------------------------------- */

@media (max-width: 40em) {
  .af-hero {
    padding-block-end: var(--space-9);
  }

  .af-hero__title {
    max-inline-size: 100%;
  }

  .af-hero__cue {
    display: none;
  }

  .af-hero__veil {
    background-image: linear-gradient(
      to top,
      var(--w-base) 6%,
      color-mix(in srgb, var(--w-base) 62%, transparent) 42%,
      color-mix(in srgb, var(--w-base) 30%, transparent)
    );
  }

  .af-enquire__block {
    padding: var(--space-5);
  }

  .af-gallery {
    columns: 1;
  }
}


/* --------------------------------------------------------------------------
   12. REDUCED MOTION
   motion.css carries the system-wide override; these are the additions this
   world owns. The snowfall is removed outright rather than paused, the season
   change becomes an instant swap with no token tween, and every hover lift is
   flattened to a colour change.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  .af-hero__snow {
    display: none;
  }

  .af-seasons,
  .js .af-season__panel,
  .af-season__tab,
  .af-plan,
  .af-residence,
  .af-residence__arrow,
  .af-gallery__item,
  .af-gallery__frame,
  .af-gallery__caption,
  .af-hero__cue-line,
  .af-chip {
    transition: none;
  }

  .af-residences__grid .af-residence:hover,
  .af-residences__grid .af-residence:focus-visible,
  .af-residences__grid .af-residence[aria-expanded="true"],
  .af-gallery .af-gallery__item:hover,
  .af-gallery .af-gallery__item:focus-visible {
    transform: none;
  }

  .af-residence:hover .af-plan,
  .af-residence:focus-visible .af-plan,
  .af-residence:hover .af-residence__arrow,
  .af-residence:focus-visible .af-residence__arrow,
  .af-hero__cue:hover .af-hero__cue-line,
  .af-hero__cue:focus-visible .af-hero__cue-line {
    transform: none;
  }
}