/* ─────────────────────────────────────────────────────────────
   Niek van Halteren — Elemental Leadership
   Inverted take on the reference: white paper, black ink,
   element colour as the only chroma in the room.
   ───────────────────────────────────────────────────────────── */

:root {
  --paper: #ffffff;
  /* Matched to niekvanhalteren.com: his dark is #111414 and his accent gold is
     #FBAF3F — brighter than the #EDB055 printed in the brand book. */
  --ink: #111414;
  --ink-soft: rgba(17, 20, 20, .58);
  --ink-faint: rgba(17, 20, 20, .32);
  --hair: rgba(17, 20, 20, .13);
  --gold: #FBAF3F;
  --video-frame: var(--gold);

  /* His headings are Helvetica Now Display 600; Inter 600 stands in. Body is
     Roboto, which we can match exactly. */
  --display: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --text: 'Roboto', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;

  /* Element channel — driven from JS, lerped on quadrant change. */
  --el: #222626;
  --el-deep: #222626;
  --el-glow: #8A9491;
  --el-a: 0;               /* 0 = neutral, 1 = an element is active */

  --pad: clamp(20px, 3.1vw, 46px);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --slow: cubic-bezier(.65, .02, .18, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { background: var(--paper); }
body { background: var(--paper); }

/* The page no longer scrolls at all: a few wheel notches arm the transition and
   it then plays itself. Kept at zero height so the markup hook survives. */
.scroll-track { height: 0; pointer-events: none; }

body {
  font-family: var(--text);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;        /* the transition is played, not scrubbed */
}

/* Backdrop, #stage and the element cursor now live in shell.css, shared with
   the assessment. */

/* ── Quadrant hit-zones ────────────────────────────────────── */

.quadrants { position: fixed; inset: 0; z-index: 2; display: grid;
  grid-template: 1fr 1fr / 1fr 1fr; }
.quad { width: 100%; height: 100%; }

/* ── Shell ─────────────────────────────────────────────────── */

.shell {
  position: fixed; inset: 0; z-index: 3;
  padding: var(--pad);
  display: grid;
  grid-template-rows: auto 1fr auto;
  pointer-events: none;
  /* --exit: 0 at rest, 1 once the hero has cleared. Set from scroll. */
  opacity: calc(1 - var(--exit, 0));
  transform: translateY(calc(var(--exit, 0) * -9vh));
  will-change: opacity, transform;
}
.shell a, .shell button { pointer-events: auto; }

/* ── Top bar ───────────────────────────────────────────────── */

.bar { display: flex; align-items: center; justify-content: space-between; }

.brand img { height: clamp(26px, 2.5vw, 34px); display: block; }
.brand { opacity: .92; transition: opacity .4s var(--ease); }
.brand:hover { opacity: 1; }

.bar-r { display: flex; gap: 10px; align-items: center; }
.locale-toggle {
  min-height: 38px;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 12px;
  border: 1px solid var(--hair); border-radius: 999px;
  color: var(--ink); background: rgba(255,255,255,.62);
  backdrop-filter: blur(10px);
  font: 500 10.5px/1 'JetBrains Mono', monospace;
  letter-spacing: .08em;
  cursor: pointer;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.locale-toggle:hover { border-color: var(--gold); background: rgba(255,255,255,.86); }
.locale-toggle:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.locale-flag { font-size: 15px; line-height: 1; }
.site-menu { position: relative; pointer-events: auto; }
.site-menu summary { list-style: none; }
.site-menu summary::-webkit-details-marker { display: none; }
.site-menu[open] .burger i:first-child { transform: translateY(2px) rotate(45deg); }
.site-menu[open] .burger i:last-child { transform: translateY(-2px) rotate(-45deg); }
.site-menu-links {
  position: absolute; top: calc(100% + 10px); right: 0;
  width: max-content; min-width: 220px; padding: 8px;
  display: grid; gap: 2px;
  border: 1px solid var(--hair); border-radius: 12px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 18px 50px rgba(17,20,20,.12);
  backdrop-filter: blur(12px);
}
.site-menu-links a {
  padding: 12px 13px; border-radius: 7px;
  color: var(--ink); text-decoration: none;
  font: 500 11px/1.25 'JetBrains Mono', monospace;
  letter-spacing: .06em; text-transform: uppercase;
}
.site-menu-links a:hover,
.site-menu-links a:focus-visible { color: var(--ink); background: color-mix(in srgb, var(--gold) 24%, transparent); }

.pill {
  font: 500 11.5px/1 'JetBrains Mono', monospace;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--paper); background: var(--ink);
  border: 1px solid var(--ink); border-radius: 999px;
  padding: 11px 19px; text-decoration: none;
  display: inline-flex; align-items: center; gap: 9px;
  transition: background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
}
.pill:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }

.pill-ghost {
  background: transparent; color: var(--ink);
  border-color: var(--hair); cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
}
.pill-ghost:hover { background: transparent; border-color: var(--el-deep); color: var(--el-deep); }

.burger { display: inline-flex; flex-direction: column; gap: 3px; }
.burger i {
  width: 13px; height: 1px; background: currentColor; display: block;
  transition: transform .3s var(--ease);
}
.hint-touch { display: none; }

/* ── Hero ──────────────────────────────────────────────────── */

.hero { align-self: start; padding-top: clamp(24px, 6vh, 74px); max-width: min(56vw, 780px); }

.head {
  font-family: var(--display);
  font-weight: 600;              /* his headings are consistently 600 */
  font-size: clamp(36px, 6.1vw, 88px);
  line-height: 1.0;              /* he sets 100px/100px — dead flat */
  letter-spacing: -.03em;
  color: var(--ink);
  /* Now that the mark is centred the headline crosses it, and the swapping word
     is element-coloured over element-coloured geometry. The halo separates the
     two without putting a panel behind the type. */
  text-shadow: 0 0 30px rgba(255,255,255,.92), 0 0 12px rgba(255,255,255,.8);
}
.head-l1, .head-l2 { display: block; }
.head-l2 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 .28em; }
.head-static { white-space: nowrap; }

