/* Squadra Brasil — Eventos */

.page-events {
  min-width: 0;
  background: var(--paper);
}

/* Page-specific lockup ---------------------------------------------------- */

.brand--events {
  line-height: normal;
}

.events-brand {
  display: inline-grid;
  justify-items: center;
  line-height: 1;
}

.events-brand img {
  position: static;
  left: auto;
  margin: 0;
}

.events-brand--header img {
  width: clamp(176px, 12.663vw, 243px);
}

.events-brand--footer img {
  width: 308px;
  filter: brightness(0) invert(1);
}

.page-events .footer__brand .events-brand--footer {
  margin: 0 auto 12px;
}

/* Shared opening: hero, media band and showcase -------------------------- */

.events-opening {
  --events-hero-height: clamp(330px, 23.18vw, 445px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(
    to bottom,
    var(--ink) 0,
    var(--ink) var(--events-hero-height),
    var(--paper) var(--events-hero-height),
    var(--paper) 100%
  );
}

.events-opening__orb {
  position: absolute;
  z-index: 1;
  top: max(-110px, -5.73vw);
  left: 50%;
  display: block;
  width: min(89.43vw, 1717px);
  max-width: none;
  height: auto;
  pointer-events: none;
  user-select: none;
  translate: -50% 0;
  transform-origin: 50% 50%;
  animation: events-orb-spin 180s linear infinite;
}

/* Hero ------------------------------------------------------------------- */

.events-hero {
  position: relative;
  z-index: 2;
  min-height: var(--events-hero-height);
  overflow: hidden;
  color: var(--white);
}

.events-hero__copy {
  position: absolute;
  z-index: 4;
  top: 51%;
  left: 50%;
  width: min(760px, calc(100% - 48px));
  text-align: center;
  translate: -50% -50%;
}

.events-hero__copy p {
  margin: 0;
  color: var(--pink);
  font-family: var(--font-display);
  font-size: clamp(6.2rem, 10.2vw, 11.5rem);
  font-weight: 600;
  line-height: .78;
  text-transform: uppercase;
  animation: hero-copy-in 900ms 100ms cubic-bezier(.2, .75, .25, 1) both;
}

.events-hero__copy h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.events-hero__arrows {
  position: absolute;
  z-index: 5;
  top: calc(50% - clamp(92px, 5.45vw, 105px));
  left: calc(50% - min(220px, 24vw));
  width: clamp(92px, 8.45vw, 162px);
  animation: hero-float-x 5.1s ease-in-out infinite;
}

.events-hero__arrows .decor-loader__track i {
  background: #9900ff;
}

.events-hero__dots {
  position: absolute;
  z-index: 5;
  top: calc(50% + clamp(72px, 4.9vw, 94px));
  left: calc(50% - 59px);
  display: flex;
  gap: 12px;
  animation: hero-float-x-reverse 5.8s ease-in-out infinite;
}

.events-hero__dots i {
  width: 9px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--white);
  animation: hero-dot-pulse 1.8s ease-in-out infinite;
}

.events-hero__dots i:nth-child(2) { animation-delay: 120ms; }
.events-hero__dots i:nth-child(3) { animation-delay: 240ms; }
.events-hero__dots i:nth-child(4) { animation-delay: 360ms; }

/* Media band ------------------------------------------------------------- */

.events-banner {
  position: relative;
  z-index: 6;
  height: clamp(220px, 20.9vw, 401px);
  overflow: hidden;
  background: #111;
}

.events-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, .2), transparent 45%, rgba(0, 0, 0, .08));
  pointer-events: none;
}

.events-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* White showcase --------------------------------------------------------- */

.events-showcase {
  position: relative;
  z-index: auto;
  overflow: hidden;
  color: var(--blue);
}

.events-showcase__texture {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  pointer-events: none;
  user-select: none;
}

.events-showcase__texture img {
  width: calc(100% - 2px);
  max-width: none;
  height: auto;
  margin-left: 1px;
}

.events-showcase__inner {
  position: relative;
  z-index: 3;
  width: min(1120px, calc(100% - 48px));
  padding: clamp(96px, 6.45vw, 124px) 0 clamp(115px, 7.1vw, 135px);
  margin-inline: auto;
}

