/* =====================================================================
   BTE motion.css: reusable motion classes (paired with assets/js/motion.js).
   Hidden start states apply only when JS is running (.js) and motion.js loaded
   (otherwise the inline head script adds .no-motion), and never for reduced motion.
   ===================================================================== */
:root {
  --m-ease: cubic-bezier(.2, .7, .2, 1);
  --m-ease-out: cubic-bezier(.16, 1, .3, 1);
  --m-wipe: cubic-bezier(.65, 0, .2, 1);
  --m-dur: .8s;
}

@media (prefers-reduced-motion: no-preference) {
  .js:not(.no-motion) :is(.reveal, .reveal-up, .reveal-left, .reveal-right, .fade-in) {
    opacity: 0;
    transition: opacity var(--m-dur) var(--m-ease) var(--d, 0s), transform var(--m-dur) var(--m-ease-out) var(--d, 0s);
  }
  .js:not(.no-motion) :is(.reveal, .reveal-up) { transform: translateY(28px); }
  .js:not(.no-motion) .reveal-left { transform: translateX(-36px); }
  .js:not(.no-motion) .reveal-right { transform: translateX(36px); }
  .js:not(.no-motion) :is(.reveal, .reveal-up, .reveal-left, .reveal-right, .fade-in).is-in { opacity: 1; transform: none; }

  /* image-reveal: a mask wipes upward, the image settles from a slight zoom */
  .js:not(.no-motion) .image-reveal { clip-path: inset(100% 0 0 0); transition: clip-path 1.15s var(--m-wipe) var(--d, 0s); }
  .js:not(.no-motion) .image-reveal img { transform: scale(1.12); transition: transform 1.6s var(--m-ease-out) var(--d, 0s); }
  .js:not(.no-motion) .image-reveal.is-in { clip-path: inset(0 0 0 0); }
  .js:not(.no-motion) .image-reveal.is-in img { transform: scale(1); }
  /* .reveal containers also wipe the media inside them */
  .js:not(.no-motion) .reveal :is(.media, .rcard__media, .pcard__media, .eq-tile__media) { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s var(--m-wipe) .08s; }
  .js:not(.no-motion) .reveal.is-in :is(.media, .rcard__media, .pcard__media, .eq-tile__media) { clip-path: inset(0); }

  /* stagger-children: direct children rise in sequence (index set by motion.js as --i) */
  .js:not(.no-motion) .stagger-children > * { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--m-ease) calc(var(--i, 0) * 65ms), transform .8s var(--m-ease-out) calc(var(--i, 0) * 65ms); }
  .js:not(.no-motion) .stagger-children.is-in > * { opacity: 1; transform: none; }

  /* accent-line: orange rule draws across */
  .js:not(.no-motion) .accent-line::before { transform: scaleX(0); transition: transform 1.2s var(--m-ease-out) .1s; }
  .js:not(.no-motion) .accent-line.is-in::before { transform: scaleX(1); }

  /* magnetic buttons */
  .is-mag { transform: translate(var(--mx, 0), var(--my, 0)); transition: transform .35s var(--m-ease-out), background .2s, border-color .2s, color .2s, box-shadow .2s; }

  /* parallax target */
  [data-parallax] { transform: translate3d(0, var(--py, 0), 0) scale(1.08); will-change: transform; }
}

/* accent line element */
.accent-line { position: relative; height: 2px; max-width: var(--container); margin: 0 auto; }
.accent-line::before { content: ""; position: absolute; left: var(--gutter); right: var(--gutter); top: 0; height: 2px; background: linear-gradient(90deg, var(--orange), rgba(235, 108, 57, 0)); transform-origin: 0 50%; }

/* underline-anim: links that draw their underline on hover/focus */
.underline-anim { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .35s var(--m-ease); }
.underline-anim:hover, .underline-anim:focus-visible { background-size: 100% 1px; }

/* custom cursor (only shown over [data-cursor]; the system cursor stays visible) */
.cursor { position: fixed; left: 0; top: 0; z-index: 400; pointer-events: none; width: 0; height: 0; }
.cursor__label { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; background: var(--orange); color: var(--blue-950); font: 800 .72rem/1 var(--font); letter-spacing: .14em; text-transform: uppercase; transform: scale(0); opacity: 0; transition: transform .35s var(--m-ease-out), opacity .2s; box-shadow: 0 10px 30px -10px rgba(7, 17, 47, .5); }
.cursor.is-on .cursor__label { transform: scale(1); opacity: 1; }

/* back to top: BTE monogram with scroll-progress ring */
.totop { position: fixed; right: 18px; bottom: 18px; z-index: 90; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: 0 10px 30px -10px rgba(7, 17, 47, .45); opacity: 0; transform: translateY(16px) scale(.9); pointer-events: none; transition: opacity .3s, transform .4s var(--m-ease-out); }
.totop.is-shown { opacity: 1; transform: none; pointer-events: auto; }
.totop svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.totop__track { fill: none; stroke: var(--line); stroke-width: 2.5; }
.totop__bar { fill: none; stroke: var(--orange); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p, 0) * 100); }
.totop__mark { width: 30px; height: auto; border-radius: 4px; transition: transform .4s var(--m-ease-out); }
.totop:hover .totop__mark { transform: translateY(-3px); }
.totop__arrow { position: absolute; top: 3px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-left: 2px solid var(--orange); border-top: 2px solid var(--orange); transform: rotate(45deg) translate(2px, 2px); opacity: 0; transition: opacity .25s, transform .35s var(--m-ease-out); }
.totop:hover .totop__arrow { opacity: 1; transform: rotate(45deg); }
@media (max-width: 1023px) { .totop { bottom: 84px; right: 14px; width: 50px; height: 50px; } .totop__mark { width: 26px; } }

@media (prefers-reduced-motion: reduce) {
  .cursor { display: none; }
}
main { overflow-x: clip; }