/* ==========================================================================
   REC VHS Camera - VHS Animations, Effects & Micrographic Motion
   ========================================================================== */

/* ==========================================================================
   Scanline Overlay
   ========================================================================== */

.scanlines {
  position: relative;
}

.scanlines::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.15) 0px,
    rgba(0, 0, 0, 0.15) 1px,
    transparent 1px,
    transparent 2px
  );
  z-index: var(--z-above);
}

.scanlines-subtle::after {
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.08) 0px,
    rgba(0, 0, 0, 0.08) 1px,
    transparent 1px,
    transparent 3px
  );
}

/* ==========================================================================
   Glitch Text Effect
   ========================================================================== */

.glitch {
  position: relative;
  animation: glitch-skew 4s infinite linear alternate-reverse;
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.8;
}

.glitch::before {
  color: #ff0000;
  animation: glitch-before 3s infinite linear alternate-reverse;
  clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
  transform: translateX(-2px);
}

.glitch::after {
  color: #00ffff;
  animation: glitch-after 2s infinite linear alternate-reverse;
  clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
  transform: translateX(2px);
}

@keyframes glitch-before {
  0% { clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%); transform: translateX(-2px); }
  20% { clip-path: polygon(0 15%, 100% 15%, 100% 50%, 0 50%); transform: translateX(2px); }
  40% { clip-path: polygon(0 10%, 100% 10%, 100% 40%, 0 40%); transform: translateX(-1px); }
  60% { clip-path: polygon(0 25%, 100% 25%, 100% 55%, 0 55%); transform: translateX(1px); }
  80% { clip-path: polygon(0 5%, 100% 5%, 100% 30%, 0 30%); transform: translateX(-2px); }
  100% { clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%); transform: translateX(2px); }
}

@keyframes glitch-after {
  0% { clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%); transform: translateX(2px); }
  20% { clip-path: polygon(0 70%, 100% 70%, 100% 95%, 0 95%); transform: translateX(-2px); }
  40% { clip-path: polygon(0 60%, 100% 60%, 100% 90%, 0 90%); transform: translateX(1px); }
  60% { clip-path: polygon(0 75%, 100% 75%, 100% 100%, 0 100%); transform: translateX(-1px); }
  80% { clip-path: polygon(0 68%, 100% 68%, 100% 98%, 0 98%); transform: translateX(2px); }
  100% { clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%); transform: translateX(-2px); }
}

@keyframes glitch-skew {
  0% { transform: skew(0deg); }
  20% { transform: skew(0deg); }
  21% { transform: skew(2deg); }
  22% { transform: skew(-1deg); }
  23% { transform: skew(0deg); }
  100% { transform: skew(0deg); }
}

/* Glitch on hover only */
.glitch-hover {
  position: relative;
}

.glitch-hover::before,
.glitch-hover::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.1s;
}

.glitch-hover:hover::before,
.glitch-hover:hover::after {
  opacity: 0.8;
}

.glitch-hover:hover::before {
  color: #ff0000;
  animation: glitch-before 0.3s infinite linear alternate-reverse;
  clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
}

.glitch-hover:hover::after {
  color: #00ffff;
  animation: glitch-after 0.2s infinite linear alternate-reverse;
  clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
}

/* ==========================================================================
   VHS Noise / Static Effect
   ========================================================================== */

.vhs-noise {
  position: relative;
}

.vhs-noise:not(body) {
  overflow: hidden;
}

.vhs-noise::before {
  content: '';
  position: absolute;
  inset: -50%;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  opacity: 0.03;
  animation: noise-shift 0.5s steps(10) infinite;
  pointer-events: none;
  z-index: var(--z-above);
}

@keyframes noise-shift {
  0% { transform: translate(0, 0); }
  10% { transform: translate(-5%, -5%); }
  20% { transform: translate(5%, 10%); }
  30% { transform: translate(-10%, 5%); }
  40% { transform: translate(10%, -5%); }
  50% { transform: translate(-5%, 10%); }
  60% { transform: translate(5%, -10%); }
  70% { transform: translate(-10%, -5%); }
  80% { transform: translate(10%, 5%); }
  90% { transform: translate(-5%, -10%); }
  100% { transform: translate(0, 0); }
}

