/* ==========================================================================
   Odduel motion layer
   Start states are scoped to html.od-motion (set by motion.js) and to
   visitors who have not asked for reduced motion. Without either, content
   simply sits in place.
   ========================================================================== */

:root {
  --od-ease-out: cubic-bezier(.16, 1, .3, 1);
  --od-ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --od-dur-fast: 400ms;
  --od-dur: 700ms;
  --od-dur-slow: 900ms;
  --od-stagger: 80ms;
  --od-rise: 28px;
}

/* Numbers keep their width while counting. */
[data-od-count] { font-variant-numeric: tabular-nums; }

/* Accordion chevron: follows the native [open] state, with or without script. */
.od-accordion__icon { transition: transform var(--od-dur-fast) var(--od-ease-out); }
details[open]:not(.is-closing) > summary .od-accordion__icon { transform: rotate(180deg); }

/* Card hover: clipped frame for the image zoom. */
.od-hover__media { overflow: hidden; }
.od-hover__media img { display: block; }

@media (prefers-reduced-motion: reduce) {
  .od-accordion__icon { transition: none; }
}

@media (prefers-reduced-motion: no-preference) {

  /* ---- Reveal and stagger ------------------------------------------------ */
  .od-motion [data-od-reveal],
  .od-motion [data-od-stagger] > * {
    opacity: 0;
    transform: translate3d(0, var(--od-rise), 0);
    transition:
      opacity var(--od-dur) var(--od-ease-out) var(--od-delay, 0ms),
      transform var(--od-dur-slow) var(--od-ease-out) var(--od-delay, 0ms);
  }
  .od-motion [data-od-reveal="fade"] { transform: none; }
  .od-motion [data-od-reveal="left"] { transform: translate3d(calc(var(--od-rise) * -1), 0, 0); }
  .od-motion [data-od-reveal="right"] { transform: translate3d(var(--od-rise), 0, 0); }
  .od-motion [data-od-reveal].is-in,
  .od-motion [data-od-stagger] > .is-in {
    opacity: 1;
    transform: none;
  }

  /* ---- Page-load sequence ------------------------------------------------ */
  .od-motion [data-od-load] {
    opacity: 0;
    transform: translate3d(0, -16px, 0);
    transition:
      opacity var(--od-dur) var(--od-ease-out) var(--od-delay, 0ms),
      transform var(--od-dur-slow) var(--od-ease-out) var(--od-delay, 0ms);
  }
  .od-motion [data-od-load="up"] { transform: translate3d(0, var(--od-rise), 0); }
  .od-motion [data-od-load="fade"] { transform: none; }
  .od-motion.od-loaded [data-od-load] {
    opacity: 1;
    transform: none;
  }

  /* ---- Split headline ---------------------------------------------------- */
  .od-w {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    /* Room for descenders and tight tracking inside the mask, without moving the text. */
    padding: 0 .06em .16em;
    margin: 0 -.06em -.16em;
  }
  .od-w__i {
    display: inline-block;
    transform: translate3d(0, calc(100% + .2em), 0);
    transition: transform var(--od-dur-slow) var(--od-ease-out)
      calc(var(--od-delay, 0ms) + var(--od-i, 0) * var(--od-split-step, 90ms));
  }
  [data-od-split="words"] { --od-split-step: 35ms; }
  [data-od-split].is-in .od-w__i { transform: none; }

  /* ---- Image reveal ------------------------------------------------------ */
  /* The frame is observed; its child (img, picture or video) is wiped and settles. */
  .od-motion [data-od-image-reveal] { overflow: hidden; }
  .od-motion [data-od-image-reveal] > * {
    clip-path: inset(100% 0 0 0);
    scale: 1.06;
    transition:
      clip-path 600ms var(--od-ease-out) var(--od-delay, 0ms),
      scale 800ms var(--od-ease-out) var(--od-delay, 0ms);
  }
  .od-motion [data-od-image-reveal="down"] > * { clip-path: inset(0 0 100% 0); }
  .od-motion [data-od-image-reveal="right"] > * { clip-path: inset(0 100% 0 0); }
  .od-motion [data-od-image-reveal="left"] > * { clip-path: inset(0 0 0 100%); }
  .od-motion [data-od-image-reveal].is-in > * {
    clip-path: inset(0);
    scale: 1;
  }

  /* ---- Parallax (class is only added on fine pointers) ------------------- */
  /* The extra scale gives the drift room, so the frame never shows a gap. */
  .od-motion .od-parallax,
  .od-motion [data-od-image-reveal].is-in > .od-parallax {
    scale: 1.16;
    will-change: transform;
  }
  .od-motion [data-od-image-reveal]:not(.is-in) > .od-parallax { scale: 1.3; }

  /* ---- Marquee ----------------------------------------------------------- */
  .od-motion [data-od-marquee] {
    display: flex;
    overflow: hidden;
    gap: var(--od-marquee-gap, 4rem);
  }
  .od-motion [data-od-marquee] > * {
    display: flex;
    flex: none;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--od-marquee-gap, 4rem);
    min-width: max-content;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .od-motion [data-od-marquee] > * > * { flex: none; }
  .od-motion .od-marquee-on > * {
    animation: od-marquee var(--od-marquee-d, 40s) linear infinite;
  }
  .od-motion [data-od-marquee="reverse"] > * { animation-direction: reverse; }
  .od-motion [data-od-marquee]:hover > *,
  .od-motion [data-od-marquee]:focus-within > *,
  .od-motion [data-od-marquee].is-paused > * { animation-play-state: paused; }
  .od-motion .od-marquee--fade {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  }

  @keyframes od-marquee {
    to { transform: translate3d(calc(-100% - var(--od-marquee-gap, 4rem)), 0, 0); }
  }

  /* ---- Text fill on scroll ----------------------------------------------- */
  .od-motion .od-scrub .od-s {
    opacity: var(--od-scrub-dim, .22);
    transition: opacity var(--od-dur-fast) linear;
  }
  .od-motion .od-scrub .od-s.is-on { opacity: 1; }

  /* ---- Accordion --------------------------------------------------------- */
  .od-motion details[data-od-accordion] { box-sizing: border-box; }

  /* ---- Cursor label ------------------------------------------------------ */
  .od-cursor {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    pointer-events: none;
  }
  .od-cursor > span {
    display: grid;
    place-items: center;
    width: 5.5rem;
    height: 5.5rem;
    margin: -2.75rem 0 0 -2.75rem;
    border-radius: 50%;
    background: var(--od-cursor-bg, #ff4500);
    color: var(--od-cursor-fg, #fff);
    font-size: .875rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.02em;
    opacity: 0;
    transform: scale(.4);
    transition:
      opacity var(--od-dur-fast) var(--od-ease-out),
      transform var(--od-dur-fast) var(--od-ease-out);
  }
  .od-cursor.is-on > span {
    opacity: 1;
    transform: none;
  }

  /* ---- Card hover -------------------------------------------------------- */
  .od-hover__media img { transition: transform var(--od-dur-slow) var(--od-ease-out); }
  .od-hover__arrow { transition: transform var(--od-dur-fast) var(--od-ease-out); }

  .od-hover:focus-visible .od-hover__media img,
  .od-hover:focus-within .od-hover__media img { transform: scale(1.05); }
  .od-hover:focus-visible .od-hover__arrow,
  .od-hover:focus-within .od-hover__arrow { transform: translate3d(6px, 0, 0); }
  .od-hover:focus-visible .od-hover__arrow--diag,
  .od-hover:focus-within .od-hover__arrow--diag { transform: translate3d(4px, -4px, 0); }

  @media (hover: hover) {
    .od-hover:hover .od-hover__media img { transform: scale(1.05); }
    .od-hover:hover .od-hover__arrow { transform: translate3d(6px, 0, 0); }
    .od-hover:hover .od-hover__arrow--diag { transform: translate3d(4px, -4px, 0); }
  }
}