/* Decorations — World-specific visual effects */

/* ═══ Ambient Light Wash ═══ */
/* A full-page radial gradient centered on the light source position.
   Creates the illusion of actual light flooding the environment. */

.light-wash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  background: radial-gradient(
    ellipse at var(--light-wash-x, 25%) var(--light-wash-y, 20%),
    rgba(var(--light-color-r, 255), var(--light-color-g, 255), var(--light-color-b, 255), var(--light-wash-opacity, 0)) 0%,
    rgba(var(--light-color-r, 255), var(--light-color-g, 255), var(--light-color-b, 255), calc(var(--light-wash-opacity, 0) * 0.4)) 20%,
    transparent 60%
  );
  transition: opacity 0.5s ease;
  mix-blend-mode: soft-light;
}

[data-light-active="1"] .light-wash {
  opacity: 1;
}

/* ═══ Atmosphere Overlay ═══ */
/* A smooth vignette that dims areas far from the light source.
   Uses a global overlay instead of per-element filters for a scattered,
   environmental feel without hard edges. */

.atmosphere-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.5s ease;
}

[data-light-active="1"] .atmosphere-overlay {
  /* opacity controlled by JS based on atmosphere slider */
}

/* ═══ Light-Reactive Headings ═══ */
/* Headings get a text glow when light is active */

[data-light-active="1"] h1 {
  text-shadow:
    0 0 calc(60px * var(--light-wash-opacity, 0) * 12) rgba(var(--light-color-r, 255), var(--light-color-g, 255), var(--light-color-b, 255), calc(var(--light-wash-opacity, 0) * 3)),
    0 0 calc(120px * var(--light-wash-opacity, 0) * 8) rgba(var(--light-color-r, 255), var(--light-color-g, 255), var(--light-color-b, 255), calc(var(--light-wash-opacity, 0) * 1));
}

[data-light-active="1"] h2 {
  text-shadow:
    0 0 calc(40px * var(--light-wash-opacity, 0) * 12) rgba(var(--light-color-r, 255), var(--light-color-g, 255), var(--light-color-b, 255), calc(var(--light-wash-opacity, 0) * 2.5)),
    0 0 calc(80px * var(--light-wash-opacity, 0) * 8) rgba(var(--light-color-r, 255), var(--light-color-g, 255), var(--light-color-b, 255), calc(var(--light-wash-opacity, 0) * 0.8));
}

/* ═══ Light-Reactive Buttons ═══ */

[data-light-active="1"] .btn {
  box-shadow:
    0 0 20px rgba(var(--color-accent-rgb), calc(var(--light-wash-opacity, 0) * 5)),
    0 0 40px rgba(var(--color-accent-rgb), calc(var(--light-wash-opacity, 0) * 2)),
    0 2px 8px rgba(0, 0, 0, 0.3);
}

/* ═══ Light-Reactive Tags ═══ */

[data-light-active="1"] .tag {
  box-shadow:
    0 0 8px rgba(var(--color-accent-rgb), calc(var(--light-wash-opacity, 0) * 3)),
    0 0 20px rgba(var(--color-accent-rgb), calc(var(--light-wash-opacity, 0) * 1));
}

/* ═══ Light-Reactive Border Glow (Linear-style) ═══ */
/* A radial gradient masked to only show through the border area,
   creating the illusion of light catching the card's edge */

[data-light-active="1"]:not([data-world="retro"]):not([data-world="minimalist"]) .card.lit.light-active::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(
    var(--lit-glow-size, 600px) circle at var(--lit-glow-x, 50%) var(--lit-glow-y, 50%),
    rgba(var(--light-color-r, 255), var(--light-color-g, 255), var(--light-color-b, 255), calc(var(--lit-proximity, 0) * 0.6)) 0%,
    transparent 45%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
}

/* Surface glow — radial gradient on card background near light source */

[data-light-active="1"] .card.lit.light-active {
  background-image: radial-gradient(
    var(--lit-glow-size, 600px) circle at var(--lit-glow-x, 50%) var(--lit-glow-y, 50%),
    rgba(var(--light-color-r, 255), var(--light-color-g, 255), var(--light-color-b, 255), calc(var(--lit-proximity, 0) * 0.08)) 0%,
    transparent 45%
  );
}

/* Border glow for non-card .lit elements */

[data-light-active="1"] .about-photo.lit.light-active {
  border-color: rgba(var(--light-color-r, 255), var(--light-color-g, 255), var(--light-color-b, 255), calc(var(--lit-proximity, 0) * 0.15 + 0.06));
}

/* ═══ Film Grain Overlay ═══ */

.grain-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-overlay);
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' 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");
  background-size: 256px 256px;
  mix-blend-mode: overlay;
  transition: opacity var(--duration-slow) var(--ease-primary);
}

/* ═══ Scanline Overlay (Retro) ═══ */

.scanline-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-overlay);
  opacity: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.15) 2px,
    rgba(0, 0, 0, 0.15) 4px
  );
  transition: opacity var(--duration-slow) var(--ease-primary);
}

/* ═══ Editorial Decorations ═══ */

