/*
 * Triza's Family Office — progressive motion layer
 * Modern browsers receive scroll-linked and cross-document motion.
 * Older browsers retain the site's existing IntersectionObserver transitions.
 */

:root {
  --motion-archive-ease: cubic-bezier(.16, 1, .3, 1);
  --motion-settle-ease: cubic-bezier(.22, .78, .22, 1);
}

/* Preserve visual continuity while navigating between same-origin pages. */
@view-transition {
  navigation: auto;
}

header {
  view-transition-name: site-header;
}

header .brand img {
  view-transition-name: site-seal;
}

main {
  view-transition-name: page-content;
}

footer {
  view-transition-name: site-footer;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-group(site-header),
::view-transition-group(site-seal) {
  animation-duration: 420ms;
  animation-timing-function: var(--motion-settle-ease);
}

::view-transition-group(site-footer) {
  animation-duration: 520ms;
  animation-timing-function: var(--motion-archive-ease);
}

::view-transition-old(page-content) {
  animation: page-fold-away 360ms cubic-bezier(.4, 0, 1, 1) both;
}

::view-transition-new(page-content) {
  animation: page-unfold 760ms 70ms var(--motion-archive-ease) both;
}

@keyframes page-fold-away {
  to {
    opacity: 0;
    transform: translateY(-9px);
  }
}

@keyframes page-unfold {
  from {
    clip-path: inset(0 0 7% 0);
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    clip-path: inset(0 0 0 0);
    opacity: 1;
    transform: translateY(0);
  }
}

/* A fine reading line makes long editorial pages feel deliberately paced. */
.scroll-progress {
  display: none;
}

@supports (animation-timeline: scroll()) {
  .scroll-progress {
    animation: reading-line linear both;
    animation-timeline: scroll(root block);
    background: linear-gradient(90deg, #76140e 0%, #a86a36 72%, #c4a46b 100%);
    display: block;
    height: 3px;
    inset: 0 0 auto;
    pointer-events: none;
    position: fixed;
    transform: scaleX(0);
    transform-origin: left center;
    width: 100%;
    z-index: 1200;
  }

  @keyframes reading-line {
    to { transform: scaleX(1); }
  }
}

/*
 * View timelines create quiet material movement: photographs pan as if a
 * physical print is being revealed, while editorial rules draw into place.
 */
@supports (animation-timeline: view()) {
  .founder-frame img,
  .legacy-portrait img,
  .legacy-moment img,
  .legacy-mark img {
    animation-duration: 1ms;
    animation-fill-mode: both;
    animation-name: archival-image-pan;
    animation-timeline: view(block);
    animation-timing-function: linear;
    animation-range: cover 0% cover 100%;
  }

  .reveal.in .section-title::after,
  .section-title::after {
    animation-duration: 1ms;
    animation-fill-mode: both;
    animation-name: editorial-rule-draw;
    animation-timeline: view(block);
    animation-timing-function: linear;
    animation-range: entry 5% cover 34%;
    transition: none;
  }

  section:not(.hero):not(.page-hero):not(.not-found-page) .eyebrow {
    animation-duration: 1ms;
    animation-fill-mode: both;
    animation-name: editorial-label-resolve;
    animation-timeline: view(block);
    animation-timing-function: linear;
    animation-range: entry 0% cover 24%;
  }

  @keyframes archival-image-pan {
    from { object-position: center 21%; }
    to { object-position: center 32%; }
  }

  @keyframes editorial-rule-draw {
    from {
      opacity: .28;
      transform: scaleX(0);
    }
    to {
      opacity: 1;
      transform: scaleX(1);
    }
  }

  @keyframes editorial-label-resolve {
    from {
      letter-spacing: .24em;
      opacity: .45;
    }
    to {
      letter-spacing: .15em;
      opacity: 1;
    }
  }
}

/* Animate the compact navigation without relying on continuous JavaScript. */
@media (max-width: 1080px) {
  @supports (transition-behavior: allow-discrete) {
    header nav {
      display: flex;
      opacity: 0;
      pointer-events: none;
      transform: translateY(-14px) scale(.985);
      transform-origin: top center;
      transition:
        opacity 260ms ease,
        transform 440ms var(--motion-archive-ease),
        visibility 440ms allow-discrete;
      visibility: hidden;
    }

    header nav.open {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0) scale(1);
      visibility: visible;
    }

    @starting-style {
      header nav.open {
        opacity: 0;
        transform: translateY(-14px) scale(.985);
      }
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-progress {
    display: none !important;
  }

  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-old(page-content),
  ::view-transition-new(page-content),
  ::view-transition-group(site-header),
  ::view-transition-group(site-seal),
  ::view-transition-group(site-footer) {
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
  }

  .founder-frame img,
  .legacy-portrait img,
  .legacy-moment img,
  .legacy-mark img,
  .section-title::after,
  section .eyebrow {
    animation: none !important;
  }

  header nav,
  header nav.open {
    transition: none !important;
  }
}