/* DANCA Revolution · Visual layer
   Animated borders, glassmorphism, glow states, magnetic hover.
   No external deps. CSP-safe (no inline styles injected by CSS).
   Respects prefers-reduced-motion everywhere. */

/* ── Animated gradient borders on cards ── */
@property --border-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .feat,
  .plan,
  .product-shell,
  .go-card {
    --border-w: 1px;
    position: relative;
    border: var(--border-w) solid transparent;
    background-clip: padding-box;
  }
  .feat::before,
  .plan::before,
  .product-shell::before,
  .go-card::before {
    content: "";
    position: absolute;
    inset: calc(var(--border-w) * -1);
    border-radius: inherit;
    padding: var(--border-w);
    background: conic-gradient(
      from var(--border-angle),
      transparent 25%,
      var(--ind, #497cff) 50%,
      var(--vio, #78aeff) 75%,
      transparent 100%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: rev-border-spin 4s linear infinite;
    opacity: 0;
    transition: opacity .4s ease;
    pointer-events: none;
    z-index: 0;
  }
  .feat:hover::before,
  .plan:hover::before,
  .product-shell:hover::before,
  .go-card:hover::before {
    opacity: 1;
  }

  @keyframes rev-border-spin {
    to { --border-angle: 360deg; }
  }
}

/* ── Glassmorphism enhancement ── */
.product-shell {
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
}
.mega-menu {
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
}

/* ── Enhanced glow on buttons ── */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .btn.glow {
    transition: box-shadow .35s ease, transform .25s ease;
  }
  .btn.glow:hover {
    box-shadow:
      0 0 20px rgba(73, 124, 255, .45),
      0 0 60px rgba(73, 124, 255, .18),
      0 4px 18px rgba(0, 0, 0, .25);
    transform: translateY(-2px);
  }
  .btn.main {
    transition: box-shadow .3s ease, transform .25s ease;
  }
  .btn.main:hover {
    box-shadow:
      0 0 14px rgba(255, 255, 255, .2),
      0 4px 16px rgba(0, 0, 0, .3);
    transform: translateY(-1px);
  }
}

/* ── Magnetic cursor class (applied by JS) ── */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .rev-magnetic {
    transition: transform .22s cubic-bezier(.2, .8, .2, 1);
    will-change: transform;
  }
}

/* ── Text reveal animation ── */
@media (prefers-reduced-motion: no-preference) {
  .rev-text-reveal .rev-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .45s ease, transform .45s cubic-bezier(.2, .8, .2, 1);
  }
  .rev-text-reveal.is-revealed .rev-word {
    opacity: 1;
    transform: none;
  }
}

/* ── Counter animation (stat) ── */
.rev-counter-wrap {
  display: inline;
}

/* ── Staggered entrance ── */
@media (prefers-reduced-motion: no-preference) {
  .rev-stagger {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .5s ease, transform .5s cubic-bezier(.2, .8, .2, 1);
  }
  .rev-stagger.is-visible {
    opacity: 1;
    transform: none;
  }
}

/* ── Hero headline shimmer ── */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy h1 {
    background: linear-gradient(
      110deg,
      var(--text, #f4f7fd) 0%,
      var(--text, #f4f7fd) 40%,
      var(--vio, #78aeff) 50%,
      var(--text, #f4f7fd) 60%,
      var(--text, #f4f7fd) 100%
    );
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rev-shimmer 6s ease-in-out infinite;
  }
  @keyframes rev-shimmer {
    0%, 100% { background-position: 100% 0; }
    50% { background-position: 0 0; }
  }
}

/* ── Subtle parallax layers (applied by JS via CSS vars) ── */
@media (prefers-reduced-motion: no-preference) {
  .how-section .sec-head,
  .local-context-stat,
  .hero-kicker {
    will-change: transform;
    transition: transform .1s linear;
  }
}

/* ── Typing cursor for hero subtitle ── */
.rev-typing { position: relative; }
.rev-typing-reserve { opacity: 0; }
.rev-typing-text { position: absolute; inset: 0; pointer-events: none; }
.rev-typing-cursor::after {
  content: "▎";
  display: inline;
  animation: rev-blink .7s step-end infinite;
  color: var(--ind, #497cff);
  font-weight: 300;
  margin-left: 1px;
}
@keyframes rev-blink {
  50% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .rev-typing-cursor::after { animation: none; opacity: 1; }
}

/* ── Ripple on CTA clicks ── */
@media (prefers-reduced-motion: no-preference) {
  .btn {
    position: relative;
    overflow: hidden;
  }
  .rev-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, .25);
    transform: scale(0);
    animation: rev-ripple-grow .5s ease-out forwards;
    pointer-events: none;
  }
  @keyframes rev-ripple-grow {
    to { transform: scale(2.5); opacity: 0; }
  }
}

/* ── Constellation lines canvas ── */
#rev-constellation {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: .35;
}

/* ── Scroll-linked scale for section headings ── */
@media (prefers-reduced-motion: no-preference) {
  .sec-head h2 {
    transition: transform .15s ease-out;
  }
}

/* ── Floating particles ambient ── */
@media (prefers-reduced-motion: no-preference) {
  .rev-particle {
    position: fixed;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--ind, #497cff);
    pointer-events: none;
    opacity: 0;
    z-index: 0;
    animation: rev-float-up linear forwards;
  }
  @keyframes rev-float-up {
    0% { opacity: 0; transform: translateY(0) scale(1); }
    10% { opacity: .4; }
    90% { opacity: .15; }
    100% { opacity: 0; transform: translateY(-100vh) scale(.3); }
  }
}

/* ── Focus ring enhancement ── */
.home-page :focus-visible {
  outline: 2px solid var(--ind, #497cff);
  outline-offset: 3px;
  border-radius: 4px;
}