/* ==========================================================================
   GMMN e.V. — shared/styles.css
   Design system: warm paper, oxblood, editorial serif + geometric sans.
   Loaded BEFORE the Tailwind CDN runtime, so utility overrides below are
   written with a deliberate specificity bump (body .x) to win the cascade.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */

:root {
  --paper:        #FBF7F3;
  --paper-soft:   #F3EBE3;
  --paper-deep:   #F1E8DF;
  --ink:          #2A121A;
  --muted:        #6E5C5E;
  --ox:           #7A2436;
  --ox-dark:      #5B1726;
  --ox-tint:      #F7EAE9;
  --ox-glow:      #C1697A;
  --rule:         #E8DCD2;

  --shadow-card:  0 1px 2px rgba(42, 18, 26, .04), 0 14px 32px -20px rgba(42, 18, 26, .22);
  --shadow-lift:  0 2px 4px rgba(42, 18, 26, .05), 0 28px 56px -28px rgba(42, 18, 26, .32);

  --ease:         cubic-bezier(.22, .78, .24, 1);
  --ease-out:     cubic-bezier(.16, 1, .3, 1);

  /* Motion scale */
  --dur-1: .18s;   /* state flips: colour, opacity            */
  --dur-2: .35s;   /* controls: hover lift, focus ring        */
  --dur-3: .55s;   /* panels: menus, tilts, sheens            */
  --dur-4: .9s;    /* entrances: reveals, draw-ins            */

  /* Radius scale — matches the Tailwind steps already in the markup */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-full: 999px;

  /* Elevation */
  --e-0: none;
  --e-1: 0 1px 2px rgba(42, 18, 26, .04);
  --e-2: 0 1px 2px rgba(42, 18, 26, .04), 0 14px 32px -20px rgba(42, 18, 26, .22);
  --e-3: 0 2px 4px rgba(42, 18, 26, .05), 0 28px 56px -28px rgba(42, 18, 26, .32);

  /* Live values, written by shared/app.js on every frame. */
  --scroll:       0;    /* 0 → 1 document progress                */
  --spin:         0;    /* ever-increasing degrees, for slow rotation */
  --vel:          0;    /* -1 → 1 smoothed scroll velocity        */
  --mx:           50%;  /* pointer x inside the hovered card      */
  --my:           50%;  /* pointer y inside the hovered card      */
}

@property --scroll { syntax: '<number>'; initial-value: 0; inherits: true; }
@property --vel    { syntax: '<number>'; initial-value: 0; inherits: true; }
@property --spin   { syntax: '<number>'; initial-value: 0; inherits: true; }

/* ---------- 2. Base ------------------------------------------------------ */

html {
  background: var(--paper);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: transparent;           /* lets the ambient layer read through */
  color: var(--ink);
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection { background: var(--ox); color: #fff; }

/* Typography refinements the utilities cannot express. */
.font-display {
  font-optical-sizing: auto;
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  letter-spacing: -.018em;
  text-wrap: balance;
}
.font-display .italic, .font-display em, em.italic { font-variation-settings: 'SOFT' 12, 'WONK' 1; }
p { text-wrap: pretty; }

body .muted { color: var(--muted); }
body .text-ink { color: var(--ink); }
body .text-oxblood { color: var(--ox); }
body .bg-oxblood { background-color: var(--ox); }
body .hover\:bg-oxbloodDark:hover { background-color: var(--ox-dark); }
body .border-oxblood { border-color: var(--ox); }

/* Hairlines. `.rule` also colours the children of `divide-y rule`. */
.rule { border-color: var(--rule); }
.rule > * { border-color: var(--rule); }

/* Translucent surfaces — this is what keeps the background alive behind
   every section instead of only in the hero. */
body .bg-paper      { background-color: color-mix(in srgb, var(--paper) 88%, transparent); }
body .bg-paperSoft  { background-color: color-mix(in srgb, var(--paper-soft) 82%, transparent); }
body .bg-oxbloodTint{ background-color: color-mix(in srgb, var(--ox-tint) 78%, transparent); }
body .bg-paper\/90  { background-color: color-mix(in srgb, var(--paper) 72%, transparent); }
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  body .bg-paper       { background-color: var(--paper); }
  body .bg-paperSoft   { background-color: var(--paper-soft); }
  body .bg-oxbloodTint { background-color: var(--ox-tint); }
}

/* Focus: one ring, everywhere, always visible. */
.focus-ring:focus-visible,
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--ox);
  outline-offset: 3px;
  border-radius: 6px;
}
.focus-ring:focus:not(:focus-visible) { outline: none; }

