/* fx.css: styles for fx.js. Theme with the tokens below in the site's own stylesheet; do not edit this file. */
:root {
  --fx-accent: #ffffff;           /* spotlight and glow colour */
  --fx-ease: cubic-bezier(.2, .7, .1, 1);
  --fx-radius: 20px;
  --fx-gap: 16px;
}
.fx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- expand: media grows from a card to full screen ---------- */
[data-fx~="expand"] { position: relative; height: calc((var(--fx-span, 2) + 1) * 100vh); }
.fx-expand-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; place-items: center; }
.fx-expand-media {
  position: absolute; inset: 0;
  clip-path: inset(calc((1 - var(--fx-p, 1)) * 24%) calc((1 - var(--fx-p, 1)) * 32%) round calc((1 - var(--fx-p, 1)) * 28px));
}
.fx-expand-media > img, .fx-expand-media > video { width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.16 - .16 * var(--fx-p, 1))); }
.fx-expand-text { position: relative; z-index: 1; opacity: clamp(0, (var(--fx-p, 1) - .55) * 3, 1); transform: translateY(calc((1 - var(--fx-p, 1)) * 40px)); }
.fx-apart { position: relative; z-index: 1; display: flex; gap: .3em; white-space: nowrap; pointer-events: none; }
.fx-apart > :first-child { transform: translateX(calc(var(--fx-p, 1) * -34vw)); }
.fx-apart > :last-child  { transform: translateX(calc(var(--fx-p, 1) * 34vw)); }
.fx-still [data-fx~="expand"] { height: auto; }
.fx-still .fx-expand-stage { position: relative; }
.fx-still .fx-apart { display: none; }

/* ---------- tilt: a screen that settles flat as it arrives ---------- */
[data-fx~="tilt"] { perspective: 1200px; }
.fx-tilt-frame {
  transform-origin: 50% 0;
  transform: rotateX(calc((1 - var(--fx-p, 1)) * 26deg)) scale(calc(.88 + .12 * var(--fx-p, 1)));
  border-radius: var(--fx-radius); overflow: hidden;
  box-shadow: 0 30px 80px -30px rgb(0 0 0 / .45), 0 0 0 1px rgb(255 255 255 / .08);
}

/* ---------- rail: sideways gallery while pinned ---------- */
[data-fx~="rail"] { position: relative; }
.fx-rail-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; align-items: center; }
.fx-rail-track { display: flex; gap: clamp(16px, 2.5vw, 40px); padding-inline: clamp(20px, 6vw, 96px); will-change: transform; }
.fx-rail-track > * { flex: 0 0 auto; }
@media (max-width: 720px) {
  .fx-rail-stage { position: relative; height: auto; overflow: visible; }
  .fx-rail-track { overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 16px; transform: none !important; }
  .fx-rail-track > * { scroll-snap-align: start; }
}
.fx-still .fx-rail-stage { position: relative; height: auto; }
.fx-still .fx-rail-track { overflow-x: auto; }

/* ---------- shift: page colour shifts with scroll ---------- */
[data-fx~="shift"] { background: var(--fx-bg, inherit); color: var(--fx-ink, inherit); }

/* ---------- spotlight: light follows the pointer across cards ---------- */
[data-fx~="spotlight"] > * { position: relative; isolation: isolate; }
[data-fx~="spotlight"] > *::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none;
  background: radial-gradient(420px circle at var(--fx-x, -999px) var(--fx-y, -999px), color-mix(in srgb, var(--fx-accent) 16%, transparent), transparent 60%);
  opacity: 0; transition: opacity .4s;
}
[data-fx~="spotlight"] > *::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: radial-gradient(260px circle at var(--fx-x, -999px) var(--fx-y, -999px), color-mix(in srgb, var(--fx-accent) 70%, transparent), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0; transition: opacity .4s;
}
[data-fx~="spotlight"]:hover > *::before, [data-fx~="spotlight"]:hover > *::after { opacity: 1; }

/* ---------- hover-tilt: cards lean toward the pointer ---------- */
[data-fx~="hover-tilt"] { transform-style: preserve-3d; will-change: transform; position: relative; }
[data-fx~="hover-tilt"]::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle at var(--fx-gx, 50%) var(--fx-gy, 50%), rgb(255 255 255 / .22), transparent 55%);
  opacity: 0; transition: opacity .35s;
}
[data-fx~="hover-tilt"]:hover::after { opacity: 1; }

/* ---------- magnet ---------- */
[data-fx~="magnet"] { will-change: transform; }

/* ---------- glass: a glassy button with a moving sheen ---------- */
[data-fx~="glass"] {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, rgb(255 255 255 / .22), rgb(255 255 255 / .06));
  -webkit-backdrop-filter: blur(14px) saturate(170%); backdrop-filter: blur(14px) saturate(170%);
  border: 1px solid rgb(255 255 255 / .38);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .55), inset 0 -1px 0 rgb(0 0 0 / .08), 0 10px 30px -12px rgb(0 0 0 / .35);
}
[data-fx~="glass"]::before {
  content: ""; position: absolute; inset: -40% -10%; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 50% at var(--fx-x, 30%) 0%, rgb(255 255 255 / .55), transparent 70%);
  transition: opacity .3s; opacity: .7;
}
[data-fx~="glass"]:hover::before { opacity: 1; }