[data-world="editorial"] .hero-rule {
  display: block;
}

/* ═══ Brutalist Decorations ═══ */

/* Index numbers visible */
[data-world="brutalist"] .card-index {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-xs);
}

/* ═══ Organic Decorations ═══ */

/* Soft gradient background */
[data-world="organic"]::before {
  content: '';
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    ellipse at 30% 20%,
    rgba(123, 174, 127, 0.04) 0%,
    transparent 50%
  ),
  radial-gradient(
    ellipse at 70% 80%,
    rgba(212, 160, 85, 0.03) 0%,
    transparent 50%
  );
  pointer-events: none;
  z-index: -1;
  animation: organicDrift 30s ease-in-out infinite alternate;
}

@keyframes organicDrift {
  0% { transform: translate(0, 0) rotate(0deg); }
  100% { transform: translate(-3%, 2%) rotate(2deg); }
}

/* ═══ Retro Decorations ═══ */

/* Glow text on headings — enhanced when light is active */
[data-world="retro"] h1,
[data-world="retro"] h2 {
  text-shadow: 0 0 calc(20px * var(--glow-multiplier)) rgba(var(--color-accent-rgb), calc(0.2 * var(--glow-multiplier)));
}

[data-world="retro"][data-light-active="1"] h1,
[data-world="retro"][data-light-active="1"] h2 {
  text-shadow:
    0 0 calc(20px * var(--glow-multiplier)) rgba(var(--color-accent-rgb), calc(0.2 * var(--glow-multiplier))),
    0 0 calc(40px * var(--light-wash-opacity, 0) * 15) rgba(var(--light-color-r, 255), var(--light-color-g, 255), var(--light-color-b, 255), calc(var(--light-wash-opacity, 0) * 3));
}

/* Status dot */
[data-world="retro"] .card::after {
  content: '';
  position: absolute;
  top: var(--space-md);
  left: var(--space-md);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow:
    0 0 calc(8px * var(--glow-multiplier)) rgba(var(--color-accent-rgb), calc(0.4 * var(--glow-multiplier))),
    0 0 calc(16px * var(--glow-multiplier)) rgba(var(--color-accent-rgb), calc(0.15 * var(--glow-multiplier)));
}

/* ═══ Minimalist: Stripped Decorations ═══ */

[data-world="minimalist"] .grain-overlay {
  display: none;
}

[data-world="minimalist"] .hero-rule {
  display: none;
}


/* ═══ Ambient Animations ═══ */

@media (prefers-reduced-motion: no-preference) {
  [data-world="organic"] .card {
    animation: gentleFloat 6s ease-in-out infinite alternate;
    animation-delay: calc(var(--card-index, 0) * 0.5s);
    animation-duration: calc(6s / max(var(--motion-intensity), 0.1));
  }

  @keyframes gentleFloat {
    0% { transform: translateY(0); }
    100% { transform: translateY(calc(-3px * var(--motion-intensity))); }
  }

  [data-world="organic"]::before {
    animation-duration: calc(30s / max(var(--motion-intensity), 0.1));
  }

  [data-world="retro"] .card::after {
    animation: statusBlink 3s ease-in-out infinite;
    animation-duration: calc(3s / max(var(--motion-intensity), 0.1));
  }

  @keyframes statusBlink {
    0%, 90%, 100% { opacity: 1; }
    95% { opacity: 0.3; }
  }
}

/* Decorations respect decoration-opacity */
.grain-overlay,
.scanline-overlay {
  visibility: visible;
}

[data-world] .grain-overlay {
  opacity: calc(var(--grain-opacity) * var(--decoration-opacity));
}

[data-world="retro"] .scanline-overlay {
  opacity: calc(var(--scanline-opacity) * var(--decoration-opacity));
}

/* ═══ Light Type — Hide positional controls ═══ */

/* Exclude the Atelier panel from all light effects */
.atelier,
.atelier * {
  --lit-proximity: 0 !important;
  --lit-highlight-opacity: 0 !important;
  --lit-ambient-opacity: 0 !important;
  --lit-rim-opacity: 0 !important;
  text-shadow: none !important;
}

[data-light-type="directional"] .atelier-light-pad,
[data-light-type="ambient"] .atelier-light-pad {
  display: none;
}

/* ═══ Light Theme Overrides ═══ */

/* Grain: multiply blend for light backgrounds */
[data-theme="light"] .grain-overlay {
  mix-blend-mode: multiply;
  opacity: calc(var(--grain-opacity) * var(--decoration-opacity) * 0.5);
}

/* Scanlines: lighter for light theme */
[data-theme="light"][data-world="retro"] .scanline-overlay {
  background: repeating-linear-gradient(
    to bottom,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.05) 2px,
    rgba(0, 0, 0, 0.05) 4px
  );
}

/* Light-reactive highlights use warm tones in light theme */
[data-theme="light"][data-light-active="1"] h1 {
  text-shadow:
    0 0 calc(60px * var(--light-wash-opacity, 0) * 8) rgba(255, 248, 230, calc(var(--light-wash-opacity, 0) * 2)),
    0 0 calc(120px * var(--light-wash-opacity, 0) * 5) rgba(255, 248, 230, calc(var(--light-wash-opacity, 0) * 0.6));
}

