/*
  base.css
  Design tokens, reset, typography, buttons, forms and shared utilities for
  the Pardes theme. Every colour, font and spacing value in the theme comes
  from the custom properties at the top. In the Shopify theme these are
  written by snippets/css-variables.liquid from the theme settings. In the
  preview they are set inline in preview/index.html.
*/

:root {
  /* Colours (theme settings) */
  --color-background: #F6EFE3;
  --color-text: #1F1F1F;
  --color-text-muted: #6B655C;
  --color-marigold: #E8A317;
  /* Marigold dark enough to read as small text on cream (5.6 to 1). The bright one is for decoration only. */
  --color-marigold-text: #855600;
  --color-maroon: #6B1E2E;
  --color-indigo: #2E3A6B;
  --color-cinema-dark: #121110;
  --color-cinema-text: #F6EFE3;
  --color-border: rgba(31, 31, 31, 0.14);
  --color-surface: #EFE6D6;
  --color-success: #3F6B3A;
  --color-error: #9A2B2B;

  /* The one accent used across the page */
  --color-accent: var(--color-marigold);

  /* Typography (theme settings) */
  --font-heading: "Cormorant Garamond", "Cormorant Fallback", "Times New Roman", serif;
  --font-body: "DM Sans", "DM Sans Fallback", "Helvetica Neue", Arial, sans-serif;
  --font-devanagari: "Noto Serif Devanagari", "Kohinoor Devanagari", "Devanagari MT", serif;
  --type-scale: 1.25;
  --heading-tracking: -0.01em;

  /* Fluid type. Steps follow the scale from a 17px base on phones to 18px on desktop. */
  --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.84rem + 0.15vw, 0.9375rem);
  --text-base: clamp(1.0625rem, 1.02rem + 0.2vw, 1.125rem);
  --text-lg: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.25rem + 1.2vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.5rem + 2.2vw, 3.25rem);
  --text-3xl: clamp(2.5rem, 1.6rem + 4vw, 4.75rem);
  --text-4xl: clamp(3.25rem, 1.5rem + 8vw, 8rem);

  /* Layout (theme settings) */
  --page-width: 1440px;
  --gutter: clamp(1rem, 4vw, 3rem);
  --grid-gap: clamp(0.75rem, 2vw, 1.5rem);
  --section-space: clamp(5rem, 12vw, 10rem);
  --radius: 2px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 180ms;
  --duration: 420ms;
  --duration-slow: 900ms;

  /* Layers */
  --header-height: 68px;
  --z-header: 50;
  --z-drawer: 70;
  --z-overlay: 60;
  --z-festival: 40;

  /* Texture */
  --jaali-opacity: 0.06;

  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration: 0ms;
    --duration-slow: 0ms;
  }
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
address { font-style: normal; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-text); outline-offset: 3px; border-radius: var(--radius); }
.on-dark :focus-visible { outline-color: var(--color-cinema-text); }
::selection { background: var(--color-marigold); color: var(--color-text); }

/* Typography */
.h1, .h2, .h3, .h4, .display {
  font-family: var(--font-heading);
  font-weight: 500;
  letter-spacing: var(--heading-tracking);
  line-height: 1.05;
  text-wrap: balance;
}
.display { font-size: var(--text-4xl); line-height: 0.95; font-weight: 400; }
.h1 { font-size: var(--text-3xl); }
.h2 { font-size: var(--text-2xl); }
.h3 { font-size: var(--text-xl); line-height: 1.15; }
.h4 { font-size: var(--text-lg); line-height: 1.25; }
.lead { font-size: var(--text-lg); line-height: 1.45; font-weight: 400; }
.muted { color: var(--color-text-muted); }
.small { font-size: var(--text-sm); }
.devanagari, [lang="hi"] { font-family: var(--font-devanagari); font-weight: 400; line-height: 1.3; }
.measure { max-width: 60ch; }
.measure-narrow { max-width: 34ch; }
.italic { font-style: italic; }
em { font-style: italic; }
.body-link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: text-decoration-thickness var(--duration-fast); }
.body-link:hover { text-decoration-thickness: 2px; }