/* ---------- reveal: floating photo over a list ---------- */
.fx-reveal-float {
  position: fixed; left: 0; top: 0; z-index: 50; pointer-events: none;
  width: clamp(200px, 20vw, 300px); aspect-ratio: 4 / 5; translate: 24px -50%;
  border-radius: 14px; overflow: hidden; opacity: 0; scale: .9;
  transition: opacity .35s var(--fx-ease), scale .5s var(--fx-ease);
  box-shadow: 0 24px 60px -20px rgb(0 0 0 / .45);
}
.fx-reveal-float.is-on { opacity: 1; scale: 1; }
.fx-reveal-float img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s; }
.fx-reveal-float img.is-on { opacity: 1; }

/* ---------- split: headline words rise into place ---------- */
[data-fx~="split"] .fx-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
[data-fx~="split"] .fx-wi { display: inline-block; transform: translateY(110%); transition: transform 1s var(--fx-ease); transition-delay: calc(var(--i, 0) * 70ms); }
[data-fx~="split"].is-in .fx-wi { transform: none; }
[data-fx~="split"][data-fx-split="chars"] .fx-wi { transform: none; }
[data-fx~="split"] .fx-c { display: inline-block; opacity: 0; transform: translateY(.45em); transition: opacity .6s var(--fx-ease), transform .8s var(--fx-ease); transition-delay: calc(var(--i, 0) * 22ms); }
[data-fx~="split"].is-in .fx-c { opacity: 1; transform: none; }

/* ---------- words: one word cycling through a list ---------- */
[data-fx~="words"] { display: inline-grid; vertical-align: bottom; white-space: nowrap; overflow: clip; overflow-clip-margin: .2em; transition: width .5s var(--fx-ease); padding-bottom: .1em; margin-bottom: -.1em; }
.fx-word { grid-area: 1 / 1; justify-self: start; opacity: 0; transform: translateY(70%); transition: opacity .5s var(--fx-ease), transform .7s var(--fx-ease); }
.fx-word.is-on { opacity: 1; transform: none; }
.fx-word.is-out { opacity: 0; transform: translateY(-70%); }

/* ---------- count ---------- */
[data-fx~="count"] { font-variant-numeric: tabular-nums; }

/* ---------- columns and marquee ---------- */
[data-fx~="columns"] { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--fx-gap); height: var(--fx-height, 640px); overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent); }
.fx-col-track { display: flex; flex-direction: column; gap: var(--fx-gap); animation: fx-up linear infinite; }
@keyframes fx-up { to { transform: translateY(calc(-50% - var(--fx-gap) / 2)); } }
[data-fx~="columns"]:hover .fx-col-track { animation-play-state: paused; }
@media (max-width: 720px) { [data-fx~="columns"] .fx-col:nth-child(n+2) { display: none; } }
[data-fx~="marquee"] { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.fx-marquee-track { display: flex; gap: var(--fx-gap); width: max-content; animation: fx-left linear infinite; }
@keyframes fx-left { to { transform: translateX(calc(-50% - var(--fx-gap) / 2)); } }
[data-fx~="marquee"]:hover .fx-marquee-track { animation-play-state: paused; }
.fx-paused .fx-col-track, .fx-paused .fx-marquee-track, .fx-paused .fx-paths path { animation-play-state: paused !important; }

/* ---------- paths: slow flowing lines ---------- */
[data-fx~="paths"] { position: relative; isolation: isolate; }
[data-fx~="paths"] > :not(.fx-paths) { position: relative; z-index: 1; }
.fx-paths { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.fx-paths path { fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; opacity: var(--fx-o, .3);
  stroke-dasharray: .32 .68; animation: fx-flow var(--fx-d, 20s) linear infinite; }
@keyframes fx-flow { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* ---------- aurora: moving colour field ---------- */
[data-fx~="aurora"] { position: relative; isolation: isolate; }
[data-fx~="aurora"] > :not(.fx-aurora) { position: relative; z-index: 1; }
.fx-aurora { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.fx-aurora-fallback { background: radial-gradient(80% 60% at 20% 20%, var(--fx-a1, #f3d9b1), transparent), linear-gradient(160deg, var(--fx-a2, #e9a87c), var(--fx-a3, #7a9ea8)); }

/* ---------- reduced motion: everything in its final state ---------- */
@media (prefers-reduced-motion: reduce) {
  .fx-col-track, .fx-marquee-track, [data-fx~="marquee"], .fx-paths path { animation: none !important; }
  [data-fx~="split"] .fx-wi, [data-fx~="split"] .fx-c, .fx-word { transition: none !important; transform: none !important; opacity: 1 !important; }
  .fx-word:not(.is-on) { display: none; }
}