/* ═══════════════════════════════════════════════════════
   scroll-fx.css — HYC Shop Scroll Effects v3.0
   DRAMATIC — visible, impactful, varied per section
   ═══════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────
   1. KEYFRAMES
   ───────────────────────────────────────────────────────── */
@keyframes sfx-slideLeft {
  from { opacity: 0; transform: translateX(-90px) skewX(4deg); }
  to   { opacity: 1; transform: translateX(0) skewX(0); }
}
@keyframes sfx-slideRight {
  from { opacity: 0; transform: translateX(90px) skewX(-4deg); }
  to   { opacity: 1; transform: translateX(0) skewX(0); }
}
@keyframes sfx-scaleIn {
  from { opacity: 0; transform: scale(0.55) translateY(30px); }
  60%  { transform: scale(1.06) translateY(-4px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes sfx-blurFade {
  from { opacity: 0; filter: blur(20px) saturate(0); transform: translateY(20px); }
  to   { opacity: 1; filter: blur(0) saturate(1); transform: translateY(0); }
}
@keyframes sfx-flipCard {
  from { opacity: 0; transform: perspective(700px) rotateY(35deg) translateX(50px); }
  to   { opacity: 1; transform: perspective(700px) rotateY(0) translateX(0); }
}
@keyframes sfx-zoomOut {
  from { opacity: 0; transform: scale(1.3); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes sfx-countPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18) translateY(-5px); }
  75%  { transform: scale(0.96); }
  100% { transform: scale(1); }
}
@keyframes sfx-orbFloat {
  0%,100% { transform: translate(0,0) scale(1) rotate(0deg); }
  33%     { transform: translate(var(--ox,-30px),var(--oy,20px)) scale(1.15) rotate(5deg); }
  66%     { transform: translate(calc(var(--ox,-30px)*-.6),calc(var(--oy,20px)*-.7)) scale(0.88) rotate(-3deg); }
}
@keyframes sfx-progressGlow {
  0%,100% { box-shadow: -4px 0 20px rgba(249,115,22,.7), -1px 0 8px rgba(124,58,237,.5); }
  50%     { box-shadow: -4px 0 28px rgba(249,115,22,.9), -1px 0 12px rgba(124,58,237,.7); }
}
@keyframes sfx-fabBounce {
  0%   { transform: scale(0) translateY(20px); }
  60%  { transform: scale(1.15) translateY(-5px); }
  80%  { transform: scale(0.93); }
  100% { transform: scale(1) translateY(0); }
}
@keyframes sfx-lineReveal {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes sfx-shimmerSlide {
  from { background-position: -200% center; }
  to   { background-position: 200% center; }
}
@keyframes sfx-sectionPulse {
  0%,100% { opacity: .5; }
  50%     { opacity: 1; }
}

/* ─────────────────────────────────────────────────────────
   2. ANIMATION VARIANTS (overrides theme.css base)
   ───────────────────────────────────────────────────────── */

.animate-on-scroll[data-animation="slideInLeft"] {
  opacity: 0 !important;
  transform: translateX(-90px) skewX(4deg) !important;
  transition: opacity .8s cubic-bezier(.22,1,.36,1),
              transform .8s cubic-bezier(.22,1,.36,1) !important;
}
.animate-on-scroll[data-animation="slideInLeft"].is-visible {
  opacity: 1 !important;
  transform: translateX(0) skewX(0) !important;
}

.animate-on-scroll[data-animation="slideInRight"] {
  opacity: 0 !important;
  transform: translateX(90px) skewX(-4deg) !important;
  transition: opacity .8s cubic-bezier(.22,1,.36,1),
              transform .8s cubic-bezier(.22,1,.36,1) !important;
}
.animate-on-scroll[data-animation="slideInRight"].is-visible {
  opacity: 1 !important;
  transform: translateX(0) skewX(0) !important;
}

.animate-on-scroll[data-animation="scaleIn"] {
  opacity: 0 !important;
  transform: scale(0.55) translateY(30px) !important;
  transition: opacity .65s cubic-bezier(.34,1.56,.64,1),
              transform .65s cubic-bezier(.34,1.56,.64,1) !important;
}
.animate-on-scroll[data-animation="scaleIn"].is-visible {
  opacity: 1 !important;
  transform: scale(1) translateY(0) !important;
}

.animate-on-scroll[data-animation="blurFade"] {
  opacity: 0 !important;
  filter: blur(18px) !important;
  transform: translateY(20px) !important;
  transition: opacity 1s ease, filter 1s ease, transform 1s ease !important;
}
.animate-on-scroll[data-animation="blurFade"].is-visible {
  opacity: 1 !important;
  filter: blur(0) !important;
  transform: translateY(0) !important;
}

.animate-on-scroll[data-animation="flipCard"] {
  opacity: 0 !important;
  transform: perspective(800px) rotateY(35deg) translateX(50px) !important;
  transition: opacity .8s ease, transform .8s cubic-bezier(.22,1,.36,1) !important;
}
.animate-on-scroll[data-animation="flipCard"].is-visible {
  opacity: 1 !important;
  transform: perspective(800px) rotateY(0) translateX(0) !important;
}

.animate-on-scroll[data-animation="zoomOut"] {
  opacity: 0 !important;
  transform: scale(1.3) !important;
  transition: opacity .75s ease, transform .75s ease !important;
}
.animate-on-scroll[data-animation="zoomOut"].is-visible {
  opacity: 1 !important;
  transform: scale(1) !important;
}

/* ─────────────────────────────────────────────────────────
   3. SCROLL PROGRESS BAR — thick neon right edge
   ───────────────────────────────────────────────────────── */
#sfx-scroll-bar {
  position: fixed;
  top: 0; right: 0;
  width: 5px;
  height: 100%;
  z-index: 9999;
  pointer-events: none;
  background: rgba(0,0,0,.08);
}
#sfx-scroll-fill {
  width: 100%;
  height: 0%;
  background: linear-gradient(
    to bottom,
    #f97316  0%,
    #7C3AED  50%,
    #FF6B35 100%
  );
  transition: height .08s linear;
  animation: sfx-progressGlow 2s ease-in-out infinite;
  border-radius: 0 0 3px 3px;
}

/* ─────────────────────────────────────────────────────────
   4. SECTION COLORED ACCENT LINES — visible horizontal bar
      between sections (immediate, no scroll needed)
   ───────────────────────────────────────────────────────── */

/* Orange line above categories */
#categorias {
  border-top: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent)) 1;
}

