/* ==========================================================================
   HOTEL BUHARA — DESIGN SYSTEM 2026
   "Ottoman Editorial": archival paper, deep ink, aged brass.

   Depth here comes from light and layered paper, never from glass or glow:
   stacked frames, real offset shadows, a paper grain, and one honest 3D tilt
   on the room cards. Type leads; decoration follows.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Ink — the dark end. Warm, never pure black. */
  --ink-900: #0C0A09;
  --ink-800: #17130F;
  --ink-700: #241D18;
  --ink-600: #3A2F26;
  --ink-500: #57493C;

  /* Paper — the light end. Warm, never pure white. */
  --paper-50:  #FBF8F3;
  --paper-100: #F5F0E7;
  --paper-200: #EBE4D7;
  --paper-300: #DCD2C0;

  /* Brass — the single accent. Aged, not yellow. */
  --brass-700: #8A6420;
  --brass-600: #A67C28;
  --brass-500: #B98E3C;
  --brass-400: #CDA55C;
  --brass-200: #E6D2A8;

  /* Semantic roles */
  --bg:             var(--paper-50);
  --bg-alt:         var(--paper-100);
  --bg-inverse:     var(--ink-900);
  --text:           var(--ink-900);
  --text-muted:     var(--ink-500);
  --text-on-dark:   var(--paper-100);
  --text-on-dark-muted: #A99B8A;
  --accent:         var(--brass-700);
  --accent-on-dark: var(--brass-400);
  --rule:           rgba(12, 10, 9, 0.14);
  --rule-on-dark:   rgba(245, 240, 231, 0.18);

  /* Type */
  --font-display: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Fluid type scale — 1.25 ratio, clamped so nothing breaks at 375px */
  --step--1: clamp(0.78rem, 0.76rem + 0.10vw, 0.84rem);
  --step-0:  clamp(1rem, 0.97rem + 0.15vw, 1.09rem);
  --step-1:  clamp(1.25rem, 1.18rem + 0.35vw, 1.47rem);
  --step-2:  clamp(1.56rem, 1.43rem + 0.66vw, 1.98rem);
  --step-3:  clamp(1.95rem, 1.72rem + 1.14vw, 2.67rem);
  --step-4:  clamp(2.44rem, 2.05rem + 1.93vw, 3.60rem);
  --step-5:  clamp(3.05rem, 2.42rem + 3.15vw, 4.86rem);
  --step-6:  clamp(3.81rem, 2.80rem + 5.05vw, 6.55rem);

  /* Spacing — 8px rhythm */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-8: 8rem;

  /* Layout */
  --measure: 62ch;
  --container: 78rem;
  --container-wide: 92rem;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);

  /* Elevation — one light source, top-left, as if the page were lit by a
     window. Shadows are warm and layered, never a single soft blur. */
  --lift-1:
    0 1px 2px rgba(36, 29, 24, 0.07),
    0 2px 6px rgba(36, 29, 24, 0.05);
  --lift-2:
    0 2px 4px rgba(36, 29, 24, 0.06),
    0 8px 18px rgba(36, 29, 24, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.6) inset;
  --lift-3:
    0 4px 8px rgba(36, 29, 24, 0.07),
    0 16px 32px rgba(36, 29, 24, 0.10),
    0 32px 64px rgba(36, 29, 24, 0.07),
    0 1px 0 rgba(255, 255, 255, 0.55) inset;
  --lift-4:
    0 8px 16px rgba(36, 29, 24, 0.09),
    0 24px 48px rgba(36, 29, 24, 0.13),
    0 48px 88px rgba(36, 29, 24, 0.10);

  /* Motion — slow and unhurried. A luxury hotel does not snap. */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur-mid: 320ms;
  --dur-slow: 620ms;

  --radius-sm: 2px;
  --radius: 4px;
  --radius-lg: 8px;
}

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

/* The hidden attribute must win over any display rule set by a component. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Paper grain. The single most effective cure for the "rendered by a machine"
   look: real paper is never perfectly flat. Kept very faint and non-blocking. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.32;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; max-width: var(--measure); text-wrap: pretty; }

a { color: inherit; }

::selection {
  background: var(--brass-200);
  color: var(--ink-900);
}

/* Focus: visible, branded, never removed. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */
.wrap {
  width: min(100% - (var(--gutter) * 2), var(--container));
  margin-inline: auto;
}