/* The swapping element word. The word and its full stop share one flex item so
   the parent's word-gap can't wedge a space in front of the period. */
.head-word { display: inline-flex; align-items: baseline; }
.swap { display: inline-flex; white-space: nowrap; color: var(--el-deep);
  transition: color .8s var(--ease); }
.swap .ch {
  display: inline-block;
  white-space: pre;
  will-change: transform, filter, opacity;
}
.head-dot { color: var(--el-deep); transition: color .8s var(--ease); }

.cta {
  margin-top: clamp(20px, 3.4vh, 40px);
  display: inline-flex; align-items: center; gap: 13px;
  font: 500 11.5px/1 'JetBrains Mono', monospace;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
  padding-bottom: 8px; position: relative;
}
.cta::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--hair);
}
/* Gold, not the element colour: this is his brand accent and it should stay
   constant while everything around it shifts per element. */
.cta::before {
  content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: var(--gold); z-index: 1;
  transition: width .6s var(--ease);
}
.cta:hover::before { width: 100%; }
.cta:hover { color: var(--ink); }
.cta:hover .cta-arrow { transform: translateX(6px); color: var(--gold); }
.cta-arrow { transition: transform .5s var(--ease); }
.cta:hover .cta-arrow { transform: translateX(6px); }

/* ── Element quotes ────────────────────────────────────────
   Each element's words live in its own quadrant, behind the mark, so hovering a
   corner reveals what that element says about you as part of the scenery rather
   than as a panel of UI. */

/* Above the 3D canvas (z-index 1), below the shell (3). Sitting *under* the mark
   read as properly background, but the mark painted straight over the small
   line and made it unreadable — the low opacity is what keeps this recessive,
   not the stacking order. */
.quotes { position: fixed; inset: 0; z-index: 2; pointer-events: none; }

.quote {
  position: absolute;
  max-width: min(26vw, 300px);
  opacity: 0;
  transition: opacity .85s var(--ease), transform 1.1s var(--ease);
  will-change: opacity, transform;
}
/* lucht sits lowest of the four: the headline and CTA own the top-left corner,
   so it drops to mid-left rather than fighting them. */
/* Left/right offsets clear the vertical edge labels, which sit at 11px.
   vuur is now the top-left quadrant, so it takes the mid-left slot the headline
   forces; lucht moves to the free top-right corner. */
.quote[data-el="vuur"]  { top: 52%;    left: 4.5vw;  transform: translateY(14px); }
.quote[data-el="lucht"] { top: 15%;    right: 3.5vw; transform: translateY(14px); text-align: right; }
.quote[data-el="aarde"] { bottom: 16%; left: 4.5vw;  transform: translateY(14px); }
.quote[data-el="water"] { bottom: 15%; right: 3.5vw; transform: translateY(14px); text-align: right; }
.quote.on { opacity: 1; transform: translateY(0); }

/* No scrim behind these. Legibility comes from a soft white halo on the type
   itself, which lifts it off a busy photo without ever drawing a shape — the
   haze panel that used to sit here hid the background it was meant to sit on. */

