/* bin cleaning summit 2027 - motion layer */

/* splash */
.splash { display: none; }

html.js .splash {
  display: grid;
  position: fixed;
  inset: 0;
  z-index: 999;
  place-items: center;
  background:
    radial-gradient(60% 50% at 50% 50%, rgba(29, 129, 255, 0.10) 0%, rgba(29, 129, 255, 0) 70%),
    var(--bg);
  opacity: 1;
  transition: opacity 520ms var(--bez), visibility 0s linear 520ms;
}
html.js .splash::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(430px, 88vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side,
    rgba(29, 129, 255, 0.30) 0%,
    rgba(29, 129, 255, 0.24) 12%,
    rgba(29, 129, 255, 0.17) 25%,
    rgba(29, 129, 255, 0.11) 38%,
    rgba(29, 129, 255, 0.065) 51%,
    rgba(29, 129, 255, 0.034) 64%,
    rgba(29, 129, 255, 0.014) 78%,
    rgba(29, 129, 255, 0.004) 90%,
    rgba(29, 129, 255, 0) 100%);
  filter: blur(42px);
  pointer-events: none;
}
.splash__mark {
  position: relative;
  width: min(240px, 46vw);
  height: auto;
  opacity: 0;
  transform: scale(0.96);
  animation: splash-mark 700ms var(--bez) forwards;
}
@keyframes splash-mark {
  0%   { opacity: 0; transform: scale(0.96); }
  45%  { opacity: 1; transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
.splash.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* the gradient is held back behind the splash and washes in as it lifts. */
html.js body::before {
  opacity: 1;
  transition: opacity 400ms ease-out;
}
html.js body.is-loading::before { opacity: 0; }

/* hold the page still underneath while the splash is up. */
html.js body.is-loading { overflow: hidden; }

html.js body.is-loading .hero__lockup,
html.js body.is-loading .hero__credit,
html.js body.is-loading .hero__eyebrow,
html.js body.is-loading .hero__title,
html.js body.is-loading .hero__sub,
html.js body.is-loading .hero__action {
  animation-play-state: paused;
}

.site-header__bar {
  transition:
    max-width 380ms var(--bez),
    height    380ms var(--bez),
    padding   380ms var(--bez);
}
.site-header.is-stuck .site-header__bar {
  transition:
    max-width 1000ms var(--bez),
    height    1000ms var(--bez),
    padding   1000ms var(--bez);
}

.glass__fill { transition: opacity 340ms var(--bez); }
.site-header.is-stuck .glass__fill { transition: opacity 1200ms var(--bez); }
.site-header__bar::before,
.site-header__bar::after {
  transition: opacity 1200ms var(--bez);
}
.site-header__logo img { transition: width 380ms var(--bez); }
.site-header.is-stuck .site-header__logo img { transition: width 1000ms var(--bez); }

/* nav hover: a low-opacity rounded rectangle that fades under the label. */
.nav__link {
  position: relative;
  z-index: 0;
  transition: color 250ms var(--bez), text-shadow 1000ms var(--bez);
}
.nav__link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: var(--radius);
  background: rgba(150, 205, 255, 0.10);
  opacity: 0;
  transition: opacity 250ms var(--bez);
  pointer-events: none;
}
.nav__link:hover::before,
.nav__link:focus-visible::before { opacity: 1; }

.mobile-nav { position: relative; }
.mobile-nav__link {
  position: relative;
  z-index: 2;
  transition: color 250ms var(--bez), text-shadow 1000ms var(--bez);
}
.mobile-nav__link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: var(--radius);
  background: rgba(150, 205, 255, 0.10);
  opacity: 0;
  transition: opacity 250ms var(--bez);
  pointer-events: none;
}
.mobile-nav__link:hover::before,
.mobile-nav__link:focus-visible::before,
.mobile-nav__link:active::before { opacity: 1; }

html.is-locking { scroll-behavior: auto; }