/* After hero: colored gradient separator */
.stats-section-divider {
  height: 6px;
  background: linear-gradient(90deg, #f97316, #7C3AED, #00D4FF, #10b981, #f97316);
  background-size: 200% auto;
  animation: sfx-shimmerSlide 2.5s linear infinite;
  box-shadow: 0 2px 12px rgba(124,58,237,.4);
}

/* ─────────────────────────────────────────────────────────
   5. SECTION BACKGROUNDS — clearly different per section
   ───────────────────────────────────────────────────────── */

/* Stats section: strong cyan-sky tint — clearly blue-tinted */
.sfx-stats-section {
  background: linear-gradient(
    135deg,
    #dff0fc 0%,
    #eef7ff 45%,
    #e8f4fd 100%
  ) !important;
  border-top: 3px solid transparent;
  border-image: linear-gradient(90deg,#f97316,#7C3AED,#00D4FF,#f97316) 1;
}

/* Categories: warm cream orange — clearly warm */
#categorias {
  background: linear-gradient(
    135deg,
    #fff3e0 0%,
    #fffdf8 45%,
    #fef0d5 100%
  ) !important;
  border-top: 3px solid transparent;
  border-image: linear-gradient(90deg,#f97316,#FF6B35,#f97316) 1;
}

/* Why choose us: clear lavender purple */
.sfx-why-section {
  background: linear-gradient(
    135deg,
    #f0ebff 0%,
    #f8f5ff 45%,
    #ece6ff 100%
  ) !important;
  border-top: 3px solid transparent;
  border-image: linear-gradient(90deg,#7C3AED,#a855f7,#7C3AED) 1;
}

/* Section glow aura at bottom — visible accent under border */
.sfx-stats-section::after {
  content: '';
  display: block;
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 5px;
  background: linear-gradient(90deg, transparent, rgba(0,212,255,.5), transparent);
  z-index: 2;
  pointer-events: none;
}
#categorias::after {
  content: '';
  display: block;
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 5px;
  background: linear-gradient(90deg, transparent, rgba(249,115,22,.5), transparent);
  z-index: 2;
  pointer-events: none;
}

/* ─────────────────────────────────────────────────────────
   6. DIAGONAL SECTION SEPARATORS (clip-path)
   ───────────────────────────────────────────────────────── */

.sfx-angled-bottom {
  position: relative;
  padding-bottom: 4rem;
}
.sfx-angled-bottom::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 60px;
  pointer-events: none;
  z-index: 2;
}
.sfx-angled-bottom.to-white::after {
  background: #ffffff;
  clip-path: polygon(0 100%, 100% 30%, 100% 100%);
}
.sfx-angled-bottom.to-surface::after {
  background: #f8fafc;
  clip-path: polygon(0 100%, 100% 30%, 100% 100%);
}
.sfx-angled-bottom.to-white-rev::after {
  background: #ffffff;
  clip-path: polygon(0 30%, 100% 100%, 0 100%);
}

.sfx-angled-top {
  position: relative;
}
.sfx-angled-top::before {
  content: '';
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 60px;
  pointer-events: none;
  z-index: 2;
}
.sfx-angled-top.from-white::before {
  background: #ffffff;
  clip-path: polygon(0 0, 100% 0, 100% 30%, 0 100%);
}
.sfx-angled-top.from-surface::before {
  background: #f8fafc;
  clip-path: polygon(0 0, 100% 0, 100% 30%, 0 100%);
}

/* ─────────────────────────────────────────────────────────
   7. ANIMATED GRADIENT ORBS
   ───────────────────────────────────────────────────────── */

.sfx-orb-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.sfx-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: var(--orb-opacity, .6);
  animation: sfx-orbFloat var(--orb-speed, 14s) ease-in-out infinite;
  --ox: -30px; --oy: 20px;
}
.sfx-orb-section { position: relative; }
.sfx-orb-section > *:not(.sfx-orb-wrap) { position: relative; z-index: 1; }

