/* -----------------------------------------
   LENIS
----------------------------------------- */

html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-stopped {
  overflow: clip;
}

/* -----------------------------------------
   TEXT CROP
----------------------------------------- */

:is([class*="u-text-style-"],
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  blockquote) {
  display: flow-root;
}

:is([class*="u-text-style-"],
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  blockquote)::before {
  content: "";
  display: table;
  margin-bottom: calc(-0.5lh + 0.52em);
}

:is([class*="u-text-style-"],
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  blockquote)::after {
  content: "";
  display: table;
  margin-bottom: calc(-0.5lh + 0.31em);
}

/* -----------------------------------------
   FIT WIDTH
----------------------------------------- */

[data-fit-width] {
  display: inline-block;
  white-space: nowrap;
  margin: 0;
}

/* -----------------------------------------
   ROUND TEXT SPOTLIGHT
----------------------------------------- */

[data-text-spotlight] {
  position: relative;
  isolation: isolate;

  /* Old value was 80px */
  --spotlight-radius: 200px;

  /* Red only moves right */
  --spotlight-offset-x: 5px;
}

/* Original heading stays above */
[data-spotlight-line] {
  position: relative;
  z-index: 2;
}

/* Separate red visual layer */
.text-spotlight-layer {
  position: absolute;
  inset: 0;

  z-index: 1;

  overflow: visible;

  pointer-events: none;
}

/* -----------------------------------------
   RED CLONE
----------------------------------------- */

.text-spotlight-clone {
  position: absolute !important;

  margin: 0 !important;
  padding: 0 !important;

  color: #e51f1f !important;

  pointer-events: none !important;

  opacity: 0;

  /*
   * Exactly 5px right.
   * No vertical movement.
   */
  transform:
    translateX(var(--spotlight-offset-x)) !important;

  /*
   * Round moving reveal.
   */
  -webkit-mask-image:
    radial-gradient(circle var(--spotlight-radius) at var(--spotlight-x) var(--spotlight-y),

      #000 0%,
      #000 72%,
      rgba(0, 0, 0, 0.85) 82%,
      rgba(0, 0, 0, 0.4) 92%,
      transparent 100%);

  mask-image:
    radial-gradient(circle var(--spotlight-radius) at var(--spotlight-x) var(--spotlight-y),

      #000 0%,
      #000 72%,
      rgba(0, 0, 0, 0.85) 82%,
      rgba(0, 0, 0, 0.4) 92%,
      transparent 100%);

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

[data-text-spotlight].is-spotlight-active .text-spotlight-clone {
  opacity: 1;
}

@media (pointer: coarse) {
  .text-spotlight-layer {
    display: none;
  }
}

/* -----------------------------------------
   LOGO STACK LOADER
----------------------------------------- */

/*
 * Don't show loader inside
 * Webflow Designer.
 */
.wf-design-mode .logo-loader {
  display: none;
}

/*
 * Elements marked for reset
 * start hidden.
 *
 * JS reveals them when the
 * loader timeline starts.
 */
[data-logo-loader-reset] {
  opacity: 0;
}

.navbar_link,
.navbar-p {
  color: inherit;
}

/* GRAIN ANIMATION */

/* Optional: Animated Film Grain Effect */
.grain[data-grain-animate="true"] {
  animation: grain 0.6s steps(1, end) infinite;
}

@keyframes grain {
  0% {
    background-position: 0em 0em;
  }

  20% {
    background-position: -0.5em 0.3em;
  }

  40% {
    background-position: 0.4em -0.2em;
  }

  60% {
    background-position: -0.3em -0.4em;
  }

  80% {
    background-position: 0.2em 0.5em;
  }
}

/* -----------------------------------------
   ABOUT — MWG056 CARD FLIP
----------------------------------------- */

.mwg056 .mwg056-media:not(:first-child) {
  visibility: hidden;
}

/* Desktop / tablet:
   original horizontal card-flip setup */
.mwg056 .mwg056-media:nth-child(even) {
  transform: rotateY(180deg);
}

/* Mobile:
   JS now handles the vertical hinge flip
   directly on each card.

   Do NOT pre-rotate alternating cards here,
   otherwise every second card can end up
   upside down.
*/
@media screen and (max-width: 767px) {
  .mwg056 .mwg056-media:nth-child(even) {
    transform: none;
  }
}

/* -----------------------------------------
   ABOUT — ROTATING IMAGE TRAIL
----------------------------------------- */

[data-trail-area] {
  position: relative;
}

[data-trail-item="hidden"] {
  position: absolute;

  transform:
    translate(-50%, -50%) scale(0) rotate(-20deg);
}

[data-trail-item="visible"] {
  position: absolute;

  transform:
    translate(-50%, -50%) scale(1) rotate(0.001deg);

  transition:
    transform 0.4s cubic-bezier(0.625, 0.05, 0, 1);
}

[data-trail-item="transition-out"] {
  position: absolute;

  transform:
    translate(-50%, -50%) scale(0) rotate(180deg);

  transition:
    transform 0.8s cubic-bezier(0.625, 0, 0.875, 0);
}

/* -----------------------------------------
   SERVICES PAGE / FOUC PROTECTION
----------------------------------------- */

html.w-mod-js [data-services-page-stack]:not([data-services-ready]) [data-service-page-number],

html.w-mod-js [data-services-page-stack]:not([data-services-ready]) [data-service-page-image],

html.w-mod-js [data-services-page-stack]:not([data-services-ready]) [data-service-page-copy],

html.w-mod-js [data-services-page-stack]:not([data-services-ready]) [data-service-page-point],

html.w-mod-js [data-services-page-stack]:not([data-services-ready]) [data-service-page-cta],

html.w-mod-js [data-services-page-stack]:not([data-services-ready]) [data-service-page-title] {
  visibility: hidden;
}

/* -----------------------------------------
   PROJECTS PAGE / ANIMATION
----------------------------------------- */

html.w-mod-js [data-projects-page="section"]:not([data-projects-page-ready]) [data-projects-page="item"]:not(:first-child) {
  visibility: hidden;
}

html.w-mod-js [data-projects-page="section"]:not([data-projects-page-ready]) [data-projects-page="title"],

html.w-mod-js [data-projects-page="section"]:not([data-projects-page-ready]) [data-projects-page="tagline"],

html.w-mod-js [data-projects-page="section"]:not([data-projects-page-ready]) [data-projects-page="link"],

html.w-mod-js [data-projects-page="section"]:not([data-projects-page-ready]) [data-projects-page="counter"],

html.w-mod-js [data-projects-page="section"]:not([data-projects-page-ready]) [data-projects-page="controls"] {
  visibility: hidden;
}

/* Outer CMS item = moving reveal mask */
[data-projects-page="item"] {
  overflow: hidden;
  will-change: transform;
}

/* Inner layer counter-moves against parent */
[data-projects-page="slide"] {
  will-change: transform;
}

/* Independent image parallax */
[data-projects-page="image"] {
  will-change: transform;
  backface-visibility: hidden;
}

/* No drag behaviour */
[data-projects-page="section"] {
  touch-action: auto;
}

/* -----------------------------------------
   CASE STUDY — FOUC PROTECTION
----------------------------------------- */

.case-study_copy-column,
[data-case-study="copy-stage"],
[data-case-study="visual-column"] {
  visibility: hidden;
}

[data-case-study-copy] {
  opacity: 0;
  visibility: hidden;
}

[data-case-study-image] {
  transform: translateY(-5%) scale(1.1);
  will-change: transform;
}