/* scroll cue */
.scroll-cue {
  position: fixed;
  left: 50%;
  bottom: 34px;
  z-index: 60;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-left: -23px;
  border-radius: 50%;
  border: 1px solid rgba(96, 197, 254, 0.28);
  background: radial-gradient(circle at 50% 34%,
    rgba(29, 129, 255, 0.12) 0%,
    rgba(29, 129, 255, 0.03) 100%);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow:
    inset 0 1px 0 rgba(150, 215, 255, 0.16),
    0 0 7px rgba(29, 129, 255, 0.16);
  opacity: 0;
  pointer-events: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition:
    opacity 700ms var(--bez),
    transform 700ms var(--bez),
    border-color 300ms var(--bez),
    box-shadow 300ms var(--bez);
}
html.is-intro .scroll-cue { pointer-events: auto; }
html.is-intro .scroll-cue:hover,
html.is-intro .scroll-cue:focus-visible {
  border-color: rgba(96, 197, 254, 0.62);
  box-shadow:
    inset 0 1px 0 rgba(150, 215, 255, 0.26),
    0 0 16px rgba(29, 129, 255, 0.34);
}
html.is-intro .scroll-cue:focus-visible { outline: 2px solid var(--blue-light); outline-offset: 3px; }
.scroll-cue svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--blue-light);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 2px rgba(96, 197, 254, 0.22));
}

/* fades up once the splash is clear, then bobs. */
html.is-intro .scroll-cue {
  animation:
    cue-in  700ms var(--bez) 1100ms forwards,
    cue-bob 2200ms ease-in-out 1800ms infinite;
}
html:not(.is-intro) .scroll-cue {
  opacity: 0;
  transform: translateY(90px);
  transition: opacity 560ms var(--bez), transform 720ms var(--bez);
}
@keyframes cue-in  { to { opacity: 1; } }
@keyframes cue-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }

/* neon seam between modules */
.seam {
  position: relative;
  z-index: 0;
  height: 1px;
  margin-block: var(--seam-gap);
  margin-inline: auto;
  width: min(1252px, calc(100% - 2 * var(--gutter)));
  background: linear-gradient(90deg,
    rgba(96, 197, 254, 0)    calc(var(--seam-x, 50%) - 48%),
    rgba(96, 197, 254, 0.18) calc(var(--seam-x, 50%) - 25%),
    rgba(160, 226, 255, 0.68) var(--seam-x, 50%),
    rgba(96, 197, 254, 0.18) calc(var(--seam-x, 50%) + 25%),
    rgba(96, 197, 254, 0)    calc(var(--seam-x, 50%) + 48%));
  /* scaled from the centre, so it draws outward when revealed. */
  transform: scaleX(0.2);
  opacity: 0;
  transition: transform 1100ms var(--bez-scroll), opacity 800ms var(--bez-scroll);
}
/* the bloom underneath. */
.seam::after {
  content: "";
  position: absolute;
  left: -48px;
  right: -48px;
  top: 50%;
  height: 150px;
  transform: translateY(-50%);
  pointer-events: none;
  background: radial-gradient(ellipse 30% 34% at var(--seam-x, 50%) 50%,
    rgba(29, 129, 255, 0.13) 0%,
    rgba(29, 129, 255, 0.045) 38%,
    rgba(29, 129, 255, 0) 72%);
}
.seam.is-in {
  transform: scaleX(1);
  opacity: 1;
}

/* scroll reveal */
[data-reveal] { opacity: 0; }

[data-reveal].is-in {
  opacity: 1;
  animation: reveal-rise 820ms var(--bez-scroll) var(--reveal-delay, 0ms) backwards;
}

