/* Shared base for the homepage options */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; -webkit-font-smoothing: antialiased; overflow-x: hidden; line-height: 1.55; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, figure, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
:root { --ease: cubic-bezier(.22, 1, .36, 1); --gutter: clamp(16px, 3vw, 40px); }

/* rotating line */
.rotator { display: inline-grid; }
.rotator__item { grid-area: 1 / 1; }
.rotator .w { display: inline-block; white-space: nowrap; }
.rotator .ch { display: inline-block; white-space: pre; animation: chIn .9s var(--ease) both; animation-delay: calc(var(--i) * 22ms); }
.rotator__item.is-leaving .ch { animation: chOut .55s var(--ease) both; animation-delay: calc(var(--i) * 12ms); }
@keyframes chIn  { from { opacity: 0; transform: translateY(.45em); filter: blur(6px); } }
@keyframes chOut { to   { opacity: 0; transform: translateY(-.4em); filter: blur(6px); } }

/* load + scroll reveals */
.load { opacity: 0; transform: translateY(24px); transition: opacity 1.1s var(--ease), transform 1.2s var(--ease); transition-delay: var(--d, 0s); }
.is-loaded .load { opacity: 1; transform: none; }
.reveal { opacity: 0; transform: translateY(36px); transition: opacity 1s var(--ease), transform 1.2s var(--ease); transition-delay: var(--d, 0s); }
.reveal.is-in { opacity: 1; transform: none; }

/* drifting colour blobs (original hero) */
.fluid { position: absolute; inset: -10%; z-index: -2; filter: blur(70px) saturate(1.2); pointer-events: none; }
.blob { position: absolute; border-radius: 50%; mix-blend-mode: screen; opacity: .9; animation: drift 22s ease-in-out infinite alternate; }
@keyframes drift {
  0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
  33%  { transform: translate(6vw, -4vw) scale(1.12) rotate(40deg); }
  66%  { transform: translate(-4vw, 5vw) scale(.92) rotate(-20deg); }
  100% { transform: translate(3vw, 2vw) scale(1.05) rotate(10deg); }
}
.grain {
  position: absolute; inset: 0; z-index: -1; opacity: .18; pointer-events: none; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.6'/></svg>");
}

/* marquee */
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; align-items: center; gap: 36px; width: max-content; animation: marquee 45s linear infinite; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* cursor */
.cursor {
  position: fixed; left: 0; top: 0; z-index: 100; pointer-events: none;
  width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%;
  display: grid; place-items: center; font: 500 14px/1 "Inter", system-ui, sans-serif;
  transform: translate(var(--cx, -200px), var(--cy, -200px)) scale(0);
  transition: transform .45s var(--ease);
}
.cursor.is-on { transform: translate(var(--cx), var(--cy)) scale(1); }
@media (hover: none) { .cursor { display: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal, .load { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}