/* ---------- 3. The living background ------------------------------------ */

.ambient {
  position: fixed;
  inset: -10vh -10vw;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
  transition: filter 1.4s var(--ease);
  will-change: filter;
}

/* Warm paper gradient that deepens as the page is consumed. */
.amb-base {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      var(--paper) 0%,
      color-mix(in srgb, var(--paper-soft) 60%, var(--paper)) 55%,
      var(--paper-deep) 100%);
  opacity: calc(.30 + var(--scroll) * .50);
}

/* Three oxblood blooms. The wrapper carries the scroll transform, the
   ::before carries an independent slow drift, so they compose cleanly. */
.amb-bloom { position: absolute; will-change: transform; }
.amb-bloom::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  filter: blur(90px);
  animation: drift 34s var(--ease) infinite alternate;
}
.amb-bloom--1 {
  top: -14vh; left: -6vw; width: 58vw; height: 58vw;
  transform: translate3d(calc(var(--scroll) * 8vw), calc(var(--scroll) * -34vh), 0)
             scale(calc(1 + var(--scroll) * .28));
}
.amb-bloom--1::before {
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--ox) 12%, transparent), transparent 68%);
}
.amb-bloom--2 {
  top: 26vh; right: -18vw; width: 62vw; height: 62vw;
  transform: translate3d(calc(var(--scroll) * -10vw), calc(var(--scroll) * -18vh), 0)
             scale(calc(1 + var(--scroll) * .18));
}
.amb-bloom--2::before {
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--ox-glow) 15%, transparent), transparent 66%);
  animation-duration: 46s; animation-direction: alternate-reverse;
}
.amb-bloom--3 {
  bottom: -26vh; left: 22vw; width: 54vw; height: 54vw;
  transform: translate3d(0, calc(var(--scroll) * -46vh), 0);
}
.amb-bloom--3::before {
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--ox) 10%, transparent), transparent 70%);
  animation-duration: 40s;
}

/* Girih tessellation — the house pattern. Parallaxes and rotates a few
   degrees across the full scroll, so the page never feels static. */
.amb-field {
  position: absolute; inset: -30vh -30vw;
  background-image: var(--girih);
  background-size: 300px 300px;
  opacity: calc(.18 + var(--scroll) * .12);
  transform: translate3d(calc(var(--vel) * 1.2vw), calc(var(--scroll) * -16vh), 0)
             rotate(calc(var(--scroll) * 5deg))
             scale(calc(1.06 + var(--scroll) * .16));
  will-change: transform, opacity;
}

/* A horizon glow that rises out of the footer as you reach the end. */
.amb-horizon {
  position: absolute; left: -10vw; right: -10vw; bottom: -30vh; height: 70vh;
  background: radial-gradient(60% 100% at 50% 100%,
    color-mix(in srgb, var(--ox) 17%, transparent), transparent 72%);
  filter: blur(40px);
  opacity: calc(var(--scroll) * var(--scroll) * .9);
  transform: translate3d(0, calc(var(--scroll) * -14vh), 0);
}

/* Paper tooth. Static, cheap, and it ties the whole palette together. */
.amb-grain {
  position: absolute; inset: 0;
  background-image: var(--grain);
  opacity: .22;
  mix-blend-mode: multiply;
}

/* Section-driven mood. app.js sets data-zone on <html>; each zone nudges the
   whole ambient stack a few degrees warmer or deeper. */
