/* Entrance and scroll-reveal animations (see assets/js/animations.js) */

:root {
  --anim-ease: cubic-bezier(0.2, 0.65, 0.3, 1);
}

/* Hide hero copy until the script starts it, so it doesn't flash in first */
.has-anim:not(.anim-init) main > :first-child :is(.eyebrow, h1, h2, .hero-desc, .hero-banner__describes, .hero-actions) {
  opacity: 0;
}

.has-anim [data-anim] {
  transition:
    opacity 1s var(--anim-ease) var(--anim-delay, 0ms),
    transform 1.1s var(--anim-ease) var(--anim-delay, 0ms);
}

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

.has-anim [data-anim="up"]:not(.is-in) {
  transform: translate3d(0, 28px, 0);
}

/* Images fade in and settle from a slight zoom */
.has-anim [data-anim="media"] {
  overflow: hidden;
}

.has-anim [data-anim="media"] img {
  transition: transform 1.6s var(--anim-ease) var(--anim-delay, 0ms);
}

.has-anim [data-anim="media"]:not(.is-in) img {
  transform: scale(1.08);
}


/* Hero photos: slow settle-in zoom on a layer beneath the overlays */
.has-anim .has-hero-zoom {
  isolation: isolate;
  overflow: hidden;
}

.has-anim .hero-zoom {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: inherit;
  pointer-events: none;
  transform-origin: 50% 40%;
  animation: hero-zoom 7s cubic-bezier(0.25, 0.6, 0.3, 1) both;
}

@keyframes hero-zoom {
  from {
    transform: scale(1.12);
  }
  to {
    transform: scale(1);
  }
}

/* Timeline rules draw left to right (replaces the 1px top border while animating) */
.has-anim .line-draw {
  border-top-color: transparent !important;
  background-image: linear-gradient(#ced1ca, #ced1ca);
  background-repeat: no-repeat;
  background-origin: border-box;
  background-position: 0 0;
  background-size: 0% 1px;
  transition: background-size 1.4s var(--anim-ease);
}

.has-anim .line-draw.is-drawn {
  background-size: 100% 1px;
}

/* Breakthrough circle: dots travel down both sides of the circle and meet at the bottom */
@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 90deg;
}

.has-anim .breakthrough-dots li:nth-child(-n + 2) {
  --from: 270deg; /* top, travelling down the left side */
}

.has-anim .breakthrough-dots li:nth-child(n + 4) {
  --from: -90deg; /* top, travelling down the right side */
}

@media (max-width: 767px) {
  /* Only the lower arc is drawn on mobile, so start from its ends */
  .has-anim .breakthrough-dots li:nth-child(-n + 2) {
    --from: 180deg;
  }
  .has-anim .breakthrough-dots li:nth-child(n + 4) {
    --from: 0deg;
  }
}

.has-anim .breakthrough-dots:not(.is-go) li {
  opacity: 0;
}

.has-anim .breakthrough-dots.is-go li:not(:nth-child(3)) {
  animation:
    dot-travel 2.4s cubic-bezier(0.45, 0, 0.2, 1) both,
    dot-fade 0.5s ease-out both;
}

/* Inner dots trail the outer ones */
.has-anim .breakthrough-dots.is-go li:nth-child(2),
.has-anim .breakthrough-dots.is-go li:nth-child(4) {
  animation-delay: 0.3s;
}

/* Centre dot appears with a pulse as the others arrive */
.has-anim .breakthrough-dots.is-go li:nth-child(3) {
  animation: dot-pulse 1.2s ease-out 2.3s both;
}

@keyframes dot-travel {
  from {
    --angle: var(--from);
  }
}

@keyframes dot-fade {
  from {
    opacity: 0;
  }
}

@keyframes dot-pulse {
  0% {
    opacity: 0;
    box-shadow: 0 0 0 0 rgba(245, 243, 236, 0.7);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    box-shadow: 0 0 0 14px rgba(245, 243, 236, 0);
  }
}

/* Inlined SVG diagrams (network, resilience index) */
.anim-svg .svg-draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.1s var(--anim-ease) var(--d, 0ms);
}

.anim-svg.is-go .svg-draw {
  stroke-dashoffset: 0;
}

.anim-svg .svg-pop,
.anim-svg .svg-fade,
.anim-svg .svg-block {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transition:
    opacity 0.7s ease var(--d, 0ms),
    transform 0.9s cubic-bezier(0.34, 1.4, 0.64, 1) var(--d, 0ms);
}

.anim-svg .svg-pop {
  transform: scale(0.8);
}

.anim-svg .svg-block {
  transform: translateY(-14px);
}

.anim-svg.is-go .svg-pop,
.anim-svg.is-go .svg-fade,
.anim-svg.is-go .svg-block {
  opacity: 1;
  transform: none;
}

/* BioSynova "Inputs across time": scattered tags settle into their columns as the line draws */
.has-anim .across-time .inputs {
  --k: 1;
}

@media (max-width: 991px) {
  .has-anim .across-time .inputs {
    --k: 0.45;
  }
}

.has-anim .across-time .inputs .tag {
  transition:
    opacity 0.8s ease var(--d, 0ms),
    transform 1.3s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0ms);
}

.has-anim .across-time .inputs:not(.is-go) .tag {
  opacity: 0;
  transform: translate(calc(var(--sx) * var(--k)), calc(var(--sy) * var(--k))) rotate(var(--sr));
}

.has-anim .across-time .inputs__col--first .tag:nth-child(1) { --sx: -70px; --sy: -45px; --sr: -9deg; --d: 200ms; }
.has-anim .across-time .inputs__col--first .tag:nth-child(2) { --sx: -120px; --sy: 25px; --sr: 7deg; --d: 340ms; }
.has-anim .across-time .inputs__col--first .tag:nth-child(3) { --sx: -45px; --sy: 55px; --sr: -5deg; --d: 480ms; }
.has-anim .across-time .inputs__col--first .tag:nth-child(4) { --sx: -100px; --sy: -15px; --sr: 10deg; --d: 620ms; }
.has-anim .across-time .inputs__col:not(.inputs__col--first) .tag:nth-child(1) { --sx: 90px; --sy: -35px; --sr: 8deg; --d: 270ms; }
.has-anim .across-time .inputs__col:not(.inputs__col--first) .tag:nth-child(2) { --sx: 130px; --sy: 30px; --sr: -7deg; --d: 410ms; }
.has-anim .across-time .inputs__col:not(.inputs__col--first) .tag:nth-child(3) { --sx: 70px; --sy: 65px; --sr: 6deg; --d: 550ms; }

.has-anim .across-time .inputs__line {
  transform-origin: top;
  transition: transform 1.4s var(--anim-ease);
}

.has-anim .across-time .inputs:not(.is-go) .inputs__line {
  transform: scaleY(0);
}

@media (prefers-reduced-motion: reduce) {
  .has-anim .hero-zoom,
  .has-anim .breakthrough-dots li {
    animation: none !important;
    opacity: 1 !important;
  }
  .has-anim [data-anim],
  .has-anim [data-anim] img {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}