/* canuzay.com: the home page. One camera, from the Moon to the Earth, the Earth up close, the Sierra Nevada and Reno.
   Canvas, type, one cool accent; warmth lives only in the stills. System type, zero font bytes. */
:root {
  --canvas: #070a10;
  --ink: #f2f4f5;
  --muted: #aeb8c3;
  --soft: #c8d0d9;
  --accent: #9cc8f0;
  --line: rgba(255, 255, 255, .16);
  --gutter: clamp(16px, 5vw, 72px);
  --max: 1280px;
  --r: 20px;
  --a: .38;
  --card-a: .56;
  --bar-top: 14px;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-io: cubic-bezier(.77, 0, .175, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);
  --tshadow: 0 1px 2px rgba(5, 7, 12, .9), 0 3px 12px rgba(5, 7, 12, .6), 0 10px 44px rgba(5, 7, 12, .55);
  --sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  color-scheme: dark;
}
@media (max-width: 640px) { :root { --r: 18px; --bar-top: calc(env(safe-area-inset-top, 0px) + 10px); } }

/* The display face, for the name only: Unbounded 600 (SIL OFL 1.1), subset to the name and the Turkish letters. Until it
   arrives, Arial Bold stands in, scaled and set to Unbounded's metrics so the swap moves nothing. */
@font-face { font-family: 'Unbounded'; src: url('unbounded.a143b33f14.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Unbounded Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'); font-weight: 600; size-adjust: 131.27%; ascent-override: 75.8%; descent-override: 18.66%; line-gap-override: 0%; }
*, *::before, *::after { box-sizing: border-box; }
html {
  overflow-x: hidden;
  overflow-x: clip;
  overscroll-behavior-x: none;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-padding-top: 88px;
  background: var(--canvas);
}
body {
  margin: 0;
  overflow-x: hidden;
  overflow-x: clip;
  background: var(--canvas);
  color: var(--ink);
  font: 17px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}
/* The live grain: one fixed, non-interactive layer, never on a scrolling element. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: .055;
  background: url('grain.9bb8ea9c76.svg') 0 0 / 180px 180px;
}
h1, h2, h3, p, ol, dl, dd { margin: 0; }
ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
a, button { touch-action: manipulation; }
strong { font-weight: 600; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
[tabindex='-1']:focus { outline: none; }
::selection { background: #2c4a6a; color: var(--ink); }
.skip { position: fixed; z-index: 100; left: 16px; top: -100px; padding: 14px 22px; border-radius: 12px; background: var(--ink); color: var(--canvas); }
.skip:focus { top: 12px; }
.arrow { display: inline-block; transition: transform 160ms var(--ease-out); }

/* Glass: a labeled web approximation of the 2026 OS material (blur, saturation, a rim and a 1px highlight). Not Apple's
   Liquid Glass. One radius rule: every glass surface 20px, 18px under 640px; rims are concentric (radius minus inset). */
.glass {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: linear-gradient(135deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .015)), rgba(16, 24, 36, var(--a));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), 0 18px 60px rgba(0, 0, 0, .32);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
}
.glass::after { content: ''; position: absolute; inset: 3px; border: 1px solid rgba(255, 255, 255, .07); border-radius: calc(var(--r) - 3px); pointer-events: none; }