/* ─────────────────────────────────────────────────────────
   8. MOVING GRID TEXTURE
   ───────────────────────────────────────────────────────── */

.sfx-grid-drift {
  position: absolute;
  inset: -15%;
  background-image:
    linear-gradient(rgba(249,115,22,.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(249,115,22,.1) 1px, transparent 1px);
  background-size: 52px 52px;
  pointer-events: none;
  will-change: transform;
  z-index: 0;
}
.sfx-grid-drift.sfx-grid-purple {
  background-image:
    linear-gradient(rgba(124,58,237,.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,58,237,.1) 1px, transparent 1px);
}

/* ─────────────────────────────────────────────────────────
   9. FLOATING ACTION BUTTONS
   ───────────────────────────────────────────────────────── */

#sfx-fab-group {
  position: fixed;
  bottom: 2rem;
  right: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  z-index: 1050;
  pointer-events: none;
}
.sfx-fab {
  width: 54px; height: 54px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: none; cursor: pointer;
  box-shadow: 0 6px 28px rgba(0,0,0,.28), 0 2px 6px rgba(0,0,0,.12);
  transition: transform .4s cubic-bezier(.34,1.56,.64,1),
              box-shadow .25s ease, opacity .4s ease;
  text-decoration: none;
  pointer-events: auto;
  opacity: 0;
  transform: scale(0.4) translateY(20px);
}
.sfx-fab.sfx-fab-show {
  opacity: 1;
  transform: scale(1) translateY(0);
}
.sfx-fab:hover { transform: scale(1.14) translateY(-4px) !important; }
.sfx-fab:active { transform: scale(0.94) !important; }

