/* =====================================================================
   ICAIRE Connect. No framework, no build step for CSS.

   DIRECTION: image-led, deep field. Real event photography carries the page;
   the ground is dark so the photographs act as the light source rather than
   competing with a bright surface. The centre's own palette, unchanged —
   identity is not up for redesign.

   WHAT THIS REPLACES, and why, because the previous version was reviewed as
   "AI slop" and that was fair. It was a centred column of translucent rounded
   panels, a lime icon chip on every row, a uniform card grid, and the system UI
   font — the 2026 generated-landing-page fingerprint. Gone: the panels, the
   per-row chips, the uniform grid, and the system stack.
   ===================================================================== */

:root {
  /* Brand, as values. This project owns them; it shares no build with the
     platform, which is the point of it being a separate project. */
  --midnight: #0f2a38;
  --deep: #081a24; /* one step under Midnight — the page ground */
  --forest: #1c5631;
  --lime: #8dc63f;

  --ink: #ffffff;
  /* Measured, not guessed: 0.72 white on --deep is ~9:1, 0.55 is ~5.4:1. The
     muted-gray-on-dark habit is the most common contrast failure there is. */
  --ink-2: rgba(255, 255, 255, 0.72);
  --ink-3: rgba(255, 255, 255, 0.55);
  --rule: rgba(255, 255, 255, 0.12);

  /* TYPE. Archivo, not the system stack. Chosen as a physical object: a
     national pavilion sign, a conference badge, a multilingual treaty cover.
     It is a grotesque with a WIDTH axis, and that width contrast is the voice —
     which is why there is no second Latin family. Almarai carries Arabic and is
     the identity's existing face. */
  --latin: Archivo, "Segoe UI", system-ui, sans-serif;
  --arabic: Almarai, "Noto Kufi Arabic", "Segoe UI", sans-serif;

  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 18px;

  /* Semantic z-scale. Never arbitrary values like 999. */
  --z-base: 0;
  --z-raised: 10;

  --ease: cubic-bezier(0.22, 1, 0.36, 1); /* ease-out-quart: no bounce */
}

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

html {
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--deep);
  color: var(--ink);
  font-family: var(--latin);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

html[dir="rtl"] body {
  font-family: var(--arabic);
}

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

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

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

:where(a, button):focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- Shared -------------------------------------------------------- */

.page {
  position: relative;
  overflow: clip;
}

.shell {
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
  padding: 0 1.25rem 4rem;
}

/* ONE section-title style, used four times. Deliberately NOT an uppercase
   tracked eyebrow: that scaffold sits above every heading on most generated
   pages and is a tell in itself. This is a quiet sentence-case label that names
   the section and gets out of the way. */
.section-title {
  margin: 0 0 1.25rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink-3);
}

.work,
.act,
.about,
.more,
.roster {
  margin-top: clamp(3rem, 8vw, 4.5rem);
}

/* --- Top bar ------------------------------------------------------- */

.topbar {
  position: relative;
  z-index: var(--z-raised);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
  padding: 1.25rem;
}

.logo {
  height: 2.5rem;
  width: auto;
}

.lang-switch {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.lang-switch:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
}

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

/* The Olympiad photograph, full-bleed, behind the identity. It is the single
   most valuable asset the centre has for a stranger — national teams at desks
   under flags — and it answers "is this real" before a word is read. */
.hero {
  position: relative;
  margin-top: -5.75rem; /* the top bar sits over the photograph */
  padding: 8rem 1.25rem clamp(2.5rem, 8vw, 4rem);
  text-align: center;
  isolation: isolate;
}

.hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 38%;
  z-index: -2;
}

