/* --- MOTION TRACKING BTN ------------------------------------------------- */
/* Force webcam icon to stay visible */
#enable-head-tracking svg,
#enable-head-tracking img {
  opacity: 1 !important;
  visibility: visible !important;
}

/* If the icon is an SVG, force white fill */
#enable-head-tracking svg path,
#enable-head-tracking svg {
  fill: white !important;
}

/* Prevent hover from hiding it */
#enable-head-tracking:hover svg,
#enable-head-tracking:hover img {
  opacity: 1 !important;
}

/* Active state color */
#enable-head-tracking.is-active {
  background-color: #de4758 !important;
}

#enable-head-tracking.is-active:hover {
  background-color: #de4758 !important;
}


/* Button base */
#enable-head-tracking {
  position: relative;
  transition: background-color .35s ease;
  border-radius: 50%;
  /* Assuming your button is a circle */
}

/* Activate pulse */
#enable-head-tracking.is-active {
  animation: headTrackingPulse 2.6s ease-out infinite;
}

/* Much simpler Box-Shadow Pulse animation */
@keyframes headTrackingPulse {
  0% {
    /* Starts directly on the edge of the button, visible */
    box-shadow: 0 0 0 0 rgba(222, 71, 88, 0.6);
  }

  80% {
    /* Expands outward by 20px (change this to make it bigger/smaller) and fades out */
    box-shadow: 0 0 0 20px rgba(222, 71, 88, 0);
  }

  100% {
    box-shadow: 0 0 0 20px rgba(222, 71, 88, 0);
  }
}

/* --- CUSTOM CURSOR CSS ------------------------------------------------- */
@media screen and (min-width: 768px) {

  body,
  html {
    cursor: none;
  }
}

/* Force system pointer on interactive elements */
a,
button,
input,
textarea,
.w-button,
[role="button"],
.clickable {
  cursor: pointer !important;
}

.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  pointer-events: none;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.cursor-dot {
  width: 8px;
  height: 8px;
  background-color: #FFFFFF;
  transition: opacity 0.2s;
}

.cursor-ring {
  width: 50px;
  height: 50px;
  border: 1px solid rgba(255, 255, 255, 1);
  background-color: transparent;
  border-radius: 50%;
  /* Added explicitly so GSAP knows where to animate back to */

  /* REMOVED width and height transitions so GSAP can take over smoothly */
  transition: background-color 0.3s, border-color 0.3s, opacity 0.2s;
}

.cursor-ring.active,
.cursor-dot.active {
  opacity: 0;
}

/* Hide custom cursor on Mobile */
@media screen and (max-width: 767px),
screen and (hover: none) and (pointer: coarse) {

  .cursor-dot,
  .cursor-ring {
    display: none !important;
  }

  body,
  html {
    cursor: auto !important;
  }
}


/* --- OVERRIDE WEBFLOW TO KEEP GSAP CURSOR VISIBLE --- */
.left-nav,
.left-nav * {
  cursor: none !important;
}

/* ─────────────────────────────────────────────
   Iframe Project
───────────────────────────────────────────── */

body.iframe-open .cursor-ring,
body.iframe-open .cursor-dot {
  opacity: 0;
  pointer-events: none;
}

body.iframe-open,
body.iframe-open html {
  cursor: auto !important;
  overflow: hidden !important;
}

.fullscreen-bg-clone {
  object-fit: cover;
  will-change: transform, filter;
}



._3dheader-btn {
  position: relative;
  cursor: pointer;
}



/* --- SCROLL ANIMATED ICON ------------------------------------------ */
.scroll-indicator {
  width: 17px;
  height: 48px;
  position: relative;
}

/* arrows pinned */
.arrow {
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
}

.arrow.top {
  top: 0;
  border-bottom: 6px solid #fff;
}

.arrow.bottom {
  bottom: 0;
  border-top: 6px solid #fff;
}