.quote-t {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(20px, 2.4vw, 38px);
  line-height: 1.06;
  letter-spacing: -.028em;
  color: var(--el-deep);
  opacity: .3;                     /* scenery, not headline */
  transition: color .7s var(--ease);
  /* Halo instead of a panel: enough separation from the photo to stay legible,
     with no visible edge of its own. */
  text-shadow: 0 0 6px #fff, 0 0 16px rgba(255,255,255,.95), 0 0 30px rgba(255,255,255,.85);
}
.quote-s {
  margin-top: 14px;
  font-size: clamp(12px, 1vw, 14.5px);
  line-height: 1.55;
  font-weight: 500;                /* carries the halo better than 400 */
  color: rgba(17, 20, 20, .92);
  /* Tight opaque layers first, then a wide soft one. A single diffuse glow was
     enough over the washed backdrop but not over the sharpened photograph the
     cursor reveals, which is dark and high-contrast. */
  text-shadow:
    0 0 3px #fff, 0 0 6px #fff, 0 0 10px rgba(255,255,255,.98),
    0 0 20px rgba(255,255,255,.9), 0 0 34px rgba(255,255,255,.75);
}

/* lucht used to be hidden below 1000px because it collided with the headline.
   It now sits lower and carries its own haze, so it can stay. */
@media (max-width: 760px) {
  .quotes { display: none; }
}

/* ── Mobile insight ────────────────────────────────────────
   Below 760px the quadrant quotes are hidden (above) and corner taps replace
   hover, so the same one-line insight surfaces here instead — under the 3D
   mark, where a thumb glancing down after tapping a corner will land on it. */
.mobile-insight { display: none; }
@media (max-width: 760px) {
  /* .shell is a 3-row grid (header / hero / footer); an in-flow 4th child
     here would become its own row, stealing the flexible middle track from
     .hero and shoving it down into the footer's space (as .quotes, .corners
     and .scroll-cue all already avoid by living outside the grid). */
  .mobile-insight {
    display: block;
    position: absolute;
    /* The mark is centred by the 3D scene rather than laid out in CSS, so
       this is a tuned estimate of where it ends on a phone-sized viewport,
       not a value read off any layout box. */
    top: 64vh;
    left: var(--pad); right: var(--pad);
    font-size: 12.5px;
    line-height: 1.5;
    font-weight: 500;
    text-align: center;
    color: var(--el-deep);
    opacity: 0;
    transition: opacity .6s var(--ease), color .6s var(--ease);
  }
  .mobile-insight.on { opacity: 1; }
}

/* ── Corner labels ─────────────────────────────────────────── */

.corners { position: fixed; inset: 0; z-index: 3; list-style: none; pointer-events: none; }

.corner {
  position: absolute;
  display: flex; align-items: center; gap: 9px;
  font: 500 10.5px/1 'JetBrains Mono', monospace;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-faint);
  transition: color .5s var(--ease), opacity .5s var(--ease);
  opacity: .78;
}
/* Set vertically along the outer edges. Horizontal labels collided with the
   headline top-left and the credentials block bottom-right; running them up the
   margins keeps all four visible and touches nothing. */
.corner { writing-mode: vertical-rl; }
.corner[data-quad="tl"] { top: 15%; left: 11px; transform: rotate(180deg); }
.corner[data-quad="bl"] { bottom: 15%; left: 11px; transform: rotate(180deg); }
.corner[data-quad="tr"] { top: 15%; right: 11px; }
.corner[data-quad="br"] { bottom: 15%; right: 11px; }

.corner-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; opacity: .55;
  transition: background .5s var(--ease), transform .5s var(--ease), opacity .5s var(--ease);
}
.corner.hot { color: var(--el-deep); opacity: 1; }
.corner.hot .corner-dot { opacity: 1; transform: scale(1.9); }

/* Below tablet the margins get too tight for edge labels. */
@media (max-width: 620px) {
  .corners { display: none; }
}

/* ── Footer ────────────────────────────────────────────────── */

.foot { align-self: end; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }

/* ── Scroll cue ────────────────────────────────────────────
   Gold chevron travelling down a hairline track. The track's own gradient
   sweeps with it, so the two read as one gesture rather than an icon bouncing
   next to a line. */

/* Centred at the foot of the page. Parked bottom-right it crowded the vertical
   WATER label, and centre is where a scroll cue is looked for anyway. */
.scroll-cue {
  position: absolute; left: 50%; bottom: var(--pad);
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--gold);
}
/* Compact: a short track and the chevron, with the label set horizontally.
   A vertical label made the whole cue tall enough to shove the hint line up
   into the element quote. */