/* TWO overlays, not one. A flat scrim either kills the photograph or fails to
   protect the text. A vertical gradient keeps the image legible up top, buries
   the busy foreground at the bottom and hands off to the page ground exactly;
   a second forest wash pulls the whole frame toward the brand rather than
   leaving it neutral grey. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(8, 26, 36, 0.7) 0%, rgba(8, 26, 36, 0.88) 55%, var(--deep) 100%),
    linear-gradient(180deg, rgba(28, 86, 49, 0.38) 0%, rgba(8, 26, 36, 0) 60%);
}

.hero-inner {
  max-width: 34rem;
  margin: 0 auto;
}

.mark {
  width: 4.5rem;
  height: 4.5rem;
  margin: 0 auto 1.5rem;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(141, 198, 63, 0.55), 0 0 40px rgba(8, 26, 36, 0.6);
}

h1 {
  margin: 0;
  /* The width axis IS the voice: expanded at display size reads as signage,
     which is why this page needs no second family. */
  font-variation-settings: "wdth" 112;
  font-weight: 600;
  font-size: clamp(2.75rem, 12vw, 4.5rem);
  line-height: 0.95;
  letter-spacing: -0.03em; /* the floor is -0.04em; this stays clear of it */
  text-wrap: balance;
}

/* Almarai has no width axis and Arabic does not take negative tracking. */
html[dir="rtl"] h1 {
  font-variation-settings: normal;
  letter-spacing: 0;
  line-height: 1.15;
}

.full-name {
  margin: 0.875rem 0 0;
  font-size: 1rem;
  color: var(--ink-2);
  text-wrap: balance;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  margin: 1.25rem 0 0;
  padding: 0.375rem 0.875rem 0.375rem 0.625rem;
  border: 1px solid rgba(141, 198, 63, 0.45);
  border-radius: 999px;
  background: rgba(28, 86, 49, 0.4);
  font-size: 0.8125rem;
  font-weight: 600;
}

.badge-icon {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--lime);
}

.tagline {
  margin: 1.25rem auto 0;
  max-width: 28rem;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: balance;
}

/* --- The one action ------------------------------------------------ */

/* WHITE, NOT LIME. Signal Lime is an ACCENT in this identity — a tick, a meta
   line, a hover — and a large lime pill turned it into a surface, which is the
   one thing the palette says it is not. It also fought two neighbours at once:
   the warm photograph behind it and Elevate's magenta panel directly below.

   White is the strongest contrast this ground offers (14.2:1 with Midnight
   text), so the primary action is unmistakable without shouting; it stays
   neutral against whatever photograph ends up behind it; and the X mark sits in
   its own native near-black-on-white. Lime keeps its real job everywhere else.

   A LABELLED BUTTON, not a row of glyphs. Five equal circles were read exactly
   as Hick's law predicts — "presented with so many options will choose none" —
   because five equal things are not a hierarchy. One filled, labelled target
   says what it does before it is touched, and it is the largest tappable thing
   in the first screen (Fitts). Lime fill with Midnight text: a graphic on lime,
   never light text on it. */
/* Two buttons, one column, EQUAL WIDTH. Left to shrink-wrap, "Follow us on 𝕏"
   and "Follow us on in" come out a few pixels apart, and a stacked pair that is
   almost-but-not-quite aligned reads as a mistake rather than a set. The
   min-width is wider than either label needs, so both settle at the same edge
   and the difference disappears. */
.cta-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-width: 15rem;
  min-height: 52px;
  padding: 0.875rem 1.5rem;
  border-radius: 999px;
  background: #fff;
  color: var(--midnight);
  font-weight: 600;
  font-size: 1rem;
  transition: background-color 0.25s var(--ease), transform 0.25s var(--ease);
}

/* A barely-there tint toward the brand's own green rather than a grey dim, so
   the state change is felt rather than read as the button going dull. */
.cta:hover {
  background: #e9efe9;
}

.cta:active {
  transform: translateY(1px);
}

/* THE SECOND BUTTON IS OUTLINED, NOT FILLED — that is the whole point of adding
   it this way. Two solid white pills of equal weight would recreate in two what
   the five circles did in five: no hierarchy, so no obvious first move. Outline
   against fill answers "which one" without a word of explanation.

   THE DARK FILL IS NOT DECORATION, and the number is worth writing down. The
   hero photograph is a real venue shot containing near-white blowouts — the
   brightest pixel behind this button is rgb(255,254,246). Composited against
   that pixel alone, white text on this fill measures 4.01:1, i.e. it FAILS AA.
   It passes at 16.94:1 only because `.hero::before` is already ~0.9 opaque this
   far down the frame; the fill's real job is to hold the line if that scrim is
   ever lightened or the photo is recropped so a highlight lands higher.

   Measured, not assumed: sample the pixels under the button, composite both
   `.hero::before` gradients and then this fill, and take the worst ratio. Do it
   again if the hero photo or the scrim changes — legibility here is a property
   of that particular image, not of this rule. */