/* The floating bar: sticky shape of the approved release, now dark; cu. at the edge, the name fades in as the hero leaves. */
.top-bar { position: fixed; z-index: 40; top: var(--bar-top); left: 0; right: 0; padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)); pointer-events: none; }
.bar {
  max-width: var(--max);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 56px;
  padding: 0 8px 0 6px;
  pointer-events: auto;
  transition: background-color 200ms ease;
}
.wordmark { display: flex; align-items: center; gap: 10px; min-height: 44px; padding-right: 6px; font-size: 17px; font-weight: 600; letter-spacing: -.03em; white-space: nowrap; }
.mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .03));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.06em;
}
.wordmark-text { opacity: var(--name, 0); transition: opacity 200ms ease; }
.nav { display: flex; gap: 4px; margin-inline: auto; }
.nav a, .lang, .menu-button {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 14px;
  font-size: 15px;
  color: var(--ink);
  user-select: none;
  -webkit-user-select: none;
  transition: transform 120ms var(--ease-out), background-color 160ms ease;
}
.lang { border: 1px solid rgba(255, 255, 255, .16); font-size: 14px; }
.nav a:active, .lang:active, .menu-button:active, .wordmark:active, .sheet a:active, .go:active, .foot a:active { transform: scale(.97); }
.menu-button { display: none; margin-left: auto; border: 0; background: transparent; font: inherit; font-size: 15px; cursor: pointer; }
.sheet {
  max-width: var(--max);
  margin: 8px auto 0;
  padding: 8px 18px;
  pointer-events: auto;
  touch-action: none;
  opacity: 0;
  transform: translateY(-8px) scale(.98);
  transform-origin: 50% 0;
  transition: opacity 240ms var(--ease-drawer), transform 240ms var(--ease-drawer);
  --a: .72;
}
.sheet[hidden] { display: none; }
.sheet.is-open { opacity: 1; transform: none; }
.sheet.is-dragging { transition: none; }
.sheet a { display: flex; align-items: center; min-height: 50px; border-bottom: 1px solid rgba(255, 255, 255, .1); font-size: 17px; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; transition: transform 120ms var(--ease-out); }
.sheet a:last-child { border-bottom: 0; }
@media (hover: hover) and (pointer: fine) {
  .nav a:hover, .lang:hover, .menu-button:hover { background: rgba(255, 255, 255, .08); }
  .go:hover .arrow, .ground a:hover .arrow { transform: translate(2px, -2px); }
  .descent { cursor: grab; }
  .card, .hero { cursor: auto; }
  html.is-dragging, html.is-dragging .descent { cursor: grabbing; }
}
html.is-dragging { user-select: none; -webkit-user-select: none; }

/* The descent: a tall track over one sticky stage. The stage box is 100svh (stable, never overflows); the film layers
   paint to 100lvh plus overscan, so the toolbar collapsing on a phone never bares a strip under them. */
.descent { position: relative; overflow: clip; touch-action: pan-y pinch-zoom; }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; z-index: 0; pointer-events: none; }
.film { position: absolute; inset: 0; transform: translate3d(var(--lx, 0px), 0, 0); }
html.look-return .film { transition: transform 500ms cubic-bezier(.34, 1.3, .64, 1); }
.layer {
  position: absolute;
  top: -48px;
  left: -48px;
  right: -48px;
  height: calc(100vh + 96px);
  height: calc(100lvh + 96px);
  overflow: hidden;
  opacity: 0;
  will-change: transform, opacity;
  transform-origin: 50% 55%;
  --fw: calc((100vh + 96px) * 9 / 16);
  --fw: calc((100lvh + 96px) * 9 / 16);
}
.layer picture { position: absolute; inset: 0; }
.layer .frame { z-index: 1; }
.layer img { width: 100%; height: 100%; object-fit: cover; }
.ambient { display: none; }
/* The Moon is the first frame: the Earth hangs in its sky, the name sits above it, the ground below. The camera falls
   toward that Earth, so the Moon's zoom is centred on it. */