.sfx-fab-wa  { background: #25D366; color: #fff; }
.sfx-fab-top { background: var(--primary, #f97316); color: #fff; }

/* ─────────────────────────────────────────────────────────
   10. ACCENT STRIPE (left border that draws down on scroll)
   ───────────────────────────────────────────────────────── */

.sfx-stripe { position: relative; }
.sfx-stripe::before {
  content: '';
  position: absolute;
  left: 0; top: 10%; bottom: 10%;
  width: 4px; border-radius: 2px;
  background: linear-gradient(to bottom, var(--primary), var(--secondary));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1.1s cubic-bezier(.22,1,.36,1);
}
.sfx-stripe.sfx-revealed::before { transform: scaleY(1); }

/* ─────────────────────────────────────────────────────────
   11. STAT COUNTER
   ───────────────────────────────────────────────────────── */
[data-count] { display: inline-block; }
.sfx-count-done { animation: sfx-countPop .5s cubic-bezier(.34,1.56,.64,1); }

/* ─────────────────────────────────────────────────────────
   12. PARALLAX
   ───────────────────────────────────────────────────────── */
[data-parallax] { will-change: transform; }

/* ─────────────────────────────────────────────────────────
   13. 3D TILT
   ───────────────────────────────────────────────────────── */
.sfx-tiltable { backface-visibility: hidden; will-change: transform; }

/* ─────────────────────────────────────────────────────────
   14. HERO BOTTOM SHIMMER LINE (immediately visible!)
   ───────────────────────────────────────────────────────── */
#hero-slider::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 6px;
  z-index: 10;
  background: linear-gradient(
    90deg,
    #f97316, #FF6B35, #7C3AED, #00D4FF, #10b981, #f97316
  );
  background-size: 300% auto;
  animation: sfx-shimmerSlide 2s linear infinite;
  box-shadow: 0 0 16px rgba(249,115,22,.6), 0 0 32px rgba(124,58,237,.35);
}

/* ─────────────────────────────────────────────────────────
   15. MOBILE RESPONSIVE
   ───────────────────────────────────────────────────────── */

/* Mobile menu stagger entrance */
#mob-menu.is-open .mob-item {
  animation: sfx-slideLeft .28s cubic-bezier(.22,1,.36,1) both;
}
#mob-menu.is-open .mob-item:nth-child(1)  { animation-delay: .04s; }
#mob-menu.is-open .mob-item:nth-child(2)  { animation-delay: .09s; }
#mob-menu.is-open .mob-item:nth-child(3)  { animation-delay: .14s; }
#mob-menu.is-open .mob-item:nth-child(4)  { animation-delay: .19s; }
#mob-menu.is-open .mob-item:nth-child(n+5){ animation-delay: .24s; }

@media (max-width: 760px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.25rem 1rem !important;
  }
  .categories-strip {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: .75rem !important;
    flex-wrap: unset !important;
    overflow-x: unset !important;
  }
  .category-card {
    min-width: unset !important;
    max-width: unset !important;
    width: 100% !important;
    flex: unset !important;
  }
  .features-grid    { grid-template-columns: 1fr !important; }
  .domo-features-grid { grid-template-columns: 1fr !important; }
  .sfx-fab { width: 48px; height: 48px; }
}
@media (max-width: 480px) {
  .section { padding: 3rem 0 !important; }
  .stat-number { font-size: clamp(1.6rem, 7vw, 2.1rem) !important; }
}