/* Layout */
.container { width: 100%; max-width: var(--page-width); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-space); }
.section--tight { padding-block: calc(var(--section-space) * 0.6); }
.section--flush-top { padding-top: 0; }
.section--dark { background: var(--color-cinema-dark); color: var(--color-cinema-text); }
.on-dark { color: var(--color-cinema-text); }
.grid { display: grid; gap: var(--grid-gap); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[id] { scroll-margin-top: 84px; }
.skip-link { position: absolute; left: var(--gutter); top: -100px; z-index: 100; background: var(--color-text); color: var(--color-background); padding: 0.6rem 1rem; border-radius: var(--radius); }
.skip-link:focus { top: 1rem; }

/* Jaali texture, used in three places only */
.texture-jaali { position: relative; isolation: isolate; }
.texture-jaali::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--jaali-url);
  background-size: 96px 96px;
  opacity: var(--jaali-opacity);
  pointer-events: none;
}
.texture-jaali--dark::before { filter: invert(1); }
html[data-jaali-texture="false"] .texture-jaali::before { display: none; }

/* Buttons. All share one shape: a 2px radius, 48px tall, one line of text. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: 0 1.6rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast), border-color var(--duration-fast), transform var(--duration-fast);
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--color-text); color: var(--color-background); border-color: var(--color-text); }
.btn--primary:hover { background: #000; }
.btn--secondary { background: transparent; color: var(--color-text); border-color: var(--color-text); }
.btn--secondary:hover { background: var(--color-text); color: var(--color-background); }
.on-dark .btn--primary { background: var(--color-cinema-text); color: var(--color-cinema-dark); border-color: var(--color-cinema-text); }
.on-dark .btn--primary:hover { background: #fff; }
.on-dark .btn--secondary { color: var(--color-cinema-text); border-color: rgba(246, 239, 227, 0.6); }
.on-dark .btn--secondary:hover { background: var(--color-cinema-text); color: var(--color-cinema-dark); border-color: var(--color-cinema-text); }
.btn--full { width: 100%; }
.btn[aria-busy="true"] { opacity: 0.7; pointer-events: none; }
.text-link { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--text-sm); font-weight: 500; }
.text-link .icon { transition: transform var(--duration-fast) var(--ease-out); }
.text-link:hover .icon { transform: translateX(4px); }
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; transition: background var(--duration-fast); }
.icon-btn:hover { background: rgba(31, 31, 31, 0.06); }
.on-dark .icon-btn:hover { background: rgba(246, 239, 227, 0.1); }
.icon { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.icon--sm { width: 16px; height: 16px; }

/* Forms. Label above, helper or error below. */
.field { display: grid; gap: 0.4rem; }
.field__label { font-size: var(--text-sm); font-weight: 500; }
.field__input {
  width: 100%;
  min-height: 48px;
  padding: 0 0.9rem;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid var(--color-text);
  border-radius: var(--radius);
  color: var(--color-text);
}
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.field__input::placeholder { color: var(--color-text-muted); }
.field__input:focus-visible { outline-offset: 2px; }
.field__hint { font-size: var(--text-xs); color: var(--color-text-muted); }
.field__error { font-size: var(--text-xs); color: var(--color-error); }
.on-dark .field__input { background: rgba(246, 239, 227, 0.06); border-color: rgba(246, 239, 227, 0.6); color: var(--color-cinema-text); }
.on-dark .field__input::placeholder { color: rgba(246, 239, 227, 0.6); }
.form-inline { display: grid; grid-template-columns: 1fr; gap: 0.6rem; }
@media (min-width: 640px) { .form-inline { grid-template-columns: 1fr auto; } }
.form-message { font-size: var(--text-sm); margin-top: 0.6rem; }
.form-message--success { color: var(--color-success); }
.form-message--error { color: var(--color-error); }
.on-dark .form-message--success { color: #B9D5B3; }

/* Labels */
.label {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.label--accent { color: var(--color-marigold-text); }
.badge {
  display: inline-block;
  padding: 0.3rem 0.6rem;
  background: var(--color-background);
  color: var(--color-text);
  font-size: var(--text-xs);
  font-weight: 500;
  border-radius: var(--radius);
}
.badge--muted { background: var(--color-surface); color: var(--color-text-muted); }

/* Drawers and overlays */
.overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: rgba(18, 17, 16, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration) var(--ease-out);
}
.overlay.is-open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: var(--z-drawer);
  width: min(100%, 440px);
  background: var(--color-background);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--duration-slow) var(--ease-out);
  visibility: hidden;
}
.drawer.is-open { transform: translateX(0); visibility: visible; }
.drawer--right { right: 0; }
.drawer--left { left: 0; transform: translateX(-100%); }
.drawer--top { top: 0; left: 0; right: 0; bottom: auto; width: 100%; transform: translateY(-100%); }
.drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem var(--gutter); border-bottom: 1px solid var(--color-border); min-height: 72px; }
.drawer__body { flex: 1; overflow-y: auto; padding: 1.25rem var(--gutter); overscroll-behavior: contain; }
.drawer__foot { padding: 1rem var(--gutter) calc(1rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--color-border); }