/* split lines */
.line {
  position: absolute;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: #fff;
  pointer-events: none;
}

.line.top-line {
  top: 6px;
  height: 0px;
}

.line.bottom-line {
  bottom: 6px;
  height: 0px;
}

/* moving circle - positioned from TOP edge, not center */
.dot {
  width: 17px;
  height: 17px;
  border: 1px solid #fff;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 6px;
  /* Start at arrow bottom */
  transform: translateX(-50%);
  /* Only center horizontally */
  pointer-events: none;
}


/* Scramble text opacity GSAP contact section ------------------------------------------ */
.dud {
  opacity: 0.35;
  pointer-events: none;
}

#contactus {
  position: relative;
  height: 200vh;
  /* keep your camera anchors safe */
}

#contactus .contact-inner {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

#scramble-container {
  text-align: center;
}



/* --- CAROUSEL 3D -------------------------------------------------------------------- */

/* 1. DEFAULT SIZE (Mobile & Tablet) */
/* Because this is at the top, phones will automatically use 300x400 */
.carousel-3d-item {
  --width: 300px;
  --height: 400px;
  width: var(--width) !important;
  height: var(--height) !important;
  perspective: 600px;
  /* Controls depth intensity */
  perspective-origin: center;
}

.carousel-3d-box {
  transform-style: preserve-3d;
  transform-origin: center center;
  will-change: transform;
}

/* 2. DESKTOP SIZE (PC) */
/* The @media rule tells the browser: "If the screen is 992px or wider, swap the variables to 450x650" */
@media screen and (min-width: 992px) {
  .carousel-3d-item {
    --width: 450px;
    --height: 600px;
  }
}

/* Viewport: Webflow handles position/size — we add overflow + selection */
.carousel-3d {
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: all;
}

/* Track: 3D context for parallax tilt */
.carousel-3d-track {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  transform-style: preserve-3d !important;
  perspective: 1200px;
  will-change: transform;
}

/* Cards: diagonal layout driven by CSS custom properties set by JS */
/* Cards: diagonal layout driven by CSS custom properties set by JS */
.carousel-3d-item {
  --x: calc(var(--active) * 80%);
  --y: calc(var(--active) * 20%);
  --rot: calc(var(--active) * 12deg);

  position: absolute !important;
  z-index: var(--zIndex);
  top: 50%;
  left: 50%;
  margin: calc(var(--height, 400px) * -0.5) 0 0 calc(var(--width, 300px) * -0.5);
  transform-origin: 0% 100%;
  transform: translate(var(--x), var(--y)) rotate(var(--rot));
  transition: opacity 0.6s ease;
  will-change: transform, z-index;
  pointer-events: all;

  /* Intro animation uses this transition — JS removes it after intro */
  transition: transform 0.8s cubic-bezier(0, 0.02, 0, 1), opacity 0.6s ease;

  /* REMOVED border-radius, overflow, and box-shadow from here */
}

.carousel-3d-item,
.carousel-3d-box {
  max-width: none !important;
}

/* Card inner box: depth effects (blur, opacity, scale) from JS */
.carousel-3d-box {
  position: relative;
  width: 100%;
  height: 100%;
  will-change: transform, filter, opacity;
  transition: none !important;
  filter: blur(0px);
  opacity: 1;
  transform-origin: 50% 50%;
  overflow: hidden;

  /* ADDED HERE: Now the shadow and rounded corners scale naturally with the depth effect */
  border-radius: 10px;
  box-shadow: 0 10px 50px 10px rgba(0, 0, 0, 0.5);
}

/* Subtle vignette gradient over each card */
.carousel-3d-box::before {
  content: '';
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom,
      rgba(0, 0, 0, 0.3),
      rgba(0, 0, 0, 0) 30%,
      rgba(0, 0, 0, 0) 50%,
      rgba(0, 0, 0, 0.5));
  pointer-events: none;
}

