/* =========================================================
   1. NO GENERIC FADE/SLIDE-IN REVEALS
   Keep deliberate timeline + marquee motion, remove the
   "everything appears while scrolling" treatment.
   ========================================================= */
.ff-reveal,
.ff-reveal.ff-in-view,
.tg-reveal,
.tg-reveal.in,
.animate__animated,
.qodef-landing-intro-title .qodef-m-title,
.qodef-landing-intro-title .qodef-m-text,
.ff-hero-edition,
.ff-hero-title,
.ff-hero-theme,
.ff-hero-tagline,
.ff-hero-meta,
.ff-hero-btns,
.ff-hero-visual {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

.qodef-landing-intro-title .qodef-m-button {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  animation: none !important;
  transition: none !important;
}

.qodef--init.qodef-direction--left.qodef-text-marquee .qodef-m-content-inner,
.qodef--init.qodef-direction--right.qodef-text-marquee .qodef-m-content-inner {
  animation-duration: var(--qode-marquee-duration, 80s) !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
}

/* =========================================================
   2. REMOVE THE MYSTERY GAP AROUND THE MARQUEE / NEXT SECTION
   ========================================================= */
#qodef-main-rev-holder,
#qodef-main-rev-holder > .elementor,
#qodef-main-rev-holder .e-con,
.elementor-element-8545d33 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: 0 !important;
}

.qodef-text-marquee {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.qodef-text-marquee .qodef-m-content {
  margin-bottom: 0 !important;
}

@media (max-width: 680px) {
  .qodef-text-marquee.qodef-enable-left-icon--yes .qodef-m-content {
    padding-top: 42px !important;
    padding-bottom: 18px !important;
  }
  .tg-about {
    padding-top: 62px !important;
  }
}

@media (min-width: 681px) {
  .tg-about {
    padding-top: 78px !important;
  }
}

/* =========================================================
   3. MOBILE TEAM CARDS - stable portrait composition
   ========================================================= */
@media (max-width: 760px) {
  #meettheteam .grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    width: min(100%, 520px) !important;
    margin-inline: auto !important;
  }

  #meettheteam .card {
    min-height: 545px !important;
    height: 545px !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    isolation: isolate !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.38) !important;
  }

  #meettheteam .backdrop {
    inset: 0 0 auto 0 !important;
    width: 100% !important;
    height: 67% !important;
  }

  #meettheteam .backdrop img {
    object-position: center center !important;
    filter: brightness(0.48) saturate(0.65) !important;
  }

  #meettheteam .backdrop::after {
    background: linear-gradient(
      180deg,
      rgba(20, 23, 28, 0.06) 0%,
      rgba(20, 23, 28, 0.16) 42%,
      #14171c 100%
    ) !important;
  }

  #meettheteam .frame {
    left: 50% !important;
    top: 24px !important;
    width: 188px !important;
    height: 250px !important;
    transform: translateX(-50%) rotate(-3deg) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(255, 255, 255, 0.045) !important;
  }

  #meettheteam .photo {
    left: 50% !important;
    top: 18px !important;
    width: 188px !important;
    height: 250px !important;
    transform: translateX(-50%) rotate(2deg) !important;
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.4) !important;
  }

  #meettheteam .corner,
  #meettheteam .signature {
    z-index: 6 !important;
  }

  #meettheteam .signature {
    right: 16px !important;
    top: 20px !important;
    font-size: 14px !important;
  }

  #meettheteam .content {
    left: 18px !important;
    right: 18px !important;
    bottom: 18px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    text-align: center !important;
  }

  #meettheteam .content > div:first-child {
    width: 100% !important;
  }

  #meettheteam .role {
    font-size: 9px !important;
    letter-spacing: 0.2em !important;
  }

  #meettheteam .name {
    font-size: clamp(31px, 9vw, 38px) !important;
    line-height: 1 !important;
    margin-top: 5px !important;
  }

  #meettheteam .meta {
    font-size: 9px !important;
    margin-top: 8px !important;
  }

  #meettheteam .links {
    justify-content: center !important;
    width: 100% !important;
    margin-top: 0 !important;
    gap: 7px !important;
  }

  #meettheteam .links a {
    min-height: 38px !important;
    padding-inline: 13px !important;
  }
}

@media (max-width: 390px) {
  #meettheteam .card {
    height: 525px !important;
    min-height: 525px !important;
  }
  #meettheteam .frame,
  #meettheteam .photo {
    width: 170px !important;
    height: 230px !important;
  }
  #meettheteam .name {
    font-size: 30px !important;
  }
}

