/* Background Image */
.hero-section,
#contact {
  background-image: url('/images/backgroundnew.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  
  isolation: isolate; /* own stacking context */
}

/* Dark overlay that sits OVER the bg image but UNDER the content */
.hero-section::before,
#contact::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0; /* JS controls this — starts at 1 via JS on load */
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

/* Canvas Flashlight — position:absolute, scoped to each section */
.flashlight-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  display: block;
}

/* Hero content and nav sit above canvas */
#hero-content,
#hero-content *,
.menunav,
.footer-content {
  position: relative;
  z-index: 10;
}

@media (max-width: 767px) {
  .hero-section,
  #contact {
      /* disable on mobile */
    /*background-image: none;*/
  }
}


 .loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  
  opacity: 0;
  transition: opacity 500ms ease;
  pointer-events: none;
}

.color-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background-color: #FFFFFF;
  opacity: 0;
  transition: opacity 650ms ease;
  pointer-events: none;
  mix-blend-mode: multiply;   /* makes it blend nicely with blur */
}

.color-overlay.active {
  opacity: 1;
}

/* Stronger blur during transition */
.transitioning {
  transition: filter 550ms cubic-bezier(0.4, 0, 0.2, 1);
}

.loading-heavy {
  filter: blur(6px) brightness(1) !important;
}
  
  
  @media (min-width: 1025px) and (min-height: 746px) {
}
    #case-studies .space-y-16 {
        position: relative;}

  .case-card.numio,
  .case-card.bju,
  .case-card.shape5 {
    position: sticky;
    top: 80px;
    transform-origin: top center;}
  
    .case-card.numio  { top: 80px; }
    .case-card.bju    { top: 100px; }
    .case-card.shape5 { top: 120px; } 
    
    .case-card.numio,
    .case-card.bju,
    .case-card.shape5 {
      transform-origin: top center;
      will-change: transform, filter;
    }
    
    /* Clip overflow so cards behind don't bleed through bottom */
    #case-studies .space-y-16 {
      isolation: isolate;
    }   



 
/* Overlay fade */
#welcome-overlay {
  transition: opacity 0.65s ease;
  opacity: 0;
}
#welcome-overlay.wo-visible {
  opacity: 1;
}
 
/* Card animate in */
#welcome-card {
  transition: transform 0.65s cubic-bezier(0.34, 1.25, 0.64, 1), opacity 0.55s ease;
}
#welcome-overlay.wo-visible #welcome-card {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}
 
/* The flying emoji clone — positioned fixed, moves via JS */
#welcome-emoji-clone {
  position: fixed;
  pointer-events: none;
  z-index: 10003;
  transform-origin: center center;
  line-height: 1;
  transition: none; /* JS controls this */
  user-select: none;
}
 
/* Wave animation (used on the clone while overlay is open) */
.wo-wave-inner {
  display: inline-block;
  transform-origin: bottom center;
}

@keyframes wo-wave {
  0%   { transform: rotate(0deg);   }
  15%  { transform: rotate(20deg);  }
  30%  { transform: rotate(-10deg); }
  45%  { transform: rotate(16deg);  }
  60%  { transform: rotate(-6deg);  }
  75%  { transform: rotate(10deg);  }
  100% { transform: rotate(0deg);   }
}
 
 
 
 
/* Overlay text fade-in stagger */
#welcome-card > * {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
#welcome-overlay.wo-visible #welcome-card > * {
  opacity: 1;
  transform: translateY(0);
}
#welcome-overlay.wo-visible #welcome-card > *:nth-child(2) { transition-delay: 0.15s; }
#welcome-overlay.wo-visible #welcome-card > *:nth-child(3) { transition-delay: 0.25s; }
#welcome-overlay.wo-visible #welcome-card > *:nth-child(4) { transition-delay: 0.35s; }
#welcome-overlay.wo-visible #welcome-card > *:nth-child(5) { transition-delay: 0.45s; }
 
 
 


/* CurveCraft modal open state — same animation as #project-modal.open */
#curvegame-modal .modal.cg-open {
  transform: scale(1) !important;
  opacity: 1 !important;
}

/* Prevent body scroll when game modal is open */
body.curvegame-open {
  overflow: hidden;
}

/* iframe on mobile: make it taller so the game is playable */
@media (max-width: 767px) {
  #curvegame-iframe {
    min-height: 70vh !important;
  }
}

/* Ensure the iframe pane fills height on desktop */
@media (min-width: 768px) {
  #curvegame-modal .modal > div:first-child {
    min-height: 0;
  }
}

#curvegame-modal {

  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(26px);

}

/* KEEP only these two, delete everything else in the celebration overlay CSS */
#curve-discovery-overlay.cdov-visible {
  opacity: 1;
}

.cdov-card {
  pointer-events: none;
  user-select: none;
  transition: transform 0.55s cubic-bezier(0.34, 1.4, 0.64, 1), opacity 0.45s ease;
}

#curve-discovery-overlay.cdov-visible .cdov-card {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.cdov-emoji {
  animation: cdov-pop 0.6s cubic-bezier(0.34, 1.6, 0.64, 1) 0.3s both;
}

@keyframes cdov-pop {
  0%   { transform: scale(0.4) rotate(-12deg); opacity: 0; }
  100% { transform: scale(1)   rotate(0deg);   opacity: 1; }
}

@keyframes swipe-lr {
  0%   { transform: translateX(0);    }
  30%  { transform: translateX(18px); }
  60%  { transform: translateX(-18px);}
  100% { transform: translateX(0);    }
}