/* effects.css — auto-split from styles.css */
/* ===== GLOBAL POLISH: scroll progress + selection ===== */
#scrollProgress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  z-index: 100000;
  pointer-events: none;
  background: linear-gradient(90deg, #c9a056, #e8cc96, #f5e6c0);
  box-shadow: 0 0 12px rgba(232, 204, 150, 0.55), 0 0 2px rgba(232, 204, 150, 0.8);
  transform-origin: left center;
  transition: width 0.08s linear;
}

::selection {
  background: rgba(224, 192, 138, 0.35);
  color: #fffaf0;
}
::-moz-selection {
  background: rgba(224, 192, 138, 0.35);
  color: #fffaf0;
}

/* subtle global lift for main text readability */
.chapter-lead,
.site-promise,
.soft-end {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

/* softer focus for keyboard users */
:focus-visible {
  outline: 2px solid rgba(232, 204, 150, 0.65);
  outline-offset: 3px;
}
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
  outline: none;
}


/* ===== SPARK AMBIENT BOOST ===== */
.bg-item.star {
  font-size: 9px;
  filter: drop-shadow(0 0 6px rgba(232, 204, 150, 0.65));
  opacity: 0.85;
}
.bg-item.spark {
  box-shadow: 0 0 10px rgba(255, 250, 240, 0.55), 0 0 4px rgba(232, 204, 150, 0.4);
}


/* ===== CUSTOM SCROLL EXPERIENCE ===== */
html {
  scroll-snap-type: none !important;
  scroll-behavior: smooth;
}

.chapter {
  scroll-snap-align: none !important;
}

/* one-way soft rise + fade */
.reveal {
  opacity: 0;
  visibility: visible;
  transform: translate3d(0, 36px, 0) scale(0.985);
  filter: blur(2px);
  transition:
    opacity 0.95s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.95s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.95s cubic-bezier(0.22, 1, 0.36, 1) !important;
  will-change: opacity, transform, filter;
}
.reveal.show {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
  filter: blur(0) !important;
}

/* depth: dividers fade softer */
.divider {
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* background reacts to scroll (driven by --scroll and --scroll-vel) */
body::before {
  transition: opacity 0.4s ease;
}
body::after {
  transform: translate3d(
    calc(var(--scroll, 0) * -12px),
    calc(var(--scroll, 0) * 28px),
    0
  ) scale(calc(1 + var(--scroll, 0) * 0.04));
  opacity: calc(0.55 + var(--scroll, 0) * 0.35);
  transition: transform 0.15s linear, opacity 0.3s ease;
}

.background {
  transform: translate3d(0, calc(var(--scroll, 0) * -40px), 0);
  transition: transform 0.12s linear;
}

/* floating gold dust intensity with scroll */
.bg-item {
  opacity: calc(0.35 + var(--scroll, 0) * 0.25);
}

/* chapter ambient lift when in view */
.chapter.show {
  /* subtle local glow via outline shadow on section */
}

@media (max-width: 700px) {
  html { scroll-behavior: auto; }
  .reveal {
    transform: translate3d(0, 22px, 0) scale(1);
    filter: none;
    transition:
      opacity 0.6s ease,
      transform 0.6s ease !important;
  }
  .reveal.show {
    filter: none !important;
  }
  /* lighter parallax on mobile for performance */
  body::after {
    transform: none !important;
    transition: opacity 0.3s ease;
  }
  .background {
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  body::after,
  .background {
    transform: none !important;
  }
}


/* ===== BACKGROUND 1+3: warm night + gold dust + grain ===== */
body {
  background-color: #16130f !important;
  background-image:
    /* top warm bloom */
    radial-gradient(ellipse 110% 55% at 50% -5%, rgba(232, 204, 150, 0.22), transparent 58%),
    /* soft side glows */
    radial-gradient(ellipse 55% 50% at 8% 40%, rgba(212, 175, 119, 0.1), transparent 55%),
    radial-gradient(ellipse 50% 45% at 92% 58%, rgba(200, 150, 90, 0.09), transparent 52%),
    /* bottom lift */
    radial-gradient(ellipse 80% 45% at 50% 105%, rgba(180, 140, 80, 0.12), transparent 55%),
    /* base depth */
    linear-gradient(180deg, #1a1712 0%, #14110d 45%, #12100c 100%) !important;
  background-attachment: fixed;
}

/* stronger but soft film grain */
body::before {
  opacity: 0.55 !important;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.9 0 0 0 0 0.75 0 0 0 0 0.45 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") !important;
  background-size: 180px 180px;
}

/* slow drifting gold dust clouds */
body::after {
  background:
    radial-gradient(circle at 18% 28%, rgba(232, 204, 150, 0.09), transparent 32%),
    radial-gradient(circle at 78% 22%, rgba(245, 230, 192, 0.06), transparent 28%),
    radial-gradient(circle at 70% 68%, rgba(212, 175, 119, 0.08), transparent 36%),
    radial-gradient(circle at 30% 78%, rgba(232, 204, 150, 0.05), transparent 30%) !important;
  animation: ambientShift 22s ease-in-out infinite alternate, dustDrift 32s ease-in-out infinite alternate !important;
  opacity: 0.85 !important;
}
@keyframes dustDrift {
  from { filter: hue-rotate(-4deg); }
  to   { filter: hue-rotate(8deg); }
}

/* particle field a bit warmer */
.background {
  opacity: 0.9;
}
.bg-item {
  background: rgba(232, 204, 150, 0.55) !important;
  box-shadow: 0 0 8px rgba(232, 204, 150, 0.35);
}

@media (max-width: 700px) {
  body {
    background-attachment: scroll !important; /* iOS friendly */
  }
  body::before {
    opacity: 0.35 !important;
  }
  body::after {
    animation: ambientShift 22s ease-in-out infinite alternate !important; /* no hue filter on mobile */
  }
}


/* ===== SPARKS: no square glow, soft round only ===== */
.bg-item {
  background: transparent !important;
  box-shadow: none !important;
}
.bg-item.dot {
  width: 2.5px !important;
  height: 2.5px !important;
  border-radius: 50% !important;
  background: rgba(232, 204, 150, 0.75) !important;
  box-shadow: none !important;
  filter: drop-shadow(0 0 3px rgba(232, 204, 150, 0.55));
}
.bg-item.spark {
  width: 2px !important;
  height: 2px !important;
  border-radius: 50% !important;
  background: rgba(255, 250, 240, 0.85) !important;
  box-shadow: none !important;
  filter: drop-shadow(0 0 4px rgba(255, 250, 240, 0.65));
}
.bg-item.star {
  background: transparent !important;
  box-shadow: none !important;
  filter: drop-shadow(0 0 3px rgba(232, 204, 150, 0.55));
}




/* MOBILE PERF effects */
@media (max-width: 900px) {
  body::after {
    animation: none !important;
  }
  html {
    scroll-behavior: auto !important;
  }
}