/* ==========================================================
   ABOUT SECTION — consolidated stylesheet
   Purpose:
   1) Foggy green animated background (pseudo-elements)
   2) Readability overrides (text + surfaces on dark bg)
   3) Promotional blurb (feature callout)
   4) Thurisaz rune overlay (glow ~6s then fade once on enter)
   5) CTA (Victoria Register style, centered + ember glow)
   6) Mobile behavior (hide book-details panel)
   ========================================================== */


/* ==========================================================
   0) Mobile behavior
   ========================================================== */

@media (max-width: 980px){
  #about .about-book-img .book-details{
    display: none !important;
  }
}


/* ==========================================================
   1) Base + animated “foggy green” background
   ========================================================== */

#about.about{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: transparent; /* bg is painted by ::before/::after */

  /* optional: JS can nudge these for subtle parallax drift */
  --fog-x: 0%;
  --fog-y: 0%;
  --mist-x: 0%;
  --mist-y: 0%;
}

/* Background layer */
#about.about::before{
  content:"";
  position:absolute;
  inset:-20%;
  z-index:-2;
  pointer-events:none;

  background:
    /* fog lights */
    radial-gradient(1100px 650px at 18% 22%,
      rgba(160, 255, 215, 0.16),
      rgba(160, 255, 215, 0.00) 62%),
    radial-gradient(850px 560px at 78% 30%,
      rgba(90, 220, 175, 0.14),
      rgba(90, 220, 175, 0.00) 60%),
    radial-gradient(980px 760px at 55% 82%,
      rgba(60, 185, 145, 0.12),
      rgba(60, 185, 145, 0.00) 64%),

    /* deeper “cave” greens */
    radial-gradient(980px 740px at 10% 85%,
      rgba(12, 44, 32, 0.88),
      rgba(12, 44, 32, 0.00) 60%),

    /* base */
    linear-gradient(135deg,
      rgba(6, 14, 11, 0.99) 0%,
      rgba(9, 24, 18, 0.97) 30%,
      rgba(7, 18, 14, 0.99) 60%,
      rgba(5, 12, 9, 1.00) 100%);

  filter: blur(10px) saturate(118%);
  transform: translate3d(0,0,0);

  animation: aboutFogDrift 18s ease-in-out infinite;
}

/* Mist texture layer */
#about.about::after{
  content:"";
  position:absolute;
  inset:-10%;
  z-index:-2;
  pointer-events:none;

  background:
    radial-gradient(900px 520px at 30% 40%,
      rgba(255,255,255,0.07),
      rgba(255,255,255,0) 62%),
    radial-gradient(760px 520px at 70% 55%,
      rgba(255,255,255,0.06),
      rgba(255,255,255,0) 60%),
    radial-gradient(820px 560px at 55% 20%,
      rgba(200,255,232,0.05),
      rgba(200,255,232,0) 60%);

  filter: blur(18px);
  opacity: 0.95;
  animation: aboutMistPulse 13s ease-in-out infinite;
}

/* Keyframes: drift + optional JS offsets */
@keyframes aboutFogDrift{
  0%{
    transform:
      translate3d(calc(-1.6% + var(--fog-x)), calc(-1.1% + var(--fog-y)), 0)
      scale(1.03);
  }
  50%{
    transform:
      translate3d(calc(1.6% + var(--fog-x)), calc(1.2% + var(--fog-y)), 0)
      scale(1.07);
  }
  100%{
    transform:
      translate3d(calc(-1.6% + var(--fog-x)), calc(-1.1% + var(--fog-y)), 0)
      scale(1.03);
  }
}

@keyframes aboutMistPulse{
  0%{
    opacity: 0.78;
    transform:
      translate3d(calc(0% + var(--mist-x)), calc(0% + var(--mist-y)), 0)
      scale(1.03);
  }
  50%{
    opacity: 1;
    transform:
      translate3d(calc(1.2% + var(--mist-x)), calc(-0.8% + var(--mist-y)), 0)
      scale(1.07);
  }
  100%{
    opacity: 0.78;
    transform:
      translate3d(calc(0% + var(--mist-x)), calc(0% + var(--mist-y)), 0)
      scale(1.03);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  #about.about::before,
  #about.about::after{
    animation: none !important;
  }
}


/* ==========================================================
   2) Layering: keep content above background + rune
   ========================================================== */

#about .container{
  position: relative;
  z-index: 1;
}

/* If your template forces a light section bg */
#about.about.light-background{
  background: transparent !important;
}


/* ==========================================================
   3) Readability + surfaces (mint → smoky glass)
   ========================================================== */