html[data-zone='1'] .ambient { filter: hue-rotate(-6deg) saturate(1.05); }
html[data-zone='2'] .ambient { filter: hue-rotate(4deg)  saturate(1.12); }
html[data-zone='3'] .ambient { filter: hue-rotate(-3deg) saturate(1.2) brightness(.995); }

@media (max-width: 640px) {
  .amb-field { background-size: 190px 190px; opacity: calc(.12 + var(--scroll) * .08); }
  .amb-bloom::before { filter: blur(60px); }
  .amb-mandala--1 { --o: .05; width: 92vmin; height: 92vmin; }
  .amb-mandala--2 { --o: .04; }
  .amb-mandala--3 { display: none; }
  .to-top { width: 46px; height: 46px; }
  .to-top img { width: 24px; height: 24px; }
}

/* The GMMN rosette, used as the page's own watermark. It is radially
   symmetric, so it can turn continuously without ever looking wrong: a slow
   base rotation plus a scroll-linked one, so the mark tracks the reader. */
.amb-mandala {
  position: absolute;
  width: 78vmin; height: 78vmin;
  object-fit: contain;
  opacity: 0;
  will-change: transform;
  animation: mandalaIn 1.6s var(--ease-out) .3s forwards;
}
.amb-mandala--1 {
  top: -16vmin; right: -20vmin;
  --o: .085;
  transform: rotate(calc(var(--scroll) * 110deg + var(--spin) * 1deg))
             scale(calc(1 + var(--scroll) * .22))
             translate3d(calc(var(--scroll) * -4vw), calc(var(--scroll) * -10vh), 0);
}
.amb-mandala--2 {
  bottom: -30vmin; left: -22vmin;
  width: 96vmin; height: 96vmin;
  --o: .06;
  transform: rotate(calc(var(--scroll) * -90deg - var(--spin) * .6deg))
             translate3d(0, calc(var(--scroll) * -18vh), 0);
}
.amb-mandala--3 {
  top: 42%; left: 50%; margin-left: -19vmin;
  width: 38vmin; height: 38vmin;
  --o: .05;
  transform: rotate(calc(var(--scroll) * 200deg))
             translate3d(0, calc(var(--scroll) * -60vh), 0);
}
@keyframes mandalaIn { to { opacity: var(--o); } }

/* A soft oxblood halo that trails the pointer across the whole page. */
.amb-halo {
  position: absolute;
  width: 52vmin; height: 52vmin;
  margin: -26vmin 0 0 -26vmin;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--ox) 14%, transparent), transparent 66%);
  filter: blur(30px);
  opacity: 0;
  transform: translate3d(var(--hx, 50vw), var(--hy, 50vh), 0);
  transition: opacity .6s var(--ease);
  will-change: transform;
}
body[data-pointer] .amb-halo { opacity: 1; }

/* ---------- Back to top ------------------------------------------------- */

.to-top {
  position: fixed;
  right: clamp(1rem, 2.5vw, 2.25rem);
  bottom: clamp(1rem, 2.5vw, 2.25rem);
  z-index: 38;
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  border: 1px solid var(--rule);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(12px);
  box-shadow: var(--e-2);
  opacity: 0; transform: translateY(14px) scale(.9);
  pointer-events: none;
  transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease-out), border-color var(--dur-2) var(--ease);
}
.to-top.is-shown { opacity: 1; transform: none; pointer-events: auto; }
.to-top img { width: 30px; height: 30px; transform: rotate(calc(var(--scroll) * 180deg)); }
.to-top:hover { border-color: var(--ox); transform: translateY(-3px); }
.to-top::after {
  content: '';
  position: absolute; inset: -1px;
  border-radius: inherit;
  border: 1.5px solid var(--ox);
  clip-path: inset(calc(100% - var(--scroll) * 100%) 0 0 0);
  opacity: .55;
}

@keyframes drift {
  from { transform: translate3d(-3%, 2%, 0) scale(1); }
  to   { transform: translate3d(4%, -4%, 0) scale(1.12); }
}

