:root {
  --tt-text-color: currentColor;
  --tt-linear-text-bg-color: rgba(255, 255, 255, .20);
}

/* ######## 
        <!-- tt-text-reveal -->
        /* ######## */

/* Text linear reveal baseline */
.tt-text-reveal>span {
  position: relative;
  display: inline;
  color: var(--tt-text-color);
  -webkit-text-fill-color: var(--tt-linear-text-bg-color);
  -webkit-background-clip: text;
  background-repeat: no-repeat;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 100%;
  will-change: background-size;
}

/* Palette helpers (optional, match light/dark backgrounds) */
.text-white .tt-text-reveal>span,
.tt-text-reveal.text-white>span {
  /*color: #f1f1f1;*/
  -webkit-text-fill-color: rgba(255, 255, 255, .20);
}

.text-dark .tt-text-reveal>span,
.tt-text-reveal.text-dark>span {
  color: #212121;
  -webkit-text-fill-color: rgba(0, 0, 0, .20);
}

/* Dark section helper (if you add this class on a dark block) */
.tt-dark-section .tt-text-reveal>span {
  color: #fff;
  -webkit-text-fill-color: rgba(255, 255, 255, .30);
}

/* Nice-to-have perf hint for fade-in items */
.tt-anim-fadeinup {
  will-change: transform, opacity;
}


/* ######## 
        <!-- tt-anim-zoomin -->
        /* ######## */

.tt-anim-zoomin-wrap {
  overflow: hidden;
}

.tt-anim-zoomin {
  will-change: transform, opacity;
  transform-origin: center center;
}

/* tile layering */
.tile {
  position: relative;
}

.tile .tt-anim-zoomin-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.tile-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.tile-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.tile-content,
.tile-cta {
  position: relative;
  z-index: 3;
}

.tile .tt-anim-zoomin {
  transform: scale(1.05);
  transition: transform .95s cubic-bezier(.22, 1, .36, 1);
}

.tile:hover .tt-anim-zoomin {
  transform: scale(1);
}

/* ######## 
        <!-- Image reveal baseline (from template style) -->
        /* ######## */


.reveal {
  visibility: hidden;
  position: relative;
  overflow: hidden;
}

.reveal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: left center;
  display: block;
}

/* Make the reveal fill the right-side band */
.partners-side {
  position: absolute;
  inset: 0 0 0 auto;
}

.reveal--side {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}



.join-media.reveal {
  position: relative;
  overflow: hidden;
}

.join-media.reveal img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: left;
  filter: grayscale(100%);
  /* keep your grey look, remove if not needed */
  display: block;
}


/* Reveal container should clip the image while GSAP slides it in */
.news-media.reveal {
  position: relative;
  display: block;
  overflow: hidden;
}

/* Make the image act like a background cover */
.news-media.reveal img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: left;
  display: block;
}

/* base */
.news-media img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform .7s cubic-bezier(.2, .8, .2, 1);
  will-change: transform;
}

/* hover / keyboard focus: zoom in (override GSAP inline transform) */
@media (hover:hover) {
  .news-media:hover img {
    transform: scale(1.08) !important;
  }
}

.news-media:focus-visible img {
  transform: scale(1.08) !important;
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .news-media img {
    transition: none;
  }
}

.btn-news-all {
  color: var(--brand, #43104b);
}

/* The news section wants a gray placeholder before reveal */
.news-section {
  --tt-linear-text-bg-color: rgb(0 0 0 / 24%);
}

.news-section .tt-text-reveal>span {
  -webkit-text-fill-color: var(--tt-linear-text-bg-color);
  -webkit-background-clip: text;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 100%;
  background-repeat: no-repeat;
}

/* Make the reveal fill the right image band */
.contact-side .reveal {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  visibility: hidden;
  /* shown by GSAP on start */
}

.contact-side .reveal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: right;
  /* nicer parallax feel for right-side variant */
}

/* Word-reveal wrappers (template-style) */
.tt-cap-word-wrap {
  display: inline-flex;
  overflow: hidden;
}

.tt-cap-word {
  display: inline-block;
  will-change: transform;
}


#tt-page-transition {
  display: none;
}

body.tt-transition #tt-page-transition {
  display: block;
  position: relative;
  z-index: 99999;
}

/* Overlays: must start collapsed (scaleX(0)) */
body.tt-transition .tt-ptr-overlay-top,
body.tt-transition .tt-ptr-overlay-bottom {
  position: fixed;
  top: 0;
  height: 100vh;
  width: 50%;
  background: var(--tt-page-trans-overlay-bg-color);
  z-index: 1;
  transform: scaleX(0);
  /* <-- critical */
  will-change: transform, opacity;
}

body.tt-transition .tt-ptr-overlay-top {
  left: 0;
  transform-origin: center left;
}

body.tt-transition .tt-ptr-overlay-bottom {
  right: 0;
  transform-origin: center right;
}

/* Preloader logo: start hidden; JS fades it */
body.tt-transition .tt-ptr-preloader {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  opacity: 0;
}

.tt-ptr-prel-image {
  max-height: 40px;
  opacity: .75;
}


/* ===== Domains: follow-circle cursor ===== */
.domains-section .tile {
  position: relative;
  overflow: hidden;
}

.domains-section .tile .tile-cursor {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--tile-cursor-size, 120px);
  height: var(--tile-cursor-size, 120px);
  border-radius: 999px;
  background: rgba(205,215,73, 0.6);
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: .08em;
  font-size: clamp(10px, 1.2vw, 13px);
  line-height: 1.05;
  text-decoration: none;
  cursor: pointer;
  pointer-events: auto;
  /* <-- clickable now */
  z-index: 4;
  filter: drop-shadow(0 6px 25px rgba(0, 0, 0, .35));
  will-change: transform, opacity;
}

.domains-section .tile .tile-cursor b {
  font-weight: 800;
}

.domains-section .tile .tile-cursor {
  text-transform: none;
  /* was uppercase */
  letter-spacing: .02em;
  /* tighter for French */
}

/* keyboard focus */
.domains-section .tile .tile-cursor:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* turn off on coarse pointers / touch (keep as before) */
@media (pointer: coarse),
(hover: none) {
  .domains-section .tile .tile-cursor {
    display: none !important;
  }
}

@media (hover:hover) and (pointer:fine){
  .domains-section .tile .tile-cta{
    display: none !important;
  }
}

/* Fallback for older browsers: also hide on wide viewports */
@media (min-width: 992px){
  .domains-section .tile .tile-cta{
    display: none !important;
  }
}


/* ===== Cursor-follow bubble (desktop/hover only) ===== */
.tt-cursor {
  position: fixed;
  left: 0; top: 0;
  width: var(--tt-cursor-size, 88px);
  height: var(--tt-cursor-size, 88px);
  border-radius: 999px;
  background: rgba(255,255,255,.96);
  color: #430A4B;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  display: flex; align-items: center; justify-content: center;
  font: 700 11px/1.1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing: .06em; text-transform: uppercase; text-align: center;
  padding: 10px;
  pointer-events: none;       /* never blocks clicks */
  z-index: 99999;
  transform: translate(-50%, -50%) scale(.85);
  opacity: 0;
}

.tt-cursor .tt-cursor-label { display:block; }
.tt-cursor .tt-cursor-label b { font-weight: 800; }

/* Hide on non-hover/touch devices */
@media (hover:none), (pointer:coarse) {
  .tt-cursor { display: none !important; }
}