#about.about{
  --about-text: rgba(236, 242, 238, 0.88);
  --about-muted: rgba(236, 242, 238, 0.68);
  --about-heading: rgba(248, 252, 249, 0.95);

  --about-surface: rgba(10, 20, 15, 0.55);
  --about-surface-2: rgba(8, 18, 14, 0.42);
  --about-border: rgba(190, 230, 210, 0.14);
  --about-shadow: 0 18px 44px rgba(0,0,0,0.26);
}

/* headings */
#about.about .about-book-content h2,
#about.about .about-book-content h3{
  color: var(--about-heading);
  text-shadow: 0 2px 18px rgba(0,0,0,0.60);
}

/* paragraphs */
#about.about .about-book-content p{
  color: var(--about-text);
  text-shadow: 0 1px 10px rgba(0,0,0,0.35);
}

/* category pills */
#about.about .about-book-content .book-category span{
  background: var(--about-surface-2);
  border: 1px solid var(--about-border);
  color: rgba(246, 252, 248, 0.90);
  box-shadow:
    0 10px 24px rgba(0,0,0,0.22),
    0 1px 0 rgba(255,255,255,0.05) inset;
  -webkit-backdrop-filter: blur(10px) saturate(115%);
  backdrop-filter: blur(10px) saturate(115%);
}

/* highlights cards */
#about.about .about-book-content .highlights ul li{
  background: var(--about-surface);
  border: 1px solid var(--about-border);
  box-shadow:
    0 14px 32px rgba(0,0,0,0.22),
    0 1px 0 rgba(255,255,255,0.05) inset;
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  backdrop-filter: blur(12px) saturate(120%);
}

#about.about .about-book-content .highlights ul li span{
  color: var(--about-text);
  text-shadow: 0 1px 10px rgba(0,0,0,0.30);
}

#about.about .about-book-content .highlights ul li i{
  color: color-mix(in srgb, var(--accent-color), white 12%);
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.35));
}

/* left image + details panel (when visible) */
#about.about .about-book-img img{
  box-shadow: 0 22px 60px rgba(0,0,0,0.38);
}

#about.about .about-book-img .book-details{
  background: var(--about-surface);
  border: 1px solid var(--about-border);
  box-shadow:
    var(--about-shadow),
    0 1px 0 rgba(255,255,255,0.05) inset;
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
}

#about.about .about-book-img .detail-item span{
  color: var(--about-muted);
}

#about.about .about-book-img .detail-item p{
  color: rgba(248, 252, 249, 0.92);
}

#about.about .about-book-img .detail-item i{
  color: color-mix(in srgb, var(--accent-color), white 10%);
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.35));
}


/* ==========================================================
   4) Typography + spacing tune-up (clamp-based)
   ========================================================== */

#about.about .about-book-content{
  --about-text-size: clamp(1.02rem, 0.35vw + 0.98rem, 1.18rem);
  --about-line: clamp(1.65, 0.2vw + 1.6, 1.8);
}

/* title */
#about.about .about-book-content h2{
  font-size: clamp(2.2rem, 2.2vw + 1.8rem, 3.1rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 clamp(0.6rem, 1vw, 1rem);
}

/* pills spacing */
#about.about .about-book-content .book-category{
  margin: 0 0 clamp(0.85rem, 1.3vw, 1.25rem);
  gap: 0.6rem;
}

#about.about .about-book-content .book-category span{
  font-size: clamp(0.92rem, 0.2vw + 0.88rem, 1.02rem);
  padding: 0.6em 0.9em;
}

/* body paragraphs */
#about.about .about-book-content > p{
  font-size: var(--about-text-size);
  line-height: var(--about-line);
  margin: 0 0 clamp(0.95rem, 1.25vw, 1.25rem);
  max-width: 68ch;
}

/* first paragraph gets a tiny lift */
#about.about .about-book-content > p:first-of-type{
  color: rgba(246, 251, 248, 0.92);
}

@media (max-width: 576px){
  #about.about .about-book-content{
    --about-text-size: 1.02rem;
  }
  #about.about .about-book-content h2{
    font-size: clamp(2rem, 6vw, 2.4rem);
  }
}


/* ==========================================================
   5) Promotional blurb (feature callout)
   ========================================================== */