.cta-alt {
  background: rgba(8, 26, 36, 0.55);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

.cta-alt:hover {
  background: rgba(8, 26, 36, 0.75);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.85);
}

/* The mark now carries the platform name rather than decorating a label that
   already said it, so it is set slightly larger — here it is a word, not an
   ornament. */
.cta svg {
  flex: none;
  width: 21px;
  height: 21px;
}

/* --- Initiatives --------------------------------------------------- */

/* NOT a uniform card grid. The lead item runs full width with its photograph
   above the text; the rest are horizontal rows with a small image. One
   component, two densities — which is what stops five identical rectangles
   reading as a template. */
.tiles {
  display: flex;
  flex-direction: column;
}

.tile a {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  align-items: center;
  gap: 1rem;
  padding: 0.875rem 0;
  border-top: 1px solid var(--rule);
}

.tile:last-child a {
  border-bottom: 1px solid var(--rule);
}

.tile-frame {
  /* EXPLICIT. This is a <span>, and it was only getting block layout by
     accident — as a grid item inside the row layout, which blockifies it. The
     lead tile is `display: block`, so there its frame stayed inline and
     collapsed to zero the moment its only child was positioned absolutely.
     `aspect-ratio` does not apply to inline non-replaced elements either. */
  display: block;
  overflow: hidden;
  border-radius: var(--r-sm);
  aspect-ratio: 16 / 11;
  background: rgba(255, 255, 255, 0.05);
}

/* A BRAND PANEL, not a photo frame. The mark sits whole and centred on its
   own ground with real clear space around it, because a logo cropped to fill
   a box is a logo with its edges cut off. Elevate's indigo is its own; letting
   a sub-brand keep its colour is what makes it read as a sub-brand rather than
   as decoration inside ICAIRE's palette. */
.tile-brand {
  position: relative;
}

/* CONSTRAINED ON BOTH AXES, which the first attempt was not: a width-only cap
   on a near-square mark inside a 16:10 frame overflows vertically and shears
   the wordmark off — the precise failure this panel exists to prevent. Bounding
   height as well lets the mark find its own fit inside the clear space. */
/* CONTAIN, NOT CAPS. The first two attempts used `max-width` / `max-height:
   100%`, and the percentage silently resolved as indefinite because the frame's
   height comes from `aspect-ratio` rather than from a length — so the cap did
   nothing and the wordmark was sheared off. Filling the box and letting
   `object-fit: contain` letterbox the mark cannot fail that way, whatever the
   logo's proportions. The parent's padding supplies the clear space.

   It is `.tile-frame .tile-logo` rather than `.tile-logo` because the generic
   `.tile-frame img` rule sets `object-fit: cover` for photographs and outranks
   a single class. Matching its specificity is the fix; `!important` would have
   buried the cause. */
.tile-frame .tile-logo {
  /* FOURTH ATTEMPT, and the reason the previous three failed is worth keeping.
     The frame's height comes from `aspect-ratio`, so `height: 100%` and
     `max-height: 100%` on a grid item resolve as indefinite: they parse, apply
     nothing, and the wordmark kept getting sheared off. Absolute `inset: 9%`
     then failed for a different reason — for an absolutely positioned REPLACED
     element with `width: auto`, the used width is the image's INTRINSIC width
     and the opposite inset is simply ignored.

     Explicit percentages work because the containing block (the frame's padding
     box) has a definite used height. 9% offset with an 82% box is exactly the
     inset rectangle, and `object-fit: contain` letterboxes the mark inside it.
     Logical offsets so the clear space mirrors in Arabic. */
  position: absolute;
  inset-block-start: 9%;
  inset-inline-start: 9%;
  width: 82%;
  height: 82%;
  object-fit: contain;
}

/* The photo zoom is a photographic gesture; a logo must not creep on hover. */
.tile a:hover .tile-logo {
  transform: none;
}

.tile-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}

/* The photograph creeps on hover; a LOGO must not — a mark that drifts reads
   as a rendering fault, not as an affordance. */