.wrap-wide {
  width: min(100% - (var(--gutter) * 2), var(--container-wide));
  margin-inline: auto;
}

.section {
  padding-block: clamp(var(--space-6), 10vw, var(--space-8));
  position: relative;
}

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

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

/* The editorial grid. Content sits off-centre on purpose: a perfectly
   symmetrical page is the fastest way to look generated. */
.editorial {
  display: grid;
  gap: clamp(var(--space-4), 6vw, var(--space-7));
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 62rem) {
  .editorial { grid-template-columns: 1.05fr 0.95fr; }
  .editorial--reverse > :first-child { order: 2; }
  .editorial--wide-left { grid-template-columns: 1.25fr 0.75fr; }
}

/* --------------------------------------------------------------------------
   4. TYPOGRAPHY COMPONENTS
   -------------------------------------------------------------------------- */

/* Section eyebrow: small caps label above a heading, with a brass rule. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-3);
}

.section--dark .eyebrow { color: var(--accent-on-dark); }

.eyebrow::before {
  content: '';
  width: clamp(1.5rem, 4vw, 3rem);
  height: 1px;
  background: currentColor;
  flex: none;
  opacity: 0.7;
}

.display   { font-size: var(--step-4); }
.display-lg{ font-size: var(--step-5); }
.display-xl{ font-size: var(--step-6); }

/* One word set in italic brass — the house signature, used sparingly. */
.accent-word {
  font-style: italic;
  color: var(--accent);
}

.section--dark .accent-word { color: var(--accent-on-dark); }

.lede {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--text-muted);
  font-weight: 300;
}

.section--dark .lede { color: var(--text-on-dark-muted); }

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

/* Drop-cap for the story paragraph. Print habit, hard to fake, instantly
   reads as editorial rather than template. */
.dropcap::first-letter {
  float: left;
  font-family: var(--font-display);
  font-size: 3.6em;
  line-height: 0.82;
  padding: 0.08em 0.12em 0 0;
  color: var(--accent);
}

/* Numbered editorial index (01 / 02 / 03) */
.index-num {
  font-family: var(--font-display);
  font-size: var(--step-2);
  color: var(--accent);
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
}

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--ink-900);
  --btn-fg: var(--paper-50);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7em;
  min-height: 3rem;             /* 48px: comfortably above the 44px minimum */
  padding: 0.9rem 1.9rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-shadow: var(--lift-2);
  transition:
    transform var(--dur-mid) var(--ease-out),
    box-shadow var(--dur-mid) var(--ease-out),
    color var(--dur-mid) var(--ease-out);
}

/* The fill sweeps up from the base rather than fading: a physical movement. */
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--brass-700);
  transform: translateY(101%);
  transition: transform var(--dur-slow) var(--ease-out);
}

.btn:hover,
.btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--lift-3);
  color: #fff;
}

.btn:hover::before,
.btn:focus-visible::before { transform: translateY(0); }

.btn:active { transform: translateY(0); box-shadow: var(--lift-1); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink-900);
  border-color: var(--rule);
  box-shadow: none;
}

.btn--ghost:hover { border-color: transparent; }

.section--dark .btn--ghost,
.hero .btn--ghost {
  --btn-fg: var(--paper-100);
  border-color: var(--rule-on-dark);
}

.btn--brass { --btn-bg: var(--brass-700); --btn-fg: #fff; }
.btn--brass::before { background: var(--ink-900); }

/* Quiet text link with a rule that draws itself in. */
.link {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--accent);
  min-height: 44px;
  padding-block: 0.7rem;
  position: relative;
}

.section--dark .link { color: var(--accent-on-dark); }

.link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0.28);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-out);
}

.link:hover::after { transform: scaleX(1); }
.link svg { transition: transform var(--dur-mid) var(--ease-out); }
.link:hover svg { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   6. DEPTH: FRAMES, CARDS, TILT
   -------------------------------------------------------------------------- */

/* A photograph mounted on board: the image sits above a brass rule offset
   behind it. Real depth from two planes, no glass. */
.frame {
  position: relative;
  isolation: isolate;
}

/* Photos may arrive wrapped in <picture> (WebP with a JPG fallback). */
.frame > picture {
  display: block;
  position: relative;
  z-index: 1;
}

.frame > img,
.frame > picture > img {
  position: relative;
  z-index: 1;
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--lift-3);
}

