/* ============================================================================
   REGAN O'BRIEN — DESIGN SYSTEM
   "Le Bureau" — 1925 Parisian Art Deco, editorial restraint.

   ONE system. Every value in this file comes from a token below.
   No magic numbers past this block.
   ============================================================================ */

/* ---------------------------------------------------------------- 01 TOKENS */
:root {
  /* --- Colour -------------------------------------------------------------
     Sampled directly from Regan's existing brand assets:
       #082427  the field of the "RO" logo        -> ground
       #eca18d  the "RO" letterforms              -> blush
       #992e1c  the concentric logo outlines      -> sienna
       #17453a  the velvet gown (portrait)        -> emerald
       #4a1420  the chaise (portrait)             -> oxblood
       #7d4293  Ticket Attendant brand purple     -> quarantined to TA work
     Brass is the one addition: a metallic drawn from the portrait's warm
     ground, used ONLY as hairline rule + numeral. Never as a fill.          */
  --c-abyss:      #041214;
  --c-ground:     #082427;
  --c-ground-2:   #0b2e32;
  --c-ground-3:   #0f3a3f;

  --c-blush:      #eca18d;
  --c-blush-dim:  #c2806f;
  --c-sienna:     #992e1c;
  --c-emerald:    #17453a;
  --c-oxblood:    #4a1420;
  --c-purple:     #7d4293;

  --c-brass:      #c9a26b;
  --c-brass-dim:  #8d6f45;
  --c-brass-lit:  #e8cfa4;

  --c-parchment:  #f4ece3;
  --c-text:       #e6dcd2;
  --c-text-soft:  #b9aca0;
  --c-text-faint: #7e746b;

  /* Hairlines: one weight, three intensities. Emphasis = a DOUBLE rule,
     never a thicker rule. This is the single most important rule in the kit. */
  --line-w:       1px;
  --line-faint:   color-mix(in srgb, var(--c-brass) 16%, transparent);
  --line:         color-mix(in srgb, var(--c-brass) 32%, transparent);
  --line-lit:     color-mix(in srgb, var(--c-brass) 62%, transparent);

  /* --- Type ---------------------------------------------------------------
     Poiret One   (1920s geometric display)  — names, numerals, titles
     Josefin Sans (1920s geometric caps)     — eyebrows, nav, labels, buttons
     Cormorant Garamond (didone-ish text)    — all long-form prose            */
  --f-display: "Poiret One", "Josefin Sans", "Futura", system-ui, sans-serif;
  --f-caps:    "Josefin Sans", "Futura", "Century Gothic", system-ui, sans-serif;
  --f-body:    "Cormorant Garamond", "EB Garamond", Georgia, serif;

  /* Modular scale, ratio 1.25, fluid between 380px and 1400px viewports */
  --t-micro: clamp(0.66rem, 0.63rem + 0.12vw, 0.72rem);
  --t-cap:   clamp(0.72rem, 0.68rem + 0.16vw, 0.80rem);
  --t-sm:    clamp(0.95rem, 0.90rem + 0.22vw, 1.06rem);
  --t-body:  clamp(1.10rem, 1.02rem + 0.34vw, 1.30rem);
  --t-lead:  clamp(1.30rem, 1.14rem + 0.68vw, 1.70rem);
  --t-h4:    clamp(1.20rem, 1.08rem + 0.52vw, 1.50rem);
  --t-h3:    clamp(1.55rem, 1.32rem + 0.98vw, 2.30rem);
  --t-h2:    clamp(2.10rem, 1.62rem + 2.05vw, 3.60rem);
  --t-h1:    clamp(2.90rem, 1.70rem + 5.10vw, 7.00rem);
  --t-numeral: clamp(2.40rem, 1.60rem + 3.40vw, 4.60rem);

  --lh-tight: 1.04;
  --lh-snug:  1.22;
  --lh-body:  1.66;

  /* Tracking. Deco caps are WIDE. One ladder, applied consistently. */
  --tr-display: 0.02em;
  --tr-caps:    0.26em;
  --tr-caps-sm: 0.16em;
  --tr-body:    0.005em;

  /* --- Space: 8px base. Nothing between steps. ---------------------------- */
  --s-1:  4px;   --s-2:  8px;   --s-3:  16px;  --s-4:  24px;
  --s-5:  32px;  --s-6:  48px;  --s-7:  64px;  --s-8:  96px;
  --s-9:  128px; --s-10: 192px;

  /* Section rhythm + page gutter, fluid */
  --pad-section: clamp(var(--s-8), 9vw, var(--s-10));
  --gutter:      clamp(var(--s-4), 5vw, var(--s-7));

  /* --- Measure ------------------------------------------------------------ */
  --w-page:  1240px;
  --w-wide:  1024px;
  --w-text:  68ch;
  --w-narrow: 54ch;

  /* --- Geometry -----------------------------------------------------------
     Radius is ZERO, everywhere, always. Art Deco does not round — it steps.
     Softness comes from ONE chamfer value, cut on two opposite corners.     */
  --radius: 0;
  --chamfer: 14px;
  --chamfer-sm: 8px;

  /* The lozenge — the site's only repeated ornament. Three sizes, no more:
     xs separates words, sm bullets a list, md punctuates a divider. */
  --lozenge-xs: 4px;
  --lozenge-sm: 6px;
  --lozenge-md: 8px;

  /* Hairline rule pair: two lines and the air between them. */
  --rule-double-h: 5px;
  /* The one deliberate non-hairline: a 1px progress bar reads as a smudge. */
  --progress-h: 2px;

  /* --- Motion: three durations, one curve family. ------------------------- */
  --e-out:  cubic-bezier(0.16, 0.84, 0.30, 1);
  --e-soft: cubic-bezier(0.40, 0.00, 0.20, 1);
  --d-fast: 220ms;
  --d-mid:  520ms;
  --d-slow: 1100ms;
  --d-drift: 26s;
  /* Stagger ladder: one step, multiplied. Never an ad-hoc delay. */
  --d-step:      90ms;
  --d-step-rise: 110ms;

  --z-grain: 900;
  --z-nav:   800;
}

