/* ═══════════════════════════════════════════════════════
   DESIGN UPGRADE v2 — design-taste-frontend
   DESIGN_VARIANCE:8 | MOTION:6 | DENSITY:4
   Shared across SEGINTEC site pages
═══════════════════════════════════════════════════════ */

/* Stagger reveal delays */
.reveal[data-delay="1"]{transition-delay:60ms}
.reveal[data-delay="2"]{transition-delay:120ms}
.reveal[data-delay="3"]{transition-delay:180ms}
.reveal[data-delay="4"]{transition-delay:240ms}
.reveal[data-delay="5"]{transition-delay:300ms}

/* Custom scrollbar */
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(28,46,110,.25);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:rgba(28,46,110,.45)}

/* ── NAV LINK — animated underline slide ── */
.nav-menu a{position:relative}
.nav-menu a::after{
  content:'';position:absolute;bottom:3px;left:.9rem;right:.9rem;
  height:1.5px;background:var(--green);
  transform:scaleX(0);transform-origin:left;
  transition:transform 0.22s cubic-bezier(0.16,1,0.3,1)
}@media (hover:hover) and (pointer:fine){.nav-menu a:hover::after,.nav-menu a.active::after{transform:scaleX(1)}}

/* ── HERO CHIP float ── */
@keyframes chipFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.h-chip{animation:chipFloat 3.2s ease-in-out infinite}

/* ── HERO TRUST BADGES — staggered fade-in ── */
@keyframes badgeIn{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
.hero-trust .h-badge{opacity:0;animation:badgeIn .5s cubic-bezier(0.16,1,0.3,1) forwards}
.hero-trust .h-badge:nth-child(1){animation-delay:.2s}
.hero-trust .h-badge:nth-child(2){animation-delay:.32s}
.hero-trust .h-badge:nth-child(3){animation-delay:.44s}
.hero-trust .h-badge:nth-child(4){animation-delay:.56s}

/* ── HERO RIGHT CARDS — spotlight + stagger + liquid glass ── */
@keyframes hcIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
.hc{
  position:relative;overflow:hidden;
  animation:hcIn .5s cubic-bezier(0.16,1,0.3,1) both;
  border:1px solid rgba(255,255,255,.12) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)
}
.hc:nth-child(1){animation-delay:.15s}
.hc:nth-child(2){animation-delay:.27s}
.hc:nth-child(3){animation-delay:.39s}
.hc:nth-child(4){animation-delay:.51s}
.hc::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(280px circle at var(--mouse-x,120px) var(--mouse-y,60px),rgba(63,185,80,.15),transparent 70%);
  opacity:0;transition:opacity .3s;pointer-events:none;border-radius:inherit;z-index:0
}
.hc:hover::before{opacity:1}
.hc>*{position:relative;z-index:1}

/* ── HEO-ICO SVG override ── */
.hc-ico{
  display:flex !important;align-items:center !important;justify-content:center !important;
  width:36px !important;height:36px !important;flex-shrink:0 !important;
  border-radius:8px !important;background:rgba(255,255,255,.1) !important;
  font-size:0 !important
}
.hc-ico svg{width:18px;height:18px;stroke:rgba(255,255,255,.9);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ── MOBILE MENU SVG icons ── */
#mobile-menu a{display:flex !important;align-items:center !important;gap:.75rem !important}
#mobile-menu a svg{width:18px !important;height:18px !important;stroke:var(--navy) !important;fill:none !important;stroke-width:1.8 !important;stroke-linecap:round !important;stroke-linejoin:round !important;flex-shrink:0 !important}
#mobile-menu a.mob-email svg{stroke:var(--green) !important}

/* ── DIRECTIONAL HOVER CTA BUTTONS ── */
.btn-hero,.nav-btn{position:relative;overflow:hidden;isolation:isolate}
.btn-hero::after,.nav-btn::after{
  content:'';position:absolute;inset:0;
  background:rgba(255,255,255,.12);
  transform:translateX(-105%);
  transition:transform 0.35s cubic-bezier(0.16,1,0.3,1);
  z-index:0;pointer-events:none
}@media (hover:hover) and (pointer:fine){.btn-hero:hover::after,.nav-btn:hover::after{transform:translateX(0)}}
.btn-hero>*,.nav-btn>*,.btn-hero svg,.nav-btn svg{position:relative;z-index:1}
/* Tactile feedback */
.btn-hero:active{transform:scale(.98) translateY(1px)}
.nav-btn:active{transform:scale(.98)}
.fab:active{transform:scale(.97)}

/* ── HERO MESH pan + GLOW pulse ── */
@keyframes meshPan{from{background-position:0 0,0 0}to{background-position:56px 56px,56px 56px}}
.hero-mesh{animation:meshPan 18s linear infinite;opacity:.7}
@keyframes glowPulse{0%,100%{opacity:.85}50%{opacity:1}}
.hero-glow{animation:glowPulse 5s ease-in-out infinite}

/* ── TOP ALERT shimmer ── */
@keyframes alertShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.top-alert{
  background-image:linear-gradient(90deg,#0D1635 0%,#0f1e45 50%,#0D1635 100%);
  background-size:200% 100%;animation:alertShift 8s ease infinite
}

/* ── INPUT / SELECT FOCUS ring ── */
input:focus,select:focus,textarea:focus{
  border-color:var(--navy) !important;
  box-shadow:0 0 0 3px rgba(28,46,110,.12) !important;
  outline:none !important;transition:border-color .2s,box-shadow .2s !important
}

/* ── CARDS — lift on hover ── */
.mirror-card,.step-card,.vs-item,.cert-card,.serv-card{
  transition:transform .25s cubic-bezier(0.16,1,0.3,1),box-shadow .25s
}@media (hover:hover) and (pointer:fine){.mirror-card:hover,.step-card:hover,.cert-card:hover,.serv-card:hover{
  transform:translateY(-3px);box-shadow:0 12px 32px rgba(28,46,110,.1) !important
}}

/* ── RIPPLE EFFECT ── */
@keyframes rippleOut{from{transform:scale(.25);opacity:.4}to{transform:scale(3);opacity:0}}
.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.35);width:60px;height:60px;margin:-30px 0 0 -30px;animation:rippleOut .6s ease-out forwards;pointer-events:none;z-index:10}

/* ── SCROLL-AWARE reveal upgrade ── */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .45s cubic-bezier(.23,1,.32,1),transform .45s cubic-bezier(.23,1,.32,1)}
.reveal.active{opacity:1;transform:none}