/* Shared motion and interaction layer. All movement is switched off for people who prefer reduced motion. */

:root { --ease-out: cubic-bezier(0.16, 1, 0.3, 1); }

a, button { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible { outline: 3px solid #A8BEDF; outline-offset: 3px; border-radius: 8px; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  /* Page-to-page transition (supported browsers cross-fade and slide between pages). */
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: vt-out 0.35s var(--ease-out) both; }
  ::view-transition-new(root) { animation: vt-in 0.55s var(--ease-out) both; }
  @keyframes vt-out { to { opacity: 0; transform: translateY(-12px); } }
  @keyframes vt-in { from { opacity: 0; transform: translateY(18px); } }

  /* Hero entrance: headline, text and buttons arrive in sequence. */
  body > section[aria-label] h1,
  body > section[aria-label] h1 ~ p,
  body > section[aria-label] h1 ~ div,
  body > div > section[aria-label] h1,
  body > div > section[aria-label] h1 ~ p,
  body > div > section[aria-label] h1 ~ div { animation: hero-in 1s var(--ease-out) both; }
  body section[aria-label] h1 ~ p { animation-delay: 0.12s; }
  body section[aria-label] h1 ~ div { animation-delay: 0.24s; }
  @keyframes hero-in { from { opacity: 0; transform: translateY(28px); } }

  /* Scroll reveal. */
  .anim .reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); transition-delay: var(--d, 0s); }
  .anim .reveal.in { opacity: 1; transform: none; }

  /* Signal rings behind the hero collage breathe slowly, like a connection. */
  .rings > span[aria-hidden="true"] { animation: ring 7s ease-in-out infinite; }
  .rings > span[aria-hidden="true"]:nth-child(2) { animation-delay: -2.3s; }
  .rings > span[aria-hidden="true"]:nth-child(3) { animation-delay: -4.6s; }
  @keyframes ring { 50% { transform: scale(1.05); opacity: 0.7; } }

  /* Collage images follow the pointer slightly (set by site.js). */
  .rings > img { translate: var(--px, 0) var(--py, 0); transition: translate 0.6s var(--ease-out); }

  /* Buttons and links. */
  a[style*="border-radius: 999px"], button { transition: transform 0.25s var(--ease-out), background-color 0.25s, box-shadow 0.25s; }
  a[style*="border-radius: 999px"]:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -12px rgba(6, 10, 24, 0.5); }
  a[style*="border-radius: 999px"]:active, button:active { transform: translateY(1px) scale(0.98); }
  a svg { transition: transform 0.3s var(--ease-out); }
  a:hover svg { transform: translateX(4px); }
  a:hover svg[viewBox="0 0 256 256"]:has(path[d^="M204,64"]) { transform: translate(3px, -3px); }
  a:hover svg:has(path[d^="M208.49"]) { transform: translateY(4px); }
  a:hover svg:has(path[d^="M228,128a12,12,0,0,1-12,12H69"]) { transform: translateX(-4px); }

  /* Project images zoom gently inside their frame. */
  .zoom { overflow: hidden; border-radius: 22px; }
  .zoom img { transition: transform 0.9s var(--ease-out); }
  .zoom:hover img { transform: scale(1.04); }
  article:has(.zoom) { transition: transform 0.5s var(--ease-out); }
  article:has(.zoom):hover, .anim article.reveal.in:has(.zoom):hover { transform: translateY(-4px); }

  /* Video poster. */
  a[data-video] img { transition: transform 0.9s var(--ease-out), filter 0.5s; }
  a[data-video]:hover img { transform: scale(1.02); filter: brightness(0.9); }
  a[data-video] span { transition: transform 0.4s var(--ease-out); }
  a[data-video]:hover span { transform: scale(1.08); }

  /* Timeline nodes pop in. */
  .anim .reveal.in > span[aria-hidden="true"] { animation: node 0.7s var(--ease-out) 0.2s both; }
  @keyframes node { from { transform: scale(0); } }
}

/* Custom pointer (mouse and trackpad only; added by site.js unless reduced motion is on). */
@media (pointer: fine) {
  .has-cursor, .has-cursor * { cursor: none !important; }
  .cursor-dot, .cursor-ring { position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none; border-radius: 50%; will-change: transform; transition: opacity 0.3s; }
  .cursor-dot { width: 8px; height: 8px; margin: -4px 0 0 -4px; background: #fff; mix-blend-mode: difference; }
  .cursor-ring {
    width: 38px; height: 38px; margin: -19px 0 0 -19px; box-sizing: border-box;
    display: grid; place-items: center; border: 1.5px solid #6F8FC4;
    font: 500 14px 'Outfit', 'Helvetica Neue', sans-serif; color: #141C33;
    transition: width 0.4s var(--ease-out), height 0.4s var(--ease-out), margin 0.4s var(--ease-out), background-color 0.3s, border-color 0.3s, opacity 0.3s;
  }
  .cursor-ring span { opacity: 0; transition: opacity 0.2s; }
  .cursor-ring.is-link { width: 60px; height: 60px; margin: -30px 0 0 -30px; background: rgba(168, 190, 223, 0.28); border-color: rgba(111, 143, 196, 0.6); }
  .cursor-ring.is-label { width: 84px; height: 84px; margin: -42px 0 0 -42px; background: #A8BEDF; border-color: #A8BEDF; }
  .cursor-ring.is-label span { opacity: 1; }
  .cursor-dot.is-hidden, .cursor-away .cursor-dot, .cursor-away .cursor-ring { opacity: 0; }
}

/* Plint hand: rises into place as the section scrolls into view. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .hand-phone { animation: hand-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
    @keyframes hand-rise { from { transform: translateY(22%) rotate(5deg); } to { transform: none; } }
  }
}

.video-frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 24px; background: #000; }