@keyframes reveal-rise {
  from { opacity: 0; transform: translateY(22px); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}

/* lockup and date line rise in on load. */
.hero__lockup,
.hero__credit,
.hero__eyebrow {
  opacity: 0;
  transform: translateY(10px);
  animation: rise-in 700ms var(--bez) forwards;
}
.hero__lockup  { animation-delay: 140ms; }
.hero__credit  { animation-delay: 240ms; }
.hero__eyebrow { animation-delay: 340ms; }

@keyframes rise-in {
  to { opacity: 1; transform: none; }
}

@keyframes logo-settle {
  from { scale: 1.1; }
  to   { scale: 1; }
}

/* the logo gets its own bloom as it lands. */
.hero__lockup {
  animation-name: rise-in, logo-bloom, logo-settle;
  animation-duration: 700ms, 1000ms, 1100ms;
  animation-timing-function: var(--bez), ease-out, var(--bez);
  animation-delay: 140ms, 520ms, 140ms;
  animation-fill-mode: forwards, both, both;
}

.hero__intro {
  transform: translateY(var(--intro-shift, 0px));
  transition: transform 1900ms var(--bez);
}
html:not(.is-intro) .hero__intro { transform: none; }

.hero__title .hero__line-in,
.hero__sub,
.hero__action {
  transition:
    opacity   1400ms var(--bez),
    transform 1200ms var(--bez),
    filter    1100ms var(--bez);
  transition-delay: var(--in-delay, 0ms);
}
html.is-intro .hero__sub,
html.is-intro .hero__action {
  opacity: 0;
  transform: translateY(56px);
  filter: blur(6px);
  transition-delay: 0ms;
}
html.is-intro .hero__title .hero__line-in {
  opacity: 0;
  transform: translateY(110%);
  filter: blur(6px);
  transition-delay: 0ms;
}
.hero__title .hero__line:nth-child(1) { --in-delay: 260ms; }
.hero__title .hero__line:nth-child(2) { --in-delay: 380ms; }
.hero__sub                     { --in-delay: 500ms; }
.hero__action                  { --in-delay: 640ms; }

@keyframes hero-title-bloom {
  0% {
    filter:
      drop-shadow(0 3px 6px rgba(0, 0, 0, 0.9))
      drop-shadow(0 0 5px rgba(191, 235, 254, 0.10));
    animation-timing-function: ease-out;
  }
  45% {
    filter:
      drop-shadow(0 3px 6px rgba(0, 0, 0, 0.9))
      drop-shadow(0 0 35px rgba(255, 255, 255, 0.20));
    animation-timing-function: ease-in-out;
  }
  100% {
    filter:
      drop-shadow(0 3px 6px rgba(0, 0, 0, 0.9))
      drop-shadow(0 0 5px rgba(191, 235, 254, 0.10));
  }
}
html.is-hero-settled .hero__title {
  animation: hero-title-bloom 1000ms linear forwards;
}

/* nothing below the hero should be reachable-looking mid-intro. */
html.is-intro body { overflow-x: hidden; }
@keyframes logo-bloom {
  from { filter: drop-shadow(0 0 46px rgba(29, 129, 255, 0.40)); }
  to   { filter: drop-shadow(0 0 46px rgba(29, 129, 255, 0)); }
}

/* ambient glow drift */
.ambient__glow {
  animation: orbit var(--drift-dur, 120s) linear infinite;
  animation-delay: var(--drift-delay, 0s);
}
.ambient__glow--tl { --drift-delay: 0s;    }
.ambient__glow--tr { --drift-delay: -20s;  }
.ambient__glow--mr { --drift-delay: -40s;  }
.ambient__glow--br { --drift-delay: -60s;  }
.ambient__glow--bl { --drift-delay: -80s;  }
.ambient__glow--ml { --drift-delay: -100s; }

@keyframes orbit {
  0%   { transform: translate(-50%, -50%) translate3d(0, -3.2%, 0) scale(1.03); opacity: 0.86; }
  25%  { transform: translate(-50%, -50%) translate3d(3.2%, 0, 0)  scale(1);    opacity: 1;    }
  50%  { transform: translate(-50%, -50%) translate3d(0, 3.2%, 0)  scale(1.03); opacity: 0.86; }
  75%  { transform: translate(-50%, -50%) translate3d(-3.2%, 0, 0) scale(1);    opacity: 1;    }
  100% { transform: translate(-50%, -50%) translate3d(0, -3.2%, 0) scale(1.03); opacity: 0.86; }
}

/* stat cards */
.stat {
  transition:
    transform  300ms var(--bez),
    box-shadow 300ms var(--bez),
    border-color 300ms var(--bez);
}
.stat:hover {
  transform: translateY(-4px);
  border-color: rgba(96, 197, 254, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(190, 222, 255, 0.30),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4),
    0 10px 24px rgba(0, 2, 10, 0.55),
    0 0 26px rgba(29, 129, 255, 0.18);
}
.stat__num {
  font-variant-numeric: tabular-nums;
  /* reserve the final width so digits appearing mid-count can't reflow. */
  min-width: 3ch;
  display: inline-block;
}

.card {
  transform-style: preserve-3d;
  translate: 0 0;
  transition:
    transform    300ms ease-out,
    translate    750ms var(--bez),
    box-shadow   750ms var(--bez),
    border-color 750ms var(--bez);
}

/* the moving specular highlight. */
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 420ms var(--bez);
  background: radial-gradient(
    82% 108% at var(--mx, 50%) var(--my, 50%),
    rgba(160, 220, 255, 0.038) 0%,
    rgba(128, 208, 255, 0.024) 30%,
    rgba(96, 197, 254, 0.012) 58%,
    rgba(96, 197, 254, 0.004) 80%,
    rgba(96, 197, 254, 0) 100%);
}