.events-overview {
  position: relative;
  min-height: 324px;
}

.events-overview__title {
  position: absolute;
  top: 0;
  left: 50%;
  width: max-content;
  max-width: calc(100vw - 48px);
  margin: 0;
  color: var(--pink);
  font-family: var(--font-display);
  font-size: clamp(3.35rem, 4.25vw, 5.1rem);
  font-weight: 600;
  line-height: .8;
  text-align: left;
  text-transform: uppercase;
  translate: -50% 0;
}

.js .events-overview__title.reveal {
  transform: translateY(22px);
}

.js .events-overview__title.reveal.is-visible {
  transform: translateY(0);
}

.events-overview__title span {
  display: block;
  width: max-content;
  white-space: nowrap;
}

.events-overview__title strong {
  color: #9900ff;
  font: inherit;
}

.events-overview__dots {
  position: absolute;
  top: 70px;
  left: 2.59%;
  display: flex;
  width: 71px;
  height: 69px;
  gap: 14px;
  animation: events-accent-float 6.3s ease-in-out infinite alternate;
}

.events-dot-column {
  --events-dot-color: var(--white);
  display: flex;
  flex: 0 0 6px;
  flex-direction: column;
  height: 54px;
  justify-content: space-between;
}

.events-dot-column:nth-child(even) {
  translate: 0 15px;
}

.events-dot-column i {
  width: 6px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--events-dot-color);
  animation: events-dot-chase 1.65s ease-in-out infinite both;
}