.cue-line {
  width: 2px; height: clamp(26px, 4.2vh, 40px);
  background: linear-gradient(to bottom, transparent, var(--gold) 45%, transparent);
  background-size: 100% 220%;
  animation: cueSweep 2.3s cubic-bezier(.5,0,.5,1) infinite;
  opacity: .9;
}
.cue-arrow {
  width: 20px; height: 26px; display: block;
  animation: cueFall 2.3s cubic-bezier(.5,0,.5,1) infinite;
  filter: drop-shadow(0 1px 5px color-mix(in srgb, var(--gold) 50%, transparent));
}
.cue-arrow svg { width: 100%; height: 100%; display: block; }
.cue-txt {
  font: 600 10px/1 'JetBrains Mono', monospace;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold);
  opacity: .75;
}

@keyframes cueSweep {
  0%   { background-position: 0 -100%; }
  60%  { background-position: 0 100%; }
  100% { background-position: 0 100%; }
}
@keyframes cueFall {
  0%, 12%  { transform: translateY(-5px); opacity: 0; }
  38%      { transform: translateY(0);    opacity: 1; }
  70%      { transform: translateY(5px);  opacity: 1; }
  92%, 100%{ transform: translateY(10px); opacity: 0; }
}

/* It has done its job once the transition is under way. */
.scroll-cue { transition: opacity .5s var(--ease); }
body.armed .scroll-cue { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .cue-line, .cue-arrow { animation: none; }
  .cue-arrow { opacity: 1; }
}
@media (max-width: 760px) {
  .locale-toggle { min-height: 36px; padding: 7px 10px; }
}

.hint {
  font: 400 10.5px/1.5 'JetBrains Mono', monospace;
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--ink-faint);
  display: flex; gap: 10px; align-items: center;
  transition: color .5s var(--ease);
  margin: 0 auto;
  position: absolute; left: 50%; bottom: calc(var(--pad) + 62px);
  transform: translateX(-50%);
  white-space: nowrap;
}
.hint-sep { opacity: .5; }
.hint-v { color: var(--el-deep); transition: color .6s var(--ease); }

/* "Move/tap a corner" doesn't survive on touch — there's nothing to hover, and
   the corner insight has already moved up under the logo. The scroll cue takes
   over the footer instead, still pointing at the one thing left to do. */
@media (max-width: 760px) {
  .hint { display: none; }
}

/* The credentials block that used to sit bottom-right is gone: it was carried
   over from the reference as filler, and it occupied exactly the corner the
   water quote needs. Real content beats a decorative badge. */

@media (max-width: 720px) {
  .hero { max-width: 100%; }
}
@media (max-width: 640px) {
  .head { font-size: clamp(32px, 10vw, 52px); }
  .claim { max-width: 100%; }
}

/* ── About: resolves in behind the burst ──────────────────── */

.about {
  position: fixed; inset: 0; z-index: 3;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center;
  background: rgba(17,20,20,.5);
  color: #fff;
  padding: clamp(14px, 2.4vh, 28px) clamp(16px, 3vw, 48px);
  pointer-events: none;
  /* --enter: 0 hidden, 1 fully arrived. */
  opacity: var(--enter, 0);
  transform: translateY(calc((1 - var(--enter, 0)) * 6vh));
  will-change: opacity, transform;
}
/* Hidden outright until the transition brings it in. Opacity alone still leaves
   it in the hit-test, and since the video frame fills most of the screen, the
   YouTube iframe was silently swallowing wheel events over the hero — which is
   why scrolling stopped working in parts of the page.
   `visibility` also blocks hit-testing, so nothing here can intercept anything
   until it is genuinely on screen. */
.about { visibility: hidden; }
.about.live { visibility: visible; }

/* The iframe needs pointer events as much as the links do — without them the
   whole YouTube player is click-through: no play button, no scrubbing. But only
   once it's live. */
.about.live a,
.about.live iframe,
.about.live .vid-frame,
.about.live[data-live="1"] button { pointer-events: auto; }

.about-eyebrow {
  font: 500 10.5px/1 'JetBrains Mono', monospace;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--el-deep); margin-bottom: clamp(14px, 2.4vh, 26px);
  transition: color .6s var(--ease);
}

.about-head {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(17px, 2vw, 30px);   /* the video is the subject here */
  line-height: 1.14;
  letter-spacing: -.022em;
  max-width: 30ch;
  color: var(--ink);
}
.about-top { margin-bottom: clamp(10px, 1.8vh, 20px); }
.about-eyebrow { margin-bottom: 8px; }
.about-head em { font-style: normal; color: var(--el-deep); transition: color .6s var(--ease); }