/* ------------------------------------------------------------- 02 RESET */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--s-8);
}
body {
  margin: 0;
  background: var(--c-ground);
  color: var(--c-text);
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tr-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
::selection { background: var(--c-blush); color: var(--c-abyss); }
:focus-visible {
  outline: var(--line-w) solid var(--c-blush);
  outline-offset: var(--s-1);
}

/* ---------------------------------------------- 03 ATMOSPHERE (the "dream") */
/* A slow, drifting aurora behind everything + a fixed film grain over it.
   Both are decorative and both stop dead under prefers-reduced-motion.      */
.atmosphere {
  position: fixed;
  inset: -20%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(42% 38% at 18% 14%, color-mix(in srgb, var(--c-emerald) 62%, transparent), transparent 70%),
    radial-gradient(38% 42% at 84% 26%, color-mix(in srgb, var(--c-oxblood) 52%, transparent), transparent 70%),
    radial-gradient(52% 44% at 62% 88%, color-mix(in srgb, var(--c-sienna) 26%, transparent), transparent 72%),
    radial-gradient(44% 40% at 12% 76%, color-mix(in srgb, var(--c-brass) 12%, transparent), transparent 74%);
  filter: blur(40px) saturate(115%);
  opacity: 0.85;
  animation: drift var(--d-drift) var(--e-soft) infinite alternate;
}
@keyframes drift {
  0%   { transform: translate3d(0,0,0) scale(1);      }
  50%  { transform: translate3d(2.5%,-2%,0) scale(1.08); }
  100% { transform: translate3d(-2%,2.5%,0) scale(1.04); }
}
.grain {
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.30;
  mix-blend-mode: overlay;
  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'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------- 04 TYPOGRAPHY */
.display {
  font-family: var(--f-display);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
  color: var(--c-parchment);
}
.eyebrow {
  font-family: var(--f-caps);
  font-size: var(--t-cap);
  font-weight: 600;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--c-brass);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
/* Every eyebrow trails a hairline. It draws itself in on reveal. */
.eyebrow::after {
  content: "";
  flex: 1;
  height: var(--line-w);
  background: var(--line);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d-slow) var(--e-out) var(--d-step);
}
.is-revealed .eyebrow::after,
.eyebrow.is-revealed::after { transform: scaleX(1); }

/* Centred variant: the cartouche divider already carries the rule above it,
   so this one drops its trailing hairline instead of fighting for the space. */
.eyebrow--center { justify-content: center; }
.eyebrow--center::after { display: none; }

.h1 { font-family: var(--f-display); font-size: var(--t-h1); line-height: var(--lh-tight); letter-spacing: var(--tr-display); color: var(--c-parchment); }
.h2 { font-family: var(--f-display); font-size: var(--t-h2); line-height: var(--lh-snug);  letter-spacing: var(--tr-display); color: var(--c-parchment); }
.h3 { font-family: var(--f-display); font-size: var(--t-h3); line-height: var(--lh-snug);  color: var(--c-parchment); }
.h4 {
  font-family: var(--f-caps); font-size: var(--t-h4); font-weight: 600;
  line-height: var(--lh-snug); letter-spacing: var(--tr-caps-sm);
  text-transform: uppercase; color: var(--c-blush);
}
.lead {
  font-size: var(--t-lead);
  line-height: 1.48;
  color: var(--c-text);
  max-width: var(--w-narrow);
}
.prose { max-width: var(--w-text); }
.prose > * + * { margin-top: var(--s-4); }
.prose p { color: var(--c-text-soft); }
.prose strong { color: var(--c-parchment); font-weight: 600; }
.prose em { color: var(--c-blush); font-style: italic; }
.prose a {
  color: var(--c-blush);
  border-bottom: var(--line-w) solid var(--line-lit);
  transition: color var(--d-fast) var(--e-out), border-color var(--d-fast) var(--e-out);
}
.prose a:hover { color: var(--c-brass-lit); border-color: var(--c-brass-lit); }

.numeral {
  font-family: var(--f-display);
  font-size: var(--t-numeral);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: var(--line-w) var(--c-brass);
  letter-spacing: var(--tr-display);
}
.muted  { color: var(--c-text-faint); }
.blush  { color: var(--c-blush); }
.brass  { color: var(--c-brass); }

/* Deco small-caps metadata label */
.label {
  font-family: var(--f-caps);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--c-text-faint);
}

