/* ═══════════════════════════════════════════════
   LuminArch UI Upgrade — Premium Polish
   Scroll reveals, custom cursor, parallax,
   hero text animation, micro-interactions
   ═══════════════════════════════════════════════ */

/* ── 1. CUSTOM CURSOR — DISABLED (using default) ── */

/* ── 2. SCROLL REVEAL ENHANCEMENTS ── */
/* Strengthen the existing .reveal system with smoother transitions */
.reveal{
  opacity:0 !important;
  transform:translateY(32px) !important;
  transition:opacity .8s cubic-bezier(.25,.46,.45,.94),
             transform .8s cubic-bezier(.25,.46,.45,.94) !important;
}
.reveal.visible{
  opacity:1 !important;
  transform:translateY(0) !important;
}
/* Staggered children */
.stagger-children .reveal:nth-child(1){transition-delay:0s !important}
.stagger-children .reveal:nth-child(2){transition-delay:.08s !important}
.stagger-children .reveal:nth-child(3){transition-delay:.14s !important}
.stagger-children .reveal:nth-child(4){transition-delay:.2s !important}
.stagger-children .reveal:nth-child(5){transition-delay:.26s !important}
.stagger-children .reveal:nth-child(6){transition-delay:.32s !important}
.stagger-children .reveal:nth-child(7){transition-delay:.38s !important}
.stagger-children .reveal:nth-child(8){transition-delay:.44s !important}

/* ── 3. HERO TEXT STAGGER ── */
.hero-word{
  display:inline-block;
  opacity:0;
  transform:translateY(20px);
  transition:opacity .5s cubic-bezier(.25,.46,.45,.94),
             transform .5s cubic-bezier(.25,.46,.45,.94);
}
.hero-word.visible{opacity:1;transform:translateY(0)}

/* ── 4. PARALLAX HERO ── */
.logo-intro .hero__video-wrap{
  will-change:transform;
  transition:none;
}

/* ── 5. MICRO-INTERACTIONS — Enhanced hover states ── */

/* Service rows — lift + glow on hover */
.service-row{
  transition:transform .3s cubic-bezier(.4,0,.2,1),
             background .3s ease,
             box-shadow .3s ease !important;
}
.service-row:hover{
  transform:translateX(8px) !important;
  background:rgba(212,175,55,.03) !important;
}
.service-row:hover .service-row__arrow{
  transform:translateX(6px);
  color:var(--accent);
}
.service-row__arrow{
  transition:transform .3s ease,color .3s ease;
}

/* Value cards on about page */
.value-card{
  transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease !important;
}
.value-card:hover{
  transform:translateY(-4px) !important;
  border-color:rgba(212,175,55,.15) !important;
  box-shadow:0 12px 40px rgba(0,0,0,.3) !important;
}

/* Process steps */
.process-step{
  transition:transform .3s ease !important;
}
.process-step:hover{
  transform:translateY(-3px) !important;
}
.process-step:hover .process-step__num{
  color:var(--accent) !important;
  text-shadow:0 0 30px rgba(212,175,55,.3);
}

/* Button enhanced hovers */
.btn{
  transition:transform .25s cubic-bezier(.4,0,.2,1),
             box-shadow .25s ease,
             background .25s ease,
             border-color .25s ease,
             color .25s ease !important;
}
.btn:hover{
  transform:translateY(-2px) !important;
  box-shadow:0 8px 24px rgba(0,0,0,.3) !important;
}
.btn--filled:hover{
  box-shadow:0 8px 30px rgba(212,175,55,.25) !important;
}

/* Nav — keep original behavior, no overrides */

/* Footer columns — vertical stacking with breathing room */
.footer__col{
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
}
.footer__col a{
  transition:color .2s ease,transform .2s ease !important;
  display:block !important;
  line-height:1.6 !important;
}
.footer__col a:hover{
  color:var(--accent) !important;
  transform:translateX(4px);
}

/* ── 6. SECTION TRANSITIONS — Subtle divider glow ── */
.svg-divider{
  transition:opacity .6s ease;
}
.svg-divider .svgd{
  transition:stroke-dashoffset 1.5s ease;
}

/* ── 7. CARD GLASS DEPTH — More pronounced glassmorphism ── */
.svc-card,.value-card,.included-item{
  background:rgba(16,16,26,.45) !important;
  backdrop-filter:blur(8px) !important;
  -webkit-backdrop-filter:blur(8px) !important;
  border:1px solid rgba(255,255,255,.06) !important;
}

/* ── 8. MOBILE TOUCH REFINEMENTS ── */
@media(max-width:768px){
  /* Tighter mobile nav links */
  .mobile-overlay__link{
    font-size:clamp(1.6rem,5vw,2.4rem) !important;
    padding:10px 0 !important;
  }
  /* Filter scroll hint gradient */
  .pgrid__filters{
    mask-image:linear-gradient(to right,black 85%,transparent 100%);
    -webkit-mask-image:linear-gradient(to right,black 85%,transparent 100%);
  }
  /* Scroll snap on filters */
  .pgrid__filters{scroll-snap-type:x mandatory}
  .pgrid__filter{scroll-snap-align:start}
}

/* ── 9. FOCUS STATES — Accessibility ── */
:focus-visible{
  outline:2px solid var(--accent,#d4af37) !important;
  outline-offset:3px !important;
}
input:focus,textarea:focus,select:focus{
  border-color:var(--accent,#d4af37) !important;
  box-shadow:0 0 0 3px rgba(212,175,55,.15) !important;
}

/* ── 10. SMOOTH PAGE-LEVEL SCROLL ── */
html{scroll-behavior:smooth}