/* Shared motion layer for both variations. Pages set --m-accent, --m-ink, --m-surface, --m-line. */
:root {
  --ease-out-quint: cubic-bezier(.22, 1, .36, 1);
  --ease-in: cubic-bezier(.42, 0, 1, 1);
}

/* Reveal on scroll (only hidden once JS is confirmed running) */
.motion-js [data-reveal] {
  opacity: 1;
  transform: translateY(14px);
  transition: opacity .5s var(--ease-out-quint), transform .6s var(--ease-out-quint);
  transition-delay: calc(min(var(--i, 0), 4) * 60ms);
}
.motion-js [data-reveal].is-in { opacity: 1; transform: none; }

/* Arrow button: circle fills with accent on hover (BTR "button-fill") */
.btn-arrow {
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: transparent; border: 1.5px solid currentColor;
  transition: background-color .5s ease, color .5s ease, border-color .5s ease, transform .5s var(--ease-out-quint);
  margin-right: -8px;
}
.btn-arrow svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .5s var(--ease-out-quint); }
a:hover > .btn-arrow, a:focus-visible > .btn-arrow, button:hover > .btn-arrow { background: var(--m-accent); border-color: var(--m-accent); color: var(--m-on-accent, #fff); }
a:hover > .btn-arrow svg, a:focus-visible > .btn-arrow svg { transform: rotate(-45deg); }

/* 3D flip card (BTR value cards: rotateY 180, 1s outQuint) */
.flip { perspective: 1400px; cursor: pointer; outline-offset: 4px; }
.flip-inner { position: relative; height: 100%; transform-style: preserve-3d; transition: transform 1s var(--ease-out-quint); }
.flip-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip-back { transform: rotateY(180deg); }
@media (hover: hover) { .flip:hover .flip-inner { transform: rotateY(180deg); } }
.flip.is-flipped .flip-inner { transform: rotateY(180deg); }

/* Scroll-linked helpers. --p comes from [data-scroll]; each block remaps a slice of it. */
[data-scroll] { --p: 0; }

/* Hero icons huddle together: gap 64px → 20px between 54% and 90% progress */
.gap-shrink { --t: clamp(0, (var(--p) - .54) / .36, 1); gap: calc(64px - 44px * var(--t)) !important; }

/* Hero image tuck: side images slide behind the centre between 44% and 61% */
.tuck { --t: clamp(0, (var(--p) - .44) / .17, 1); }
.tuck-left { transform: translateX(calc(var(--tuck-distance, 340px) * var(--t))) scale(calc(1 - .08 * var(--t))); }
.tuck-right { transform: translateX(calc(var(--tuck-distance, 340px) * -1 * var(--t))) scale(calc(1 - .08 * var(--t))); }

/* Alternate parallax: two layers drift opposite ways between 19% and 59% */
.parallax { --t: clamp(0, (var(--p) - .19) / .40, 1); }
.parallax-down { transform: translateY(calc(134px * var(--t) - 40px)); }
.parallax-up { transform: translateY(calc(-225px * var(--t) + 80px)); }

/* Centered carousel (BTR Nexus slider: 1.7 per view, centred, 700ms) */
.carousel { position: relative; }
.carousel { --slide: min(860px, 58vw); }
.carousel-track {
  display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 12px calc((100% - var(--slide)) / 2) 28px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track > * {
  flex: 0 0 var(--slide); scroll-snap-align: center;
  transition: transform .7s var(--ease-out-quint), opacity .7s ease;
  transform: scale(.92); opacity: .55;
}
.carousel-track > .is-active { transform: none; opacity: 1; }
.motion-js .carousel-track > :not(.is-active) .more { visibility: hidden; }
.carousel-nav { display: flex; justify-content: center; gap: 12px; margin-top: 8px; }
.carousel-nav button {
  width: 52px; height: 52px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--m-line); background: var(--m-surface); color: var(--m-ink);
  display: grid; place-items: center; transition: background-color .3s, color .3s, transform .3s;
}
.carousel-nav button:hover { background: var(--m-accent); color: var(--m-on-accent, #fff); transform: translateY(-2px); }
.carousel-nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* Folder illustration: papers fly out, sparkle drops in (BTR University hover) */
.illo-folder { position: relative; width: 240px; height: 190px; margin: 0 auto; }
.illo-folder .folder-back { position: absolute; left: 20px; right: 20px; bottom: 0; height: 130px; border-radius: 14px; background: var(--m-folder, #f7b955); }
.illo-folder .folder-back::before { content: ""; position: absolute; left: 0; top: -14px; width: 80px; height: 24px; border-radius: 10px 10px 0 0; background: inherit; }
.illo-folder .paper { position: absolute; left: 50px; width: 140px; height: 120px; border-radius: 10px; background: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, .12); padding: 14px; display: grid; gap: 7px; align-content: start; transition: transform 1s var(--ease-in); }
.illo-folder .paper i { display: block; height: 7px; border-radius: 4px; background: #e8e6df; }
.illo-folder .paper i:first-child { width: 60%; background: var(--m-accent); }
.illo-folder .paper-1 { bottom: 40px; transform: rotate(-4deg); }
.illo-folder .paper-2 { bottom: 34px; transform: rotate(3deg); }
.illo-folder .paper-3 { bottom: 28px; }
.illo-folder .folder-front { position: absolute; left: 20px; right: 20px; bottom: 0; height: 96px; border-radius: 14px; background: var(--m-folder-front, #ffcd6e); transform-origin: bottom; transition: transform .6s var(--ease-in); box-shadow: 0 -2px 0 rgba(0, 0, 0, .04); }
.illo-folder .spark { position: absolute; right: 18px; top: -30px; font-size: 28px; color: var(--m-accent); transition: transform 1s var(--ease-in); }
.illo-card:hover .paper, .illo-card:focus-within .paper,
.illo-card:hover .folder-front, .illo-card:focus-within .folder-front,
.illo-card:hover .spark, .illo-card:focus-within .spark { transition-timing-function: var(--ease-out-quint); }
.illo-card:hover .paper-1, .illo-card:focus-within .paper-1 { transform: translate(-57px, -66px) rotate(-12deg); }
.illo-card:hover .paper-2, .illo-card:focus-within .paper-2 { transform: translate(41px, -48px) rotate(10deg); }
.illo-card:hover .paper-3, .illo-card:focus-within .paper-3 { transform: translateY(-33px); }
.illo-card:hover .folder-front, .illo-card:focus-within .folder-front { transform: perspective(500px) rotateX(-28deg); }
.illo-card:hover .spark, .illo-card:focus-within .spark { transform: translateY(82px) rotate(90deg); }

/* Build illustration: stack splits apart (BTR "Build-hover", outQuint in, easeIn out) */
.illo-build { position: relative; width: 260px; height: 200px; margin: 0 auto; }
.illo-build .layer { position: absolute; left: 30px; right: 30px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; transition: transform 1s var(--ease-in); }
.illo-build .gold { top: 34px; background: linear-gradient(100deg, #d7a845, #f0d17a); color: #2a1f07; }
.illo-build .silver { top: 78px; background: linear-gradient(100deg, #b5b9c2, #e2e5ea); color: #1b1c20; }
.illo-build .bronze { top: 122px; background: linear-gradient(100deg, #b06a3e, #d99366); color: #2a1408; }
.illo-build .chip-icon { position: absolute; width: 46px; height: 46px; border-radius: 14px; background: #fff; padding: 8px; box-shadow: 0 8px 20px rgba(0, 0, 0, .15); transition: transform 1s var(--ease-in); }
.illo-build .chip-a { left: 6px; top: 6px; }
.illo-build .chip-b { right: 6px; bottom: 6px; }
.illo-card:hover .illo-build *, .illo-card:focus-within .illo-build * { transition-timing-function: var(--ease-out-quint); }
.illo-card:hover .gold, .illo-card:focus-within .gold { transform: translateY(-30px); }
.illo-card:hover .bronze, .illo-card:focus-within .bronze { transform: translateY(30px); }
.illo-card:hover .chip-a, .illo-card:focus-within .chip-a { transform: translate(-28px, -20px) rotate(-10deg); }
.illo-card:hover .chip-b, .illo-card:focus-within .chip-b { transform: translate(28px, 20px) rotate(10deg); }

@media (prefers-reduced-motion: reduce) {
  .motion-js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .flip-inner, .carousel-track > *, .illo-folder *, .illo-build * { transition: none !important; }
  .tuck-left, .tuck-right, .parallax-down, .parallax-up { transform: none; }
}

/* Flip hint wording follows the input type */
.on-touch { display: none; }
@media (hover: none) { .on-hover { display: none; } .on-touch { display: inline; } }