.tile a:hover .tile-frame img {
  transform: scale(1.04);
}

.tile a:hover .tile-logo {
  transform: none;
}

.tile a:hover .tile-name {
  color: var(--lime);
}

.tile-name {
  display: block;
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.25;
  transition: color 0.25s var(--ease);
}

.tile-meta {
  display: block;
  margin-top: 0.1875rem;
  font-size: 0.8125rem;
  color: var(--lime);
}

.tile-blurb {
  display: none; /* the lead tile shows it; rows show it from 34rem up */
  margin-top: 0.4375rem;
  font-size: 0.9375rem;
  color: var(--ink-2);
}

/* THE LEAD TILE. The Olympiad gets the photograph at full width because it is
   the strongest single piece of evidence the centre has. Breaking the rhythm
   for one item is the point; five equal tiles would say nothing is special. */
.tile-lead a {
  display: block;
  padding: 0;
  border: 0;
  margin-bottom: 1.5rem;
}

.tile-lead .tile-frame {
  aspect-ratio: 16 / 10;
  border-radius: var(--r-lg);
}

.tile-lead .tile-text {
  display: block;
  padding: 1rem 0.25rem 0;
}

.tile-lead .tile-name {
  font-size: clamp(1.375rem, 5vw, 1.75rem);
  font-variation-settings: "wdth" 106;
}

html[dir="rtl"] .tile-lead .tile-name {
  font-variation-settings: normal;
}

.tile-lead .tile-blurb {
  display: block;
}

@media (min-width: 34rem) {
  .tile a {
    grid-template-columns: 8rem 1fr;
    gap: 1.25rem;
    padding: 1.125rem 0;
  }

  .tile-blurb {
    display: block;
  }
}

/* --- Actions ------------------------------------------------------- */

.action {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.125rem 1.25rem;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}

.actions li + li {
  margin-top: 0.625rem;
}

.action:hover {
  border-color: rgba(141, 198, 63, 0.55);
  background: rgba(28, 86, 49, 0.22);
}

.action-text {
  flex: 1;
  min-width: 0;
}

.action-name {
  display: block;
  font-weight: 600;
  font-size: 1.0625rem;
}

.action-blurb {
  display: block;
  margin-top: 0.125rem;
  font-size: 0.875rem;
  color: var(--ink-2);
}

.arrow {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--ink-3);
  transition: color 0.25s var(--ease);
}

html[dir="rtl"] .arrow {
  transform: scaleX(-1);
}

.action:hover .arrow {
  color: var(--lime);
}

/* --- About --------------------------------------------------------- */

.about-body {
  margin: 0 0 1rem;
  max-width: 65ch;
  color: var(--ink-2);
  text-wrap: pretty;
}

.about-body:last-child {
  margin-bottom: 0;
}

/* --- More ---------------------------------------------------------- */

/* Text links on rules. No icon chips: an icon beside "News" tells the reader
   nothing the word did not already. */
.more ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}

.more li a {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 0.5rem 0;
  border-top: 1px solid var(--rule);
  font-size: 0.9375rem;
  color: var(--ink-2);
  transition: color 0.25s var(--ease);
}

.more li a:hover {
  color: var(--lime);
}

/* --- Roster -------------------------------------------------------- */

.roster {
  border-top: 1px solid var(--rule);
}

.roster summary {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 56px;
  padding: 1rem 0;
  cursor: pointer;
  list-style: none;
}

.roster summary::-webkit-details-marker {
  display: none;
}

.summary-text {
  flex: 1;
  min-width: 0;
}

.summary-title {
  display: block;
  font-weight: 600;
}

/* The count is why anyone opens it: a closed panel labelled only "The people
   behind ICAIRE" is a door with nothing written on it. */
.summary-count {
  display: block;
  font-size: 0.8125rem;
  color: var(--ink-3);
}

.chevron {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--ink-3);
  transition: transform 0.3s var(--ease);
}

.roster[open] .chevron {
  transform: rotate(180deg);
}

.roster-body {
  padding-bottom: 1.5rem;
}

.director {
  margin-bottom: 2rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--rule);
  text-align: center;
}

.director-photo {
  width: 7rem;
  height: 7rem;
  margin: 0 auto;
  border-radius: 50%;
  object-fit: cover;
}