/* Card images fill the box */
.carousel-3d-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Prevent text/image selection while dragging */
.carousel-3d img {
  -webkit-user-drag: none;
  user-select: none;
}

/* Ensure the box can hold absolute layers */
.carousel-3d-box {
  position: relative;
  overflow: hidden;
}

/* ─────────────────────────────────────────────
   HOLOGRAPHIC FOIL LAYER
───────────────────────────────────────────── */

.carousel-3d-box::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;


  /* Softer spectral palette */
  --red: rgba(255, 60, 166, 0.22);
  --yel: rgba(255, 224, 102, 0.22);
  --gre: rgba(77, 255, 184, 0.22);
  --blu: rgba(60, 202, 255, 0.22);
  --vio: rgba(192, 77, 255, 0.22);

  background-image:

    /* rainbow diffraction (very subtle)
    repeating-linear-gradient(120deg,
      var(--vio) 0%,
      var(--blu) 8%,
      var(--gre) 16%,
      var(--yel) 24%,
      var(--red) 32%,
      var(--vio) 40%), */

    /* ultra thin metallic grooves */
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, 0.08) 0px,
      rgba(255, 255, 255, 0.08) 1px,
      rgba(0, 0, 0, 0.08) 2.5px,
      rgba(0, 0, 0, 0.08) 4px),

    /* pointer light */
    radial-gradient(circle at var(--pointer-x, 50%) var(--pointer-y, 50%),
      rgba(255, 255, 255, 0.45) 0%,
      rgba(255, 255, 255, 0.25) 15%,
      rgba(255, 255, 255, 0.12) 30%,
      rgba(255, 255, 255, 0.06) 45%,
      rgba(255, 255, 255, 0.02) 60%,
      rgba(0, 0, 0, 0) 75%);


  background-size:
    260% 260%,
    120% 120%,
    120% 120%;

  background-position:
    calc((var(--background-x, 50%) - 50%) * 1.3 + 50%) calc((var(--background-y, 50%) - 50%) * 1.3 + 50%),
    center,
    center;

  background-blend-mode:
    soft-light,
    overlay,
    screen;

  mix-blend-mode: color-dodge;

  /* much softer foil */
  opacity: calc(var(--opc, 0) * 0.55);

  filter:
    brightness(calc(0.75 + var(--pointer-from-center, 0) * 0.6)) contrast(1.15) saturate(1.1);

  /* 👇 UPDATED: Using a CSS variable for the mask with your original as fallback 👇 */
  -webkit-mask-image: var(--card-mask, url('https://cdn.prod.website-files.com/65c83fbb9f2750d119b43fb3/69a81da4fce7e21ad70df452_3a063d15c61ba4fcafc6ab96114aafde_mask.webp'));
  -webkit-mask-size: 100% 100%;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;

  mask-image: var(--card-mask, url('https://cdn.prod.website-files.com/65c83fbb9f2750d119b43fb3/69a81da4fce7e21ad70df452_3a063d15c61ba4fcafc6ab96114aafde_mask.webp'));
  mask-size: 100% 100%;
  mask-position: center;
  mask-repeat: no-repeat;

  transition: filter 0.15s ease;
}