/* Jaali divider: an SVG line that draws itself on scroll */
.jaali-divider { display: block; width: 100%; height: auto; color: var(--color-text); opacity: 0.55; margin-inline: auto; }
.jaali-divider--narrow { max-width: 320px; }
.jaali-divider--wide { max-width: 720px; }
.on-dark .jaali-divider { color: var(--color-cinema-text); }
.jaali-divider path { stroke: currentColor; stroke-width: 1; fill: none; }
html[data-jaali-dividers="true"] .jaali-divider path[data-draw] { stroke-dasharray: var(--len, 1000); stroke-dashoffset: var(--len, 1000); }
@media (prefers-reduced-motion: reduce) { .jaali-divider path[data-draw] { stroke-dashoffset: 0 !important; } }

/* Line drawings that draw themselves: kolam, lotus, jaali, vine, paisley, arch. Made by effects/linework.js.
   Each kind has a fixed width here so its space is held before the script fills it. */
.linework { display: block; line-height: 0; pointer-events: none; }
.linework svg { display: block; width: 100%; height: auto; overflow: visible; }
/* Flat line ends: a round end would show as a stray dot at the start of a line that has not been drawn yet. */
.linework path { fill: none; stroke: currentColor; stroke-linecap: butt; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset var(--linework-dur, 2.4s) cubic-bezier(0.45, 0.05, 0.25, 1) calc(var(--linework-delay, 0s) + var(--i, 0) * var(--linework-step, 0.22s)); }
.linework circle { fill: currentColor; opacity: 0; transition: opacity 0.7s ease calc(var(--linework-delay, 0s) + var(--d, 0) * 1.1s); }
.linework.is-drawn path { stroke-dashoffset: 0; }
.linework.is-drawn circle { opacity: 0.4; }
@media (prefers-reduced-motion: reduce) { .linework path, .linework circle { transition: none; } }
/* A small drawing above a heading */
.linework--mark { width: 64px; }
.linework--mark-tall { width: 48px; }
/* A chain or vine under a title. It sits in the title's own padding, so the page does not move when it arrives. */
.page-head__title, .col-banner__title { position: relative; padding-bottom: 2.75rem; }
:has(> .linework--rule) { position: relative; padding-bottom: 2.75rem; }
.linework--rule { position: absolute; left: -4px; bottom: 0.3rem; width: 208px; --linework-delay: 0.3s; --linework-dur: 2s; }
.linework--rule-vine { width: 148px; bottom: 0; --linework-delay: 0s; }
:has(> .linework--rule-vine) { padding-bottom: 3.1rem; }
/* Above the Devanagari word on the home hero */
.hero__word { position: relative; }
.linework--hero { position: absolute; left: -6px; bottom: calc(100% + 1rem); width: clamp(120px, 13vw, 184px); --linework-delay: 0.4s; --linework-dur: 4.5s; }
.linework--story { width: clamp(132px, 17vw, 208px); margin-bottom: 1.5rem; color: var(--color-maroon); }
.linework--lost { width: clamp(140px, 24vw, 196px); color: var(--color-maroon); margin-bottom: 0.5rem; }
.linework--empty { width: 128px; }
.linework--empty-tall { width: 76px; }
.linework--menu { margin: 2.25rem 0 0; }
.linework--divider { width: 100%; margin-top: 3rem; opacity: 0.6; --linework-dur: 3.6s; }
.linework--divider + .footer__bottom { border-top: 0; margin-top: 0.5rem; padding-top: 0; }
.linework--tick { display: inline-block; width: 26px; margin-right: 0.5rem; vertical-align: -7px; --linework-dur: 1.1s; }

/* The backdrop: one very large drawing fixed behind the whole page. It is under every photo and
   block, and faint, so it only shows in open space and never competes with the words. */