.director .member-name {
  font-size: 1.0625rem;
}

.director-title {
  display: block;
  margin-top: 0.125rem;
  font-size: 0.875rem;
  color: var(--lime);
}

.section-subheading {
  margin: 2rem 0 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-3);
}

/* Flex, not grid, so an incomplete final row centres instead of sitting hard
   against the start edge as though the roster were cut off mid-thought. */
.team {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.75rem 1rem;
}

.team > .member {
  flex: 0 0 calc((100% - 2rem) / 3);
  text-align: center;
}

@media (min-width: 40rem) {
  .team > .member {
    flex: 0 0 calc((100% - 3rem) / 4);
  }
}

.member img,
.member .placeholder {
  width: 4rem;
  height: 4rem;
  margin: 0 auto;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.08);
}

@media (min-width: 40rem) {
  .member img,
  .member .placeholder {
    width: 5rem;
    height: 5rem;
  }
}

/* The stand-in for a colleague with no portrait on file. A quiet drawn mark —
   never initials, which read as a broken avatar, and never a stock face. Lime,
   because the darker brand green measures under 1.4:1 here and disappears. */
.member .placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(141, 198, 63, 0.14);
  box-shadow: inset 0 0 0 1px rgba(141, 198, 63, 0.28);
  color: var(--lime);
}

.member-photo {
  position: relative;
  display: inline-block;
}

/* The LinkedIn badge sits on the portrait corner, not after the name: inline,
   it orphaned onto its own line whenever a name wrapped, which read as a bug. */
.member-social {
  position: absolute;
  bottom: 0;
  inset-inline-end: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--lime);
  color: var(--midnight);
  box-shadow: 0 0 0 2px var(--deep);
}

.member-social svg {
  width: 12px;
  height: 12px;
}

.director .member-social {
  width: 24px;
  height: 24px;
}

.director .member-social svg {
  width: 14px;
  height: 14px;
}

.member-name {
  display: block;
  margin-top: 0.625rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.member-link {
  display: block;
  padding: 0.25rem;
  border-radius: var(--r-md);
  transition: background-color 0.25s var(--ease);
}

.member-link:hover {
  background: rgba(255, 255, 255, 0.06);
}

.member-link:hover .member-name {
  color: var(--lime);
}

/* --- Closing ------------------------------------------------------- */

.closing {
  margin-top: clamp(3rem, 8vw, 4.5rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--rule);
  text-align: center;
  color: var(--ink-3);
}

.closing p {
  margin: 0;
}

/* The channels the hero no longer carries. Quiet text at the END, where a
   reader has already decided and choice costs them nothing. */
.channels {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 1.25rem;
  margin-top: 1.25rem;
}

.channels a,
.share-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-2);
  font-family: inherit;
  font-size: 0.9375rem;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  transition: color 0.25s var(--ease), text-decoration-color 0.25s var(--ease);
}

.channels a:hover,
.share-link:hover {
  color: var(--lime);
  text-decoration-color: var(--lime);
}

.share-link[hidden] {
  display: none;
}

/* Proper nouns stay left-to-right in both languages. */
.ltr {
  direction: ltr;
  unicode-bidi: isolate;
}

/* --- Motion -------------------------------------------------------- */

/* ONE orchestrated entrance for the hero, staggered, rather than a fade on
   every section as the reader scrolls. Scroll-triggered reveals are the reflex,
   and they also fail on hidden tabs and in headless renderers — which is why
   nothing here gates visibility on a class. Every element is visible by
   default; the animation only moves it. */
@media (prefers-reduced-motion: no-preference) {
  .hero-inner > * {
    animation: rise 0.8s var(--ease) backwards;
  }

  .mark {
    animation-delay: 0.05s;
  }
  h1 {
    animation-delay: 0.12s;
  }
  .full-name {
    animation-delay: 0.18s;
  }
  .badge {
    animation-delay: 0.24s;
  }
  .tagline {
    animation-delay: 0.3s;
  }
  .socials {
    animation-delay: 0.36s;
  }

  .hero-photo {
    animation: settle 1.6s var(--ease) backwards;
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

@keyframes settle {
  from {
    opacity: 0;
    transform: scale(1.06);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}