[data-theme="light"][data-light-active="1"] h2 {
  text-shadow:
    0 0 calc(40px * var(--light-wash-opacity, 0) * 8) rgba(255, 248, 230, calc(var(--light-wash-opacity, 0) * 1.5)),
    0 0 calc(80px * var(--light-wash-opacity, 0) * 5) rgba(255, 248, 230, calc(var(--light-wash-opacity, 0) * 0.5));
}

/* Organic background gradient adapts to light theme */
[data-theme="light"][data-world="organic"]::before {
  background: radial-gradient(
    ellipse at 30% 20%,
    rgba(61, 138, 90, 0.06) 0%,
    transparent 50%
  ),
  radial-gradient(
    ellipse at 70% 80%,
    rgba(176, 128, 48, 0.04) 0%,
    transparent 50%
  );
}

/* ═══ Light Type Overrides ═══ */

/* Softbox: wider, softer surface reflection */
[data-light-type="softbox"] .lit.light-active::before {
  background:
    radial-gradient(
      ellipse at calc(var(--lit-highlight-x, 50) * 1%) calc(var(--lit-highlight-y, 50) * 1%),
      rgba(255, 255, 255, var(--lit-highlight-opacity)) 0%,
      rgba(255, 255, 255, calc(var(--lit-highlight-opacity) * 0.25)) 35%,
      transparent 80%
    ),
    linear-gradient(
      var(--lit-gradient-angle),
      rgba(255, 255, 255, calc(var(--lit-proximity) * 0.05)) 0%,
      transparent 50%,
      rgba(0, 0, 0, calc(var(--lit-proximity) * 0.06)) 100%
    ),
    radial-gradient(
      circle at calc(var(--lit-highlight-x, 50) * 1%) calc(var(--lit-highlight-y, 50) * 1%),
      rgba(255, 255, 255, calc(var(--lit-highlight-opacity) * 0.5)) 0%,
      transparent 35%
    );
  pointer-events: none;
  z-index: 1;
}

/* Directional: linear surface gradient instead of radial */
[data-light-type="directional"] .lit.light-active::before {
  background:
    linear-gradient(
      var(--lit-gradient-angle),
      rgba(255, 255, 255, var(--lit-highlight-opacity)) 0%,
      rgba(255, 255, 255, calc(var(--lit-highlight-opacity) * 0.4)) 30%,
      transparent 70%
    ),
    linear-gradient(
      var(--lit-gradient-angle),
      rgba(255, 255, 255, calc(var(--lit-proximity) * 0.12)) 0%,
      transparent 4%,
      transparent 96%,
      rgba(0, 0, 0, calc(var(--lit-proximity) * 0.05)) 100%
    );
  pointer-events: none;
  z-index: 1;
}

/* Ambient: centered, uniform glow — no directionality */
[data-light-type="ambient"] .lit.light-active::before {
  background:
    radial-gradient(
      ellipse at 50% 50%,
      rgba(255, 255, 255, var(--lit-highlight-opacity)) 0%,
      rgba(255, 255, 255, calc(var(--lit-highlight-opacity) * 0.3)) 40%,
      transparent 75%
    );
  pointer-events: none;
  z-index: 1;
}

/* ═══ Light Theme: Warm highlight pseudo-elements ═══ */

[data-theme="light"] [data-light-type="softbox"] .lit.light-active::before {
  background:
    radial-gradient(
      ellipse at calc(var(--lit-highlight-x, 50) * 1%) calc(var(--lit-highlight-y, 50) * 1%),
      rgba(255, 248, 230, var(--lit-highlight-opacity)) 0%,
      rgba(255, 248, 230, calc(var(--lit-highlight-opacity) * 0.2)) 35%,
      transparent 80%
    ),
    linear-gradient(
      var(--lit-gradient-angle),
      rgba(255, 248, 230, calc(var(--lit-proximity) * 0.04)) 0%,
      transparent 50%,
      rgba(0, 0, 0, calc(var(--lit-proximity) * 0.03)) 100%
    );
  pointer-events: none;
  z-index: 1;
}

[data-theme="light"] [data-light-type="directional"] .lit.light-active::before {
  background:
    linear-gradient(
      var(--lit-gradient-angle),
      rgba(255, 248, 230, var(--lit-highlight-opacity)) 0%,
      rgba(255, 248, 230, calc(var(--lit-highlight-opacity) * 0.3)) 30%,
      transparent 70%
    );
  pointer-events: none;
  z-index: 1;
}

[data-theme="light"] [data-light-type="ambient"] .lit.light-active::before {
  background:
    radial-gradient(
      ellipse at 50% 50%,
      rgba(255, 248, 230, var(--lit-highlight-opacity)) 0%,
      rgba(255, 248, 230, calc(var(--lit-highlight-opacity) * 0.25)) 40%,
      transparent 75%
    );
  pointer-events: none;
  z-index: 1;
}