/* ============================================================
   V-FIX — ANIMATIONS & INTERACTIVE STATES
   ============================================================ */

/* ── SCROLL-REVEAL STAGGER ─────────────────────────────────── */
.reveal-delay-1 { transition-delay:.1s; }
.reveal-delay-2 { transition-delay:.2s; }
.reveal-delay-3 { transition-delay:.3s; }
.reveal-delay-4 { transition-delay:.4s; }
.reveal-delay-5 { transition-delay:.5s; }

/* ── FLOATING / PULSE GLOW ─────────────────────────────────── */
@keyframes floatY {
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-12px); }
}
.float-anim { animation:floatY 4s ease-in-out infinite; }

@keyframes glowPulse {
  0%,100%{ box-shadow:0 0 0 0 rgba(229,57,53,0); }
  50%    { box-shadow:0 0 32px 8px rgba(229,57,53,.25); }
}
.glow-pulse { animation:glowPulse 3s ease-in-out infinite; }

/* ── HERO TYPEWRITER ───────────────────────────────────────── */
.typewriter { border-right:2px solid var(--accent-red); white-space:nowrap; overflow:hidden; }

/* ── COUNTER ───────────────────────────────────────────────── */
.counter { display:inline-block; }

/* ── STATS TICKER ──────────────────────────────────────────── */
.brands-track {
  display:flex; gap:0; overflow:hidden;
  padding:24px 0; border-top:1px solid var(--border-subtle);
  border-bottom:1px solid var(--border-subtle);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.brands-inner {
  display:flex; width:max-content;
  animation:brandScroll 60s linear infinite;
}
.brands-inner:hover {
  animation-play-state:paused;
}
.brands-group {
  display:flex; gap:56px; padding-right:56px;
  white-space:nowrap; flex-shrink:0;
}
@keyframes brandScroll {
  0%  { transform:translateX(0); }
  100%{ transform:translateX(-50%); }
}
.brand-item {
  font-family:var(--font-display); font-size:18px; font-weight:500;
  color:var(--text-subtle); opacity:.5; user-select:none;
  transition:opacity .3s;
}
.brand-item:hover { opacity:1; color:var(--text-primary); }

/* ── APPLIANCE SVG STYLES ──────────────────────────────────── */
.eye-pupil { transition:cx .05s linear, cy .05s linear; }

.appliance-eye {
  transition:ry .3s ease;
}
.appliance-eye.closed { ry:1.5 !important; }
.appliance-eye.peeking { ry:5 !important; }

.blush {
  opacity:0; transition:opacity .4s;
}
.appliance-wrap:hover .blush { opacity:1; }

/* shy mouth */
.mouth-normal { display:block; }
.mouth-shy    { display:none;  }
.appliance-wrap:hover .mouth-normal { display:none; }
.appliance-wrap:hover .mouth-shy    { display:block; }

/* ── TILT CARD (team) ──────────────────────────────────────── */
.tilt-card {
  transform-style:preserve-3d;
  transition:transform .1s ease, border-color .25s, box-shadow .25s;
}

/* ── PROGRESS BARS ─────────────────────────────────────────── */
.progress-bar-bg {
  height:4px; background:rgba(255,255,255,.08);
  border-radius:2px; overflow:hidden;
}
.progress-bar-fill {
  height:100%; background:linear-gradient(90deg,var(--accent-red),var(--accent-red-light));
  border-radius:2px; width:0%; transition:width 1.2s cubic-bezier(.4,0,.2,1);
}

/* ── SCROLL TO TOP ─────────────────────────────────────────── */
#scroll-top {
  position:fixed; bottom:28px; right:28px; z-index:300;
  width:44px; height:44px; border-radius:50%;
  background:var(--accent-red);
  color:#fff; font-size:20px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  border:none;
  box-shadow:0 6px 20px rgba(229,57,53,.4);
  opacity:0; pointer-events:none;
  transition:opacity .3s, transform .3s;
}
#scroll-top.visible { opacity:1; pointer-events:auto; }
#scroll-top:hover { transform:translateY(-3px); }

/* ── HERO APPLIANCE PANEL ──────────────────────────────────── */
.hero-appliance-panel {
  background:rgba(0,0,0,.45);
  border:1px solid var(--border-main);
  border-radius:24px; padding:28px 24px;
  backdrop-filter:blur(12px);
}
.hero-appliance-title {
  font-family:var(--font-mono); font-size:10px; color:var(--accent-red);
  text-transform:uppercase; letter-spacing:1.5px; margin-bottom:20px;
  text-align:center;
}

/* ── SECTION DIVIDER ───────────────────────────────────────── */
.section-divider {
  height:1px; background:linear-gradient(90deg,transparent,var(--border-main),transparent);
  margin:0 var(--pad);
}

/* ── MOBILE RESPONSIVE FIXES ───────────────────────────────── */
@media(max-width:860px){
  #about, #features, #how, #architecture,
  #demo, #tech, #gallery, #team, #contact { padding:72px var(--pad); }
  
  .arch-sub-row{ grid-template-columns:1fr; }
  
  .footer-top{ flex-direction:column; align-items:flex-start; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
  .footer-project{ text-align:left; }
}

@media(max-width:600px){
  .tab-switch{ max-width:100%; }
  .qr-row{ grid-template-columns:1fr; align-items:center; }
  .qr-card img{ width:150px; height:150px; }
}

/* ── ACCESSIBILITY ─────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  *, *::before, *::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}