/* Page animations: scroll reveals (driven by animations.js), hover and tab transitions */
#main-content {
  --anim-ease: cubic-bezier(.22, .61, .36, 1);
}

@keyframes wcrs-reveal {
  from { opacity: 0; translate: var(--reveal-x, 0) var(--reveal-y, 24px); }
  to { opacity: 1; translate: 0 0; }
}

@keyframes wcrs-bar-grow {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

@keyframes wcrs-wipe {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

/* Scroll reveal: elements stay hidden only while JS is active and they are waiting to enter */
.js-anim #main-content [data-reveal]:not(.is-inview) { opacity: 0; }
.js-anim #main-content [data-reveal].is-inview { animation: wcrs-reveal .75s var(--anim-ease) var(--reveal-delay, 0ms) both; }
.js-anim #main-content [data-reveal="fade"] { --reveal-y: 0; }

/* Horizontal slides only where there is room, so mobile never gets a horizontal scrollbar */
@media (min-width: 992px) {
  .js-anim #main-content [data-reveal="left"] { --reveal-x: -32px; --reveal-y: 0; }
  .js-anim #main-content [data-reveal="right"] { --reveal-x: 32px; --reveal-y: 0; }
}

/* Banner intro on page load: colour bar draws, title rises, year highlight wipes in, then copy, CTA and facts follow */
.js-anim #main-content .summit-hero__heading > *,
.js-anim #main-content .summit-fact {
  --reveal-x: 0;
  --reveal-y: 28px;
  animation: wcrs-reveal 1s var(--anim-ease) both;
}
.js-anim #main-content .summit-hero__heading h1 { --reveal-y: 36px; animation-duration: 1.1s; animation-delay: .15s; }
.js-anim #main-content .summit-hero__year { animation: wcrs-wipe .9s var(--anim-ease) .6s both; }
.js-anim #main-content .summit-hero__tagline { animation-delay: .5s; }
.js-anim #main-content .summit-hero__pillars { animation-delay: .65s; }
.js-anim #main-content .summit-hero__cta { --reveal-y: 20px; animation-delay: .8s; }
.js-anim #main-content .summit-hero__facts .col-lg-3:nth-child(1) .summit-fact { animation-delay: .95s; }
.js-anim #main-content .summit-hero__facts .col-lg-3:nth-child(2) .summit-fact { animation-delay: 1.05s; }
.js-anim #main-content .summit-hero__facts .col-lg-3:nth-child(3) .summit-fact { animation-delay: 1.15s; }
.js-anim #main-content .summit-hero__facts .col-lg-3:nth-child(4) .summit-fact { animation-delay: 1.25s; }

@media (min-width: 768px) {
  .js-anim #main-content .summit-hero__heading:before { transform-origin: top; animation: wcrs-bar-grow 1.2s var(--anim-ease) .05s both; }
}

/* Speaker cards: on tab switch the old cards fade out softly (during landing.js's 100ms swap delay),
   then the new cards rise in staggered. Movement stays small so the slider viewport never clips it. */
@keyframes wcrs-card-in {
  from { opacity: 0; transform: translateY(6px) scale(.97); }
  to { opacity: 1; transform: none; }
}

@keyframes wcrs-card-out {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: scale(.98); }
}

.js-anim #main-content .sessions-section .speaker-grid.is-changing { opacity: 1; }
.js-anim #main-content .session-panel.is-inview .speaker-card { animation: wcrs-card-in .6s var(--anim-ease) both; }
.js-anim #main-content .session-panel.is-inview .col:nth-child(2) .speaker-card { animation-delay: .06s; }
.js-anim #main-content .session-panel.is-inview .col:nth-child(3) .speaker-card { animation-delay: .12s; }
.js-anim #main-content .session-panel.is-inview .col:nth-child(n+4) .speaker-card { animation-delay: .18s; }
.js-anim #main-content .session-panel.is-inview .speaker-grid.is-changing .speaker-card { animation: wcrs-card-out .1s ease-in forwards; }

/* Session background: settles in when the panel is revealed; on tab switch the old image
   crossfades out (clone added by animations.js) while the new one eases from a slight zoom */
@keyframes wcrs-image-reveal {
  from { transform: scale(1.08); }
  to { transform: scale(1); }
}

@keyframes wcrs-image-enter {
  from { transform: scale(1.06); }
  to { transform: scale(1); }
}

@keyframes wcrs-image-leave {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(1.02); }
}

.js-anim #main-content .session-panel.is-inview .session-panel__background { animation: wcrs-image-reveal 1.6s var(--anim-ease) both; }
.js-anim #main-content .session-panel__background.is-changing { opacity: 1; }
.js-anim #main-content .session-panel .session-panel__background.is-entering { animation: wcrs-image-enter 1.4s var(--anim-ease) both; }
.js-anim #main-content .session-panel .session-panel__background.session-panel__background--outgoing { pointer-events: none; animation: wcrs-image-leave .8s ease forwards; }

/* Buttons */
#main-content .btn-summit-red,
#main-content .btn-summit-navy,
#main-content .sessions-section .btn-agenda {
  transition: color .2s ease, background-color .2s ease, border-color .2s ease, opacity .2s ease, box-shadow .25s ease, transform .25s var(--anim-ease);
}
#main-content .btn span { display: inline-block; transition: transform .25s var(--anim-ease); }

/* Tabs, cards and images */
#main-content .sessions-section .session-tab { transition: background-color .2s ease, color .2s ease, transform .25s var(--anim-ease); }
#main-content .sessions-section .session-tab__icon { transition: transform .25s var(--anim-ease); }
#main-content .news-card { transition: transform .35s var(--anim-ease), box-shadow .35s ease; }
#main-content .news-card > a { overflow: hidden; }
#main-content .news-card img { transition: transform .6s var(--anim-ease); }
#main-content .sessions-section .speaker-card__image { overflow: hidden; }
#main-content .sessions-section .speaker-card__image img { transition: transform .5s var(--anim-ease); }

@media (hover: hover) {
  #main-content .btn-summit-red:hover,
  #main-content .btn-summit-navy:hover,
  #main-content .sessions-section .btn-agenda:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(2, 45, 77, .18); }
  #main-content .btn:hover span { transform: translateX(3px); }

  #main-content .sessions-section .session-tab:not(.active):hover .session-tab__icon { transform: scale(1.06); }

  #main-content .news-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0, 0, 0, .18); }
  #main-content .news-card:hover img { transform: scale(1.05); }

  #main-content .sessions-section .speaker-card:hover .speaker-card__image img { transform: scale(1.04); }
}

@media (hover: hover) and (min-width: 768px) {
  #main-content .sessions-section .session-tab:not(.active):hover { transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
  .js-anim #main-content [data-reveal],
  .js-anim #main-content .summit-hero__heading > *,
  .js-anim #main-content .summit-hero__year,
  .js-anim #main-content .summit-fact,
  .js-anim #main-content .summit-hero__heading:before,
  .js-anim #main-content .session-panel.is-inview .speaker-card { opacity: 1 !important; animation: none !important; }

  .js-anim #main-content .session-panel .session-panel__background { animation: none !important; }

  #main-content .btn-summit-red,
  #main-content .btn-summit-navy,
  #main-content .sessions-section .btn-agenda,
  #main-content .btn span,
  #main-content .sessions-section .session-tab,
  #main-content .sessions-section .session-tab__icon,
  #main-content .news-card,
  #main-content .news-card img,
  #main-content .sessions-section .speaker-card__image img { transform: none !important; transition-property: color, background-color, border-color, opacity, box-shadow; }
}