/* Hero canvas (index.html) sits inside the ambient family. */
#hero-canvas, #hero-canvas canvas { z-index: 0; pointer-events: none; }
#hero-canvas canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#hero-canvas::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 52%, color-mix(in srgb, var(--paper) 72%, transparent) 100%);
}

/* ---------- 4. Header ---------------------------------------------------- */

header { transition: box-shadow .5s var(--ease), backdrop-filter .5s var(--ease); }
header .leading-tight div { white-space: nowrap; }
header > div > a:first-child img {
  transform: rotate(calc(var(--scroll) * 120deg));
  transition: filter var(--dur-2) var(--ease);
}
header > div > a:first-child:hover img { filter: drop-shadow(0 4px 10px rgba(122, 36, 54, .35)); }
@media (max-width: 359px) { header .leading-tight div + div { display: none; } }
header[data-scrolled] { box-shadow: 0 1px 0 var(--rule), 0 18px 40px -34px rgba(42, 18, 26, .5); }

/* Reading progress, welded to the header's bottom hairline. */
header::after {
  content: '';
  position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%;
  background: linear-gradient(90deg, var(--ox), var(--ox-glow));
  transform: scaleX(var(--scroll));
  transform-origin: 0 50%;
  opacity: .9;
}

/* The German labels need real room. Below 1280px the seven-item bar starts
   wrapping into the CTAs, so the compact menu takes over there instead. */
@media (max-width: 1439px) {
  .nav-links { display: none !important; }
  header > div > div.hidden { display: none !important; }
  #hamburger { display: flex !important; }
}
/* The masthead needs a wider measure than the text columns: seven German
   labels plus two CTAs do not fit the 1280px content grid at a readable size,
   so the bar runs wide and the sections keep their narrower column. */
@media (min-width: 1440px) {
  header .max-w-7xl { max-width: 1620px; }
  header nav.nav-links { gap: 1.3rem; font-size: .86rem; }
  header #hamburger { display: none !important; }
}
@media (min-width: 1700px) {
  header nav.nav-links { gap: 1.9rem; font-size: .9rem; }
}
.nav-links a,
header a[class*='rounded-full'] { white-space: nowrap; }

.nav-links a { position: relative; }
.nav-links a::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -7px; height: 1px;
  background: var(--ox);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .45s var(--ease-out);
}
.nav-links a:hover::after,
.nav-links a[aria-current='page']::after { transform: scaleX(1); }
.nav-links a[aria-current='page'] { color: var(--ox); }

/* Hamburger → X */
.hamburger { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; }
.hamburger span {
  display: block; height: 1.5px; width: 20px; margin-inline: auto;
  background: currentColor; border-radius: 2px;
  transition: transform .4s var(--ease-out), opacity .25s linear;
}
.hamburger[aria-expanded='true'] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger[aria-expanded='true'] span:nth-child(2) { opacity: 0; transform: scaleX(.3); }
.hamburger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ---------- 5. Mobile menu ---------------------------------------------- */

.mobile-menu {
  position: fixed;
  top: 76px; left: 0; right: 0;
  max-height: calc(100dvh - 76px);
  overflow-y: auto;
  z-index: 39;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: blur(18px) saturate(1.2);
  border-bottom: 1px solid var(--rule);
  clip-path: inset(0 0 100% 0);
  opacity: 0;
  visibility: hidden;
  transition: clip-path .55s var(--ease-out), opacity .3s linear, visibility 0s .55s;
}
.mobile-menu.is-open {
  clip-path: inset(0 0 0 0);
  opacity: 1;
  visibility: visible;
  transition: clip-path .55s var(--ease-out), opacity .2s linear, visibility 0s;
}
.mobile-menu li, .mobile-menu > div > a {
  opacity: 0; transform: translateY(10px);
  transition: opacity .4s var(--ease) var(--d, 0s), transform .5s var(--ease-out) var(--d, 0s);
}
.mobile-menu.is-open li, .mobile-menu.is-open > div > a { opacity: 1; transform: none; }
body.menu-open { overflow: hidden; }