.about-top { flex: none; }

/* ── Video ─────────────────────────────────────────────────
   Sized off viewport height, not width: the frame has to finish inside one
   screen alongside the heading, and height is the binding constraint on a
   laptop. */
.vid {
  margin: 0;
  display: flex; flex-direction: column; align-items: center;
  min-height: 0;
}

.vid-frame {
  position: relative;
  /* Fill as much of the screen as the 16:9 box allows, bounded by BOTH axes so
     it never overflows. The larger surface also gets YouTube to serve a higher
     quality stream — playback quality scales with player size. */
  width: min(92vw, calc((100vh - 170px) * 16 / 9));
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: #0b0d0d;
  border: 1px solid var(--hair);
  /* Two shadows: a tight contact edge plus a wide soft lift, so the frame sits
     on the page rather than being pasted onto it. */
  box-shadow:
    0 1px 2px rgba(17,20,20,.10),
    0 26px 60px -18px rgba(17,20,20,.30);
  transform: translateY(14px) scale(.985);
  opacity: 0;
  transition: opacity .9s var(--ease) .12s, transform 1.1s var(--ease) .12s;
}
.about[data-live="1"] .vid-frame { opacity: 1; transform: none; }

.vid-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.vid-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 8px solid var(--video-frame);
  border-radius: inherit;
  pointer-events: none;
  transition: border-color .6s var(--ease);
}

.vid-sound {
  position: absolute;
  top: clamp(12px, 2vw, 18px);
  right: clamp(12px, 2vw, 18px);
  z-index: 2;
  border: 1px solid rgba(255,255,255,.42);
  border-radius: 999px;
  padding: 9px 13px;
  color: var(--paper);
  background: rgba(17,20,20,.72);
  backdrop-filter: blur(8px);
  font: 500 10px/1 'JetBrains Mono', monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .3s var(--ease), background-color .3s var(--ease);
}
.about.live[data-live="1"] .vid-sound {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.vid-sound:hover { background: var(--ink); }
.vid-sound:focus-visible {
  outline: 3px solid var(--paper);
  outline-offset: 3px;
}

.vid-cap {
  margin-top: 12px;
  display: flex; align-items: baseline; justify-content: center; gap: 22px;
  font: 500 10px/1.5 'JetBrains Mono', monospace;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-faint);
  flex-wrap: wrap;
}
.vid-cta {
  position: relative; flex-basis: 100%; width: fit-content; margin-inline: auto;
  color: var(--ink); text-decoration: none; white-space: nowrap;
  padding: 8px 4px 10px;
  font-size: clamp(14px, 1.2vw, 17px);
  text-align: center;
  transition: color .4s var(--ease);
}
.vid-cta::before,
.vid-cta::after {
  content: ''; position: absolute; left: 4px; right: 4px; bottom: 3px; height: 2px;
}
.vid-cta::before { background: rgba(255,255,255,.28); }
.vid-cta::after {
  background: var(--gold);
  transform: scaleX(.16); transform-origin: left center;
  animation: vid-cta-flow 2.2s var(--ease) infinite;
}
@keyframes vid-cta-flow {
  0% { transform: translateX(0) scaleX(.16); transform-origin: left center; }
  50% { transform: translateX(0) scaleX(1); transform-origin: left center; }
  51% { transform-origin: right center; }
  100% { transform: translateX(0) scaleX(.16); transform-origin: right center; }
}
.about :is(.about-eyebrow, .about-head, .about-head em, .vid-cap, .vid-cta) {
  color: #fff;
}
.vid-cta:hover { color: var(--gold); }
.vid-cta:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; border-radius: 2px; }

@media (max-width: 820px) {
  .about-head { max-width: 100%; }
  .vid-frame::after { border-width: 3px; }
  .vid-cap { flex-direction: column; align-items: center; gap: 12px; text-align: center; }
  .vid-cta {
    flex-basis: auto; align-self: center;
    width: max-content; max-width: 100%; white-space: normal;
    font-size: clamp(15px, 4.2vw, 18px);
  }
}

@media (hover: none), (pointer: coarse) {
  .hint-pointer { display: none; }
  .hint-touch { display: inline; }
}

/* Respect reduced-motion: keep the page, drop the churn. */
@media (prefers-reduced-motion: reduce) {
  .bd-layer, .claim, .corner, .swap, .head-dot { transition-duration: .01ms !important; }
  .vid-cta::after { animation: none; transform: none; }
}