/* ═══════════════════════════════════════════════════════════════
   AVENIX HIS — Cinematic FX layer
   Aurora · grain · perspective grid · glass · animated borders ·
   cursor spotlight · shimmer · tilt
═══════════════════════════════════════════════════════════════ */

/* ─── Animated aurora background (fixed, behind everything) ─── */
.fx-aurora {
  position: fixed; inset: 0; z-index: -3; pointer-events: none; overflow: hidden;
}
.fx-aurora span {
  position: absolute; border-radius: 50%; filter: blur(90px); opacity: .55;
  mix-blend-mode: screen; will-change: transform;
}
.fx-aurora .a1 { width: 46vw; height: 46vw; background: radial-gradient(circle, #0ea5e9, transparent 65%); top: -12vw; left: -8vw; animation: drift1 22s ease-in-out infinite; }
.fx-aurora .a2 { width: 42vw; height: 42vw; background: radial-gradient(circle, #10b981, transparent 65%); bottom: -14vw; right: -10vw; animation: drift2 26s ease-in-out infinite; }
.fx-aurora .a3 { width: 38vw; height: 38vw; background: radial-gradient(circle, #8b5cf6, transparent 65%); top: 38%; left: 42%; animation: drift3 30s ease-in-out infinite; opacity: .35; }
.fx-aurora .a4 { width: 30vw; height: 30vw; background: radial-gradient(circle, #d4af37, transparent 60%); top: 8%; right: 14%; animation: drift1 34s ease-in-out infinite reverse; opacity: .28; }
[data-theme="light"] .fx-aurora span { opacity: .3; filter: blur(110px); }
[data-theme="light"] .fx-aurora .a3 { opacity: .2; }
[data-theme="light"] .fx-aurora .a4 { opacity: .18; }

@keyframes drift1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(8vw,6vw) scale(1.18); } }
@keyframes drift2 { 0%,100% { transform: translate(0,0) scale(1.1); } 50% { transform: translate(-9vw,-5vw) scale(1); } }
@keyframes drift3 { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(-6vw,4vw) scale(1.2); } 66% { transform: translate(5vw,-6vw) scale(.9); } }

/* ─── Film grain overlay ─── */
.fx-grain {
  position: fixed; inset: 0; z-index: -2; pointer-events: none; opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme="light"] .fx-grain { opacity: .025; }

/* ─── Cursor spotlight (dark only) ─── */
.fx-spot {
  position: fixed; width: 540px; height: 540px; border-radius: 50%; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, rgba(15,185,166,.12), transparent 60%);
  transform: translate(-50%,-50%); left: 50%; top: 30%; transition: opacity .4s; opacity: 0;
}
body.fx-ready .fx-spot { opacity: 1; }
[data-theme="light"] .fx-spot { background: radial-gradient(circle, rgba(14,165,233,.10), transparent 60%); }

/* ─── Hero perspective grid floor ─── */
.hero { perspective: 900px; }
.hero-grid-floor {
  position: absolute; left: -20%; right: -20%; bottom: -10%; height: 60%; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(15,185,166,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,185,166,.14) 1px, transparent 1px);
  background-size: 60px 60px;
  transform: rotateX(74deg); transform-origin: center bottom;
  mask-image: linear-gradient(to top, #000 0%, transparent 78%);
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 78%);
  animation: gridScroll 7s linear infinite;
}
[data-theme="light"] .hero-grid-floor { background-image: linear-gradient(rgba(14,165,233,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(14,165,233,.12) 1px, transparent 1px); }
@keyframes gridScroll { from { background-position: 0 0; } to { background-position: 0 60px; } }

/* ─── Shimmer gradient text (hero highlight) ─── */
.hero-title .em {
  background: linear-gradient(100deg, #0ea5e9, #2dd4bf 30%, #fff 48%, #10b981 60%, #0ea5e9);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 6s linear infinite;
}
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -50% 0; } }

/* ─── Floating glass orbs in hero visual ─── */
.fx-orb { position: absolute; border-radius: 50%; pointer-events: none; z-index: 2;
  background: linear-gradient(135deg, rgba(255,255,255,.25), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(4px);
  box-shadow: inset 0 0 20px rgba(255,255,255,.1), 0 8px 30px rgba(0,0,0,.3);
}
.fx-orb.o1 { width: 64px; height: 64px; top: -30px; right: -24px; animation: float1 8s ease-in-out infinite; }
.fx-orb.o2 { width: 40px; height: 40px; bottom: 30px; left: -20px; animation: float2 10s ease-in-out infinite; }
@keyframes float1 { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-18px) rotate(12deg); } }
@keyframes float2 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(16px); } }

