/*
Theme Name: Authority of Ash
Theme URI: https://example.com
Author: Page Cle
Description: Custom theme for the Authority of Ash Cycle (Book + Game).
Version: 1.0.0
Text Domain: authority-of-ash
*/

/* =========================
   EFFECTS
   (effects.css — atmosphere, overlays, animations, reveal states, scroll states)
   Keep layout/grid in layout.css and component skins in components.css.
========================= */

/* =========================
   GLOBAL ATMOSPHERE LAYERS
========================= */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(1200px 900px at 75% 15%, rgba(123,210,255,.10), transparent 60%),
    radial-gradient(900px 700px at 20% 85%, rgba(255,255,255,.05), transparent 60%);
  animation: atmosphereShift 28s ease-in-out infinite alternate;
  z-index: -1;
}

@keyframes atmosphereShift{
  0%   { transform: scale(1);    opacity: .85; }
  100% { transform: scale(1.05); opacity: 1; }
}

body::after{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at center, transparent 55%, rgba(3,28,36,.40) 100%);
  z-index: -1;
}

/* =========================
   SYSTEM ONLINE (page load shimmer)
========================= */
body{
  animation: aoaOnline 900ms ease-out 1;
}

@keyframes aoaOnline{
  0%   { filter: blur(1.2px); opacity: .92; }
  100% { filter: blur(0);     opacity: 1; }
}

/* =========================
   ASH OVERLAY (two drift layers)
========================= */
.aoa-ash{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0; /* above gradients, below content */
  opacity: .42;
  mix-blend-mode: screen;
  filter: blur(.2px);
}

.aoa-ash::before,
.aoa-ash::after{
  content:"";
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.08) 0 1px, transparent 2px),
    radial-gradient(circle at 60% 70%, rgba(255,255,255,.06) 0 1px, transparent 2px),
    radial-gradient(circle at 80% 20%, rgba(255,255,255,.05) 0 1px, transparent 2px),
    radial-gradient(circle at 35% 80%, rgba(255,255,255,.05) 0 1px, transparent 2px);
  background-size: 260px 260px;
  animation: aoaAshDrift1 42s linear infinite;
  opacity: .55;
}

.aoa-ash::after{
  background-size: 320px 320px;
  animation: aoaAshDrift2 58s linear infinite;
  opacity: .38;
}

@keyframes aoaAshDrift1{
  0%   { transform: translate3d(-2%, -2%, 0); }
  100% { transform: translate3d( 2%,  3%, 0); }
}

@keyframes aoaAshDrift2{
  0%   { transform: translate3d( 3%,  2%, 0); }
  100% { transform: translate3d(-3%, -2%, 0); }
}

/* =========================
   ACTIVE SVG FIELD (background “runes”)
========================= */
.aoa-field{
  position: fixed;
  inset: -10%;
  pointer-events: none;
  z-index: 0;           /* below content, above gradients */
  opacity: .48;
  mix-blend-mode: screen;
  filter: blur(.15px);
}

.aoa-field svg{
  width: 120%;
  height: 120%;
  transform: rotate(-6deg) scale(1.02);
  opacity: 1;
}

.aoa-field .ring{
  stroke: rgba(123,210,255,.18);
  stroke-width: .8;
  fill: none;
}

.aoa-field .trace{
  stroke: rgba(255,255,255,.08);
  stroke-width: .6;
  fill: none;
  stroke-dasharray: 3 10;
  animation: aoaTrace 18s linear infinite;
  opacity: .8;
}

@keyframes aoaTrace{
  0%   { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -260; }
}

/* =========================
   FALLING ASH FLECKS (render-safe)
========================= */
.aoa-flecks{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .80;
  mix-blend-mode: normal;
}