.backdrop { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; color: var(--color-text); }
.linework--backdrop { position: absolute; top: 50%; right: -14vh; width: min(112vh, 1080px); opacity: 0.2; transform: translateY(-50%) rotate(var(--turn, 0deg)); }
.backdrop--left .linework--backdrop { right: auto; left: -22vh; }
.backdrop--arch .linework--backdrop { width: min(64vh, 600px); right: 5vw; top: 55%; transform: translateY(-50%); }
.backdrop--paisley .linework--backdrop { width: min(70vh, 660px); right: 2vw; transform: translateY(-50%) rotate(14deg); }
.backdrop--field .linework--backdrop, .backdrop--jaali-field .linework--backdrop { transform: translateY(-50%); }
.backdrop--bandhani .linework--backdrop { opacity: 0.3; }
.backdrop--paisley .linework--backdrop { animation: backdrop-drift 16s ease-in-out infinite alternate; }
.backdrop--lamp .linework--backdrop, .backdrop--bloom .linework--backdrop { width: min(66vh, 620px); right: 4vw; transform: translateY(-50%); }
/* Down the edge of the page: the vine on FAQ, the tape measure on the size guide */
.backdrop--edge .linework--backdrop { top: 0; right: 4px; width: auto; height: 100vh; transform: none; opacity: 0.36; }
/* Across the whole screen: the parcel's path on the shipping page */
.backdrop--wide .linework--backdrop { top: 50%; right: 4vw; width: 92vw; max-width: none; opacity: 0.26; transform: translateY(-46%); }
.linework__head { fill: var(--color-maroon); opacity: 0; transition: opacity 0.4s ease; }
.linework--backdrop.is-lit circle:not(.linework__head) { opacity: 0.8; }
/* Diwali: the ring of dots are lamps. Marigold, and each one flickers at its own pace. */
.backdrop--lotus-lamps .linework--backdrop { opacity: 0.3; }
.backdrop--lotus-lamps circle { fill: var(--color-marigold); }
.backdrop--lotus-lamps .is-lit circle { animation: lamp-flicker 2.8s ease-in-out infinite; animation-delay: calc(var(--n, 0) * -0.47s); }
@keyframes backdrop-drift { from { transform: translateY(-52%) rotate(11deg); } to { transform: translateY(-47%) rotate(17deg); } }
@keyframes lamp-flicker { 0%, 100% { opacity: 0.9; } 45% { opacity: 0.35; } 70% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .backdrop--paisley .linework--backdrop, .backdrop--lotus-lamps circle { animation: none; } }

