:root {
  --accent-1: #9e53ec;
  --accent-2: #6444f6;
  --accent-glow: rgba(158, 83, 236, 0.45);
  --bg-scroll: #070810;
  --text-scroll: #efeaff;
  --muted-scroll: #d6cbff;
  --card-bg: rgba(10, 10, 22, 0.88);
  --border-grad: linear-gradient(to right, #9e53ec, #6444f6);
}

.detercam-scroll-wrapper {
  background: var(--bg-scroll);
  color: var(--text-scroll);
  font-family: 'Manrope', sans-serif;
  position: relative;
  overflow-x: clip; 
  clip-path: inset(0 0 0 0);
  -webkit-font-smoothing: antialiased;
}

.detercam-scroll-wrapper *, 
.detercam-scroll-wrapper *::before, 
.detercam-scroll-wrapper *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: var(--border-grad);
  width: 0%;
  z-index: 9999;
  box-shadow: 0 0 14px rgba(100, 68, 246, 0.55);
}

.driver { height: 700vh; position: relative; }

.stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: radial-gradient(ellipse 80% 70% at 50% 55%, rgba(100, 68, 246, 0.16) 0%, rgba(9, 10, 22, 0.96) 48%, var(--bg-scroll) 100%);
}

.stage::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(158, 83, 236, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(100, 68, 246, 0.045) 1px, transparent 1px);
  background-size: 52px 52px;
  pointer-events: none;
}

.layout {
  position: relative;
  z-index: 1;
  width: min(1220px, calc(100vw - 40px));
  display: grid;
  grid-template-columns: minmax(280px, 410px) minmax(300px, 520px);
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 6vw, 92px);
}

.copy-panel {
  position: relative;
  min-height: 245px;
  width: 100%;
  z-index: 100; 
  /* Background properties removed from here to attach to moving elements */
}

.feature-copy, .feature-kicker, .feature-copy h2, .feature-copy p {
  text-rendering: optimizeLegibility;
}

.feature-copy {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.22s linear;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  pointer-events: none;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  padding: 40px; 
}

/* 🖥️ DESKTOP ONLY: Turn feature copy into floating lock-on boxes */
@media (min-width: 861px) {
  .feature-copy {
    background: #000000;
    border-radius: 20px;
    bottom: auto; /* Lets the box wrap its content height dynamically */
    will-change: transform;
  }
}

.feature-copy.show { opacity: 1; }

.intro-copy .feature-kicker, .intro-copy h2, .intro-copy p {
  transition: opacity 0.22s linear;
}

.feature-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 0.68rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: #ffffff;
}

.feature-kicker::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
  background: radial-gradient(circle at 30% 30%, #ffffff 0%, #c485ff 35%, #744cf6 100%);
  box-shadow: 0 0 10px rgba(158, 83, 236, 0.7), 0 0 18px rgba(100, 68, 246, 0.35);
}

.feature-copy h2 {
  font-family: 'Manrope', sans-serif; font-weight: 800;
  font-size: clamp(1.55rem, 2.7vw, 2.35rem); line-height: 1.08;
  color: #ffffff; letter-spacing: 0.02em; text-wrap: balance;
}

.feature-copy p {
  max-width: 32ch; font-size: clamp(0.98rem, 1.35vw, 1.14rem);
  line-height: 1.5; color: var(--muted-scroll); overflow-wrap: anywhere;
}

.stack {
  position: relative; width: clamp(260px, 36vw, 450px); aspect-ratio: 1; flex-shrink: 0;
  --pcb-ann-box-x: 0%; --pcb-ann-box-y: 0%; --pcb-ann-box-w: 100%; --pcb-ann-box-h: 100%;
  --top-ann-box-x: 0%; --top-ann-box-y: 0%; --top-ann-box-w: 100%; --top-ann-box-h: 100%;
  --flash-box-x: 57%; --flash-box-y: 21%; --flash-box-w: 21%; --flash-box-h: 16%;
}

.layer-group { 
  position: absolute; 
  inset: 0; 
  pointer-events: none; 
  will-change: transform;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  perspective: 1000;
}

.layer { 
  position: absolute; 
  inset: 0; 
  width: 100%; 
  height: 100%; 
  object-fit: contain; 
  user-select: none; 
  pointer-events: none; 
}