#about.about .about-book-content .about-blurb{
  margin: 0 0 clamp(1rem, 1.6vw, 1.35rem);
  padding: clamp(1.1rem, 1.4vw, 1.5rem) clamp(1.15rem, 1.6vw, 1.75rem);
  border-radius: 16px;

  font-size: clamp(1.12rem, 1.3vw + 0.9rem, 1.55rem);
  line-height: 1.55;
  font-weight: 700;
  letter-spacing: 0.01em;

  color: rgba(252,254,252,0.94);
  background: rgba(10, 18, 14, 0.62);
  border: 1px solid rgba(210, 240, 225, 0.18);
  box-shadow: 0 14px 38px rgba(0,0,0,0.28);

  -webkit-backdrop-filter: blur(10px) saturate(115%);
  backdrop-filter: blur(10px) saturate(115%);
}

/* keep the manual <br> only on desktop if you still use it */
#about.about .about-book-content .about-blurb br{ display:none; }
@media (min-width: 992px){
  #about.about .about-book-content .about-blurb br{ display:inline; }
}


/* ==========================================================
   6) Thurisaz rune overlay (glow ~6s then fade once on enter)
   Requires JS to add: #about.rune-animate
   ========================================================== */

#about .about-rune{
  --rune-size: clamp(360px, 38vw, 680px);
  --rune-right: 8%;     /* higher = move left */
  --rune-top: 9%;       /* higher = move down */
  --rune-rotate: -10deg;

  position: absolute;
  right: var(--rune-right);
  top: var(--rune-top);
  width: var(--rune-size);
  height: auto;

  z-index: -1;          /* above bg (-2), below content (1) */
  pointer-events: none;

  opacity: 0;           /* hidden until triggered */
  transform: rotate(var(--rune-rotate));
  will-change: opacity, filter;
}

#about .about-rune svg{
  display:block;
  width:100%;
  height:auto;
  background: transparent;
  overflow: visible;
}

#about .about-rune .rune-shape{
  fill: rgba(255, 235, 190, 0.98);
  filter:
    drop-shadow(0 0 6px  rgba(255, 230, 160, 0.78))
    drop-shadow(0 0 14px rgba(255, 170,  70, 0.72))
    drop-shadow(0 0 30px rgba(255,  95,  25, 0.58))
    drop-shadow(0 0 58px rgba(255,  40,   0, 0.34));
}

/* Triggered once when #about enters viewport */
#about.rune-animate .about-rune{
  animation: runeGlowThenFade 10s ease-in-out forwards;
  animation-delay: 0.15s;
}

@keyframes runeGlowThenFade{
  0%   { opacity: 0; }
  12%  { opacity: 0.34; }
  60%  { opacity: 0.34; } /* ~6s hold */
  100% { opacity: 0; }
}

@media (max-width: 768px){
  #about .about-rune{
    --rune-size: clamp(240px, 62vw, 420px);
    --rune-right: 6%;
    --rune-top: 6%;
  }
  #about.rune-animate .about-rune{
    animation-name: runeGlowThenFadeMobile;
  }
  @keyframes runeGlowThenFadeMobile{
    0%   { opacity: 0; }
    12%  { opacity: 0.22; }
    60%  { opacity: 0.22; }
    100% { opacity: 0; }
  }
}

@media (prefers-reduced-motion: reduce){
  #about.rune-animate .about-rune{
    animation: none !important;
    opacity: 0;
  }
}


/* ==========================================================
   7) CTA — Victoria Register (new scoped button, centered)
   ========================================================== */

#about .about-cta-wrap{
  display: flex;
  justify-content: center;
  margin-top: 1.35rem;
}

#about .about-cta-victoria{
  all: unset;
  box-sizing: border-box;

  display: inline-block;
  padding: 14px 22px;
  min-width: 220px;
  text-align: center;

  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1;

  color: #fff;
  border: 2px solid var(--accent-color);
  border-radius: 0;          /* square */
  background: transparent;

  position: relative;
  overflow: hidden;
  z-index: 0;
  cursor: pointer;

  transition: transform .25s ease, color .35s ease, box-shadow .35s ease, border-color .35s ease;

  /* ember glow (animated) */
  animation: aboutCtaEmber 3.8s ease-in-out infinite;
  will-change: box-shadow, filter;
}

#about .about-cta-victoria i{
  margin-left: .5rem;
  font-size: 1rem;
  line-height: 1;
  vertical-align: -1px;
}

/* Victoria Register center-fill */
#about .about-cta-victoria::after{
  content:"";
  position:absolute;
  left: 50%;
  top: 50%;
  width: 150%;
  height: 0%;
  background: var(--accent-color);
  transform: translate(-50%, -50%);
  opacity: .5;
  z-index: -1;
  transition: height .75s ease, opacity .75s ease;
}

