/* ============================================
   DictaScribe Pro — Advanced Components
   Pure CSS • No JavaScript
   ============================================ */

/* -----------------------------------------
   1. Feature Video — overlay play button
   ----------------------------------------- */
.feature-video {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 16 / 9;
  background: var(--navy);
}

.feature-video img,
.feature-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--transition), filter .5s var(--transition);
}

.feature-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(79,70,229,.4), rgba(6,182,212,.3));
  opacity: .6;
  transition: opacity .4s var(--transition);
}

.feature-video::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 80px;
  height: 80px;
  transform: translate(-50%, -50%) scale(1);
  border-radius: 50%;
  background: rgba(255,255,255,.95);
  box-shadow: 0 8px 32px rgba(10,15,44,.25);
  transition: transform .4s var(--bounce), box-shadow .4s var(--transition);
  /* play triangle via clip-path on a pseudo won't work; use box approach */
  clip-path: polygon(35% 25%, 35% 75%, 75% 50%);
  background: white;
}

.feature-video:hover img,
.feature-video:hover video {
  transform: scale(1.05);
  filter: brightness(.85);
}

.feature-video:hover::after {
  opacity: .3;
}

.feature-video:hover::before {
  transform: translate(-50%, -50%) scale(1.15);
  box-shadow: 0 12px 40px rgba(79,70,229,.4);
}

/* Size variants */
.feature-video--sm { max-width: 480px; }
.feature-video--lg { max-width: 960px; }

/* -----------------------------------------
   2. Number Ticker — slot-machine counter
   ----------------------------------------- */
@keyframes ticker-roll {
  0%   { transform: translateY(-100%); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes ticker-roll-delayed-1 { 0%, 10% { transform: translateY(-100%); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes ticker-roll-delayed-2 { 0%, 20% { transform: translateY(-100%); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes ticker-roll-delayed-3 { 0%, 30% { transform: translateY(-100%); opacity: 0; } 50% { opacity: 1; } 100% { transform: translateY(0); opacity: 1; } }

.number-ticker {
  display: inline-flex;
  gap: 2px;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: 3rem;
  color: var(--text);
  overflow: hidden;
}

.number-ticker__digit {
  display: inline-block;
  overflow: hidden;
  line-height: 1.2;
  background: linear-gradient(135deg, var(--indigo), var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: ticker-roll .8s var(--bounce) both;
}

.number-ticker__digit:nth-child(2) { animation-name: ticker-roll-delayed-1; }
.number-ticker__digit:nth-child(3) { animation-name: ticker-roll-delayed-2; }
.number-ticker__digit:nth-child(4) { animation-name: ticker-roll-delayed-3; }
.number-ticker__digit:nth-child(n+5) { animation-delay: calc((var(--i, 0)) * .12s); }

.number-ticker__separator {
  opacity: .4;
  -webkit-text-fill-color: var(--text-light);
  animation: none;
}

/* Trigger on scroll into view */
.number-ticker[data-animate="scroll"] {
  animation-play-state: paused;
}

.number-ticker[data-animate="scroll"].is-visible .number-ticker__digit {
  animation-play-state: running;
}

/* -----------------------------------------
   3. Card 3D — perspective + hover rotation
   ----------------------------------------- */
.card-3d {
  perspective: 1000px;
  display: inline-block;
}

.card-3d__inner {
  position: relative;
  padding: 2rem;
  border-radius: var(--radius-lg);
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  transition: transform .5s var(--transition), box-shadow .5s var(--transition);
  transform-style: preserve-3d;
  will-change: transform;
}

.card-3d:hover .card-3d__inner {
  transform: rotateY(-8deg) rotateX(5deg) translateZ(20px);
  box-shadow: var(--shadow-xl), 0 0 60px rgba(79,70,229,.1);
}

/* Shine effect on hover */
.card-3d__inner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.15) 40%,
    rgba(255,255,255,0) 60%
  );
  opacity: 0;
  transition: opacity .5s var(--transition);
  pointer-events: none;
  z-index: 1;
}

.card-3d:hover .card-3d__inner::before {
  opacity: 1;
}

/* Variants */
.card-3d--indigo .card-3d__inner {
  background: linear-gradient(135deg, var(--indigo), var(--indigo-dark));
  color: white;
  border-color: transparent;
}

.card-3d--dark .card-3d__inner {
  background: var(--navy-light);
  color: white;
  border-color: rgba(255,255,255,.08);
}

/* -----------------------------------------
   4. Text Gradient — animated color shift
   ----------------------------------------- */
@keyframes gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.text-gradient {
  background: linear-gradient(
    270deg,
    var(--indigo),
    var(--cyan),
    var(--emerald),
    var(--indigo-light),
    var(--indigo)
  );
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-shift 6s ease infinite;
  display: inline-block;
}

.text-gradient--fast {
  animation-duration: 3s;
}

.text-gradient--slow {
  animation-duration: 12s;
}

/* Warm variant */
.text-gradient--warm {
  background-image: linear-gradient(
    270deg,
    var(--rose),
    var(--amber),
    var(--rose),
    var(--amber),
    var(--rose)
  );
}

/* Cyber variant */
.text-gradient--cyber {
  background-image: linear-gradient(
    270deg,
    var(--cyan),
    var(--cyan-light),
    var(--indigo-light),
    var(--cyan),
    var(--cyan-light)
  );
}

/* -----------------------------------------
   5. Scroll Progress — top progress bar
   ----------------------------------------- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 9999;
  background: var(--border-light);
  pointer-events: none;
}

.scroll-progress__bar {
  height: 100%;
  background: linear-gradient(90deg, var(--indigo), var(--cyan), var(--emerald));
  background-size: 200% 100%;
  width: 0%;
  /* CSS scroll-driven animation (Chrome 115+, progressive enhancement) */
  animation: scroll-fill auto linear, gradient-shift 3s ease infinite;
  animation-timeline: scroll(root);
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 10px rgba(79,70,229,.5);
}

@keyframes scroll-fill {
  from { width: 0%; }
  to   { width: 100%; }
}

/* Fallback: for browsers without scroll-timeline, 
   JS sets --scroll-pct as inline style */
@supports not (animation-timeline: scroll()) {
  .scroll-progress__bar {
    animation: gradient-shift 3s ease infinite;
    width: var(--scroll-pct, 0%);
    transition: width .1s linear;
  }
}

/* Variants */
.scroll-progress--thick {
  height: 5px;
}

.scroll-progress--indigo .scroll-progress__bar {
  background: var(--indigo);
  box-shadow: 0 0 10px var(--indigo-glow);
}

/* -----------------------------------------
   6. Cursor Glow — light following cursor
   ----------------------------------------- */
.cursor-glow {
  position: relative;
  overflow: hidden;
}

.cursor-glow::before {
  content: "";
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(79,70,229,.15) 0%,
    rgba(6,182,212,.08) 30%,
    transparent 70%
  );
  pointer-events: none;
  transform: translate(-50%, -50%);
  /* Position via CSS custom properties set by minimal inline onmousemove */
  left: var(--glow-x, -200px);
  top: var(--glow-y, -200px);
  transition: left .05s linear, top .05s linear, opacity .3s;
  opacity: 0;
  z-index: 0;
}

.cursor-glow:hover::before {
  opacity: 1;
}

/* Variant: stronger glow */
.cursor-glow--intense::before {
  width: 500px;
  height: 500px;
  background: radial-gradient(
    circle,
    rgba(79,70,229,.25) 0%,
    rgba(6,182,212,.12) 30%,
    transparent 70%
  );
}

/* Variant: cyan glow */
.cursor-glow--cyan::before {
  background: radial-gradient(
    circle,
    rgba(6,182,212,.2) 0%,
    rgba(79,70,229,.08) 30%,
    transparent 70%
  );
}

/* Ensure children stay above glow */
.cursor-glow > * {
  position: relative;
  z-index: 1;
}

/* -----------------------------------------
   7. Magnetic Button — CTA with pull effect
   ----------------------------------------- */
@keyframes magnetic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(79,70,229,.4); }
  50%      { box-shadow: 0 0 0 12px rgba(79,70,229,0); }
}