/* =========================================================
   4. PLANET - freeze all decorative motion on phones
   ========================================================= */
@media (max-width: 768px) {
  #aboutus .tg-visual .tg-orbit,
  #aboutus .tg-visual .tg-core,
  #aboutus .tg-visual .tg-star-orbit,
  #aboutus .tg-visual .tg-core-label .y,
  #aboutus .tg-visual .tg-orbit .node,
  #aboutus .tg-visual .tg-particle,
  #aboutus .tg-visual [class*="particle"] {
    animation: none !important;
    transition: none !important;
    will-change: auto !important;
  }
}

/* =========================================================
   5. TIMELINE - trigger close to the actual viewport and
      animate at a calm, consistent pace. The marquee remains
      independent and continuously animated.
   ========================================================= */
#schedule .ff-tl__row {
  opacity: 0 !important;
  transform: translateY(22px) !important;
  filter: none !important;
  transition:
    opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.82s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

#schedule .ff-tl__row.is-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

#schedule .ff-tl__row:nth-child(n) {
  transition-delay: 0ms !important;
}

#schedule .ff-tl__row.is-visible:nth-child(1) {
  transition-delay: 0ms !important;
}
#schedule .ff-tl__row.is-visible:nth-child(2) {
  transition-delay: 80ms !important;
}
#schedule .ff-tl__row.is-visible:nth-child(3) {
  transition-delay: 160ms !important;
}
#schedule .ff-tl__row.is-visible:nth-child(4) {
  transition-delay: 240ms !important;
}
#schedule .ff-tl__row.is-visible:nth-child(5) {
  transition-delay: 320ms !important;
}
#schedule .ff-tl__row.is-visible:nth-child(6) {
  transition-delay: 400ms !important;
}
#schedule .ff-tl__row.is-visible:nth-child(7) {
  transition-delay: 480ms !important;
}
#schedule .ff-tl__row.is-visible:nth-child(8) {
  transition-delay: 560ms !important;
}

@media (max-width: 820px) {
  #schedule .ff-tl__row {
    transition-duration: 0.65s !important;
  }
}

#schedule .ff-tl__row.is-visible .ff-tl__node {
  animation-duration: 3.4s !important;
}

/* =========================================================
   6. ABOUT PLANET - single clean orbit system
   The rings are static tilted ellipses. A uniformly bordered circle
   spinning in its own plane looks identical at every angle, and the spin
   also rotated the front-arc clip below, so the "front" half of each ring
   drifted behind the planet and its back half crossed in front of it.
   Core, rings and stars share one bob via the independent `translate`
   property, so the planet always stays centred inside its rings.
   ========================================================= */
#aboutus .tg-visual {
  position: relative;
  perspective: none !important;
  transform-style: flat !important;
  isolation: isolate;
  overflow: visible;
}

/* On desktop the section has no side padding and clips its overflow, so
   leave room for the outer ring (4%) and the right chip (6%), which both
   extend past the planet's box. */
@media (min-width: 981px) {
  #aboutus .tg-visual {
    margin-right: 6%;
  }
}

#aboutus .tg-visual .tg-orbit,
#aboutus .tg-visual .tg-orbit.o2,
#aboutus .tg-visual .tg-orbit.o3 {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  box-sizing: border-box;
  transform: rotateX(68deg);
  transform-style: flat !important;
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
  will-change: auto;
  pointer-events: none;
  opacity: 0.94;
  border: 1px solid rgba(0, 229, 255, 0.22);
  box-shadow: inset 0 0 10px rgba(0, 229, 255, 0.04);
  animation: tgPlanetBob 7s ease-in-out infinite;
}

#aboutus .tg-visual .tg-orbit {
  width: 108%;
  height: 108%;
  margin: -54% 0 0 -54%;
}

#aboutus .tg-visual .tg-orbit.o2 {
  width: 88%;
  height: 88%;
  margin: -44% 0 0 -44%;
  border-color: rgba(155, 48, 255, 0.24);
}

#aboutus .tg-visual .tg-orbit.o3 {
  width: 70%;
  height: 70%;
  margin: -35% 0 0 -35%;
  border-color: rgba(0, 229, 255, 0.16);
}

#aboutus .tg-visual .tg-orbit--front {
  z-index: 3;
  border-width: 2px;
  clip-path: polygon(0 52%, 100% 52%, 100% 100%, 0 100%);
  -webkit-clip-path: polygon(0 52%, 100% 52%, 100% 100%, 0 100%);
}

#aboutus .tg-core {
  position: relative;
  width: 58%;
  border-width: 2px;
  z-index: 2;
  animation: tgPlanetBob 7s ease-in-out infinite;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease;
}