.layer--moon { opacity: 1; background: #030406; transform-origin: 47% 17%; }
/* Shorter phones crop the Moon still less at the sides and more in height: it moves down so the Earth stays under the
   name, not behind it. */
.layer--moon .frame { transform: translateY(clamp(40px, calc(40px + (844px - 100vh) * .34), 120px)); transform: translateY(clamp(40px, calc(40px + (844px - 100svh) * .34), 120px)); }
/* Reno's full moon sits high in its still: the frame moves down so the bar never cuts it. */
.layer--reno .frame { -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%); mask-image: linear-gradient(180deg, transparent, #000 12%); transform: translateY(clamp(64px, calc(64px + (844px - 100vh) * .6), 180px)); transform: translateY(clamp(64px, calc(64px + (844px - 100svh) * .6), 180px)); }
.layer--earth { background: linear-gradient(180deg, #05070c 0%, #0b1a33 40%, #1b2b3c 100%); transform-origin: 63% 57%; }
/* earth-p and earth-l both carry a small moon at their top edge: the frame is cropped above it (the picture box reaches
   above the layer), so it never sits under the bar. */
.layer--earth .frame { top: -12%; }
.layer--near { background: linear-gradient(180deg, #05070c 0%, #1c2a3c 35%, #5a5248 100%); transform-origin: 66.7% 53%; }
/* One mountain scene: the golden Sierra crest over Lake Tahoe (bridge-p) on a phone, sierra-l on a wide screen. */
.layer--sierra { background: linear-gradient(180deg, #05070c 0%, #2a3346 40%, #8a6a4a 100%); transform-origin: 71% 55%; }
.layer--reno { background: linear-gradient(180deg, #13214a 0%, #241d33 40%, #0b0d12 100%); transform-origin: 50% 45%; }
html.js .layer--earth picture, html.js .layer--near picture, html.js .layer--sierra picture, html.js .layer--reno picture { display: none; }
html.js.stills-ready .layer--earth .frame, html.js.stills-ready .layer--near .frame, html.js.stills-ready .layer--sierra .frame, html.js.stills-ready .layer--reno .frame { display: block; }
/* A wide screen gets the landscape Moon, Earth and Sierra full bleed. Reno has only its portrait still: it is framed at
   its own scale (never stretched 2x), a tall window right of centre dissolving into a blurred, dimmed fill made from
   the same file. */
@media (orientation: landscape) {
  .layer--reno .frame { left: calc(64% - var(--fw) / 2); right: auto; width: var(--fw);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(180deg, transparent, #000 9%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(180deg, transparent, #000 9%);
    mask-composite: intersect; }
  .layer--reno .ambient { display: block; }
  .layer--reno .ambient img { filter: blur(36px) saturate(1.1) brightness(.5); transform: scale(1.12); }
  html.js .layer--reno .ambient { display: none; }
  html.js.stills-ready .layer--reno .ambient { display: block; }
  .layer--moon .frame { transform: none; }
  /* earth-l carries a small moon at its top edge, which a wide screen would put under the bar: the frame is cropped above
     it (the picture box reaches 14% above the layer), so the moon stays outside the frame at any width. */
  .layer--earth .frame { top: -14%; }
  .layer--moon { transform-origin: 74% 32%; }
  .layer--earth { transform-origin: 55% 65%; }
  .layer--near { transform-origin: 52% 44%; }
  .layer--sierra { transform-origin: 50% 50%; }
  .layer--reno { transform-origin: 64% 45%; }
}
/* Grades in code: the Earth warms toward the Sierra's golden light as the camera drops into it; the Sierra cools and
   darkens toward Reno's blue hour; Reno enters a little lifted (screen) and settles to its own exposure. Each chapter
   dims its still a little while its card is up, so the glass can stay light. */
.grade { position: absolute; inset: 0; z-index: 2; opacity: 0; pointer-events: none; }
.grade--warm { background: linear-gradient(180deg, rgba(255, 176, 104, .2), rgba(255, 150, 80, .55)); mix-blend-mode: soft-light; }
.grade--dusk { background: linear-gradient(180deg, #2a3f7a 0%, #33406e 50%, #3c3352 100%); mix-blend-mode: multiply; }
.grade--lift { background: linear-gradient(180deg, rgba(150, 160, 205, .55), rgba(190, 150, 120, .45)); mix-blend-mode: screen; }
.grade--dim { background: rgba(7, 10, 16, .5); }
.haze {
  position: absolute;
  left: -20%;
  right: -20%;
  top: -60%;
  height: 220%;
  opacity: 0;
  will-change: transform, opacity;
  background:
    radial-gradient(30% 9% at 26% 24%, rgba(250, 238, 222, .9), rgba(250, 238, 222, 0) 70%),
    radial-gradient(36% 11% at 74% 33%, rgba(244, 232, 218, .92), rgba(244, 232, 218, 0) 70%),
    radial-gradient(44% 12% at 38% 47%, rgba(236, 230, 226, .95), rgba(236, 230, 226, 0) 72%),
    radial-gradient(34% 9% at 80% 57%, rgba(248, 226, 200, .85), rgba(248, 226, 200, 0) 70%),
    radial-gradient(40% 11% at 22% 66%, rgba(238, 224, 208, .9), rgba(238, 224, 208, 0) 70%),
    radial-gradient(46% 12% at 64% 78%, rgba(242, 218, 192, .85), rgba(242, 218, 192, 0) 70%),
    linear-gradient(180deg, rgba(210, 206, 214, 0) 0%, rgba(214, 208, 210, .62) 26%, rgba(222, 206, 190, .66) 74%, rgba(210, 180, 150, 0) 100%);
}
.vignette { position: absolute; inset: -48px; pointer-events: none; background: radial-gradient(ellipse 120% 90% at 50% 45%, rgba(7, 10, 16, 0) 45%, rgba(7, 10, 16, .45) 100%); }
.track { position: relative; z-index: 1; margin-top: -100vh; margin-top: -100svh; }

/* The first frame: role, name and gloss in the Moon's sky, above the Earth. The three lines rise once; then it rests. */
.edge { height: 100vh; height: 100svh; padding: calc(var(--bar-top) + 56px + clamp(20px, 3.4vh, 40px)) max(var(--gutter), env(safe-area-inset-left, 0px)) 0; }
.hero { max-width: var(--max); margin-inline: auto; text-shadow: var(--tshadow); }
.hero-type { transform: translate3d(var(--tx, 0px), 0, 0); }
.role { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 15px; color: var(--soft); }
.role .slash { color: var(--muted); }
.name {
  margin-top: 14px;
  font-family: 'Unbounded', 'Unbounded Fallback', var(--sans);
  font-weight: 600;
  /* The name is 5.9em wide in Unbounded: sized so it always keeps the page's side padding (390, 375, any phone). */
  font-size: min(116px, calc((100vw - 2 * max(var(--gutter), env(safe-area-inset-left, 0px))) / 5.45));
  line-height: .98;
  letter-spacing: -.062em;
  white-space: nowrap;
}
.gloss { max-width: 30ch; margin-top: 18px; font-size: clamp(17px, 1.6vw, 21px); line-height: 1.4; color: var(--ink); }
@media (orientation: landscape) { .edge { padding-top: calc(var(--bar-top) + 56px + clamp(28px, 8vh, 96px)); } }
html.js .layer--moon .frame img { animation: settle 700ms var(--ease-out) 150ms both; }
html.js .hero-type > * { animation: rise 420ms var(--ease-out) both; }
html.js .hero-type > :nth-child(1) { animation-delay: 220ms; }
html.js .hero-type > :nth-child(2) { animation-delay: 280ms; }
html.js .hero-type > :nth-child(3) { animation-delay: 340ms; }
@keyframes settle { from { transform: translateY(12px) scale(1.04); } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }

/* Passages carry no words: the camera works alone. */
.passage--a { height: 140vh; height: 140svh; }
.passage--b { height: 130vh; height: 130svh; }
.passage--c { height: 160vh; height: 160svh; }
.passage--d { height: 160vh; height: 160svh; }
.passage--land { height: 80vh; height: 80svh; }

/* Chapters: one venture each, full screen, its own mark first. On a phone the card sits low over the still; on a wide
   screen it holds the left column beside the framed still. */
.chapter { display: flex; align-items: flex-end; min-height: 100vh; min-height: 100svh; padding: 0 max(var(--gutter), env(safe-area-inset-left, 0px)) calc(104px + env(safe-area-inset-bottom, 0px)); }
.chapter-inner { width: 100%; max-width: var(--max); margin-inline: auto; }
@media (orientation: landscape) {
  .chapter { align-items: center; padding-bottom: 0; }
}
/* Liquid Glass, as a labeled web approximation of Apple's 2026 OS material: a light, clear pane that bends the scene
   (blur, saturation) and darkens it only as much as the type needs, a bright specular rim on top, a soft inner glow
   below and a lifted shadow. The scene stays readable through it. */
.card {
  position: relative;
  max-width: 520px;
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: calc(var(--r) + 8px);
  background: linear-gradient(160deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .05) 38%, rgba(255, 255, 255, .03) 100%), rgba(14, 18, 28, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(255, 255, 255, .12), inset 0 0 24px rgba(255, 255, 255, .06), 0 24px 70px rgba(0, 0, 0, .3);
  -webkit-backdrop-filter: blur(18px) saturate(185%) brightness(.74);
  backdrop-filter: blur(18px) saturate(185%) brightness(.74);
  text-shadow: 0 1px 2px rgba(5, 7, 12, .45);
}
.card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(120% 70% at 12% -10%, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 55%); }
.card::after { content: ''; position: absolute; inset: 4px; border: 1px solid rgba(255, 255, 255, .08); border-radius: calc(var(--r) + 4px); pointer-events: none; }
html.js .card { opacity: 0; transform: translateY(12px) scale(.98); transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out); }
html.js .card.in { opacity: 1; transform: none; }
.logo { margin: 0; line-height: 0; }
.logo img { width: auto; height: auto; max-width: 100%; }
.logo--usta img { width: min(260px, 64vw); }
.logo--ermut img { width: min(320px, 72vw); }
.logo--orkhon img { width: min(340px, 74vw); }
.logo--bora img { width: min(230px, 58vw); }
.by { margin-top: 14px; font-size: 14px; letter-spacing: .02em; color: var(--soft); }
.line { max-width: 34ch; margin-top: 18px; font-size: clamp(20px, 1.9vw, 24px); font-weight: 500; line-height: 1.35; color: var(--ink); text-wrap: pretty; }
.note { max-width: 44ch; margin-top: 14px; font-size: 15.5px; line-height: 1.5; color: var(--soft); }
.note strong { color: var(--ink); font-weight: 650; }
.go {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  margin-top: 24px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
  font-size: 15px;
  font-weight: 600;
  transition: transform 120ms var(--ease-out), background-color 160ms ease;
}

/* After the pin: the ground. Writing, the book and a way to write, small and plain. */
.ground { position: relative; z-index: 2; padding: clamp(72px, 11vh, 128px) max(var(--gutter), env(safe-area-inset-left, 0px)) clamp(56px, 9vh, 104px); background: rgba(7, 10, 16, .94); }
.ground-inner { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: clamp(32px, 4vw, 64px); max-width: var(--max); margin-inline: auto; }
.ground h2 { max-width: 14ch; font-size: clamp(30px, 3.4vw, 46px); font-weight: 650; line-height: 1.06; letter-spacing: -.03em; text-wrap: balance; }
.ground h3 { font-size: 21px; font-weight: 650; letter-spacing: -.02em; line-height: 1.25; }
.kicker { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.kicker + h3 { margin-top: 10px; }
.sub { margin-top: 4px; color: var(--muted); }
.links { display: flex; flex-direction: column; gap: 4px; margin-top: 18px; }
.links a { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-height: 44px; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.links small { display: block; font-size: 13.5px; color: var(--muted); }
.ground .go { margin-top: 26px; }
.go .domain { font-weight: 400; color: var(--accent); white-space: nowrap; }  /* the URL and its arrow never part */
.email { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 14px; font-size: clamp(19px, 1.8vw, 23px); font-weight: 600; color: var(--accent); }
.socials { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 8px; }
.socials a { display: inline-flex; align-items: center; min-height: 44px; color: var(--soft); }
.foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding: 28px max(var(--gutter), env(safe-area-inset-left, 0px)) calc(28px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: 14px;
  color: var(--muted);
}
.foot nav { display: flex; gap: 8px; }
.foot a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 12px; color: var(--ink); transition: transform 120ms var(--ease-out); }

@media (max-width: 900px) {
  .ground-inner { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  html { scroll-padding-top: 80px; }
  .nav, .lang { display: none; }
  .menu-button { display: flex; }
  .card { padding: 24px 20px; }
  .foot { flex-direction: column; align-items: flex-start; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .edge { padding-top: calc(var(--bar-top) + 70px); }
  .name { font-size: min(72px, calc((100vw - 2 * var(--gutter)) / 5.75)); }
}

/* Reduced motion: no positional motion anywhere; the stills change with a 200ms opacity crossfade only. */
html.reduce .layer, html.reduce .hero-type, html.reduce .film, html.reduce .sheet { transform: none !important; }
html.reduce .layer { transition: opacity 200ms linear; }
html.reduce .haze, html.reduce .grade--warm, html.reduce .grade--dusk, html.reduce .grade--lift { opacity: 0 !important; }
html.reduce .layer { opacity: 0 !important; }
html.reduce[data-scene='moon'] .layer--moon, html.reduce[data-scene='earth'] .layer--earth, html.reduce[data-scene='near'] .layer--near, html.reduce[data-scene='sierra'] .layer--sierra, html.reduce[data-scene='reno'] .layer--reno { opacity: 1 !important; }
html.reduce .layer .grade--dim { opacity: 1 !important; }
@media (prefers-reduced-motion: reduce) {
  html.js .layer--moon .frame img, html.js .hero-type > * { animation: none; }
  html.js .card { transform: none; transition: opacity 200ms linear; }
  .sheet { transform: none; transition: opacity 200ms linear; }
  .arrow, .nav a, .lang, .menu-button, .sheet a, .go, .foot a, .wordmark-text { transition: none; }
  .nav a:active, .lang:active, .menu-button:active, .wordmark:active, .sheet a:active, .go:active, .foot a:active { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .glass, .card { background: rgba(18, 24, 34, .96); -webkit-backdrop-filter: none; backdrop-filter: none; }
}