/* effects.css — Arkmora ambient effects layer
 * Gold particles, cursor glow, section sweep, scroll progress, hero light ray.
 * Designed to sit BELOW the character (z=800) but above content.
 */

/* ------------------------------------------------------------------ */
/* Shared canvas layer (atmospheric particles)                         */
/* ------------------------------------------------------------------ */
.fx-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 100;
}

.fx-atmosphere {
  mix-blend-mode: screen;
  opacity: 0.9;
}

/* ------------------------------------------------------------------ */
/* Cursor glow                                                         */
/* ------------------------------------------------------------------ */
.fx-cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 240px;
  height: 240px;
  pointer-events: none;
  z-index: 850;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(228, 196, 138, 0.18) 0%,
    rgba(228, 196, 138, 0.08) 35%,
    rgba(228, 196, 138, 0) 70%
  );
  mix-blend-mode: screen;
  transition: opacity 0.35s ease;
  will-change: transform;
}

.fx-cursor-glow.is-idle {
  animation: fxCursorPulse 2.4s ease-in-out infinite;
}

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

/* ------------------------------------------------------------------ */
/* Section reveal sweep line                                           */
/* ------------------------------------------------------------------ */
.fx-sweep-line {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  pointer-events: none;
  z-index: 5;
  background: linear-gradient(
    90deg,
    rgba(201, 169, 110, 0) 0%,
    rgba(201, 169, 110, 0.0) 10%,
    rgba(228, 196, 138, 0.85) 50%,
    rgba(201, 169, 110, 0.0) 90%,
    rgba(201, 169, 110, 0) 100%
  );
  transform: translateX(-100%);
  animation: fxSweepMove 1s ease-out forwards;
  box-shadow: 0 0 8px rgba(228, 196, 138, 0.45);
}

@keyframes fxSweepMove {
  0%   { transform: translateX(-100%); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateX(100%);  opacity: 0; }
}

/* ------------------------------------------------------------------ */
/* Scroll progress bar                                                 */
/* ------------------------------------------------------------------ */
.fx-scroll-progress {
  position: fixed;
  top: 0;
  right: 0;
  width: 3px;
  height: 100vh;
  background: rgba(201, 169, 110, 0.08);
  z-index: 860;
  pointer-events: none;
}

.fx-scroll-progress__fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    #c9a96e 0%,
    #e4c48a 100%
  );
  transform-origin: top center;
  transform: scaleY(0);
  box-shadow: 0 0 6px rgba(228, 196, 138, 0.55);
  will-change: transform;
}

@media (max-width: 768px) {
  .fx-scroll-progress { width: 1px; }
}

/* ------------------------------------------------------------------ */
/* Hero subtle light ray (CSS-only)                                    */
/* ------------------------------------------------------------------ */
.hero,
.hero-banner,
#hero,
[data-hero] {
  position: relative;
  isolation: isolate;
}

.hero::before,
.hero-banner::before,
#hero::before,
[data-hero]::before {
  content: "";
  position: absolute;
  inset: -10%;
  pointer-events: none;
  z-index: 1;
  background:
    linear-gradient(
      115deg,
      transparent 35%,
      rgba(228, 196, 138, 0.09) 48%,
      rgba(228, 196, 138, 0.05) 52%,
      transparent 65%
    );
  mix-blend-mode: screen;
  opacity: 0.7;
  animation: fxLightRay 14s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

@keyframes fxLightRay {
  0%   { transform: translateX(-6%) rotate(-0.5deg); opacity: 0.55; }
  50%  { transform: translateX(0%)   rotate(0deg);   opacity: 0.85; }
  100% { transform: translateX(6%)  rotate(0.5deg);  opacity: 0.55; }
}

/* ------------------------------------------------------------------ */
/* Motion / accessibility                                              */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .fx-canvas,
  .fx-cursor-glow,
  .fx-scroll-progress,
  .fx-sweep-line { display: none !important; }

  .hero::before,
  .hero-banner::before,
  #hero::before,
  [data-hero]::before { animation: none !important; opacity: 0 !important; }
}

/* Mobile: soften cursor glow (already hidden via JS) and particles */
@media (max-width: 768px) {
  .fx-atmosphere { opacity: 0.7; }
  .fx-cursor-glow { display: none; }
}