/* Motion layer shared by every page: grain, image wipes, title rise.
   Everything here is decoration. If motion is reduced, it switches off. */

/* ── PAPER GRAIN ── a faint, still canvas texture over the whole site */
body::after {
  content:''; position:fixed; inset:-50%; z-index:900; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  opacity:0.035;
}

/* ── PAGE TITLE ── each line rises out of a mask on load */
.page-hero h1 { animation:titleRise 0.9s cubic-bezier(0.16,1,0.3,1) both; }
@keyframes titleRise {
  from { clip-path:inset(0 0 100% 0); transform:translateY(24px); }
  to   { clip-path:inset(0 0 -10% 0); transform:none; }
}

/* ── IMAGE WIPE ── pictures uncover like a brush stroke from left to right */
.wipe { clip-path:inset(0 100% 0 0); transition:clip-path 0.9s cubic-bezier(0.77,0,0.18,1); }
.wipe.visible { clip-path:inset(0 0 0 0); }
.wipe img, .wipe video { transform:scale(1.04); transition:transform 1.2s cubic-bezier(0.16,1,0.3,1); }
.wipe.visible img, .wipe.visible video { transform:none; }

body { overflow-x:clip; }

/* ── LINK UNDERLINE ── draws itself in on hover */
.nav-center a, .site-footer-links a { position:relative; }
.nav-center a::after, .site-footer-links a::after {
  content:''; position:absolute; left:0; right:0; bottom:-6px; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform 0.5s cubic-bezier(0.16,1,0.3,1);
}
.nav-center a:hover::after, .nav-center a.active::after,
.site-footer-links a:hover::after { transform:scaleX(1); transform-origin:left; }

@media (prefers-reduced-motion: reduce) {
  .page-hero h1 { animation:none; }
  .wipe, .wipe img, .wipe video { clip-path:none; transform:none; transition:none; }
  .reveal { opacity:1 !important; transform:none !important; transition:none !important; }
}

/* Phone: footer links wrap, so the page is never wider than the screen. */
@media (max-width:600px) {
  .site-footer-links { flex-wrap:wrap; gap:14px 22px; }
  .site-footer > * { min-width:0; }
}

/* Phone: the language switch lives in the burger menu, so hide the desktop one. */
@media (max-width:900px) { .nav-right { display:none !important; } }

/* Headlines stay upright and black: no grey italic second word. */
h1 em, h2 em { font-style:normal !important; color:inherit !important; }

/* Anything marked hidden stays hidden, even if a layout rule says otherwise. */
[hidden] { display:none !important; }