/* ---------- 6. Scroll reveals ------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  filter: blur(4px);
  transition: opacity .85s var(--ease), transform .95s var(--ease-out), filter .85s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; filter: none; }

/* Staggered children inside a revealed grid or stack. */
.reveal[data-stagger] > * {
  opacity: 0; transform: translateY(22px);
  transition: opacity .7s var(--ease) var(--d, 0s), transform .8s var(--ease-out) var(--d, 0s);
}
.reveal[data-stagger].is-in > * { opacity: 1; transform: none; }

/* The little oxblood tick that heads each section — draws itself in. */
.reveal .bg-oxblood.h-px { transform: scaleX(0); transform-origin: 0 50%; transition: transform .8s .15s var(--ease-out); }
.reveal .bg-oxblood.h-px.mx-auto { transform-origin: 50% 50%; }
.reveal.is-in .bg-oxblood.h-px { transform: scaleX(1); }

/* ---------- 7. Cards, sheen, lift --------------------------------------- */

.card {
  position: relative;
  isolation: isolate;
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease), border-color .4s var(--ease);
}
.card::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx) var(--my),
    color-mix(in srgb, var(--ox) 7%, transparent), transparent 68%);
  opacity: 0;
  transition: opacity .45s var(--ease);
  pointer-events: none;
  z-index: -1;
}
.card:hover::before { opacity: 1; }
a.card:hover, .card--lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
  border-color: color-mix(in srgb, var(--ox) 45%, var(--rule));
}

/* Rows in the stats panel and event list. */
.stat-row { position: relative; transition: background-color .4s var(--ease); }
.stat-row + .stat-row { border-top: 1px solid var(--rule); }
.stat-row::after {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--ox);
  transform: scaleY(0); transform-origin: 50% 0;
  transition: transform .45s var(--ease-out);
}
.stat-row:hover::after { transform: scaleY(1); }
.stat-row:hover { background: color-mix(in srgb, var(--ox-tint) 55%, transparent); }

/* Magnetic controls: the pull is applied inline by app.js, the easing lives
   here so it settles rather than snapping. */
.magnetic { transition: transform var(--dur-3) var(--ease-out); }
.card--tilt { transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease), border-color var(--dur-2) var(--ease); }

/* Event and directory rows earn a leading marker on hover. */
.row-hot { position: relative; transition: background-color var(--dur-2) var(--ease), padding-left var(--dur-3) var(--ease-out); }
.row-hot::before {
  content: '';
  position: absolute; left: 0; top: 12%; bottom: 12%; width: 2px;
  background: var(--ox);
  transform: scaleY(0); transform-origin: 50% 50%;
  transition: transform var(--dur-3) var(--ease-out);
}
.row-hot:hover::before { transform: scaleY(1); }
.row-hot:hover { padding-left: 1.75rem; }

/* ---------- 8. Board avatars (ueber-uns) -------------------------------- */

.member-avatar {
  width: 68px; height: 68px;
  margin: 0 auto 1.1rem;
  display: grid; place-items: center;
  border-radius: 50%;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.1rem; letter-spacing: .01em;
  color: var(--ox);
  background:
    radial-gradient(120% 120% at 30% 20%, #fff 0%, var(--ox-tint) 55%, color-mix(in srgb, var(--ox) 16%, var(--ox-tint)) 100%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ox) 22%, transparent),
              0 10px 24px -18px rgba(42, 18, 26, .7);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease);
}
.member-avatar img {
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
  object-position: center top;
  border-radius: inherit;
}
.member-avatar:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ox) 45%, transparent),
              0 18px 34px -20px rgba(42, 18, 26, .6);
}

/* ---------- 9. Contact form (kontakt) ----------------------------------- */

.tilt-3d {
  transform-style: preserve-3d;
  transition: transform .6s var(--ease-out), box-shadow .6s var(--ease);
  box-shadow: var(--shadow-card);
}
.tilt-3d:hover { box-shadow: var(--shadow-lift); }