/* ─────────────────────────────────────────────
   METALLIC GLARE (OVERLAY + MASKED)
───────────────────────────────────────────── */
.carousel-3d-box::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;

  background-image:
    /* Sharp diagonal metallic sheen */
    linear-gradient(105deg,
      rgba(255, 255, 255, 0) 15%,
      rgba(255, 255, 255, 0.25) 35%,
      rgba(255, 255, 255, 0.7) 50%,
      rgba(255, 255, 255, 0.25) 65%,
      rgba(255, 255, 255, 0) 85%),

    /* Large radial bloom */
    radial-gradient(farthest-corner circle at var(--pointer-x, 50%) var(--pointer-y, 50%),
      rgba(255, 255, 255, 0.7) 0%,
      rgba(255, 255, 255, 0.4) 20%,
      rgba(255, 255, 255, 0.15) 45%,
      rgba(255, 255, 255, 0) 100%);

  background-size: 250% 250%, 100% 100%;
  background-repeat: no-repeat;
  background-position: var(--pointer-x, 50%) var(--pointer-y, 50%), center;
  background-blend-mode: overlay;

  opacity: calc(var(--opc, 0) * 1);
  mix-blend-mode: overlay;
  filter: brightness(calc(1.0 + var(--pointer-from-center, 0) * 0.5)) contrast(1.1);
  transition: opacity .12s ease;

  /* 👇 FIX 1: Force hardware acceleration to fix the blend-mode bug 👇 */
  transform: translateZ(0);
  will-change: transform;

  /* 👇 FIX 2: Tell browser to read Black & White masks correctly 👇 */
  mask-mode: luminance;
  -webkit-mask-source-type: luminance;

  /* 👇 UPDATED: Apply the same variable here 👇 */
  -webkit-mask-image: var(--card-mask, url('https://cdn.prod.website-files.com/65c83fbb9f2750d119b43fb3/69a81da4fce7e21ad70df452_3a063d15c61ba4fcafc6ab96114aafde_mask.webp'));
  -webkit-mask-size: 100% 100%;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;

  mask-image: var(--card-mask, url('https://cdn.prod.website-files.com/65c83fbb9f2750d119b43fb3/69a81da4fce7e21ad70df452_3a063d15c61ba4fcafc6ab96114aafde_mask.webp'));
  mask-size: 100% 100%;
  mask-position: center;
  mask-repeat: no-repeat;
}

/*─────────────────────────────────────────────
   INDIVIDUAL CARD MASKS (Mapped by order)
───────────────────────────────────────────── */

/* Card 1 */
.carousel-3d-item:nth-child(1) {
  --card-mask: url('https://cdn.prod.website-files.com/65c83fbb9f2750d119b43fb3/69a81da4fce7e21ad70df452_3a063d15c61ba4fcafc6ab96114aafde_mask.webp');
}

/* Card 2 */
.carousel-3d-item:nth-child(2) {
  --card-mask: url('https://cdn.prod.website-files.com/65c83fbb9f2750d119b43fb3/69aa8fa60c52f9eb9045fd8d_mask-realestate.webp');
}

/* Card 3 */
.carousel-3d-item:nth-child(3) {
  --card-mask: url('https://cdn.prod.website-files.com/65c83fbb9f2750d119b43fb3/69aa86a652aa3e9cf93e013d_mask-mysepui.webp');
}

/* Card 4 */
.carousel-3d-item:nth-child(4) {
  --card-mask: url('https://cdn.prod.website-files.com/65c83fbb9f2750d119b43fb3/69aa86a607d122e0de6e6142_mask-fa.webp');
}

/* Card 5 */
.carousel-3d-item:nth-child(5) {
  --card-mask: url('https://cdn.prod.website-files.com/65c83fbb9f2750d119b43fb3/69aa9397335dcda630d55866_mask-tradex.webp');
}

/* Card 6 */
.carousel-3d-item:nth-child(6) {
  --card-mask: url('https://cdn.prod.website-files.com/65c83fbb9f2750d119b43fb3/69ad59374d256969a80c613d_mask-gaellan.webp');
}

/* Card 7 */
.carousel-3d-item:nth-child(7) {
  --card-mask: url('https://cdn.prod.website-files.com/65c83fbb9f2750d119b43fb3/69ad593730be062cc16acd28_mask-oilngas.webp');
}

/* Card 8 */
.carousel-3d-item:nth-child(8) {
  --card-mask: url('https://cdn.prod.website-files.com/65c83fbb9f2750d119b43fb3/69ad59378cd49bf2d2f07d8e_mask-mysepanim.webp');
}