.events-dot-column--purple { --events-dot-color: #9900ff; --events-column-delay: 0ms; }
.events-dot-column--cyan { --events-dot-color: var(--cyan); --events-column-delay: 210ms; }
.events-dot-column--yellow { --events-dot-color: #f5de0b; --events-column-delay: 420ms; }
.events-dot-column--pink { --events-dot-color: var(--pink); --events-column-delay: 630ms; }

.events-dot-column i:nth-child(1) { animation-delay: calc(var(--events-column-delay) + 0ms); }
.events-dot-column i:nth-child(2) { animation-delay: calc(var(--events-column-delay) + 105ms); }
.events-dot-column i:nth-child(3) { animation-delay: calc(var(--events-column-delay) + 210ms); }
.events-dot-column i:nth-child(4) { animation-delay: calc(var(--events-column-delay) + 315ms); }

.events-overview__rings {
  position: absolute;
  top: 106px;
  right: -17px;
  width: min(19vw, 353px);
  animation: hero-float-x 7.4s ease-in-out infinite reverse;
}

.events-overview__rings > i {
  border-color: var(--pink);
}

/* Content cases ---------------------------------------------------------- */

.events-case {
  position: relative;
  width: 100%;
  margin: 0 auto 106px;
  text-align: center;
}

.events-case--journey {
  margin-bottom: 0;
}

.events-case__media {
  position: relative;
  width: 100%;
  margin-inline: auto;
}

.events-case__media img {
  position: absolute;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 10px 22px rgba(19, 35, 176, .12);
}

.events-case__media--corporate {
  aspect-ratio: 1120 / 460;
  margin-bottom: 103px;
}

.events-case__media .events-case__conference {
  top: 0;
  left: 0;
  width: 59.46%;
  height: 96.52%;
  object-fit: cover;
}

.events-case__media .events-case__meeting {
  top: 26.52%;
  left: 54.64%;
  width: 45.27%;
  height: 73.48%;
  object-fit: cover;
}

.events-case__media--live {
  aspect-ratio: 1120 / 500;
  margin-bottom: 96px;
}

.events-case__live-left {
  top: 0;
  left: 0;
  width: 24.73%;
}

.events-case__live-center {
  top: 25px;
  left: 34.2%;
  width: 29.73%;
}

.events-case__live-right {
  top: 125px;
  right: 21px;
  width: 24.82%;
}

.events-case__purple-dots {
  position: absolute;
  z-index: 3;
  top: 243px;
  left: 67.95%;
  display: flex;
  flex-direction: column;
  width: 16px;
  height: 88px;
  overflow: hidden;
  animation: events-dot-column-float 5.8s ease-in-out infinite;
}

.events-case__purple-dots i {
  position: absolute;
  left: 0;
  width: 8px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #9900ff;
  animation: events-purple-dot-chase 1.45s ease-in-out infinite both;
}

.events-case__purple-dots i:nth-child(odd) { left: 0; }
.events-case__purple-dots i:nth-child(even) { left: 8px; }
.events-case__purple-dots i:nth-child(1) { top: 0; }
.events-case__purple-dots i:nth-child(2) { top: 7px; animation-delay: 70ms; }
.events-case__purple-dots i:nth-child(3) { top: 14px; animation-delay: 140ms; }
.events-case__purple-dots i:nth-child(4) { top: 21px; animation-delay: 210ms; }
.events-case__purple-dots i:nth-child(5) { top: 28px; animation-delay: 280ms; }
.events-case__purple-dots i:nth-child(6) { top: 35px; animation-delay: 350ms; }
.events-case__purple-dots i:nth-child(7) { top: 42px; animation-delay: 420ms; }
.events-case__purple-dots i:nth-child(8) { top: 49px; animation-delay: 490ms; }
.events-case__purple-dots i:nth-child(9) { top: 56px; animation-delay: 560ms; }
.events-case__purple-dots i:nth-child(10) { top: 63px; animation-delay: 630ms; }
.events-case__purple-dots i:nth-child(11) { top: 70px; animation-delay: 700ms; }
.events-case__purple-dots i:nth-child(12) { top: 77px; animation-delay: 770ms; }
.events-case__purple-dots i:nth-child(13) { top: 84px; animation-delay: 840ms; }

.events-case__purple-dots--first-gap {
  top: 243px;
  left: 29.3%;
  animation-delay: -2.9s;
}

.events-case__media--journey {
  aspect-ratio: 1120 / 520;
  margin-bottom: 26px;
}

.events-case__ollie {
  top: 0;
  left: 24.91%;
  width: 70.45%;
}

.events-case__copy {
  position: relative;
  width: min(780px, 100%);
  margin-inline: auto;
}

.events-case h3 {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(1.45rem, 1.6vw, 1.875rem);
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.2;
  text-transform: uppercase;
}

.events-case p {
  max-width: 780px;
  margin: 28px auto 0;
  color: var(--ink);
  font-size: clamp(.9rem, 1.05vw, 1.125rem);
  font-weight: 400;
  line-height: 1.55;
}

/* Pink atom built in CSS. */
.events-case__atom {
  position: absolute;
  top: 17px;
  left: -207px;
  width: 124px;
  aspect-ratio: 1;
  animation: events-atom-drift 7.1s ease-in-out infinite alternate;
}

.events-case__atom i {
  position: absolute;
  top: 27.5%;
  left: 0;
  width: 100%;
  height: 45%;
  border: 1.5px solid var(--pink);
  border-radius: 50%;
}

.events-case__atom i:first-child { rotate: 45deg; }
.events-case__atom i:last-child { rotate: -45deg; }

/* Three vertical loading stacks, using the shared chevron geometry. */
.events-chevron-stack {
  --events-chevron-color: var(--cyan);
  --events-chevron-delay: 0ms;
  --events-chevron-width: 22px;
  --events-chevron-height: 13px;
  --events-chevron-gap: 3px;
  position: absolute;
  z-index: 3;
  width: var(--events-chevron-width);
  pointer-events: none;
}

.events-chevron-stack.decor-loader--chevrons {
  aspect-ratio: auto;
}

.events-chevron-stack.decor-loader--chevrons .decor-loader__track {
  position: static;
  display: flex;
  flex-direction: column-reverse;
  gap: var(--events-chevron-gap);
  width: 100%;
  height: auto;
}

.events-chevron-stack.decor-loader--chevrons i {
  flex: 0 0 var(--events-chevron-height);
  width: var(--events-chevron-width);
  height: var(--events-chevron-height);
  margin-left: 0;
  background: var(--events-chevron-color);
  animation-name: events-chevron-rise-loading;
  /* The top chevron polygon rotated mathematically upward, without a CSS
     transform that would change the loader's scale/translation. */
  clip-path: polygon(0 100%, 0 57%, 50% 0, 100% 57%, 100% 100%, 50% 43%);
  rotate: none;
}

@keyframes events-chevron-rise-loading {
  0%, 52%, 100% {
    opacity: .22;
    transform: scale(.94);
  }
  12%, 28% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Bottom chevron lights first while preserving the shared loader cadence. */
.events-chevron-stack i:nth-child(1) { animation-delay: var(--events-chevron-delay); }
.events-chevron-stack i:nth-child(2) { animation-delay: calc(var(--events-chevron-delay) + 110ms); }
.events-chevron-stack i:nth-child(3) { animation-delay: calc(var(--events-chevron-delay) + 220ms); }
.events-chevron-stack i:nth-child(4) { animation-delay: calc(var(--events-chevron-delay) + 330ms); }
.events-chevron-stack i:nth-child(5) { animation-delay: calc(var(--events-chevron-delay) + 440ms); }
.events-chevron-stack i:nth-child(6) { animation-delay: calc(var(--events-chevron-delay) + 550ms); }
.events-chevron-stack i:nth-child(7) { animation-delay: calc(var(--events-chevron-delay) + 660ms); }

.events-chevron-stack--cyan {
  --events-chevron-color: var(--cyan);
  top: 263px;
  left: 4.64%;
}

.events-chevron-stack--blue {
  --events-chevron-color: var(--blue);
  --events-chevron-delay: 180ms;
  top: 165px;
  left: 7.95%;
}

.events-chevron-stack--yellow {
  --events-chevron-color: #f5de0b;
  --events-chevron-delay: 360ms;
  top: 72px;
  left: 11.52%;
}

/* Motion ----------------------------------------------------------------- */

@keyframes events-orb-spin {
  to { transform: rotate(360deg); }
}

@keyframes events-accent-float {
  from { transform: translate3d(-5px, 0, 0); }
  to { transform: translate3d(7px, -8px, 0); }
}

@keyframes events-dot-chase {
  0%, 68%, 100% { opacity: .32; transform: translateY(-3px) scale(.78); }
  30%, 44% { opacity: 1; transform: translateY(2px) scale(1); }
}

@keyframes events-dot-column-float {
  0%, 100% { transform: translate3d(0, -6px, 0); }
  50% { transform: translate3d(0, 8px, 0); }
}

@keyframes events-purple-dot-chase {
  0%, 68%, 100% { opacity: .25; transform: translateY(-2px) scale(.75); }
  28%, 42% { opacity: 1; transform: translateY(2px) scale(1); }
}

@keyframes events-atom-drift {
  from { transform: translate3d(-4px, 0, 0) rotate(-2deg); }
  to { transform: translate3d(6px, -9px, 0) rotate(2deg); }
}

/* Tablet ----------------------------------------------------------------- */

@media (max-width: 900px) {
  .page-events .site-header__inner {
    gap: 12px;
  }

  .page-events .brand--events {
    flex: 1 1 auto;
    max-width: calc(100% - 60px);
    overflow: hidden;
  }

  .page-events .events-brand--header {
    max-width: 100%;
  }

  .page-events .menu-button {
    display: grid;
    flex: 0 0 44px;
    margin-left: auto;
  }

  .events-brand--header img {
    width: clamp(162px, 43vw, 188px);
  }

  .events-brand--footer img {
    width: min(260px, 82vw);
  }

  .events-opening { --events-hero-height: 360px; }

  .events-opening__orb {
    top: 0;
    width: 900px;
  }

  .events-hero__copy p {
    font-size: clamp(6rem, 15vw, 8.2rem);
  }

  .events-hero__arrows {
    top: calc(50% - 98px);
    left: calc(50% - 145px);
  }

  .events-hero__dots {
    top: calc(50% + 82px);
  }

  .events-banner {
    height: min(39vw, 320px);
  }

  .events-showcase__inner {
    width: min(100% - 36px, 760px);
  }

  .events-showcase__texture {
    background: url("../images/events/events-halftone-mobile.png") center top / 100% auto repeat-y;
  }

  .events-showcase__texture img {
    visibility: hidden;
  }

  .events-overview__dots {
    left: 2%;
    width: 56px;
    height: 68px;
    gap: 7px;
  }

  .events-overview__rings {
    right: -3%;
    width: min(30vw, 270px);
  }

  .events-case__atom {
    left: -38px;
    width: 78px;
  }

  .events-case__live-center { top: 12px; }
  .events-case__live-right { top: 82px; }
  .events-case__purple-dots { top: 145px; }

  .events-chevron-stack--cyan { top: 170px; }
  .events-chevron-stack--blue { top: 108px; }
  .events-chevron-stack--yellow { top: 50px; }
}

/* Mobile ----------------------------------------------------------------- */

@media (max-width: 680px) {
  .events-showcase__inner {
    padding-top: 76px;
    padding-bottom: 105px;
  }

  .events-overview {
    display: grid;
    min-height: 360px;
    align-items: start;
  }

  .events-overview__title {
    position: relative;
    top: auto;
    left: auto;
    justify-self: center;
    font-size: clamp(3rem, 13vw, 4.5rem);
    translate: none;
  }

  .events-overview__dots {
    top: 186px;
    left: 5%;
  }

  .events-overview__rings {
    top: 176px;
    right: 2%;
    width: min(48vw, 260px);
  }

  .events-case {
    margin-bottom: 92px;
  }

  .events-case--live {
    margin-bottom: 98px;
  }

  .events-case__atom {
    display: none;
  }
}

@media (max-width: 520px) {
  .events-opening__orb {
    top: 0;
    width: 760px;
  }

  .events-hero__copy p {
    font-size: clamp(5.2rem, 24vw, 7.8rem);
  }

  .events-hero__arrows {
    top: calc(50% - 96px);
    left: calc(50% - 137px);
    width: 102px;
  }

  .events-hero__dots {
    top: calc(50% + 78px);
  }

  .events-banner {
    height: 220px;
  }

  .events-overview {
    min-height: 335px;
  }

  .events-overview__title {
    max-width: 100%;
    font-size: clamp(2.8rem, 14vw, 4rem);
  }

  .events-overview__dots {
    top: 175px;
    width: 50px;
    height: 61px;
    gap: 6px;
  }

  .events-overview__rings {
    top: 174px;
  }

  .events-case__media--corporate {
    aspect-ratio: 340 / 236;
  }

  .events-case__conference {
    width: 72%;
  }

  .events-case__meeting {
    width: 62%;
  }

  .events-case__media--live {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "center center"
      "left right";
    gap: 14px 12px;
    aspect-ratio: auto;
    padding-inline: 8px;
    margin-bottom: 48px;
  }

  .events-case__media--live > img {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  .events-case__media--live .events-case__live-left {
    grid-area: left;
  }

  .events-case__media--live .events-case__live-center {
    grid-area: center;
    justify-self: center;
    width: min(64%, 220px);
  }

  .events-case__media--live .events-case__live-right {
    grid-area: right;
  }

  .events-case__purple-dots {
    top: clamp(80px, 22vw, 100px);
    left: calc(50% + min(28vw, 112px));
  }

  .events-case__purple-dots--first-gap {
    display: none;
  }

  .events-case__purple-dots i {
    width: 4px;
  }

  .events-case__media--journey {
    aspect-ratio: 340 / 175;
  }

  .events-case__ollie {
    width: 76%;
  }

  .events-chevron-stack {
    --events-chevron-width: 13px;
    --events-chevron-height: 8px;
    --events-chevron-gap: 0;
  }

  .events-chevron-stack--cyan { top: 92px; left: 3%; }
  .events-chevron-stack--blue { top: 60px; left: 8%; }
  .events-chevron-stack--yellow { top: 28px; left: 13%; }

  .events-case h3 {
    font-size: 1.35rem;
  }

  .events-case p {
    font-size: .9rem;
  }
}