/* warm halo */
#about .about-cta-victoria::before{
  content:"";
  position:absolute;
  inset: -14px;
  z-index: -2;
  pointer-events: none;

  background:
    radial-gradient(60% 80% at 30% 35%, rgba(255, 210, 140, .22), rgba(255, 210, 140, 0) 70%),
    radial-gradient(70% 90% at 65% 55%, rgba(255, 110, 40, .18), rgba(255, 110, 40, 0) 72%),
    radial-gradient(80% 110% at 50% 70%, rgba(255, 55, 0, .12), rgba(255, 55, 0, 0) 75%);
  opacity: .65;
  filter: blur(10px);
}

/* hover/focus */
#about .about-cta-victoria:hover,
#about .about-cta-victoria:focus-visible{
  transform: translateY(-1px);
  animation-play-state: paused;
}

#about .about-cta-victoria:hover::after,
#about .about-cta-victoria:focus-visible::after{
  height: 140%;
  opacity: 1;
}

#about .about-cta-victoria:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--accent-color), white 35%);
  outline-offset: 3px;
}

/* ember animation */
@keyframes aboutCtaEmber{
  0%, 100%{
    box-shadow:
      0 0 14px rgba(255, 185, 95, .18),
      0 0 28px rgba(255, 90, 30, .14),
      0 0 50px rgba(255, 45, 0, .10);
    filter: saturate(1.05);
  }
  45%{
    box-shadow:
      0 0 18px rgba(255, 220, 140, .24),
      0 0 36px rgba(255, 120, 55, .20),
      0 0 64px rgba(255, 55, 0, .14);
    filter: saturate(1.15);
  }
  70%{
    box-shadow:
      0 0 12px rgba(255, 210, 120, .16),
      0 0 26px rgba(255, 95, 35, .13),
      0 0 52px rgba(255, 40, 0, .10);
    filter: saturate(1.08);
  }
}