/* ------------------------------------------------------------- 05 LAYOUT */
.shell {
  width: 100%;
  max-width: var(--w-page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell--wide { max-width: var(--w-wide); }
.section { padding-block: var(--pad-section); position: relative; }
/* Adjacent sections would otherwise stack two full rhythms into a void. */
.section + .section { padding-block-start: 0; }
.stack-3 > * + * { margin-top: var(--s-3); }
.stack-4 > * + * { margin-top: var(--s-4); }
.stack-5 > * + * { margin-top: var(--s-5); }
.stack-6 > * + * { margin-top: var(--s-6); }
.stack-7 > * + * { margin-top: var(--s-7); }

.grid { display: grid; gap: var(--s-6); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--aside { grid-template-columns: minmax(0, 1fr) minmax(0, 260px); gap: var(--s-6); }
@media (max-width: 900px) {
  .grid--2, .grid--3, .grid--aside { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------- 06 THE FRAME */
/* The signature: a hairline box with two chamfered corners (top-left,
   bottom-right). Used for every card, plate and mount on the site so the
   whole thing reads as one object. */
.frame {
  position: relative;
  background: color-mix(in srgb, var(--c-abyss) 46%, transparent);
  border: var(--line-w) solid var(--line);
  clip-path: polygon(
    var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)),
    calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer)
  );
  backdrop-filter: blur(6px);
  transition: border-color var(--d-mid) var(--e-out),
              background-color var(--d-mid) var(--e-out),
              transform var(--d-mid) var(--e-out);
}
.frame--pad { padding: clamp(var(--s-4), 3vw, var(--s-6)); }
.frame--flat { background: none; backdrop-filter: none; }
.frame:hover { border-color: var(--line-lit); }

/* Image mount: the frame, but holding a picture, with an inset hairline
   that pulls in on hover — the only "ornament" we allow ourselves. */
.mount { position: relative; overflow: hidden; }
.mount img { width: 100%; transition: transform var(--d-slow) var(--e-out), filter var(--d-slow) var(--e-out); }
.mount::after {
  content: "";
  position: absolute;
  inset: var(--s-3);
  border: var(--line-w) solid color-mix(in srgb, var(--c-brass) 0%, transparent);
  transition: inset var(--d-mid) var(--e-out), border-color var(--d-mid) var(--e-out);
  pointer-events: none;
}
.mount:hover::after { inset: var(--s-2); border-color: var(--line-lit); }
.mount:hover img { transform: scale(1.035); }
.mount--tall  { aspect-ratio: 3 / 4;  }
.mount--wide  { aspect-ratio: 16 / 10; }
.mount--film  { aspect-ratio: 21 / 9; }
/* Ratio mounts fill absolutely. A percentage height against an aspect-ratio
   box is unreliable; absolute inset is not. */
.mount--tall > img,
.mount--wide > img,
.mount--film > img,
.hero__portrait .mount > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mount--contain { background: var(--c-abyss); }
.mount--contain > img { object-fit: contain; }

/* ---------------------------------------------------------- 07 THE RULES */
/* Emphasis is a DOUBLE rule, never a heavier one. */
.rule {
  height: var(--line-w);
  background: var(--line);
  border: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d-slow) var(--e-out);
}
.is-revealed .rule, .rule.is-revealed { transform: scaleX(1); }
.rule--double { height: var(--rule-double-h); background: none; border-top: var(--line-w) solid var(--line); border-bottom: var(--line-w) solid var(--line); }
.rule--lit { background: var(--line-lit); }

/* A centred Deco cartouche divider: hairline — lozenge — hairline. */
.cartouche {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  color: var(--c-brass);
}
.cartouche::before, .cartouche::after {
  content: ""; flex: 1; height: var(--line-w); background: var(--line);
}
.cartouche span {
  width: var(--lozenge-md); height: var(--lozenge-md);
  border: var(--line-w) solid var(--c-brass);
  transform: rotate(45deg);
}

/* ---------------------------------------------------------- 08 THE BUTTON */
.btn {
  --btn-fg: var(--c-parchment);
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-5);
  font-family: var(--f-caps);
  font-size: var(--t-cap);
  font-weight: 600;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--btn-fg);
  border: var(--line-w) solid var(--line-lit);
  clip-path: polygon(
    var(--chamfer-sm) 0, 100% 0, 100% calc(100% - var(--chamfer-sm)),
    calc(100% - var(--chamfer-sm)) 100%, 0 100%, 0 var(--chamfer-sm)
  );
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--d-mid) var(--e-out), border-color var(--d-mid) var(--e-out);
}
/* Wipe fill, left to right */
.btn::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: var(--c-blush);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d-mid) var(--e-out);
}
.btn:hover { color: var(--c-abyss); border-color: var(--c-blush); }
.btn:hover::before { transform: scaleX(1); }
.btn__arrow { transition: transform var(--d-mid) var(--e-out); }
.btn:hover .btn__arrow { transform: translateX(var(--s-1)); }
.btn--ghost { border-color: var(--line); }