/* ─── Glass elevation upgrade for key cards ─── */
.mini-db, .loss-result, .demo-window, .price-card.popular, .form-card, .story-featured {
  position: relative;
  background-image: linear-gradient(165deg, rgba(255,255,255,.06), rgba(255,255,255,0) 40%);
  backdrop-filter: blur(6px);
}
[data-theme="light"] .mini-db, [data-theme="light"] .loss-result,
[data-theme="light"] .demo-window, [data-theme="light"] .price-card.popular,
[data-theme="light"] .form-card, [data-theme="light"] .story-featured {
  background-image: linear-gradient(165deg, rgba(255,255,255,.7), rgba(255,255,255,.3) 40%);
}

/* ─── Rotating gradient ring (popular plan + loss result) ───
   Colours flow AROUND the border by animating the conic angle via @property.
   The element itself never rotates, so there is no diagonal-seam artifact.
   Border-only is achieved with the standard mask-composite recipe. */
@property --ring-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

.price-card.popular, .loss-result { border-color: transparent; }
.price-card.popular::before, .loss-result::before {
  content: ""; position: absolute; inset: -2px; border-radius: inherit; z-index: 0;
  padding: 2px; pointer-events: none;
  background: conic-gradient(from var(--ring-angle),
    #0ea5e9, #2dd4bf 25%, #d4af37 50%, #8b5cf6 75%, #0ea5e9);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: ringSpin 5s linear infinite;
  filter: drop-shadow(0 0 8px rgba(15,185,166,.4));
}
@keyframes ringSpin { to { --ring-angle: 360deg; } }
/* keep card content above the ring */
.price-card.popular > *, .loss-result > * { position: relative; z-index: 1; }

/* Fallback for engines without @property: gentle static glow, no broken fill */
@supports not (background: conic-gradient(from 0deg, red)) {
  .price-card.popular::before, .loss-result::before { display: none; }
  .price-card.popular, .loss-result { border-color: rgba(15,185,166,.6); box-shadow: var(--sh-glow); }
}

/* ─── CTA glow pulse ─── */
.btn-primary { position: relative; }
.btn-primary::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  box-shadow: 0 0 0 0 rgba(15,185,166,.5); animation: ctaPulse 2.8s ease-out infinite;
}
@keyframes ctaPulse { 0% { box-shadow: 0 0 0 0 rgba(15,185,166,.45); } 70% { box-shadow: 0 0 0 16px rgba(15,185,166,0); } 100% { box-shadow: 0 0 0 0 rgba(15,185,166,0); } }
.btn-lg::after { animation-duration: 3.2s; }

/* ─── Sheen sweep on hover for cards/buttons ─── */
.g-card, .story-card, .feature-visual, .gallery-item { position: relative; overflow: hidden; }
.g-card::after, .story-card::after {
  content: ""; position: absolute; top: 0; left: -120%; width: 80%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.13), transparent);
  transform: skewX(-18deg); transition: left .7s var(--ease); pointer-events: none;
}
.g-card:hover::after, .story-card:hover::after { left: 130%; }
/* Popular card keeps its overflow-visible badge; give the grid breathing room */
.price-grid { padding-top: 16px; }

/* ─── Eyebrow glow ─── */
.eyebrow { position: relative; box-shadow: 0 0 24px rgba(15,185,166,.12); }

/* ─── Ticker pop on change ─── */
.ticker-amount { transition: transform .25s var(--spring), filter .25s; }
.ticker-amount.pop { transform: scale(1.06); filter: drop-shadow(0 0 14px rgba(239,68,68,.45)); }

/* ─── Stronger staggered reveal ─── */
.reveal { transition: opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease); filter: blur(6px); }
.reveal.in { filter: blur(0); }
.reveal-stagger > * { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal-stagger.in > * { opacity: 1; transform: none; }

/* ─── Tilt smoothing ─── */
.fx-tilt { transition: transform .25s var(--ease); transform-style: preserve-3d; will-change: transform; }

/* ─── Section divider glow line ─── */
.section + .section, .stats-bar, .footer { box-shadow: 0 -1px 0 rgba(15,185,166,.06); }

/* ─── Scrollbar ─── */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--teal), var(--emerald)); border-radius: 100px; border: 3px solid var(--bg-0); }

@media (prefers-reduced-motion: reduce) {
  .fx-aurora span, .hero-grid-floor, .hero-title .em, .fx-orb,
  .price-card.popular, .loss-result, .btn-primary::after { animation: none !important; }
  .reveal { filter: none; }
  .fx-spot { display: none; }
}