@media (prefers-reduced-motion: reduce){
  #about .about-cta-victoria{
    animation: none !important;
  }
  #about .about-cta-victoria::before{
    display: none;
  }
  #about .about-cta-victoria,
  #about .about-cta-victoria::after{
    transition: none !important;
  }
  #about .about-cta-victoria::after{ display:none; }
  #about .about-cta-victoria:hover,
  #about .about-cta-victoria:focus-visible{
    background: var(--accent-color);
  }
}


  /* =========================================================
     ABOUT — layout + stacking
  ========================================================= */
  #about{
    position: relative;
    overflow: hidden;
  }

  #about .container,
  #about .about-book-content{
    position: relative;
    z-index: 2;
  }

  #about .about-book-content{
    isolation: isolate;
  }

  #about .about-book-content > *:not(.rune-test){
    position: relative;
    z-index: 2;
  }

  /* =========================================================
     ABOUT — rune placement
  ========================================================= */
  #about .rune-test{
    position: absolute;
    top: 40%;
    left: 18%;
    transform: translate(-18%, -50%);
    z-index: 0;
    width: 900px;
    aspect-ratio: 397 / 371;
    margin: 0;
    display: block;
    max-width: none;
    pointer-events: none;
    overflow: visible;
  }

  #about .rune-test img{
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    outline: none;
    user-select: none;
    -webkit-user-drag: none;
  }

  /* =========================================================
     ABOUT — rune layers (idle by default)
  ========================================================= */
  #about .rune-test .rune-halo,
  #about .rune-test .rune-soft,
  #about .rune-test .rune-glow,
  #about .rune-test .rune-core{
    will-change: opacity, transform, filter;
    animation: none;
  }

  #about .rune-test .rune-halo{
    opacity: 0;
    transform: scale(1.12);
    filter: blur(42px) brightness(2.2);
    mix-blend-mode: screen;
  }

  #about .rune-test .rune-soft{
    opacity: 0;
    transform: scale(1.08);
    filter: blur(28px) brightness(2);
    mix-blend-mode: screen;
  }

  #about .rune-test .rune-glow{
    opacity: 0;
    transform: scale(1.05);
    filter: blur(18px) brightness(2.4);
    mix-blend-mode: screen;
  }

  #about .rune-test .rune-core{
    opacity: 0;
    filter: brightness(1);
  }

  /* =========================================================
     ABOUT — rune animation trigger
     Add .rune-animate to #about when section enters viewport
  ========================================================= */
  #about.rune-animate .rune-test .rune-halo{
    animation: rune-halo-bloom 30s ease-out forwards;
  }

  #about.rune-animate .rune-test .rune-soft{
    animation: rune-soft-bloom 30s ease-out forwards;
  }

  #about.rune-animate .rune-test .rune-glow{
    animation: rune-glow-bloom 30s ease-in-out forwards;
  }

  #about.rune-animate .rune-test .rune-core{
    animation: rune-core-bloom 30s ease-in forwards;
  }

  /* =========================================================
     ABOUT — animations
  ========================================================= */
  @keyframes rune-core-bloom{
    0%{
      opacity: 0;
      filter: brightness(1) saturate(1);
    }
    15%{
      opacity: 0.30;
      filter: brightness(1.9) saturate(0.9);
    }
    28%{
      opacity: 0.70;
      filter: brightness(2.6) saturate(0.8);
    }
    38%{
      opacity: 0.55;
      filter: brightness(2) saturate(0.95);
    }
    52%{
      opacity: 0.68;
      filter: brightness(1.35) sepia(1) saturate(4.5) hue-rotate(-18deg);
    }
    78%{
      opacity: 0.68;
      filter: brightness(1.1) sepia(1) saturate(6) hue-rotate(-24deg);
    }
    100%{
      opacity: 0;
      filter: brightness(1) saturate(1);
    }
  }

  @keyframes rune-glow-bloom{
    0%{
      opacity: 0;
      transform: scale(1);
      filter: blur(8px) brightness(1.2);
    }
    18%{
      opacity: 0.45;
      transform: scale(1.03);
      filter: blur(16px) brightness(2.8);
    }
    28%{
      opacity: 1;
      transform: scale(1.06);
      filter: blur(24px) brightness(4.2);
    }
    40%{
      opacity: 0.60;
      transform: scale(1.04);
      filter: blur(18px) brightness(2.6);
    }
    55%{
      opacity: 0.90;
      transform: scale(1.05);
      filter: blur(22px) brightness(2) sepia(0.45) saturate(3) hue-rotate(-10deg);
    }
    78%{
      opacity: 0.95;
      transform: scale(1.04);
      filter: blur(20px) brightness(1.7) sepia(1) saturate(6.5) hue-rotate(-24deg);
    }
    100%{
      opacity: 0;
      transform: scale(1);
      filter: blur(10px) brightness(1);
    }
  }

  @keyframes rune-halo-bloom{
    0%{
      opacity: 0;
      transform: scale(1.04);
      filter: blur(18px) brightness(1);
    }
    20%{
      opacity: 0.20;
      transform: scale(1.08);
      filter: blur(34px) brightness(2.4);
    }
    30%{
      opacity: 0.70;
      transform: scale(1.14);
      filter: blur(52px) brightness(4.8);
    }
    42%{
      opacity: 0.32;
      transform: scale(1.10);
      filter: blur(36px) brightness(2.2);
    }
    58%{
      opacity: 0.55;
      transform: scale(1.12);
      filter: blur(44px) brightness(1.9) sepia(0.55) saturate(4) hue-rotate(-12deg);
    }
    78%{
      opacity: 0.62;
      transform: scale(1.12);
      filter: blur(46px) brightness(1.5) sepia(1) saturate(7) hue-rotate(-25deg);
    }
    100%{
      opacity: 0;
      transform: scale(1.05);
      filter: blur(20px) brightness(1);
    }
  }

  @keyframes rune-soft-bloom{
    0%{
      opacity: 0;
      transform: scale(1.02);
      filter: blur(14px) brightness(1.1);
    }
    20%{
      opacity: 0.28;
      transform: scale(1.05);
      filter: blur(24px) brightness(2.2);
    }
    32%{
      opacity: 0.72;
      transform: scale(1.09);
      filter: blur(34px) brightness(3.1);
    }
    46%{
      opacity: 0.40;
      transform: scale(1.07);
      filter: blur(26px) brightness(2);
    }
    60%{
      opacity: 0.58;
      transform: scale(1.08);
      filter: blur(30px) brightness(1.8) sepia(0.45) saturate(3.2) hue-rotate(-12deg);
    }
    80%{
      opacity: 0.60;
      transform: scale(1.08);
      filter: blur(30px) brightness(1.5) sepia(1) saturate(5.5) hue-rotate(-24deg);
    }
    100%{
      opacity: 0;
      transform: scale(1.03);
      filter: blur(16px) brightness(1);
    }
  }

  /* =========================================================
     ABOUT — accessibility / reduced motion
  ========================================================= */
  @media (prefers-reduced-motion: reduce){
    #about .rune-test .rune-halo,
    #about .rune-test .rune-soft,
    #about .rune-test .rune-glow,
    #about .rune-test .rune-core{
      animation: none;
      opacity: 0.18;
      filter: none;
      transform: none;
    }
  }

  /* =========================================================
     ABOUT — responsive
  ========================================================= */
  @media (max-width: 991.98px){
    #about .rune-test{
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 520px;
    }
  }