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

:root {
  --brand-red: #ed2b0b;
}

body {
  margin: 0;
  background: var(--brand-red);
  overflow: hidden;
  min-height: 100vh;
  min-height: 100svh;
}

/* ═══════════════════════════════════════════════
   WRAPPER + STAGE
═══════════════════════════════════════════════ */
#wrapper {
  width: 100vw;
  overflow: hidden;
}

#stage {
  width: 1920px;
  height: 822px;
  position: relative;
  transform-origin: top left;
  -webkit-user-select: none;
  user-select: none;
  touch-action: pan-y;
}

/* ═══════════════════════════════════════════════
   SLIDES — common
═══════════════════════════════════════════════ */
.slide {
  position: absolute;
  top: 0; left: 0;
  width: 1920px;
  height: 822px;
}

/* ═══════════════════════════════════════════════
   SLIDE 1 — ACTRIMS–ECTRIMS title card
═══════════════════════════════════════════════ */
#slide1 {
  background: var(--brand-red);
  z-index: 1;
  transition: opacity .6s ease;
  font-family: 'Poppins', Arial, sans-serif;
}
#slide1.hide { opacity: 0; pointer-events: none; }

#slide1 > :not(.ambient) { z-index: 1; }

/* Ambient shapes stay in the margins and behind the editable content. */
.ambient {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity .8s ease;
}
#slide1.decos .ambient { opacity: 1; }

.ambient-mark {
  --size: 24px;
  --color: #4cc7d2;
  --alpha: .55;
  --duration: 7s;
  --phase: 0s;
  --angle: 0deg;
  --dx: 10px;
  --dy: -16px;
  position: absolute;
  width: var(--size);
  height: var(--size);
  color: var(--color);
  opacity: var(--alpha);
  animation: ambientDrift var(--duration) ease-in-out var(--phase) infinite;
  animation-play-state: paused;
}
.ambient-mark::before {
  content: '';
  position: absolute;
  inset: 0;
  background: currentColor;
  animation: ambientBreathe var(--pulse, 4.5s) ease-in-out var(--phase) infinite;
  animation-play-state: paused;
}
.ambient-triangle::before { clip-path: polygon(0 0, 100% 50%, 0 100%); }
.ambient-left::before { clip-path: polygon(100% 0, 0 50%, 100% 100%); }
.ambient-circle::before { border-radius: 50%; }
.ambient-ring::before {
  border: 2px solid currentColor;
  border-radius: 50%;
  background: transparent;
}
.ambient-cross::before {
  clip-path: polygon(42% 0, 58% 0, 58% 42%, 100% 42%, 100% 58%,
                     58% 58%, 58% 100%, 42% 100%, 42% 58%, 0 58%, 0 42%, 42% 42%);
}

.ambient-mark:nth-child(1) {
  left: 1695px; top: 68px;
  --size: 38px; --angle: 14deg; --phase: -1.2s; --alpha: .7;
}
.ambient-mark:nth-child(2) {
  left: 1792px; top: 143px;
  --size: 8px; --color: #fff; --duration: 8s; --pulse: 3.8s; --phase: -2.5s;
}
.ambient-mark:nth-child(3) {
  left: 1820px; top: 322px;
  --size: 28px; --dx: -12px; --dy: 18px; --duration: 7.5s; --phase: -3s;
}
.ambient-mark:nth-child(4) {
  left: 1724px; top: 584px;
  --size: 26px; --color: #ffeb4a; --duration: 8.5s; --phase: -1.8s; --alpha: .65;
}
.ambient-mark:nth-child(5) {
  left: 1832px; top: 516px;
  --size: 13px; --color: #fff; --pulse: 3.6s; --phase: -3.2s; --alpha: .4;
}
.ambient-mark:nth-child(6) {
  left: 1538px; top: 762px;
  --size: 22px; --color: #ffeb4a; --angle: 22deg; --duration: 7.8s; --phase: -4s;
}
.ambient-mark:nth-child(7) {
  left: 1728px; top: 714px;
  --size: 32px; --duration: 9s; --dx: -8px; --phase: -2s; --alpha: .4;
}
.ambient-mark:nth-child(8) {
  left: 132px; top: 538px;
  --size: 18px; --color: #fff; --duration: 8.2s; --phase: -5s; --alpha: .28;
}

#slide1.decos:not(.hide) .ambient-mark,
#slide1.decos:not(.hide) .ambient-mark::before {
  animation-play-state: running;
}
@keyframes ambientDrift {
  0%, 100% { transform: translate(0, 0) rotate(var(--angle)); }
  50% { transform: translate(var(--dx), var(--dy)) rotate(calc(var(--angle) + 12deg)); }
}
@keyframes ambientBreathe {
  0%, 100% { transform: scale(.88); opacity: .55; }
  50% { transform: scale(1.12); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .ambient { transition: none; }
  .ambient-mark, .ambient-mark::before { animation: none; }
}

#slide1 .T {
  position: absolute;
  font-weight: 500;
  color: #fff;
  font-size: 132px;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
}
#slide1 .T.vis { opacity: 1; }

/* Row 1: ACTRIMS — ECTRIMS */
#playIcon {
  position: absolute;
  left: 244px; top: 135px;
  width: 98px; height: 100px;
  fill: #4cc7d2;
}
#tActrims { left: 368px; top: 120px; }
#tEctrims { left: 1048px; top: 120px; }

#dashBar, #dashBar2 {
  position: absolute;
  width: 0;
  background: #fff;
  transition: width .5s cubic-bezier(.65,0,.35,1);
}
#dashBar { left: 961px; top: 176px; height: 13px; }
#dashBar.on { width: 73px; }