.frame::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: var(--space-3) calc(var(--space-3) * -1) calc(var(--space-3) * -1) var(--space-3);
  border: 1px solid var(--brass-500);
  border-radius: var(--radius);
  opacity: 0.55;
  transition: inset var(--dur-slow) var(--ease-out);
}

.frame:hover::before {
  inset: var(--space-2) calc(var(--space-4) * -1) calc(var(--space-4) * -1) var(--space-2);
}

/* A small fact plate that overlaps the photo edge — the overlap is what
   creates the sense of layers. */
.plate {
  position: absolute;
  z-index: 2;
  background: var(--paper-50);
  color: var(--ink-900);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  box-shadow: var(--lift-4);
  text-align: center;
}

.plate__num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1;
  color: var(--accent);
}

.plate__label {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.card {
  background: var(--paper-50);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--lift-1);
  transition:
    translate var(--dur-mid) var(--ease-out),
    box-shadow var(--dur-mid) var(--ease-out),
    border-color var(--dur-mid) var(--ease-out);
}

.card:hover {
  translate: 0 -4px;
  box-shadow: var(--lift-3);
  border-color: var(--brass-400);
}

.section--dark .card {
  background: var(--ink-800);
  border-color: var(--rule-on-dark);
  color: var(--text-on-dark);
}

/* The one genuine 3D moment on the site: room cards tilt toward the pointer.
   --rx / --ry are written by JS; with no JS the card is simply flat. */
.tilt {
  transform-style: preserve-3d;
  transform:
    perspective(1100px)
    rotateX(var(--rx, 0deg))
    rotateY(var(--ry, 0deg))
    translateZ(0);
  transition: transform var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out);
  will-change: transform;
}

.tilt__layer {
  transform: translateZ(38px);
  transform-style: preserve-3d;
}

/* --------------------------------------------------------------------------
   7. NAV
   -------------------------------------------------------------------------- */
.nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 950;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--gutter);
  color: var(--paper-100);
  transition: background var(--dur-slow) var(--ease-out),
              padding var(--dur-slow) var(--ease-out),
              box-shadow var(--dur-slow) var(--ease-out);
}

/* The nav floats over the hero photograph. A soft scrim underneath keeps the
   links readable whatever the sky is doing that day. */
.nav::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(12, 10, 9, 0.62), rgba(12, 10, 9, 0));
  pointer-events: none;
  transition: opacity var(--dur-slow) var(--ease-out);
}

.nav--solid::before { opacity: 0; }

.nav--solid {
  background: rgba(12, 10, 9, 0.94);
  padding-block: var(--space-2);
  box-shadow: 0 1px 0 var(--rule-on-dark), var(--lift-2);
}

.nav__brand {
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.2;
}

.nav__brand small {
  display: block;
  font-family: var(--font-body);
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  color: var(--accent-on-dark);
  margin-top: 0.25rem;
}

/* Narrow phones: keep the name on one line next to Reserve and the menu. */
@media (max-width: 30rem) {
  .nav { gap: .75rem; }
  .nav__brand { font-size: .88rem; letter-spacing: .16em; white-space: nowrap; }
  .nav__brand small { display: none; }
  .nav .btn--brass { padding: .7rem .95rem !important; letter-spacing: .1em; }
}

.nav__links {
  display: none;
  gap: clamp(var(--space-2), 2.2vw, var(--space-4));
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 64rem) { .nav__links { display: flex; } }

.nav__links a {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--paper-100);
  display: inline-flex;
  align-items: center;
  min-height: 44px;           /* touch target, not just the text box */
  padding-block: 0.6rem;
  position: relative;
  opacity: 0.86;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.nav__links a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--accent-on-dark);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-mid) var(--ease-out);
}

.nav__links a:hover { opacity: 1; }
.nav__links a:hover::after,
.nav__links a[aria-current='page']::after { transform: scaleX(1); }

.nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: 1px solid var(--rule-on-dark);
  border-radius: var(--radius);
  color: inherit;
  cursor: pointer;
}

@media (min-width: 64rem) { .nav__toggle { display: none; } }

.nav__drawer {
  position: fixed;
  inset: 0;
  z-index: 940;
  background: var(--ink-900);
  display: grid;
  place-content: center;
  gap: var(--space-3);
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-mid) var(--ease-out), visibility var(--dur-mid);
}