/* Our Story: the thread sewn down the page (effects/linework.js), and photos that open like a curtain. */
.thread { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: -1; pointer-events: none; }
.thread path { fill: none; stroke: var(--color-maroon); stroke-width: 1.5; opacity: 0.55; }
.thread circle { fill: var(--color-maroon); transition: opacity 0.3s ease; }
.chapter__media.will-reveal { clip-path: inset(0 0 100% 0); transition: clip-path 1.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
.chapter:nth-child(even) .chapter__media.will-reveal { clip-path: inset(0 100% 0 0); }
.chapter__media.will-reveal img { transform: scale(1.12); transition: transform 1.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
.chapter__media.will-reveal.is-revealed, .chapter:nth-child(even) .chapter__media.will-reveal.is-revealed { clip-path: inset(0); }
.chapter__media.will-reveal.is-revealed img { transform: none; }
.linework--backdrop path { transition: stroke-dashoffset 2.4s cubic-bezier(0.3, 0.6, 0.3, 1); }
.linework--backdrop.is-following path { transition-duration: 0.5s; transition-timing-function: ease-out; }
@media (max-width: 767px) {
  .linework--backdrop { width: 150vw; right: -58vw; opacity: 0.15; }
  .backdrop--left .linework--backdrop { left: -58vw; }
  .backdrop--arch .linework--backdrop, .backdrop--paisley .linework--backdrop, .backdrop--lamp .linework--backdrop, .backdrop--bloom .linework--backdrop { width: 82vw; right: -22vw; }
  .backdrop--edge .linework--backdrop { right: -12px; width: auto; opacity: 0.24; }
  .backdrop--wide .linework--backdrop { width: 150vw; right: -30vw; opacity: 0.2; }
}

/* The opening. A plain cover is painted from the first frame, then effects/linework.js draws on it
   and opens it. If the script never runs the cover leaves by itself. */
html.has-intro body::before { content: ""; position: fixed; inset: 0; z-index: 200; background: #101918; animation: intro-leave 0.6s ease 4.5s forwards; }
html.intro-live body::before, html.intro-done body::before { display: none; }
.intro { position: fixed; inset: 0; z-index: 201; display: grid; place-items: center; background: #101918; color: #EFE5D0; }
.intro.is-done { opacity: 0; transition: opacity 0.7s ease; }
.intro__stage { position: relative; width: min(66vw, calc(min(62vh, 560px) * 116 / 166)); aspect-ratio: 116 / 166; margin-bottom: 4vh; will-change: transform; }
.intro__door { position: absolute; inset: 0; background: #101918; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; transition: opacity 1.3s ease; }
.intro.is-opening .intro__door { opacity: 0; }
.intro__arch { position: absolute; inset: 0; --linework-dur: 1.2s; --linework-step: 0.16s; }
.intro__kolam { position: absolute; left: 50%; top: 50%; width: 62%; transform: translate(-50%, -50%); transition: top 1s cubic-bezier(0.7, 0, 0.2, 1), transform 1s cubic-bezier(0.7, 0, 0.2, 1), opacity 0.4s ease; --linework-dur: 1.6s; }
.intro.p2 .intro__kolam { top: 104%; transform: translate(-50%, -50%) scale(0.4); }
.intro__hi, .intro__word { position: absolute; left: 50%; top: 61%; transform: translate(-50%, -50%); white-space: nowrap; line-height: 1.2; }
.intro__hi { font-family: var(--font-devanagari); font-size: clamp(1.7rem, 6.2vw, 2.7rem); opacity: 0; filter: blur(8px); transition: opacity 0.6s ease, filter 0.6s ease; }
.intro.p3 .intro__hi { opacity: 1; filter: none; }
.intro.p4 .intro__hi { opacity: 0; filter: blur(10px); transition-duration: 0.45s; }
.intro__word { font-family: var(--font-heading); font-weight: 500; font-size: clamp(1.05rem, 3.6vw, 1.8rem); letter-spacing: 0.36em; padding-left: 0.36em; transition: opacity 0.3s ease; }
.intro__word span { display: inline-block; opacity: 0; transform: translateY(0.7em); transition: opacity 0.5s ease calc(0.2s + var(--i) * 70ms), transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) calc(0.2s + var(--i) * 70ms); }
.intro.p4 .intro__word span { opacity: 1; transform: none; }
.intro.is-opening .intro__word, .intro.is-opening .intro__kolam, .intro.is-opening .intro__hi { opacity: 0; }
.intro.is-opening .intro__word { transition: opacity 0.7s ease; }
/* While the doorway opens the page behind it eases into place, and the first words rise in after. */
html.intro-opening main { animation: intro-arrive 2.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; transform-origin: 50% 45vh; }
html.intro-opening-fast main { animation: intro-arrive 1s cubic-bezier(0.2, 0.7, 0.2, 1) both; transform-origin: 50% 45vh; }
html.intro-opening .hero__content > *, html.intro-opening .page-head > *, html.intro-opening .col-banner__inner > *, html.intro-opening .lost__inner > * { animation: intro-rise 1s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: 1.25s; }
html.intro-opening :is(.hero__content, .page-head, .col-banner__inner, .lost__inner) > :nth-child(2) { animation-delay: 1.4s; }
html.intro-opening :is(.hero__content, .page-head, .col-banner__inner, .lost__inner) > :nth-child(3) { animation-delay: 1.55s; }
html.intro-opening :is(.hero__content, .page-head, .col-banner__inner, .lost__inner) > :nth-child(n+4) { animation-delay: 1.7s; }
@keyframes intro-arrive { from { transform: scale(1.07); } to { transform: none; } }
@keyframes intro-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes intro-leave { to { opacity: 0; visibility: hidden; } }

/* Word reveal: hidden until the module splits and reveals. If the module never runs, text stays visible. */
html[data-word-reveal="true"] [data-reveal-words].is-split .word { display: inline-block; opacity: 0; transform: translateY(0.4em); transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out); }
html[data-word-reveal="true"] [data-reveal-words].is-split.is-visible .word { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal-words] .word { opacity: 1 !important; transform: none !important; } }

/* Festival mode: a warm glow breathing at the page edges, CSS only */
html[data-festival="true"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-festival);
  pointer-events: none;
  background:
    radial-gradient(60% 40% at 50% -10%, rgba(232, 163, 23, calc(var(--festival-strength, 3) * 0.035)), transparent 70%),
    radial-gradient(60% 40% at 50% 110%, rgba(232, 163, 23, calc(var(--festival-strength, 3) * 0.03)), transparent 70%);
  animation: festival-breathe 7s var(--ease-in-out) infinite alternate;
}
@keyframes festival-breathe { from { opacity: 0.7; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { html[data-festival="true"] body::after { animation: none; } }

/* Page transition fade */
html[data-page-transitions="true"].is-leaving main { opacity: 0; transition: opacity 350ms var(--ease-out); }