/* Row 2: 21 — 23 OCTOBRE 2026 */
#tDate1 { left: 244px; top: 257px; }
#tDate2 { left: 544px; top: 257px; }
#dashBar2 { left: 384px; top: 312px; height: 16px; }
#dashBar2.on { width: 143px; }

/* Row 3: TORONTO ● DIRECT */
#tToronto { left: 244px; top: 408px; }
#tDirect { left: 1058px; top: 408px; }
#dot {
  position: absolute;
  left: 924px; top: 419px;
  width: 100px; height: 100px;
  border-radius: 50%;
  background: #ffeb4a;
  opacity: 0;
  transform: scale(0);
  transition: opacity .3s, transform .48s cubic-bezier(.34,1.56,.64,1);
}
#dot.on { opacity: 1; transform: scale(1); }

/* Row 4: BEST OF + committee name */
#bestofPill, #bestofTxt, #bestofTri, #committeeName {
  position: absolute;
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .55s ease, transform .55s ease;
}
#bestofPill.on, #bestofTxt.on, #bestofTri.on, #committeeName.on {
  opacity: 1;
  transform: translateY(0);
}
#bestofPill {
  left: 250px; top: 582px;
  width: 563px; height: 161px;
  background: #fff;
}
#bestofTxt {
  left: 250px; top: 582px;
  width: 563px; height: 161px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 126px;
  line-height: 1;
  color: #292c31;
  white-space: nowrap;
}
#bestofTri {
  left: 836px; top: 601px;
  width: 119px; height: 124px;
  fill: #4cc7d2;
  transition-delay: .15s;
}
#committeeName {
  left: 991px; top: 599px;
  color: #fff;
  font-weight: 600;
  font-size: 37px;
  line-height: 1.2;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════
   SLIDE 2 — Toronto fullscreen
═══════════════════════════════════════════════ */
#slide2 {
  background: var(--brand-red) url('img/toroto.png') center 30% / cover no-repeat;
  font-family: 'Poppins', Arial, sans-serif;
  color: #fff;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transition: opacity .8s ease;
  overflow: hidden;
}
#slide2.open {
  opacity: 1;
  pointer-events: auto;
}

#s2Interviews {
  position: absolute;
  left: 72px; top: 64px;
  font-weight: 400;
  font-size: 36px;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity .8s ease .5s, transform .8s ease .5s;
}
#slide2.open #s2Interviews {
  opacity: 1;
  transform: translateY(0);
}

#s2Toronto {
  position: absolute;
  left: 56px; right: 56px; top: 278px;
  font-weight: 500;
  font-size: 372px;
  line-height: 1;
  white-space: nowrap;
  text-align: center;
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 1s ease .3s, transform 1.2s cubic-bezier(.25,.46,.45,.94) .3s;
}
#slide2.open #s2Toronto {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════════════════════════════════════
   SLIDE 3 — ACTRIMS–ECTRIMS scientific committee
═══════════════════════════════════════════════ */
#slide3 {
  background: var(--brand-red);
  font-family: 'Poppins', Arial, sans-serif;
  color: #fff;
  z-index: 20;
  opacity: 0;
  pointer-events: none;
  transition: opacity .8s ease;
}
#slide3.active {
  opacity: 1;
  pointer-events: auto;
}

/* Fill more of the slide while keeping portraits and text in proportion. */
#s3Content {
  position: absolute;
  left: 0; top: 50%;
  width: 1920px; height: 722px;
  transform: translateY(-50%) scale(1.1);
}

.s3-brand {
  position: absolute;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s ease var(--delay, 0s),
              transform .6s ease var(--delay, 0s);
}
#slide3.anim .s3-brand {
  opacity: 1;
  transform: translateY(0);
}

#s3Play {
  left: 147px; top: 107px;
  width: 124px; height: 128px;
  fill: #4cc7d2;
}
.s3-title {
  font-size: 108px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
#s3Actrims { left: 300px; top: 115px; --delay: .1s; }
#s3Ectrims { left: 144px; top: 256px; --delay: .2s; }
#s3Dot {
  left: 633px; top: 252px;
  width: 119px; height: 119px;
  border-radius: 50%;
  background: #ffeb4a;
  --delay: .3s;
}

#s3Bestof {
  left: 154px; top: 417px;
  width: 301px; height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #292c31;
  font-size: 67px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  --delay: .4s;
}
#s3BestofTri {
  left: 467px; top: 429px;
  width: 64px; height: 66px;
  fill: #4cc7d2;
  --delay: .5s;
}
#s3Committee {
  left: 549px; top: 423px;
  width: 295px; height: auto;
  --delay: .6s;
}

.s3-card {
  position: absolute;
  width: 248px;
  opacity: 0;
  transform: translateY(30px) scale(.95);
  transition: opacity .5s ease calc(var(--i) * .12s + .5s),
              transform .5s cubic-bezier(.34,1.56,.64,1) calc(var(--i) * .12s + .5s);
}
#slide3.anim .s3-card {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.s3-card img {
  display: block;
  width: 248px; height: 248px;
  border-radius: 31px;
  object-fit: cover;
}
.s3-name {
  margin-top: 11px;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.12;
  text-align: center;
  white-space: nowrap;
}

#s3Eric { left: 944px; top: 38px; width: 257px; }
#s3Eric img { width: 257px; height: 584px; }
#s3Olivier { left: 1240px; top: 38px; }
#s3Francoise { left: 1525px; top: 38px; }
#s3Lydiane { left: 1240px; top: 378px; }
#s3Manon { left: 1525px; top: 378px; }