.magnetic-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 1rem 2.5rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: white;
  background: linear-gradient(135deg, var(--indigo), var(--indigo-dark));
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition:
    transform .4s var(--bounce),
    box-shadow .4s var(--transition),
    background .3s var(--transition);
  /* Magnetic pull via CSS custom props (--mx, --my) set by onmousemove */
  transform: translate(
    calc(var(--mx, 0) * 1px),
    calc(var(--my, 0) * 1px)
  );
  will-change: transform;
  text-decoration: none;
  overflow: hidden;
}

.magnetic-button::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--cyan), var(--indigo-light), var(--indigo));
  z-index: -1;
  opacity: 0;
  transition: opacity .4s var(--transition);
}

.magnetic-button:hover {
  box-shadow: var(--shadow-lg), 0 0 40px rgba(79,70,229,.25);
  transform: translate(
    calc(var(--mx, 0) * 1px),
    calc(var(--my, 0) * 1px)
  ) scale(1.05);
}

.magnetic-button:hover::before {
  opacity: 1;
}

.magnetic-button:active {
  transform: scale(.97);
  transition-duration: .1s;
}

/* Pulse animation for attention */
.magnetic-button--pulse {
  animation: magnetic-pulse 2s ease infinite;
}

/* Outline variant */
.magnetic-button--outline {
  background: transparent;
  color: var(--indigo);
  border: 2px solid var(--indigo);
  box-shadow: none;
}

.magnetic-button--outline:hover {
  background: var(--indigo);
  color: white;
  box-shadow: var(--shadow-lg), 0 0 40px rgba(79,70,229,.2);
}

/* Large variant */
.magnetic-button--lg {
  padding: 1.25rem 3rem;
  font-size: 1.15rem;
  border-radius: var(--radius-lg);
}

/* Shimmer effect */
.magnetic-button::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(255,255,255,.15) 45%,
    rgba(255,255,255,.25) 50%,
    rgba(255,255,255,.15) 55%,
    transparent 70%
  );
  transform: translateX(-100%) rotate(0deg);
  transition: transform .6s var(--transition);
  pointer-events: none;
}

.magnetic-button:hover::after {
  transform: translateX(40%) rotate(0deg);
}