/* ==========================================================================
   Chromatic Aberration
   ========================================================================== */

.chromatic {
  position: relative;
}

.chromatic::before,
.chromatic::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.chromatic::before {
  color: rgba(255, 0, 0, 0.5);
  transform: translateX(-1px);
  mix-blend-mode: screen;
}

.chromatic::after {
  color: rgba(0, 255, 255, 0.5);
  transform: translateX(1px);
  mix-blend-mode: screen;
}

/* ==========================================================================
   Scroll Animations (Initial States)
   ========================================================================== */

.fade-in {
  opacity: 0;
  transform: translateY(20px);
}

.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.stagger-item {
  opacity: 0;
  transform: translateY(30px);
}

.stagger-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   REC Indicator
   ========================================================================== */

.rec-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-vcr);
  font-size: var(--text-display-tiny);
  color: var(--color-accent);
  letter-spacing: var(--tracking-wider);
}

.rec-dot {
  width: 8px;
  height: 8px;
  background-color: var(--color-accent);
  border-radius: 50%;
  animation: rec-blink 1s infinite;
}

@keyframes rec-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* ==========================================================================
   Timestamp Overlay Effect
   ========================================================================== */

.vhs-timestamp {
  font-family: var(--font-vcr);
  font-size: var(--text-display-micro);
  color: var(--color-text-primary);
  background: rgba(0, 0, 0, 0.6);
  padding: var(--space-xs) var(--space-sm);
  letter-spacing: var(--tracking-wide);
}

/* ==========================================================================
   Video Frame Effect
   ========================================================================== */

.video-frame {
  position: relative;
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.video-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.3);
  pointer-events: none;
  z-index: 2;
}

/* ==========================================================================
   Pulse & Float
   ========================================================================== */

.pulse {
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.float {
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* ==========================================================================
   Micrographic Animations
   ========================================================================== */

/* Timecode colon blink */
.timecode {
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-wider);
}

/* HUD directional fades */
.hud-fade-left {
  opacity: 0;
  transform: translateX(-10px);
}

.hud-fade-left.is-visible {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.8s ease 0.3s, transform 0.8s ease 0.3s;
}

.hud-fade-right {
  opacity: 0;
  transform: translateX(10px);
}

.hud-fade-right.is-visible {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.8s ease 0.5s, transform 0.8s ease 0.5s;
}

.hud-fade-up {
  opacity: 0;
  transform: translateY(10px);
}

.hud-fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.8s ease 0.4s, transform 0.8s ease 0.4s;
}

/* Barcode scan sweep */
.barcode-scan {
  position: relative;
  overflow: hidden;
}

.barcode-scan::after {
  content: '';
  position: absolute;
  top: 0;
  left: -10%;
  width: 2px;
  height: 100%;
  background: var(--color-accent);
  opacity: 0.5;
  animation: barcode-sweep 4s ease-in-out infinite;
  animation-delay: 1s;
}

@keyframes barcode-sweep {
  0% { left: -5%; opacity: 0; }
  5% { opacity: 0.5; }
  50% { left: 105%; opacity: 0.5; }
  55% { opacity: 0; }
  100% { left: 105%; opacity: 0; }
}

/* Spec panel fade-in-up */
.spec-fade {
  opacity: 0;
  transform: translateY(12px);
}

.spec-fade.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

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

  .glitch::before,
  .glitch::after,
  .glitch-hover::before,
  .glitch-hover::after {
    display: none;
  }

  .hud-fade-left,
  .hud-fade-right,
  .hud-fade-up,
  .fade-in,
  .stagger-item,
  .spec-fade {
    opacity: 1;
    transform: none;
  }

  .barcode-scan::after {
    display: none;
  }
}