.pcb-annotations, .top-annotations, .bot-annotations, .sound-wrap, .flash-wrap { position: absolute; pointer-events: none; }
.pcb-annotations { left: var(--pcb-ann-box-x); top: var(--pcb-ann-box-y); width: var(--pcb-ann-box-w); height: var(--pcb-ann-box-h); }
.top-annotations, .bot-annotations { left: var(--top-ann-box-x); top: var(--top-ann-box-y); width: var(--top-ann-box-w); height: var(--top-ann-box-h); }
.flash-wrap { left: var(--flash-box-x); top: var(--flash-box-y); width: var(--flash-box-w); height: var(--flash-box-h); }
.sound-wrap { inset: 0; }

.flash-orb {
  position: absolute; left: var(--fx); top: var(--fy); width: var(--fs); aspect-ratio: 1; transform: translate(-50%, -50%);
  background-image: url("https://innovfactory.com/wp-content/uploads/2026/03/light-effect-white-light-flash_7505652.png");
  background-repeat: no-repeat; background-position: center; background-size: contain;
  filter: drop-shadow(0 0 18px rgba(255,255,255,0.98)) drop-shadow(0 0 40px rgba(255,255,255,0.78));
  mix-blend-mode: screen; opacity: 0;
}

.flash-orb::before {
  content: ""; position: absolute; inset: 8%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.68) 24%, rgba(255,255,255,0.22) 52%, rgba(255,255,255,0) 78%); filter: blur(4px);
}

@keyframes strobe { 0%, 100% { transform: translate(-50%, -50%) scale(1.05); opacity: 1; } 50% { transform: translate(-50%, -50%) scale(0.4); opacity: 0; } }
.flash-wrap.lit .flash-orb { animation: strobe 0.5s ease-in-out infinite; opacity: 1; }

.f1 { --fx: 14%; --fy: 10%; --fs: 35%; animation-delay: 0.4s !important; }
.f2 { --fx: 36%; --fy: -6%; --fs: 35%; animation-delay: 0.4s !important; }
.f3 { --fx: 90%; --fy: 70%; --fs: 35%; animation-delay: 0.4s !important; }
.f4 { --fx: 118%; --fy: 48%; --fs: 35%; animation-delay:0.4s !important; }

.sound-wrap { opacity: 0; transition: opacity 0.32s ease; }
.sound-wrap.active { opacity: 1; }

.wave {
  position: absolute; border-radius: 50%; border: 2px solid rgba(158, 83, 236, 0.95);
  box-shadow: 0 0 8px rgba(158, 83, 236, 0.9), 0 0 18px rgba(100, 68, 246, 0.45);
  left: 34%; top: 30%; width: 62px; height: 62px; transform: translate(-50%, -50%) scale(0); opacity: 0;
}

@keyframes ripple { 0% { transform: translate(-50%, -50%) scale(0.1); opacity: 0.9; } 100% { transform: translate(-50%, -50%) scale(3.4); opacity: 0; } }
.w1 { animation: ripple 1.9s ease-out infinite; animation-delay: 0.00s; }
.w2 { animation: ripple 1.9s ease-out infinite; animation-delay: 0.48s; }
.w3 { animation: ripple 1.9s ease-out infinite; animation-delay: 0.96s; }
.w4 { animation: ripple 1.9s ease-out infinite; animation-delay: 1.44s; }

.ann {
  position: absolute; inset: 0; opacity: 0; transition: opacity 0.35s ease;
  transform: none; z-index: 50; 
}

@keyframes arrowPulse { 0%, 100% { opacity: 0.82; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } }
.ann.show { opacity: 1; }

/* 🖥️ DESKTOP ARROW DEFAULTS */
.ann .dot {
  position: absolute; left: var(--dot-x); top: var(--dot-y);
  --arrow-w: 400px; --arrow-h: 50px; --arrow-scale: 1; --arrow-rot: 45deg;
  width: var(--arrow-w); height: var(--arrow-h);
  transform: translate(-50%, -50%) rotate(var(--arrow-rot)) scale(var(--arrow-scale)); transform-origin: center;
  background-image: url("https://innovfactory.com/wp-content/uploads/2026/03/extra-long-product-arrow.png");
  background-repeat: no-repeat; background-position: center; background-size: contain;
  filter: drop-shadow(0 0 8px rgba(158, 83, 236, 0.95)) drop-shadow(0 0 18px rgba(100, 68, 246, 0.7));
}
.ann.show .dot { animation: arrowPulse 2s ease-in-out infinite; }