@keyframes tgPlanetBob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -10px; }
}

#aboutus .tg-core-label {
  width: 86%;
  font-family: var(--p3-font-d, "Tektur", sans-serif);
}

#aboutus .tg-core-label .y {
  font-size: clamp(1.95rem, 3.8vw, 3rem);
  font-weight: 700;
  letter-spacing: 0.055em;
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.24);
}

#aboutus .tg-core-label .t {
  margin-top: 0.45rem;
  font-family: var(--p3-font-b, "Sora", sans-serif);
  font-size: clamp(0.58rem, 1.1vw, 0.82rem);
  font-weight: 700;
  letter-spacing: 0.065em;
  line-height: 1.1;
  white-space: nowrap;
  text-shadow: 0 0 14px rgba(0, 229, 255, 0.4);
}

/* Each star wrapper is a point at the planet's centre. js/ff-planet.js
   projects the star through its ring's own transform, so it follows the
   rendered ring exactly, and swaps the wrapper's z-index to pass behind the
   planet on the far side. Stars stay hidden until the script places them. */
#aboutus .tg-star-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  margin: 0;
  transform: none;
  animation: tgPlanetBob 7s ease-in-out infinite;
  z-index: 4;
  pointer-events: none;
  visibility: hidden;
}

#aboutus .tg-visual.tg-stars-ready .tg-star-orbit {
  visibility: visible;
}

#aboutus .tg-star-orbit .node {
  position: absolute;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 2px;
  background: #00e5ff;
  box-shadow: 0 0 10px 1px #00e5ff;
  will-change: transform;
}

#aboutus .tg-star-orbit.s2 .node {
  background: #9b30ff;
  box-shadow: 0 0 10px 1px #9b30ff;
}

#aboutus .tg-star-orbit.s3 .node {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  background: #fff;
  box-shadow: 0 0 8px 1px #fff;
}

#aboutus .tg-chip {
  animation: none !important;
  font-family: var(--p3-font-b, "Sora", sans-serif);
  font-weight: 700;
  will-change: auto !important;
}

@media (prefers-reduced-motion: reduce) {
  #aboutus .tg-visual .tg-orbit,
  #aboutus .tg-visual .tg-core,
  #aboutus .tg-visual .tg-star-orbit {
    animation: none !important;
  }

  #aboutus .tg-star-orbit .node {
    will-change: auto;
  }
}

/* =========================================================
   7. NAVIGATION - fixed visual centre and consistent type
   ========================================================= */
@media (min-width: 901px) {
  #ff-nav {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    justify-content: normal;
  }

  #ff-nav .ff-nav-logo {
    grid-column: 1;
    justify-self: start;
  }

  #ff-nav .ff-nav-links {
    grid-column: 2;
    margin: 0;
  }

  #ff-nav .ff-nav-cta {
    grid-column: 3;
    justify-self: end;
  }
}

#ff-nav .ff-nav-links > li > a,
#ff-nav .ff-nav-results {
  font-family: var(--p3-font-b, "Sora", "Oxanium", sans-serif);
  font-synthesis: none;
}

/* =========================================================
   8. EVENT THUMBNAILS - show the original image colours
   ========================================================= */
#events .ff-card-image-wrap::before,
#events .ff-card-image-wrap::after {
  display: none !important;
}

#events .ff-card-image-wrap img,
#events .ff-event-card:hover .ff-card-image-wrap img,
#events .ff-event-card:focus-visible .ff-card-image-wrap img {
  filter: none !important;
}

.ff-event-search-wrap #ff-event-search {
  padding-left: 52px !important;
}

/* =========================================================
   9. DISPLAY TYPE - shared heading font (--p3-font-d)
   .ff-section-title and .ff-card-title get it via --ff-display.
   The previous display font (ogtech) only had capital letterforms, so
   text that relied on it to look uppercase is now uppercased explicitly.
   ========================================================= */
#aboutus .tg-title,
.force-main,
#schedule .ff-tl__title {
  font-family: var(--p3-font-d, "Tektur", sans-serif);
}

#aboutus .tg-title,
#schedule .ff-tl__title,
#ff-hero .ff-hero-theme,
#ff-nav .ff-nav-title {
  text-transform: uppercase;
}

/* =========================================================
   10. iOS DATA DETECTORS
   Kept from the removed slider stylesheet (rs6.css): phone numbers and
   dates that iOS auto-links keep the surrounding text style.
   ========================================================= */
a[x-apple-data-detectors] {
  color: inherit !important;
  text-decoration: none !important;
  font-size: inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}