/* Text link with a rule that grows */
.link {
  font-family: var(--f-caps);
  font-size: var(--t-cap);
  font-weight: 600;
  letter-spacing: var(--tr-caps-sm);
  text-transform: uppercase;
  color: var(--c-blush);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding-bottom: var(--s-1);
  border-bottom: var(--line-w) solid var(--line);
  transition: color var(--d-fast) var(--e-out), border-color var(--d-fast) var(--e-out), gap var(--d-fast) var(--e-out);
}
.link:hover { color: var(--c-brass-lit); border-color: var(--c-brass-lit); gap: var(--s-3); }

/* ------------------------------------------------------------- 09 THE NAV */
.nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-nav);
  padding-block: var(--s-4);
  padding-top: calc(var(--s-4) + env(safe-area-inset-top, 0px));
  transition: padding var(--d-mid) var(--e-out), background-color var(--d-mid) var(--e-out),
              backdrop-filter var(--d-mid) var(--e-out), border-color var(--d-mid) var(--e-out);
  border-bottom: var(--line-w) solid transparent;
}
.nav.is-stuck {
  padding-block: var(--s-3);
  padding-top: calc(var(--s-3) + env(safe-area-inset-top, 0px));
  background: color-mix(in srgb, var(--c-abyss) 82%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line);
}
.nav__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); }
.nav__mark { display: flex; align-items: baseline; gap: var(--s-3); }
.nav__mark-initials {
  font-family: var(--f-display);
  font-size: 1.32rem;
  letter-spacing: 0.20em;
  color: var(--c-blush);
}
.nav__mark-name {
  font-family: var(--f-caps);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--c-text-faint);
}
.nav__links { display: flex; align-items: center; gap: clamp(var(--s-4), 2.4vw, var(--s-6)); }
.nav__link {
  font-family: var(--f-caps);
  font-size: var(--t-cap);
  font-weight: 600;
  letter-spacing: var(--tr-caps-sm);
  text-transform: uppercase;
  color: var(--c-text-soft);
  position: relative;
  padding-block: var(--s-1);
  transition: color var(--d-fast) var(--e-out);
}
.nav__link::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: var(--line-w);
  background: var(--c-blush);
  transform: scaleX(0); transform-origin: right;
  transition: transform var(--d-mid) var(--e-out);
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--c-blush); }
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