.card__icon,
.card__title,
.card__text {
  position: relative;
  z-index: 1;
}
.card__icon {
  transition: transform 200ms ease-out, box-shadow 420ms var(--bez);
}

/* only where there's a real pointer - never on touch. */
@media (hover: hover) and (pointer: fine) {
  .card.is-tilting {
    transition:
      transform    0s,
      translate    750ms var(--bez),
      box-shadow   750ms var(--bez),
      border-color 750ms var(--bez);
    translate: 0 -10px;
    transform:
      perspective(900px)
      rotateX(var(--rx, 0deg))
      rotateY(var(--ry, 0deg));
    border-color: rgba(96, 197, 254, 0.5);
    box-shadow:
      inset 0 1px 0 rgba(190, 222, 255, 0.22),
      0 14px 30px rgba(0, 2, 10, 0.5),
      0 0 30px rgba(29, 129, 255, 0.20);
  }
  .card.is-tilting::after { opacity: 1; }
  .card.is-tilting .card__icon {
    transform: translateZ(11px) translateY(-2px);
    box-shadow:
      inset 0 1px 0 rgba(160, 210, 255, 0.35),
      0 0 18px rgba(29, 129, 255, 0.30);
  }
}

/* touch and keyboard get the lift without the tilt. */
.card:focus-within {
  border-color: rgba(96, 197, 254, 0.5);
  translate: 0 -6px;
}

/* buttons */
.btn {
  transition:
    transform  300ms var(--bez-btn),
    box-shadow 300ms var(--bez-btn),
    filter     300ms var(--bez-btn),
    background 300ms var(--bez-btn);
}
.btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.07) saturate(1.05);
}
.btn--lime:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    0 calc(var(--drop) + 2px) 0 0 var(--bevel-color),
    0 calc(var(--drop) + 5px) 12px rgba(0, 0, 0, 0.45),
    0 0 26px rgba(164, 220, 40, 0.35);
}
.btn--outline:hover {
  background: rgba(29, 129, 255, 0.20);
  box-shadow:
    inset 0 1px 0 rgba(160, 205, 255, 0.24),
    0 calc(var(--drop) + 2px) 0 0 var(--bevel-color),
    0 calc(var(--drop) + 5px) 12px rgba(0, 0, 0, 0.4),
    0 0 24px rgba(29, 129, 255, 0.28);
}
.btn:active {
  transform: translateY(var(--drop));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 2px 5px rgba(0, 0, 0, 0.30),
    0 0 0 0 var(--bevel-color);
  filter: brightness(0.98);
}
.btn__arrow {
  transition: transform 300ms var(--bez-btn);
}
.btn:hover .btn__arrow { transform: translateX(3px); }

/* links */
.site-footer__col a,
.mobile-nav__link {
  transition: color 320ms var(--bez);
}
.site-footer__col a:hover { color: var(--blue-light); }

.aside,
.sponsors__panel {
  transition: border-color 420ms var(--bez), box-shadow 420ms var(--bez);
}
.aside:hover {
  box-shadow:
    inset 0 1px 0 rgba(190, 222, 255, 0.20),
    0 10px 22px rgba(0, 2, 10, 0.5),
    0 0 26px rgba(164, 220, 40, 0.10);
}

