/* Motion system, ported from oho.co.uk and re-skinned for Berecons.
   Every piece is opt-in through a data attribute or class; see scripts/motion.js. */

/* 1. Scroll reveal (AOS: offset 120px, easing ease, 1000ms, replays on re-entry) */
.js [data-reveal] {
  transition-property: opacity, transform;
  transition-duration: var(--reveal-duration, 1000ms);
  transition-timing-function: ease;
  transition-delay: var(--reveal-delay, 0ms);
}

.js [data-reveal]:not(.is-in) {
  opacity: 0;
}

.js [data-reveal="up"]:not(.is-in) {
  transform: translate3d(0, 100px, 0);
}

.js [data-reveal="down"]:not(.is-in) {
  transform: translate3d(0, -100px, 0);
}

.js [data-reveal="right"]:not(.is-in) {
  transform: translate3d(-100px, 0, 0);
}

.js [data-reveal="left"]:not(.is-in) {
  transform: translate3d(100px, 0, 0);
}

.js [data-reveal="tilt"]:not(.is-in) {
  transform: perspective(1400px) translate3d(0, 120px, 0) rotateX(28deg);
}

[data-reveal="tilt"] {
  transform-origin: 50% 100%;
}

/* 2. Scroll drift: JS sets translateX from section progress; the short linear transition smooths it */
[data-drift] {
  transition: transform 0.1s linear;
}

/* 3. Word rotator: words stack in one cell, the current one sits in place,
   the next rises in from below while the old one leaves upward */
.rotator {
  display: inline-grid;
  vertical-align: top;
}

.rotator__word {
  grid-area: 1 / 1;
  color: var(--turquoise);
  transition:
    opacity 0.3s ease-in-out,
    transform 0.3s ease-in-out;
}

.rotator__word:nth-child(even) {
  color: var(--yellow);
}

.js .rotator__word:not(.is-current) {
  opacity: 0;
  transform: translateY(0.25em);
}

.js .rotator__word.is-leaving {
  transform: translateY(-0.25em);
}

/* 4. Marquee band: continuous leftward scroll at a fixed speed */
.marquee {
  overflow: hidden;
  padding: 0.35rem 0;
  background: var(--blue);
  color: var(--white);
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee var(--marquee-duration, 40s) linear infinite;
}

.marquee__group {
  display: flex;
  flex-shrink: 0;
}

.marquee__item {
  position: relative;
  padding: 0.25rem 3.5rem 0.25rem 2.25rem;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Separator: the magnifier mark, tinted to the band's text colour */
.marquee__item::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 0.8rem;
  height: 1.4rem;
  translate: 0 -50%;
  background: currentColor;
  -webkit-mask: url("../assets/site/mark-white.png") center / contain no-repeat;
  mask: url("../assets/site/mark-white.png") center / contain no-repeat;
}

.marquee--gold {
  background: var(--yellow);
  color: var(--surface-deep);
}

@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

/* Scroll highlight: JS splits the text into words and drives each word's opacity */
[data-highlight].is-split em {
  background: none;
  -webkit-text-fill-color: currentColor;
}

.hl-word {
  transition: opacity 0.15s linear;
}

.hl-word--grad {
  background: linear-gradient(90deg, var(--turquoise) 45%, var(--yellow)) no-repeat;
  background-size: var(--run, 100%) 100%;
  background-position: calc(var(--x, 0px) * -1) 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 5. Count-up numbers need stable widths while they run */
[data-count] {
  font-variant-numeric: tabular-nums;
}

/* 6. Glow: a slowly spinning gradient blob that trails the pointer, softened by a heavy blur veil */
.glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.glow__blob {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 40vw;
  min-height: 500px;
  aspect-ratio: 1;
  border-radius: 50%;
  translate: -50% -50%;
  background: linear-gradient(90deg, var(--yellow), var(--turquoise));
  opacity: 0.55;
  animation: glow-spin 2s ease-in-out infinite;
}

.glow::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(36, 37, 40, 0.5);
  -webkit-backdrop-filter: blur(75px);
  backdrop-filter: blur(75px);
}

@keyframes glow-spin {
  0% {
    transform: rotate(0deg);
  }
  50% {
    scale: 1 1.5;
  }
  100% {
    transform: rotate(1turn);
  }
}

/* 7. Card with a gradient border that lights up on hover */
.edge-card {
  position: relative;
  border: 3px solid var(--white);
  border-radius: 1.25rem;
  transition: all 0.3s ease;
}

.edge-card::before {
  content: "";
  position: absolute;
  inset: -3px;
  z-index: 1;
  padding: 3px;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--turquoise) 50%, var(--yellow));
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box exclude,
    linear-gradient(#fff 0 0);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.edge-card:hover::before,
.edge-card:focus-within::before {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal]:not(.is-in) {
    opacity: 1;
    transform: none;
  }

  .marquee__track,
  .glow__blob {
    animation: none;
  }
}