/* animations.css — load + scroll reveal, scroll-linked effects, hover interactions.
 * Only opacity / translate / scale / clip-path are animated so the resting layout
 * stays identical to Figma. */

:root {
  --ease-out: cubic-bezier(0.2, 0.65, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
}

/* ---------- Scroll progress bar ---------- */
.scrollProgress {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: 4px;
  background: linear-gradient(90deg, #f63c00 0%, var(--red) 60%, #ff8072 100%);
  transform-origin: left center;
  transform: scaleX(0);
  pointer-events: none;
}

/* ---------- Hero: plays on page load ---------- */
@keyframes heroUp {
  from {
    opacity: 0;
    translate: 0 calc(50 * var(--s));
  }
}

@keyframes heroDown {
  from {
    opacity: 0;
    translate: 0 calc(-30 * var(--s));
  }
}

@keyframes heroFromRight {
  from {
    opacity: 0;
    translate: calc(140 * var(--s)) 0;
  }
}

@keyframes heroZoom {
  from {
    opacity: 0;
    scale: 0.6;
  }
}

@keyframes heroFade {
  from {
    opacity: 0;
  }
}

.siteHeader__brand,
.siteHeader__nav,
.siteHeader__toggle {
  animation: heroDown 0.8s var(--ease-out) 0.05s backwards;
}

.siteHeader__nav {
  animation-delay: 0.15s;
}

.heroSection__lead { animation: heroUp 0.9s var(--ease-out) 0.2s backwards; }
.heroSection__titleBlock { animation: heroUp 0.9s var(--ease-out) 0.35s backwards; }
.heroSection__inspired { animation: heroUp 0.9s var(--ease-out) 0.5s backwards; }
.heroSection__cause { animation: heroUp 0.9s var(--ease-out) 0.6s backwards; }
.heroSection__sdg { animation: heroZoom 0.8s var(--ease-spring) 0.75s backwards; }
.heroSection__details { animation: heroUp 0.9s var(--ease-out) 0.85s backwards; }
.heroSection__slides { animation: heroFromRight 1.2s var(--ease-out) 0.3s backwards; }
.heroSection__wave { animation: heroFade 1.6s ease 0.1s backwards; }

.heroSection__campus,
.scrollProgress {
  will-change: transform;
}

.heroSection__slides {
  will-change: transform;
  transition: transform 0.6s var(--ease-out);
}

/* ---------- Generic scroll reveal (classes added by main.js) ---------- */
.page .reveal {
  opacity: 0;
  transition: none;
}

.page .reveal--up { translate: 0 calc(60 * var(--s)); }
.page .reveal--left { translate: calc(-90 * var(--s)) 0; }
.page .reveal--right { translate: calc(90 * var(--s)) 0; }
.page .reveal--zoom { scale: 0.9; }
.page .reveal--rise { translate: 0 calc(90 * var(--s)); scale: 0.97; }
.page .reveal--zoomOut { opacity: 0.4; scale: 1.12; }
.page .reveal--grow { scale: 1 0; transform-origin: top center; }
.page .reveal--wipe { opacity: 1; clip-path: inset(-20% 100% -20% 0); }

.page .reveal.is-visible {
  transition: opacity 0.9s var(--ease-out), translate 0.9s var(--ease-out), scale 0.9s var(--ease-out),
    clip-path 1.1s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  opacity: 1;
  translate: 0 0;
  scale: 1;
  clip-path: inset(-20% 0 -20% 0);
}

.collageSection {
  overflow: hidden;
}

.page .collageSection img.reveal--zoomOut.is-visible {
  transition-duration: 1.6s;
}

/* ---------- Schedule timeline progress ---------- */
.scheduleTimeline__line--track {
  opacity: 0.25;
}

.scheduleTimeline__line--progress {
  clip-path: inset(0 0 calc(100% - var(--timeline-progress, 0%)) 0);
}

@media (max-width: 768px) {
  .prizeBoard .prizeCard.reveal,
  .highlightsGrid .mediaCard.reveal {
    opacity: 1;
    translate: none;
    scale: none;
    clip-path: none;
    transition: none;
  }

  .prizeBoard.is-swapping .prizeCard,
  .mediaCard.is-filtered-in {
    animation: none;
  }
}

@media (max-width: 1023px) {
  .scheduleTimeline::before {
    opacity: 0.25;
  }

  .scheduleTimeline::after {
    content: "";
    position: absolute;
    left: 8px;
    top: var(--timeline-start, 32px);
    width: 4px;
    height: calc(var(--timeline-span, calc(100% - 64px)) * var(--timeline-ratio, 0));
    border-radius: 2px;
    background: linear-gradient(180deg, var(--red) 0%, #ff8072 100%);
  }
}

/* ---------- Countdown tick ---------- */
@keyframes tick {
  from {
    opacity: 0.2;
    translate: 0 -18%;
  }
}

.countdownSection__value.is-tick {
  animation: tick 0.45s var(--ease-out);
}

/* ---------- Tab / filter swaps ---------- */
@keyframes swapFade {
  from {
    opacity: 0;
  }
}

@keyframes swapUp {
  from {
    opacity: 0;
    translate: 0 calc(24 * var(--s));
  }
}

.eventsCard.is-swapping .eventsCard__info,
.eventsCard.is-swapping .eventsCard__map > img {
  animation: swapFade 0.5s ease;
}

.prizeBoard.is-swapping .prizeCard {
  animation: swapUp 0.5s var(--ease-out) backwards;
}

.prizeBoard.is-swapping .prizeBoard__row:nth-child(2) .prizeCard {
  animation-delay: 0.08s;
}

.mediaCard.is-filtered-in {
  animation: swapUp 0.55s var(--ease-out) backwards;
  animation-delay: var(--filter-delay, 0ms);
}

/* ---------- FAQ ---------- */
.faqItem__answer {
  overflow: hidden;
}

.faqItem__icon {
  transition: transform 0.35s var(--ease-out), background-color 0.2s ease;
}

.faqItem.is-open .faqItem__icon {
  transform: rotate(180deg);
}

/* ---------- Mobile menu links ---------- */
@keyframes menuLink {
  from {
    opacity: 0;
    translate: -12px 0;
  }
}

@media (max-width: 1023px) {
  .siteHeader.is-open .siteHeader__link {
    animation: menuLink 0.4s var(--ease-out) backwards;
  }

  .siteHeader.is-open .siteHeader__link:nth-child(2) { animation-delay: 0.03s; }
  .siteHeader.is-open .siteHeader__link:nth-child(3) { animation-delay: 0.06s; }
  .siteHeader.is-open .siteHeader__link:nth-child(4) { animation-delay: 0.09s; }
  .siteHeader.is-open .siteHeader__link:nth-child(5) { animation-delay: 0.12s; }
  .siteHeader.is-open .siteHeader__link:nth-child(6) { animation-delay: 0.15s; }
  .siteHeader.is-open .siteHeader__link:nth-child(7) { animation-delay: 0.18s; }
  .siteHeader.is-open .siteHeader__link:nth-child(8) { animation-delay: 0.21s; }
  .siteHeader.is-open .siteHeader__link:nth-child(9) { animation-delay: 0.24s; }
}

/* ---------- Hover interactions ---------- */
@media (hover: hover) {
  .countdownSection__box,
  .prizeCard,
  .scheduleCard,
  .mediaCard,
  .eventsCard__stat,
  .aimsBox {
    transition: translate 0.35s var(--ease-out), box-shadow 0.35s ease, background-color 0.35s ease;
  }

  .countdownSection__box:hover {
    translate: 0 calc(-8 * var(--s));
  }

  .mediaCard__img,
  .sponsorBlock__logo img {
    transition: scale 0.7s var(--ease-out);
  }

  .eventsCard__stat:hover {
    translate: 0 calc(-4 * var(--s));
    background-color: #f3e9d9;
  }

  .eventsCard__icon {
    transition: translate 0.35s var(--ease-spring);
  }

  .eventsCard__inclusion:hover .eventsCard__icon {
    translate: 0 calc(-6 * var(--s));
  }

  .prizeCard:hover {
    translate: 0 calc(-6 * var(--s));
    box-shadow: 0 calc(18 * var(--s)) calc(36 * var(--s)) rgba(235, 63, 65, 0.16);
  }

  .scheduleCard:hover {
    translate: 0 calc(-6 * var(--s));
    box-shadow: 0 calc(24 * var(--s)) calc(48 * var(--s)) rgba(255, 96, 0, 0.14),
      0 calc(9.905 * var(--s)) calc(18.624 * var(--s)) rgba(255, 96, 0, 0.05);
  }

  .aimsBox:hover {
    box-shadow: 0 calc(16 * var(--s)) calc(40 * var(--s)) rgba(238, 74, 73, 0.14);
  }

  .sponsorBlock__card:hover .sponsorBlock__logo img {
    scale: 1.04;
  }

  .mediaCard:hover {
    translate: 0 calc(-6 * var(--s));
    box-shadow: 0 calc(20 * var(--s)) calc(44 * var(--s)) rgba(0, 0, 0, 0.1);
  }

  .mediaCard:hover .mediaCard__img {
    scale: 1.06;
  }

  .faqItem:not(.is-open):hover {
    background-color: #fffafa;
  }

  .faqItem__trigger:hover .faqItem__icon {
    background-color: #d8393b;
  }

  .siteFooter__contactIcon {
    transition: scale 0.3s var(--ease-spring), background-color 0.2s ease;
  }

  .siteFooter__contactRow:hover .siteFooter__contactIcon {
    scale: 1.1;
    background-color: var(--orange);
  }
}

/* ---------- Reduced motion: show everything at rest ---------- */
@media (prefers-reduced-motion: reduce) {
  .page .reveal {
    opacity: 1;
    translate: none;
    scale: none;
    clip-path: none;
  }

  .heroSection__campus,
  .heroSection__slides {
    transform: none;
  }

  .scrollProgress {
    display: none;
  }

  .scheduleTimeline::after {
    height: var(--timeline-span, calc(100% - 64px));
  }

  .scheduleCard::before {
    border-color: var(--red);
    background: var(--red);
  }
}