/* Motion Kit v1 (Farleigh Point)
   Link after the site's own stylesheet. Override the tokens in the site's :root. */

:root {
  --mk-accent: #9aa9d8;                       /* the ONE accent colour: transitions, circle reveal, highlight card */
  --mk-ease: cubic-bezier(0.22, 1, 0.36, 1);  /* matches EASE in motion-kit.js */
  --mk-ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --mk-radius: 28px;
  --mk-vt-duration: 0.8s;
}

/* ---------- start states (only while motion is on) ---------- */
.mk-on [data-mk='hero'] [data-mk-hero-media],
.mk-on [data-mk='hero'] [data-mk-hero-text],
.mk-on [data-mk='hero'] [data-mk-hero-late],
.mk-on [data-mk='blur-in'] { opacity: 0; }

[data-mk-hero-media], [data-mk='grow'] { transform-origin: 50% 50%; will-change: transform; }

.mk-word { display: inline-block; }

/* ---------- text roll buttons ---------- */
.mk-roll { display: inline-flex; }
.mk-roll-inner { display: inline-grid; overflow: hidden; line-height: 1.2; }
.mk-roll-inner > span { grid-area: 1 / 1; transition: transform 0.5s var(--mk-ease); }
.mk-roll-inner > span + span { transform: translateY(110%); }
.mk-roll:hover .mk-roll-inner > span:first-child,
.mk-roll:focus-visible .mk-roll-inner > span:first-child { transform: translateY(-110%); }
.mk-roll:hover .mk-roll-inner > span + span,
.mk-roll:focus-visible .mk-roll-inner > span + span { transform: translateY(0); }

/* ---------- pinned hero ---------- */
[data-mk='pin-hero'] { position: relative; height: var(--mk-pin-length, 260vh); }
.mk-pin {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  overflow: hidden; display: grid; place-items: center;
}
.mk-pin-media {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; will-change: transform, filter;
}
.mk-pin-intro, .mk-pin-statement { position: relative; z-index: 1; grid-area: 1 / 1; }
.mk-pin-statement { text-align: center; max-width: 18ch; margin: 0 auto; }

/* static fallback: no pinning, both text blocks stacked over the photo */
html:not(.mk-on) [data-mk='pin-hero'] { height: auto; }
html:not(.mk-on) .mk-pin { position: relative; height: auto; min-height: 100vh; gap: 3rem; padding: 6rem 1.5rem; }
html:not(.mk-on) .mk-pin-intro, html:not(.mk-on) .mk-pin-statement { grid-area: auto; }
html:not(.mk-on) .mk-pin-media { filter: brightness(0.55); }

/* ---------- split lines ---------- */
[data-mk='split'] { overflow: hidden; }
[data-mk='split'] .mk-line { display: block; will-change: transform; }

/* ---------- card pair ---------- */
[data-mk='card-pair'] { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; overflow: hidden; }
@media (max-width: 760px) { [data-mk='card-pair'] { grid-template-columns: 1fr; } }

/* ---------- glass card ---------- */
.mk-glass {
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: calc(var(--mk-radius) * 0.7);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
}

/* ---------- circle reveal ---------- */
[data-mk='circle-reveal'] { position: relative; overflow: hidden; padding-top: 30vh; }
.mk-circle {
  position: absolute; left: 50%; top: 100%;
  width: 260vmax; height: 260vmax; border-radius: 50%;
  background: var(--mk-accent);
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none; will-change: transform;
}
.mk-circle-content { position: relative; z-index: 1; }
html:not(.mk-on) [data-mk='circle-reveal'] { background: var(--mk-accent); }
html:not(.mk-on) .mk-circle { display: none; }

/* ---------- page transitions (cross page View Transitions) ----------
   Supporting browsers animate; others just load the next page normally.
   Variant per site: <html data-mk-transition="circle"> (default) or "sheet".
   Both pages of a navigation need this stylesheet. */
@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: mk-vt-out var(--mk-vt-duration) var(--mk-ease) both;
}
::view-transition-new(root) {
  animation: mk-vt-circle var(--mk-vt-duration) var(--mk-ease-inout) both;
}
@keyframes mk-vt-out {
  to { filter: blur(8px) brightness(0.6); transform: scale(0.97); }
}
@keyframes mk-vt-circle {
  from { clip-path: circle(0% at var(--mk-x, 50%) var(--mk-y, 50%)); }
  to   { clip-path: circle(150% at var(--mk-x, 50%) var(--mk-y, 50%)); }
}

/* "sheet": old page blurs into the accent colour, new page rides in on a tilted rounded sheet */
html[data-mk-transition='sheet']::view-transition { background: var(--mk-accent); }
html[data-mk-transition='sheet']::view-transition-old(root) {
  animation: mk-vt-fade calc(var(--mk-vt-duration) * 0.55) var(--mk-ease) both;
}
html[data-mk-transition='sheet']::view-transition-new(root) {
  animation: mk-vt-sheet calc(var(--mk-vt-duration) * 1.2) var(--mk-ease) calc(var(--mk-vt-duration) * 0.3) both;
}
@keyframes mk-vt-fade {
  to { opacity: 0; filter: blur(10px); transform: scale(0.96); }
}
@keyframes mk-vt-sheet {
  from { transform: translate(20%, 70%) rotate(6deg); clip-path: inset(0 round 48px); }
  to   { transform: none; clip-path: inset(0 round 0); }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .mk-roll-inner > span { transition: none; }
}