/*
 * ==========================================================================
 * EFFECTS — Horror atmosphere: fog, flicker, glitch, grain, glow
 * ==========================================================================
 */

/* ==========================================================================
   TEXT EFFECTS
   ========================================================================== */

/* --- Glitch text (hover-triggered) --- */
.glitch {
  position: relative;
  display: inline-block;
}

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

.glitch:hover::before {
  opacity: 0.85;
  color: var(--color-accent-bright);
  clip-path: polygon(0 20%, 100% 20%, 100% 40%, 0 40%);
  transform: translateX(-3px);
  animation: glitchTop 0.35s steps(1) infinite;
}

.glitch:hover::after {
  opacity: 0.85;
  color: var(--color-atm-highlight);
  clip-path: polygon(0 60%, 100% 60%, 100% 80%, 0 80%);
  transform: translateX(3px);
  animation: glitchBot 0.4s steps(1) infinite;
}

@keyframes glitchTop {
  0%  { clip-path: polygon(0 15%, 100% 15%, 100% 30%, 0 30%); transform: translateX(-3px); }
  33% { clip-path: polygon(0 5%,  100% 5%,  100% 25%, 0 25%); transform: translateX(3px); }
  66% { clip-path: polygon(0 25%, 100% 25%, 100% 45%, 0 45%); transform: translateX(-2px); }
}

@keyframes glitchBot {
  0%  { clip-path: polygon(0 65%, 100% 65%, 100% 80%, 0 80%); transform: translateX(3px); }
  33% { clip-path: polygon(0 75%, 100% 75%, 100% 90%, 0 90%); transform: translateX(-3px); }
  66% { clip-path: polygon(0 55%, 100% 55%, 100% 70%, 0 70%); transform: translateX(2px); }
}

/* --- Flicker animation --- */
.flicker {
  animation: flicker 6s ease-in-out infinite;
}

@keyframes flicker {
  0%, 93%, 95%, 97%, 100% { opacity: 1; }
  94% { opacity: 0.85; }
  96% { opacity: 0.7; }
  98% { opacity: 0.9; }
}

/* --- Typewriter cursor --- */
.typewriter::after {
  content: '|';
  color: var(--color-accent-bright);
  animation: blinkCursor 0.9s step-end infinite;
}

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

/* ==========================================================================
   SECTION ATMOSPHERE
   ========================================================================== */

/* Atmospheric section with fog bottom effect */
.atm-section {
  position: relative;
}

.atm-section__fog {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    var(--color-fog) 50%,
    rgba(7, 10, 13, 0.15) 100%
  );
  pointer-events: none;
}

/* Ghostly shimmer on elements */
.shimmer {
  position: relative;
  overflow: hidden;
}

.shimmer::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.04) 50%,
    transparent 100%
  );
  animation: shimmerSlide 4s ease-in-out infinite;
}

@keyframes shimmerSlide {
  0%   { left: -100%; }
  100% { left: 200%; }
}

/* ==========================================================================
   DECORATIVE DIVIDERS
   ========================================================================== */

/* Silhouette graveyard divider — can use B&W graveyard image as mask */
.divider-silhouette {
  position: relative;
  height: clamp(80px, 15vw, 200px);
  overflow: hidden;
  pointer-events: none;
}

.divider-silhouette img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  opacity: 0.5;
  mix-blend-mode: screen; /* inverts on dark bg for silhouette effect */
  filter: grayscale(1) contrast(1.2);
}

/* For the B&W PNG silhouette — appears white on dark bg */
[data-theme="light"] .divider-silhouette img {
  mix-blend-mode: multiply;
  opacity: 0.35;
}

/* Runic separator ornament */
.ornament-divider {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-block: var(--sp-8);
}

.ornament-divider::before,
.ornament-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--color-border-accent)
  );
}

.ornament-divider::after {
  background: linear-gradient(
    90deg,
    var(--color-border-accent),
    transparent
  );
}

.ornament-divider__symbol {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  color: var(--color-accent-mid);
  line-height: 1;
  text-shadow: 0 0 12px var(--color-accent-glow);
  opacity: 0.8;
}

/* ==========================================================================
   AMBIENT GLOW BACKGROUNDS
   ========================================================================== */

/* Colored ambient glow blob behind sections */
.ambient-glow {
  position: absolute;
  border-radius: var(--radius-full);
  filter: blur(80px);
  pointer-events: none;
  z-index: var(--z-below);
}

.ambient-glow--accent {
  background: var(--color-accent-glow);
  opacity: 0.5;
}

.ambient-glow--atm {
  background: radial-gradient(circle, var(--color-atm-bright) 0%, transparent 70%);
  opacity: 0.25;
}

.ambient-glow--top-left {
  top: -100px;
  left: -100px;
  width: 500px;
  height: 500px;
}

.ambient-glow--bottom-right {
  bottom: -100px;
  right: -100px;
  width: 600px;
  height: 600px;
}

/* ==========================================================================
   CARD HOVER STATES — Enhanced atmospheric
   ========================================================================== */

/* Image reveal on card hover */
.reveal-on-hover .reveal-image {
  opacity: 0;
  transition: opacity var(--transition-slow);
}

.reveal-on-hover:hover .reveal-image {
  opacity: 1;
}

/* ==========================================================================
   LOADING / SKELETON
   ========================================================================== */

.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-bg-tertiary) 0%,
    var(--color-bg-elevated) 50%,
    var(--color-bg-tertiary) 100%
  );
  background-size: 200% 100%;
  animation: skeletonShimmer 1.8s ease-in-out infinite;
  border-radius: var(--radius-md);
}

@keyframes skeletonShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ==========================================================================
   SCROLL REVEAL (class toggled by IntersectionObserver in JS)
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}

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

/* Staggered children */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}

.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 100ms; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 200ms; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 300ms; }
.reveal-stagger.is-visible > * { opacity: 1; transform: translateY(0); }