/* 🖥️ BASE DESKTOP POSITIONS (> 1500px) */
#a1   { --dot-x: 10%;  --dot-y: 46%; --arrow-rot: 35deg; }
#a2   { --dot-x: -8%;  --dot-y: 28%; --arrow-rot: -20deg; }
#a2-2 { --dot-x: 20%;  --dot-y: 16%; --arrow-rot: 200deg; }
#a3   { --dot-x: 4%;   --dot-y: 30%; --arrow-rot: 70deg; }
#a4   { --dot-x: -10%; --dot-y: 46%; --arrow-rot: 180deg; }
#a5   { --dot-x: -10%; --dot-y: 28%; --arrow-rot: 135deg; }
#a6   { --dot-x: -10%; --dot-y: 60%; --arrow-rot: -90deg; }

.hint {
  position: absolute; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  bottom: clamp(14px, 3.5vh, 26px); left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px; transition: opacity 0.4s; z-index: 2;
}
.hint.gone { opacity: 0; pointer-events: none; }
.hint span { font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 0.8rem; letter-spacing: 0.12em; color: rgba(239, 234, 255, 0.85); text-transform: uppercase; text-align: center; }
.chevron { width: 18px; height: 18px; border-right: 2.5px solid rgba(158, 83, 236, 0.8); border-bottom: 2.5px solid rgba(100, 68, 246, 0.8); transform: rotate(45deg); animation: bob 1.4s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: rotate(45deg) translateY(0); } 50% { transform: rotate(45deg) translateY(6px); } }

/* 💻 LARGE LAPTOPS */
@media (min-width: 1500px) {
  .layout { width: min(1320px, calc(100vw - 72px)); grid-template-columns: minmax(320px, 460px) minmax(360px, 560px); gap: clamp(40px, 6vw, 110px); }
  .stack { width: clamp(320px, 32vw, 500px); }
}

/* 💻 STANDARD LAPTOPS */
@media (min-width: 1100px) and (max-width: 1499px) {
  .layout { width: min(1180px, calc(100vw - 48px)); grid-template-columns: minmax(280px, 400px) minmax(320px, 480px); gap: clamp(28px, 4.5vw, 80px); }
  .stack { width: clamp(280px, 34vw, 440px); }
  .ann .dot { --arrow-w: 280px; --arrow-h: 36px; }
  
  #a1   { --dot-x: 18%; --dot-y: 46%; } 
  #a2   { --dot-x: 2%; --dot-y: 28%; } 
  #a2-2 { --dot-x: 25%; --dot-y: 20%; }
  #a3   { --dot-x: 12%; --dot-y: 30%; } 
  #a4   { --dot-x: 0%;  --dot-y: 46%; } 
  #a5   { --dot-x: 0%;  --dot-y: 28%; }
  #a6   { --dot-x: 20%; --dot-y: 50%; }
}

/* 💻 SMALL LAPTOPS / IPADS */
@media (min-width: 861px) and (max-width: 1099px) {
  .layout { width: min(980px, calc(100vw - 36px)); grid-template-columns: minmax(260px, 360px) minmax(280px, 400px); gap: clamp(22px, 3.5vw, 48px); }
  .stack { width: clamp(250px, 38vw, 360px); }
  .copy-panel { min-height: 220px; }
  .feature-copy h2 { font-size: clamp(1.3rem, 2.35vw, 1.9rem); }
  .feature-copy p { font-size: clamp(0.92rem, 1.2vw, 1.02rem); }
  .ann .dot { --arrow-w: 210px; --arrow-h: 28px; }
  
  #a1   { --dot-x: 24%; --dot-y: 46%; } 
  #a2   { --dot-x: 2%; --dot-y: 28%; } 
  #a2-2 { --dot-x: 25%; --dot-y: 20%; }
  #a3   { --dot-x: 18%; --dot-y: 30%; } 
  #a4   { --dot-x: 8%;  --dot-y: 46%; } 
  #a5   { --dot-x: 8%;  --dot-y: 28%; }
  #a6   { --dot-x: 20%; --dot-y: 50%; }
}

