/* ══════════════════════════════════════════════════════
   MinedFruitOS — Living Book System Styles
   Page-curl, breathing pulse, golden particles, bloom
   ══════════════════════════════════════════════════════ */

/* ── PARTICLE CANVAS (fixed, full-viewport, pointer-none) ── */
#bookParticleCanvas {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  pointer-events: none;
  z-index: 5;
  opacity: 0.75;
}

/* ── BREATH OVERLAY (fixed, behind particles) ── */
#bookBreathOverlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 4;
  transition: background 0.3s ease;
}

/* ── HERO HEARTBEAT ── */
#heroHeartbeat {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse 70% 50% at 50% 60%, rgba(196,30,58,0) 0%, rgba(196,30,58,0) 100%);
  transition: background 0.08s ease;
}
#heroHeartbeat.hb-pulse {
  background: radial-gradient(ellipse 70% 50% at 50% 60%, rgba(196,30,58,0.09) 0%, transparent 70%);
  transition: background 0.04s ease;
}

/* ── BOOK PAGE BASE ── */
.book-page {
  position: relative;
  transform-origin: top center;
  transition:
    transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow 0.9s ease;
  will-change: transform;
}

/* ── PAGE CURL ANIMATIONS ── */
@keyframes curlUp {
  0%   { transform: perspective(1200px) rotateX(0deg) scaleY(1);   box-shadow: none; }
  25%  { transform: perspective(1200px) rotateX(4deg) scaleY(0.98); box-shadow: 0 20px 60px rgba(0,0,0,0.6); }
  50%  { transform: perspective(1200px) rotateX(8deg) scaleY(0.96); box-shadow: 0 30px 80px rgba(0,0,0,0.7); }
  75%  { transform: perspective(1200px) rotateX(3deg) scaleY(0.99); box-shadow: 0 10px 30px rgba(0,0,0,0.4); }
  100% { transform: perspective(1200px) rotateX(0deg) scaleY(1);   box-shadow: none; }
}

@keyframes curlDown {
  0%   { transform: perspective(1200px) rotateX(0deg)  scaleY(1);   box-shadow: none; }
  25%  { transform: perspective(1200px) rotateX(-4deg) scaleY(0.98); box-shadow: 0 -20px 60px rgba(0,0,0,0.5); }
  50%  { transform: perspective(1200px) rotateX(-7deg) scaleY(0.97); box-shadow: 0 -30px 80px rgba(0,0,0,0.6); }
  75%  { transform: perspective(1200px) rotateX(-2deg) scaleY(0.99); box-shadow: 0 -10px 30px rgba(0,0,0,0.3); }
  100% { transform: perspective(1200px) rotateX(0deg)  scaleY(1);   box-shadow: none; }
}

/* Corner peel pseudo-element */
.book-page::after {
  content: '';
  position: absolute;
  bottom: 0; right: 0;
  width: 0; height: 0;
  border-style: solid;
  border-width: 0 0 0 0;
  border-color: transparent transparent rgba(255,255,255,0.06) transparent;
  transition: border-width 0.4s ease;
  pointer-events: none;
  z-index: 10;
}
.book-page.curl-up::after,
.book-page.curl-down::after {
  border-width: 0 0 40px 40px;
}