.field-3d {
  background: color-mix(in srgb, var(--paper) 70%, transparent);
  transition: border-color .3s var(--ease), box-shadow .35s var(--ease), background-color .3s var(--ease);
}
.field-3d::placeholder { color: color-mix(in srgb, var(--muted) 60%, transparent); }
.field-3d:hover { border-color: color-mix(in srgb, var(--ox) 35%, var(--rule)); }
.field-3d:focus {
  background: var(--paper);
  border-color: var(--ox);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ox) 14%, transparent);
}

.btn-3d { position: relative; overflow: hidden; transition: transform .35s var(--ease-out), box-shadow .4s var(--ease); }
.btn-3d::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform .8s var(--ease-out);
}
.btn-3d:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -18px rgba(90, 23, 38, .85); }
.btn-3d:hover::after { transform: translateX(120%); }
.btn-3d:active { transform: translateY(0); }

#success-msg { animation: popIn .5s var(--ease-out) both; }
@keyframes popIn { from { opacity: 0; transform: translateY(8px) scale(.98); } }

/* ---------- 10. Literaturbank filter ------------------------------------ */

[data-cat] { transition: opacity .4s var(--ease), transform .45s var(--ease-out); }
[data-cat].is-hidden { display: none; }
[data-cat].is-entering { opacity: 0; transform: translateY(12px); }

/* ---------- 11. Buttons & links (global polish) -------------------------- */

a[class*='bg-oxblood'], button[class*='bg-oxblood'] {
  box-shadow: 0 10px 22px -16px rgba(90, 23, 38, .9);
  transition: background-color .3s var(--ease), transform .35s var(--ease-out), box-shadow .4s var(--ease);
}
a[class*='bg-oxblood']:hover, button[class*='bg-oxblood']:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 32px -18px rgba(90, 23, 38, .95);
}
a[class*='rounded-full'][class*='border']:hover { transform: translateY(-1px); }
a[class*='rounded-full'][class*='border'] { transition: color .3s var(--ease), border-color .3s var(--ease), transform .35s var(--ease-out); }

/* Big watermark numeral on ueber-uns drifts against the scroll. */
.watermark { transform: translate3d(0, calc(var(--scroll) * -4rem), 0); will-change: transform; }

/* ---------- 12. Reduced motion ------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal, .reveal[data-stagger] > * { opacity: 1 !important; transform: none !important; filter: none !important; }
  .reveal .bg-oxblood.h-px { transform: scaleX(1) !important; }
  .amb-bloom, .amb-field, .amb-horizon, .watermark, .amb-mandala, .to-top img { transform: none !important; }
  .amb-mandala { opacity: var(--o) !important; animation: none !important; }
  .amb-halo { display: none !important; }
  .row-hot:hover { padding-left: 0 !important; }
  .amb-bloom::before { animation: none !important; }
}

/* ---------- 13. Assets (inlined so there is nothing extra to deploy) ----- */

:root {
  /* Eight-point girih star lattice */
  --girih: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cg fill='none' stroke='%237A2436' stroke-opacity='0.11' stroke-width='1'%3E%3Cpath d='M150 34 L182 82 L238 74 L230 130 L272 150 L230 170 L238 226 L182 218 L150 266 L118 218 L62 226 L70 170 L28 150 L70 130 L62 74 L118 82 Z'/%3E%3Ccircle cx='150' cy='150' r='54'/%3E%3Ccircle cx='150' cy='150' r='26' stroke-opacity='0.07'/%3E%3Cpath d='M0 150 H28 M272 150 H300 M150 0 V34 M150 266 V300' stroke-opacity='0.08'/%3E%3Cpath d='M0 0 L70 70 M300 0 L230 70 M0 300 L70 230 M300 300 L230 230' stroke-opacity='0.06'/%3E%3C/g%3E%3C/svg%3E");

  /* Paper grain */
  --grain: 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.86' 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");
}