/* ================= ENTRANCE =================
   One sequence, once, on load. The photograph is the stage and never moves.
   Four behaviours only:
     DRAW    the frame and dock hairlines scale from their anchor — the
             architecture builds itself before anything is said
     MASK    wordmark and headline rise out of an overflow mask
     DECODE  every micro-label resolves with the site's own effect (JS)
     SETTLE  supporting copy, pills and controls arrive on a 7-unit lift

   Timeline (ms from first paint):
     40   frame top + left draw from the top-left corner
     160  wordmark masked rise
     200  frame right + bottom draw back toward it
     300  ENTER pill, 360 MENU pill
     340  nav group, labels decoding from 360
     420  headline line 1 masked rise, 520 line 2
     550  frame corners resolve
     600  index rail, 640 active marker, labels decoding from 660
     700  paragraph settles
     860  CTA settles, label decodes at 900
     920  dock rule draws, cells and labels follow to 1120
     ~1520 last motion ends. Nothing animates afterwards. */
    :root {
      --e-mask: cubic-bezier(.16, 1, .3, 1);
      /* expo-out: long, confident tail */
      --e-line: cubic-bezier(.65, 0, .35, 1);
      /* a drawn stroke, not a fade */
      --e-soft: cubic-bezier(.22, .61, .36, 1);
      /* power2-out for small settles */
    }

    @keyframes drawX {
      from {
        transform: scaleX(0)
      }

      to {
        transform: scaleX(1)
      }
    }

    @keyframes drawY {
      from {
        transform: scaleY(0)
      }

      to {
        transform: scaleY(1)
      }
    }

    @keyframes fadeIn {
      from {
        opacity: 0
      }

      to {
        opacity: 1
      }
    }

    @keyframes maskUp {
      from {
        transform: translateY(112%)
      }

      to {
        transform: translateY(0)
      }
    }

    @keyframes settle {
      from {
        opacity: 0;
        transform: translateY(calc(7*var(--t)))
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    @keyframes markIn {
      from {
        transform: translateY(-50%) scaleX(0)
      }

      to {
        transform: translateY(-50%) scaleX(1)
      }
    }

    /* DRAW — two strokes leave the top-left corner, two answer from the bottom-right */
    .anim .ln-t {
      transform-origin: left center;
      animation: drawX .5s var(--e-line) .04s both
    }

    .anim .ln-l {
      transform-origin: center top;
      animation: drawY .5s var(--e-line) .04s both
    }

    .anim .ln-b {
      transform-origin: right center;
      animation: drawX .5s var(--e-line) .2s both
    }

    .anim .ln-r {
      transform-origin: center bottom;
      animation: drawY .5s var(--e-line) .2s both
    }

    .anim .cn {
      animation: fadeIn .3s linear .55s both
    }

    /* MASK — the wordmark rises inside its own box, no wrapper needed */
    .anim .logo {
      overflow: hidden
    }

    .anim .logo svg {
      animation: maskUp .8s var(--e-mask) .16s both
    }

    .anim .logo-text .t {
      animation: maskUp .8s var(--e-mask) .16s both
    }

    /* SETTLE — masthead */
    .anim .resume {
      animation: settle .56s var(--e-soft) .3s both
    }

    .anim .links {
      animation: fadeIn .4s linear .34s both
    }

    /* MASK — the headline is the one moment that carries weight */
    .headline .hrow {
      display: block;
      overflow: hidden
    }

    .headline .hrise {
      display: block
    }

    .anim .headline .hrise {
      animation: maskUp .9s var(--e-mask) both
    }

    .anim .headline .hrow:first-child .hrise {
      animation-delay: .42s
    }

    .anim .headline .hrow+.hrow .hrise {
      animation-delay: .52s
    }

    /* the rail arrives as one group; its stagger is carried by the decoding labels */
    .anim .index {
      animation: fadeIn .45s linear .6s both
    }

    .anim .index .on::before {
      animation: markIn .42s var(--e-soft) .64s both
    }

    .anim .blurb {
      animation: settle .72s var(--e-soft) .7s both
    }

    .anim .cta {
      animation: settle .62s var(--e-soft) .86s both
    }

    /* DRAW + SETTLE — the dock closes the composition */
    .anim .dock .rule {
      transform-origin: left center;
      animation: drawX .52s var(--e-line) .92s both
    }

    .anim .dock .div {
      transform-origin: center top;
      animation: drawY .36s var(--e-line) 1.06s both
    }

    @keyframes settleC {
      from {
        opacity: 0;
        transform: translate(-50%, calc(7*var(--t)))
      }

      to {
        opacity: 1;
        transform: translateX(-50%)
      }
    }

    .anim .scroll {
      animation: settleC .52s var(--e-soft) 1.02s both
    }

    .anim .talk {
      animation: settle .52s var(--e-soft) 1.08s both
    }

    /* ---------- a11y ---------- */
    a:focus-visible,
    button:focus-visible {
      outline: calc(1.5*var(--t)) solid #e8d1cb;
      outline-offset: calc(3*var(--t))
    }

    .sr {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: -1px;
      padding: 0;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap;
      border: 0
    }

    @media (prefers-reduced-motion:reduce) {
      * {
        transition: none !important;
        animation: none !important
      }
    }