.book-page.curl-up {
  animation: curlUp 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
.book-page.curl-down {
  animation: curlDown 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* ── SCROLL BLOOM — sections ignite as user arrives ── */
[data-book-page] {
  position: relative;
}

/* Bloom state: dark → cinematic backdrop → glow border */
[data-book-page]:not(.bloomed) {
  /* Not yet bloomed — inherit existing dark look */
}

[data-book-page].blooming {
  /* Mid-bloom — border radiates outward */
}

[data-book-page].bloomed::before {
  content: '';
  position: absolute;
  inset: -1px;
  border: 1px solid rgba(196, 30, 58, 0);
  pointer-events: none;
  z-index: 1;
  animation: bloomBorder 1.4s ease forwards;
}

@keyframes bloomBorder {
  0%   { border-color: rgba(196, 30, 58, 0);    box-shadow: none; }
  30%  { border-color: rgba(196, 30, 58, 0.35); box-shadow: 0 0 40px rgba(196,30,58,0.12) inset, 0 0 25px rgba(196,30,58,0.08); }
  60%  { border-color: rgba(196, 30, 58, 0.2);  box-shadow: 0 0 20px rgba(196,30,58,0.06) inset; }
  100% { border-color: rgba(196, 30, 58, 0);    box-shadow: none; }
}

/* ── TEXT MATERIALIZE — words appear through light ── */
[data-materialize] {
  opacity: 0;
  filter: blur(8px) brightness(1.5);
  transform: translateY(10px);
  transition:
    opacity 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    filter 0.9s ease,
    transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

[data-materialize].materialized {
  opacity: 1;
  filter: blur(0) brightness(1);
  transform: translateY(0);
}

/* ── PULSING CTA BUTTONS ── */
.btn-pulse {
  --heartbeat-ms: 1034ms; /* 58bpm default, overridden by JS */
  animation: ctaHeartbeat var(--heartbeat-ms) ease-in-out infinite;
}

@keyframes ctaHeartbeat {
  0%   { box-shadow: 0 0 0 0 rgba(196, 30, 58, 0); }
  10%  { box-shadow: 0 0 0 6px rgba(196, 30, 58, 0.18); }
  20%  { box-shadow: 0 0 0 0 rgba(196, 30, 58, 0); }
  30%  { box-shadow: 0 0 0 4px rgba(196, 30, 58, 0.1); }
  40%  { box-shadow: 0 0 0 0 rgba(196, 30, 58, 0); }
  100% { box-shadow: 0 0 0 0 rgba(196, 30, 58, 0); }
}

/* ── PAPER GRAIN on sections ── */
.paper-grain-active::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='pg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23pg)' opacity='0.025'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

/* ── AUDIO TOGGLE BUTTON ── */
#bookAudioToggle {
  position: fixed;
  bottom: 84px; /* above bottom nav */
  right: 16px;
  z-index: 995;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(8, 6, 6, 0.88);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(196, 30, 58, 0.3);
  color: rgba(240, 236, 228, 0.7);
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
  box-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
#bookAudioToggle:hover {
  border-color: rgba(196, 30, 58, 0.6);
  background: rgba(20, 10, 12, 0.95);
  transform: scale(1.08);
}
#bookAudioToggle:active { transform: scale(0.95); }

/* ── PAGE NUMBER INDICATOR ── */
#bookPageIndicator {
  position: fixed;
  top: 50%;
  right: 14px;
  transform: translateY(-50%) translateX(60px);
  z-index: 994;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  color: rgba(240,236,228,0.35);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transition: transform 0.4s ease, opacity 0.4s ease;
  opacity: 0;
  user-select: none;
}
#bookPageIndicator.visible {
  transform: translateY(-50%) translateX(0);
  opacity: 1;
}

/* ── BOOK SPINE LINE ── */
.book-spine {
  position: fixed;
  right: 34px;
  top: 15vh;
  bottom: 15vh;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(196,30,58,0.2) 20%, rgba(201,168,76,0.15) 50%, rgba(196,30,58,0.2) 80%, transparent);
  z-index: 993;
  pointer-events: none;
}

/* ── MOBILE: hide spine and page indicator ── */
@media (max-width: 768px) {
  #bookAudioToggle { bottom: 76px; right: 12px; }
  .book-spine { display: none; }
  #bookPageIndicator { display: none; }
  #bookParticleCanvas { opacity: 0.5; }
}

/* ── REDUCE MOTION: kill animations ── */
@media (prefers-reduced-motion: reduce) {
  .book-page.curl-up,
  .book-page.curl-down { animation: none; }
  [data-materialize] { opacity: 1; filter: none; transform: none; transition: none; }
  .btn-pulse { animation: none; }
  #heroHeartbeat { display: none; }
  #bookParticleCanvas { display: none; }
  #bookBreathOverlay { display: none; }
  [data-book-page].bloomed::before { animation: none; }
}