.aoa-flecks::before,
.aoa-flecks::after{
  content:"";
  position:absolute;
  inset:-25% -15%;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.18) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,.12) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(123,210,255,.10) 0 1px, transparent 2px);
  background-size: 180px 180px, 240px 240px, 320px 320px;
  background-position: 0 0, 60px 90px, 120px 30px;
  filter: blur(.65px);
  animation: aoaFallA 36s linear infinite;
  opacity: .75;
}

.aoa-flecks::after{
  animation: aoaFallB 58s linear infinite;
  opacity: .70;
}

@keyframes aoaFallA{
  0%   { transform: translate3d(0,-10%,0); }
  100% { transform: translate3d(-4%, 16%,0); }
}

@keyframes aoaFallB{
  0%   { transform: translate3d( 3%,-14%,0); }
  100% { transform: translate3d( 5%, 18%,0); }
}

/* Safety: overlays never eat clicks */
.aoa-ash, .aoa-field, .aoa-flecks,
.aoa-ash::before, .aoa-ash::after,
.aoa-flecks::before, .aoa-flecks::after{
  pointer-events: none !important;
}

/* Keep overlays behind interactive UI */
main, .site-footer{
  position: relative;
  z-index: 1;
}

/* Ensure header contents are above any blending layers */
.site-header{
  z-index: 200;
}
.site-header .header-inner{
  position: relative;
  z-index: 210;
}

/* =========================
   SECTION GLOWS / DIVIDERS
========================= */
.section{
  position: relative;
}

.section::before{
  content:"";
  position:absolute;
  left: 20px;
  right: 20px;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(123,210,255,.18),
    transparent
  );
  opacity: .65;
}

.section::after{
  content:"";
  position:absolute;
  bottom:-1px;
  left:0;
  right:0;
  height:60px;
  pointer-events:none;
  background: linear-gradient(to bottom, transparent, rgba(3,28,36,.5));
}

/* Alternating faint wash */
.section:nth-of-type(even){
  background: rgba(255,255,255,.015);
}

/* =========================
   HEADER SCROLL STATE (JS toggles .is-scrolled)
========================= */
.site-header{
  transition: background .25s ease, border-color .25s ease;
}

.site-header.is-scrolled{
  background: rgba(3,28,36,.78);
  border-bottom-color: rgba(123,210,255,.18);
}

/* =========================
   HERO COVER FLOAT (desktop only)
========================= */
.cover{
  transform: translateZ(0);
}

@media (min-width: 901px){
  .cover img{
    animation: aoaFloat 8s ease-in-out infinite;
  }
}

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

/* =========================
   JS-ONLY REVEALS (SAFE)
   (Only activates when <html> has class="js")
========================= */
.js .card,
.js .hero-card{
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s ease, transform .8s ease;
}

.js .card.reveal,
.js .hero-card.reveal{
  opacity: 1;
  transform: translateY(0);
}

/* =========================
   HERO IMAGE MASK + HEADER OVERLAY (global hero)
========================= */
.site-hero-inner{
  /* image mask fade at bottom (works in Safari + modern browsers) */
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 62%,
    rgba(0,0,0,.55) 76%,
    rgba(0,0,0,0) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 62%,
    rgba(0,0,0,.55) 76%,
    rgba(0,0,0,0) 100%
  );
}

/* keep hero from blocking clicks */
.site-hero,
.site-hero *{
  pointer-events: none;
}

/* Make hero slide up behind the header (sticky-safe) */
.site-hero{
  margin-top: -86px;
  padding-top: 86px;
}

@media (max-width: 520px){
  .site-hero{
    margin-top: -120px;
    padding-top: 120px;
  }
}

/* =========================
   MOTION ACCESSIBILITY
========================= */
@media (prefers-reduced-motion: reduce){
  body,
  body::before,
  .aoa-ash::before,
  .aoa-ash::after,
  .aoa-flecks::before,
  .aoa-flecks::after,
  .aoa-field .trace,
  .cover img{
    animation: none !important;
    transition: none !important;
  }

  .js .card,
  .js .hero-card{
    opacity: 1 !important;
    transform: none !important;
  }
}