/* ============================================================
   GMI Portals – Flow Animation
   ------------------------------------------------------------
   Timing per logo (total 4.0 s):
     0.00–0.25 s  fade in on the LEFT   (opacity 0 → 0.6, scale 0.8)
     0.25–1.25 s  hold LEFT             (scale 0.8, opacity 0.6)   1 s
     1.25–1.50 s  move LEFT → CENTER    (scale 0.8→1, opacity 0.6→1)  1/4 s
     1.50–2.50 s  hold CENTER           (scale 1.0, opacity 1.0)   1 s
     2.50–2.75 s  move CENTER → RIGHT   (scale 1→0.8, opacity 1→0.6)  1/4 s
     2.75–3.75 s  hold RIGHT            (scale 0.8, opacity 0.6)   1 s
     3.75–4.00 s  fade out on the RIGHT (scale 0.8→0, opacity 0.6→0)  1/4 s
   A new logo enters every 1.25 s → 3 logos visible at the hold positions.
   ============================================================ */

:root {
  --bg:        #ffffff;   /* page background (example image is white) */
  --slot-gap:  150px;     /* horizontal distance LEFT↔CENTER and CENTER↔RIGHT (tight) */
  --logo-h:     76px;     /* logo height at 100 % (center) */
  --logo-w:    170px;     /* logo bounding-box width */
  --cycle:     4s;        /* full lifecycle of one logo */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The stage holds the three visible slots. Its center is the CENTER slot. */
.stage {
  position: relative;
  width:  calc(var(--slot-gap) * 2 + var(--logo-w) + 40px);
  height: 180px;
  overflow: hidden;
}

/* Each logo. Positioned at the stage center; the animation translates it
   left / center / right and scales + fades it. */
.portal {
  position: absolute;
  left: 50%;
  top:  50%;
  width:  var(--logo-w);
  height: var(--logo-h);
  margin: 0;
  will-change: transform, opacity;
  animation: flow var(--cycle) linear both;
  cursor: pointer;                 /* clickable */
  -webkit-tap-highlight-color: transparent;
}

.portal img {
  display: block;
  width:  100%;
  height: 100%;
  object-fit: contain;
}

@keyframes flow {
  /* fade in on the LEFT */
  0% {
    transform: translate(-50%, -50%) translateX(calc(var(--slot-gap) * -1)) scale(0.8);
    opacity: 0;
  }
  6.25% {
    transform: translate(-50%, -50%) translateX(calc(var(--slot-gap) * -1)) scale(0.8);
    opacity: 0.6;
    animation-timing-function: linear;                 /* hold LEFT */
  }
  31.25% {
    transform: translate(-50%, -50%) translateX(calc(var(--slot-gap) * -1)) scale(0.8);
    opacity: 0.6;
    animation-timing-function: cubic-bezier(.65,0,.35,1); /* move → CENTER */
  }
  37.5% {
    transform: translate(-50%, -50%) translateX(0) scale(1);
    opacity: 1;
    animation-timing-function: linear;                 /* hold CENTER */
  }
  62.5% {
    transform: translate(-50%, -50%) translateX(0) scale(1);
    opacity: 1;
    animation-timing-function: cubic-bezier(.65,0,.35,1); /* move → RIGHT */
  }
  68.75% {
    transform: translate(-50%, -50%) translateX(var(--slot-gap)) scale(0.8);
    opacity: 0.6;
    animation-timing-function: linear;                 /* hold RIGHT */
  }
  93.75% {
    transform: translate(-50%, -50%) translateX(var(--slot-gap)) scale(0.8);
    opacity: 0.6;
    animation-timing-function: cubic-bezier(.45,0,.55,1); /* fade out */
  }
  /* fade out on the RIGHT */
  100% {
    transform: translate(-50%, -50%) translateX(var(--slot-gap)) scale(0);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .portal { animation-duration: 0.001s; }
}