.details__row {
  transition: background-color 420ms var(--bez);
}
.details__row:hover {
  background-color: rgba(29, 129, 255, 0.045);
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .splash,
  .splash__mark {
    animation: none !important;
    transition: opacity 1ms linear !important;
  }
  .splash__mark { opacity: 1; transform: none; }

  .hero__lockup,
  .hero__credit,
  .hero__eyebrow,
  .hero__title,
  .hero__sub,
  .hero__action {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
  .hero__lockup {
    filter: drop-shadow(0 5px 12px rgba(0, 0, 0, 0.6))
            drop-shadow(0 0 26px rgba(29, 129, 255, 0.09));
  }

  [data-reveal] { opacity: 1 !important; transform: none !important; animation: none !important; filter: none !important; }
  .sec-glow::before, .sec-glow::after { animation: none !important; opacity: 0.06; }
  .hero__intro { transform: none !important; }
  html.is-intro .hero__title span,
  html.is-intro .hero__sub,
  html.is-intro .hero__action {
    opacity: 1 !important; transform: none !important; filter: none !important;
  }
  .seam { opacity: 1 !important; transform: scaleX(1) !important; }

  .ambient__glow { animation: none !important; }
  .scroll-cue { animation: none !important; transform: none !important; }
  html.is-intro .scroll-cue { opacity: 1; }

  .card.is-tilting {
    transform: none !important;
    translate: none !important;
  }
  .card.is-tilting .card__icon { transform: none !important; }

  .btn:hover,
  .stat:hover { transform: none !important; }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* section edge glow */
.sec-glow {
  position: absolute;
  left: 0;
  right: 0;
  top: -340px;
  bottom: -340px;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  --glow-a: 0.14;
  --glow-y: 50%;
}
.sec-glow::before,
.sec-glow::after {
  content: "";
  position: absolute;
  top: var(--glow-y, 50%);
  width: min(760px, 68vw);
  aspect-ratio: 1 / 0.9;
  transform: translateY(-50%) scale(1);
  border-radius: 50%;
  opacity: 0.02;
  background: radial-gradient(closest-side,
    rgba(29, 129, 255, var(--glow-a)) 0%,
    rgba(29, 129, 255, calc(var(--glow-a) * 0.82)) 16%,
    rgba(29, 129, 255, calc(var(--glow-a) * 0.62)) 30%,
    rgba(29, 129, 255, calc(var(--glow-a) * 0.44)) 42%,
    rgba(29, 129, 255, calc(var(--glow-a) * 0.29)) 54%,
    rgba(29, 129, 255, calc(var(--glow-a) * 0.17)) 65%,
    rgba(29, 129, 255, calc(var(--glow-a) * 0.08)) 76%,
    rgba(29, 129, 255, calc(var(--glow-a) * 0.03)) 87%,
    rgba(29, 129, 255, 0) 100%);
}
.sec-glow[data-lit-by] { top: 0; bottom: 0; }
.sec-glow[data-lit-by]::after { content: none; }
.sec-glow[data-lit-by]::before {
  left: 0;
  right: 0;
  top: 0;
  width: auto;
  height: min(460px, 48vh);
  aspect-ratio: auto;
  border-radius: 0;
  transform: none;
  background: linear-gradient(
    180deg,
    rgba(29, 129, 255, var(--glow-a)) 0%,
    rgba(29, 129, 255, calc(var(--glow-a) * 0.42)) 34%,
    rgba(29, 129, 255, calc(var(--glow-a) * 0.12)) 66%,
    rgba(29, 129, 255, 0) 100%);
}

.sec-glow[data-lit-by]::before { opacity: 1; }

.sec-glow::before { left: min(-380px, -34vw); }
.sec-glow::after  { right: min(-380px, -34vw); }

/* lights up the first time the section is reached, then settles back. */
.sec-glow.is-lit::before,
.sec-glow.is-lit::after {
  animation: glow-pulse 5600ms var(--bez) both;
}
.sec-glow.is-lit::after { animation-delay: 130ms; }

@keyframes glow-pulse {
  0%   { opacity: 0;    transform: translateY(-50%) scale(0.84); }
  11%  { opacity: 0.25; transform: translateY(-50%) scale(1.18); }
  16%  { opacity: 0.23; transform: translateY(-50%) scale(1.12); }
  100% { opacity: 0.06; transform: translateY(-50%) scale(1); }
}

/* headline glow */
.hero__glow {
  position: absolute;
  left: 50%;
  top: var(--hero-glow-y, 58%);
  width: min(1150px, 94vw);
  aspect-ratio: 1 / 0.58;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.74);
  /* long eased tail - a short one rings badly against near-black. */
  background: radial-gradient(closest-side,
    rgba(58, 148, 255, 0.132) 0%,
    rgba(52, 142, 255, 0.112) 14%,
    rgba(46, 136, 255, 0.088) 27%,
    rgba(40, 130, 255, 0.064) 39%,
    rgba(36, 126, 255, 0.044) 51%,
    rgba(32, 122, 255, 0.028) 62%,
    rgba(29, 119, 255, 0.016) 73%,
    rgba(29, 119, 255, 0.007) 84%,
    rgba(29, 119, 255, 0.002) 92%,
    rgba(29, 119, 255, 0) 100%);
}

html:not(.is-intro) .hero__glow {
  animation: hero-text-glow 2800ms var(--bez) 280ms both;
}

@keyframes hero-text-glow {
  0%   { opacity: 0;    transform: translate(-50%, -50%) scale(0.74); }
  34%  { opacity: 1;    transform: translate(-50%, -50%) scale(1.08); }
  100% { opacity: 0.46; transform: translate(-50%, -50%) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__glow { animation: none !important; opacity: 0.46; transform: translate(-50%, -50%); }
}