/* 📱 MOBILE PHONES (< 860px) */
@media (max-width: 860px) {
  .layout { width: min(100vw - 24px, 430px); grid-template-columns: 1fr; gap: 16px; }
  .stack { order: 1; width: min(78vw, 300px); max-width: 300px; margin-inline: auto; }
  .copy-panel { order: 2; min-height: 150px; width: min(92vw, 360px); margin-inline: auto; background: transparent; border-radius: 0; z-index: 999; }
  .feature-copy { align-items: center; text-align: center; padding: 0 4px; gap: 10px; }
  .feature-kicker { font-size: 0.52rem; letter-spacing: 0.16em; justify-content: center; }
  .feature-copy h2 { font-size: clamp(1rem, 6vw, 1.42rem); line-height: 1.14; }
  .feature-copy p { max-width: 30ch; font-size: clamp(0.82rem, 3.45vw, 0.96rem); line-height: 1.45; }
  .pcb-annotations { left: var(--m-pcb-ann-box-x, 0%); top: var(--m-pcb-ann-box-y, 0%); width: var(--m-pcb-ann-box-w, 100%); height: var(--m-pcb-ann-box-h, 100%); }
  .top-annotations, .bot-annotations { left: var(--m-top-ann-box-x, 0%); top: var(--m-top-ann-box-y, 0%); width: var(--m-top-ann-box-w, 100%); height: var(--m-top-ann-box-h, 100%); }
  
  .flash-wrap { left: 57%; top: 21%; width: 21%; height: 16%; }
  .f1 { left: 9%;  top: 8%;  width: 35%; }
  .f2 { left: 30%; top: -4%; width: 35%; }
  .f3 { left: 90%; top: 70%; width: 35%; }
  .f4 { left: 118%; top: 48%; width: 35%; }
  .wave { left: 34%; top: 31%; width: 54px; height: 54px; }

  /* OVERRIDE ARROW MATH FOR MOBILE */
  .ann .dot {
    left: var(--m-dot-x); 
    top: auto; 
    bottom: var(--m-dot-bottom); 
    transform: translateX(-50%) rotate(var(--arrow-rot)) scale(1);
    width: 64px; 
    height: 64px;
    background-image: url("https://innovfactory.com/wp-content/uploads/2026/03/product-arrow.png");
  }

  /* ⬇️ EDIT MOBILE ARROW POSITIONS HERE ⬇️ */
  #a1   { --m-dot-x: 32%; --m-dot-bottom: 80px;  --arrow-rot: 35deg; }
  #a2   { --m-dot-x: 20%; --m-dot-bottom: 140px; --arrow-rot: -20deg; }
  #a2-2 { --m-dot-x: 50%; --m-dot-bottom: 160px; --arrow-rot: 200deg; }
  #a3   { --m-dot-x: 32%; --m-dot-bottom: 134px; --arrow-rot: 70deg; }
  #a4   { --m-dot-x: 12%; --m-dot-bottom: 90px;  --arrow-rot: 180deg; }
  #a5   { --m-dot-x: 18%; --m-dot-bottom: 136px; --arrow-rot: 135deg; }
  #a6   { --m-dot-x: 30%; --m-dot-bottom: 70px;  --arrow-rot: -90deg; }
}

@media (max-width: 600px) {
  .driver { height: 700vh; }
  .stage { padding: max(10px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)) 12px; }
  .layout { gap: 14px; transform: translateY(clamp(6px, 2vh, 16px)); }
  .stack { width: min(78vw, 280px); }
  .copy-panel { min-height: 140px; width: min(92vw, 340px); }
}

/* 💻 SHORT DESKTOPS & TABLETS ONLY (Protects Mobile) */
@media (min-width: 861px) and (max-height: 850px) {
  .stack { 
    max-height: 55vh; 
    max-width: 55vh; 
  }
}

/* 🚫 HIDE ARROWS ON VERY SMALL SCREENS (< 320px) */
@media (max-width: 320px) {
  .ann { 
    display: none !important; 
  } 
}