/* ════════════ MOBILE OPTIMIZATION (≤720px) ════════════ */
@media (max-width: 720px) {
  /* Lighten background FX for performance & legibility */
  .fx-aurora span { filter: blur(70px); opacity: .4; }
  .fx-aurora .a3, .fx-aurora .a4 { display: none; }
  .fx-grain { opacity: .03; }
  .hero-grid-floor, .fx-orb, .fx-spot { display: none; }
  .reveal { filter: none; }              /* skip blur reveal — snappier on mobile */

  /* Drop expensive blur on glass surfaces (GPU-friendly) */
  .mini-db, .loss-result, .demo-window, .price-card.popular, .form-card, .story-featured,
  .site-header { backdrop-filter: none; }

  /* Tighter rhythm */
  .section { padding: 56px 0; }
  .hero { padding-top: 96px; padding-bottom: 48px; }
  .hero-title { font-size: clamp(2rem, 9vw, 2.6rem); }
  .section-title { font-size: clamp(1.6rem, 6.5vw, 2rem); }

  /* Hero KPI cards stay in a compact 3-up row, not a tall stack */
  .mini-kpis { grid-template-columns: repeat(3, 1fr); gap: 7px; }
  .mini-kpi { padding: 9px 8px; }
  .mini-kpi-val { font-size: 1rem; }
  .mini-kpi-lbl { font-size: .58rem; }
  .mini-kpi-trend { font-size: .58rem; }

  /* Demo tabs: easier horizontal swipe, snap */
  .demo-tabs { scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; gap: 7px; }
  .demo-tab { scroll-snap-align: start; padding: 9px 13px; font-size: .82rem; }
  .demo-body { padding: 16px; min-height: 0; }

  /* Demo content must never push the page wide — fit or scroll WITHIN the card */
  .demo-module { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .scr-kpis { grid-template-columns: 1fr; }     /* long VND numbers get full width */
  .scr-kpi-val { font-size: 1.1rem; overflow-wrap: anywhere; }
  .scr-grid2 { grid-template-columns: 1fr; }
  .scr-table { font-size: .76rem; }
  .scr-table th, .scr-table td { padding: 8px 8px; }
  .kanban { grid-template-columns: repeat(5, 140px); }
  .zalo-mock { grid-template-columns: 1fr; justify-items: center; gap: 18px; }

  /* Sticky CTA — give the button room, hide decorative bits */
  .sticky-cta { padding: 6px 14px; }
  .sticky-inner { gap: 10px; padding: 6px 0; justify-content: space-between; }
  .sticky-inner > i { display: none; }
  .sticky-text { font-size: .8rem; line-height: 1.25; flex: 1; min-width: 0; }
  .sticky-cta .btn { padding: 9px 14px; font-size: .82rem; font-weight: 700; flex-shrink: 0; white-space: nowrap; }
  .sticky-close { width: 30px; height: 30px; font-size: .9rem; flex-shrink: 0; }

  /* Lift chat widget above sticky CTA bar on mobile to eliminate overlap */
  .chat-widget {
    bottom: 18px;
    right: 16px;
    transition: bottom .35s var(--spring), right .35s var(--spring);
  }
  body.has-sticky-cta .chat-widget,
  body:has(.sticky-cta.show) .chat-widget {
    bottom: 74px;
  }
  .chat-window {
    bottom: 68px;
    right: 0;
    width: min(340px, calc(100vw - 32px));
  }

  /* Footer on mobile: clean 2-column grid layout */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px 18px;
    padding-bottom: 24px;
  }
  .footer-col:first-child {
    grid-column: 1 / -1;
    margin-bottom: 8px;
  }
  .footer-tagline {
    max-width: 100%;
    margin: 10px 0 14px;
  }

  /* Cards / pricing spacing */
  .price-grid { padding-top: 18px; }
  .price-card { padding: 26px 20px; }
  .pc-now-num { font-size: 2.1rem; }

  /* Section side glow lines off (cleaner) */
  .section + .section, .stats-bar, .footer { box-shadow: none; }

  /* Comfortable tap height on chat + toggles */
  .chat-trigger { width: 54px; height: 54px; }
}

/* Small phones (≤400px) */
@media (max-width: 400px) {
  .hero-title { font-size: clamp(1.8rem, 9.2vw, 2.2rem); }
  .ticker-amount { font-size: 2rem; }
  .lr-total { font-size: 1.9rem; }
  .demo-tab span { font-size: .8rem; }
}