.nav__toggle { display: none; width: var(--s-5); height: var(--s-5); position: relative; }
.nav__toggle span {
  position: absolute; left: var(--s-1); right: var(--s-1); height: var(--line-w);
  background: var(--c-blush); transition: transform var(--d-mid) var(--e-out), opacity var(--d-fast) var(--e-out);
}
.nav__toggle span:nth-child(1) { top: calc(50% - var(--s-2) + var(--line-w)); }
.nav__toggle span:nth-child(2) { top: 50%; }
.nav__toggle span:nth-child(3) { top: calc(50% + var(--s-2) - var(--line-w)); }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(calc(var(--s-2) - var(--line-w))) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(calc((var(--s-2) - var(--line-w)) * -1)) rotate(-45deg); }

@media (max-width: 820px) {
  .nav__toggle { display: block; }
  .nav__links {
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: center;
    gap: var(--s-6);
    background: color-mix(in srgb, var(--c-abyss) 96%, transparent);
    backdrop-filter: blur(18px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--d-mid) var(--e-out), visibility var(--d-mid);
  }
  .nav__links.is-open { opacity: 1; visibility: visible; }
  .nav__link { font-size: var(--t-sm); letter-spacing: var(--tr-caps); }
}

/* ------------------------------------------------------------- 10 REVEALS */
/* Reveals are opt-in: the inline head script adds .has-reveal only when the
   browser can actually drive them, and removes it if deco.js never booted.
   Without that class every element is simply visible — content first. */
.has-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(var(--s-4));
  transition: opacity var(--d-slow) var(--e-out), transform var(--d-slow) var(--e-out);
}
.has-reveal [data-reveal].is-revealed { opacity: 1; transform: none; }
.has-reveal [data-reveal][data-delay="1"] { transition-delay: calc(var(--d-step) * 1);  }
.has-reveal [data-reveal][data-delay="2"] { transition-delay: calc(var(--d-step) * 2); }
.has-reveal [data-reveal][data-delay="3"] { transition-delay: calc(var(--d-step) * 3); }
.has-reveal [data-reveal][data-delay="4"] { transition-delay: calc(var(--d-step) * 4); }

/* Line-by-line display reveal for big headings */
.rise { display: block; overflow: hidden; }
.has-reveal .rise > span {
  display: block;
  transform: translateY(105%);
  transition: transform var(--d-slow) var(--e-out);
}
.has-reveal .is-revealed .rise > span { transform: none; }
.has-reveal .is-revealed .rise:nth-child(2) > span { transition-delay: calc(var(--d-step-rise) * 1); }
.has-reveal .is-revealed .rise:nth-child(3) > span { transition-delay: calc(var(--d-step-rise) * 2); }

/* --------------------------------------------------------- 11 SCROLL LINE */
.progress {
  position: fixed;
  inset-block-start: 0; inset-inline: 0;
  height: var(--progress-h);
  z-index: calc(var(--z-nav) + 1);
  background: var(--c-blush);
  transform: scaleX(0);
  transform-origin: left;
}

/* ------------------------------------------------------------ 12 REDUCED */
@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;
  }
  .has-reveal [data-reveal] { opacity: 1; transform: none; }
  .has-reveal .rise > span { transform: none; }
  .rule, .eyebrow::after { transform: scaleX(1); }
  .atmosphere { animation: none; }
}