.nav__drawer[data-open='true'] { opacity: 1; visibility: visible; }

.nav__drawer a {
  font-family: var(--font-display);
  font-size: var(--step-2);
  color: var(--paper-100);
  text-decoration: none;
  padding: var(--space-1) var(--space-3);
}

.nav__drawer a:hover { color: var(--accent-on-dark); }

/* --------------------------------------------------------------------------
   8. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  padding: var(--space-8) var(--gutter) var(--space-6);
  color: var(--paper-50);
  overflow: hidden;
  background: var(--ink-900);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__media picture { display: block; width: 100%; height: 100%; }

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Parallax: the image is slightly oversized and drifts as you scroll. */
  transform: scale(1.12) translateY(var(--parallax, 0px));
  transition: transform 100ms linear;
}

/* Two stacked scrims: one for depth at the base, one warm tint overall.
   Guarantees text contrast whatever the photograph does. */
.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(12, 10, 9, 0.94) 0%, rgba(12, 10, 9, 0.55) 38%, rgba(12, 10, 9, 0.28) 70%),
    linear-gradient(to right, rgba(12, 10, 9, 0.55), rgba(12, 10, 9, 0.1));
}

.hero__inner {
  position: relative;
  z-index: 1;
  width: min(100%, var(--container-wide));
  margin-inline: auto;
}

.hero h1 {
  font-size: var(--step-6);
  line-height: 0.95;
  margin-bottom: var(--space-3);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

/* Marquee of amenities. Pauses on hover and for reduced motion. */
.marquee {
  overflow: hidden;
  border-block: 1px solid var(--rule-on-dark);
  background: var(--ink-800);
  color: var(--text-on-dark-muted);
  padding-block: var(--space-2);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee__track {
  display: flex;
  gap: var(--space-5);
  width: max-content;
  animation: marquee 48s linear infinite;
  font-size: var(--step--1);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
}

.marquee:hover .marquee__track { animation-play-state: paused; }

.marquee__item { display: inline-flex; align-items: center; gap: var(--space-3); }
.marquee__item svg { color: var(--accent-on-dark); flex: none; }

@keyframes marquee { to { transform: translateX(-50%); } }

/* --------------------------------------------------------------------------
   9. SCROLL REVEAL
   Elements start slightly low and fade up. Critically, the hidden state is
   applied by JS (html.js), so with JS off or broken everything stays visible
   instead of leaving blank sections.
   -------------------------------------------------------------------------- */
.js .reveal {
  opacity: 0;
  translate: 0 24px;
  transition:
    opacity var(--dur-slow) var(--ease-out),
    translate var(--dur-slow) var(--ease-out);
}

.js .reveal.is-visible {
  opacity: 1;
  translate: 0 0;
}

.js .reveal[data-delay='1'] { transition-delay: 90ms; }
.js .reveal[data-delay='2'] { transition-delay: 180ms; }
.js .reveal[data-delay='3'] { transition-delay: 270ms; }

/* --------------------------------------------------------------------------
   10. UTILITIES
   -------------------------------------------------------------------------- */
.stack > * + * { margin-top: var(--space-3); }
.stack-lg > * + * { margin-top: var(--space-5); }

.grid-auto {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
}

/* Footer and brand links also need a real touch target, not just a text box. */
.nav__brand { display: inline-flex; flex-direction: column; justify-content: center; min-height: 44px; }

footer li > a,
footer p > a,
footer address a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  justify-content: center;
  padding: 0.35rem 0.4rem;
}

/* The list links read better left-aligned; only the inline legal row is centred. */
footer li > a,
footer address a { justify-content: flex-start; padding-inline: 0; }

/* Proof strip: two up on phones, four across from tablet — never an orphan. */
@media (min-width: 48rem) {
  .stats-grid { grid-template-columns: repeat(4, 1fr) !important; }
}

.rule {
  height: 1px;
  background: var(--rule);
  border: 0;
  margin: 0;
}

.section--dark .rule { background: var(--rule-on-dark); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   11. REDUCED MOTION
   Everything above degrades to a still page. Nothing disappears.
   -------------------------------------------------------------------------- */
@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;
  }

  .js .reveal { opacity: 1; translate: none; }
  .marquee__track { animation: none; }
  .hero__media img { transform: scale(1.04); }
  .tilt { transform: none !important; }
}