/* ==========================================================
   hero-adjustments.css
   Purpose:
   - Hero scroll-zoom background + header transparency
   - Hero text readability (subtle glass + title lift)
   - 3D book cover (CodePen-true) + responsive hide
   Notes:
   - This file is meant to be loaded AFTER assets/css/main.css
   - Keep edits in the “TUNABLES” blocks when possible
   ========================================================== */

/* ==========================================================
   1) HEADER OVER HERO
   - Removes the “strip” by making header transparent while at top
   - Restores normal header styling after scroll (.scrolled is your template hook)
   ========================================================== */

/* While at top of page (no .scrolled), keep header transparent over hero */
#header.header,
#header.header .container-fluid{
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

#header.header::before,
#header.header::after{
  content: none !important;
  display: none !important;
}

/* After leaving top (template adds .scrolled to body) */
.scrolled #header.header{
  background: var(--background-color) !important;
  background-color: var(--background-color) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%) !important;
}


/* ==========================================================
   2) HERO SCROLL-ZOOM BACKGROUND (NO JS)
   - Pins hero for 1 viewport, animates, then RELEASES
   - Uses ABSOLUTE layers (NOT fixed) so it doesn’t “stick forever”
   - Requires hero markup:
     <section id="hero" class="hero section hero-scroll">
       <div class="hero-scroll__sticky">
         <img class="hero-scroll__scene" ...>
         <img class="hero-scroll__starship" ...>
         <div class="container">...</div>
       </div>
     </section>
   ========================================================== */

/* --- TUNABLES --- */
:root{
  --hero-stage-height: 200vh;   /* scroll distance for the effect */
  --header-h: 72px;             /* match your .header min-height */
  --hero-pad-top: 120px;        /* original hero padding-top */
  --hero-pad-bot: 80px;         /* original hero padding-bottom */
  --hero-pad-top-992: 100px;
  --hero-pad-bot-992: 60px;
  --hero-pad-top-768: 80px;
  --hero-pad-bot-768: 40px;
}

/* 1) Turn hero into a scroll stage */
#hero.hero.hero-scroll{
  padding: 0 !important;              /* move spacing to sticky frame */
  height: var(--hero-stage-height);
  position: relative;
  overflow: clip;
}

/* 2) Sticky “viewport frame” (pins then releases) */
#hero.hero.hero-scroll .hero-scroll__sticky{
  position: sticky;
  top: 0;

  /* Fill behind header (no strip) */
  height: calc(100vh + var(--header-h));
  margin-top: calc(var(--header-h) * -1);

  overflow: hidden;
  box-sizing: border-box;

  /* Restore original hero spacing WITHOUT shifting text unexpectedly */
  padding:
    calc(var(--hero-pad-top) + var(--header-h))
    0
    var(--hero-pad-bot);
}

/* 3) Background layers (ABSOLUTE so they release) */
#hero.hero.hero-scroll .hero-scroll__scene,
#hero.hero.hero-scroll .hero-scroll__starship{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  width: 100%;
  height: 100%;
  object-fit: cover;

  pointer-events: none;
}

/* Animate layers */
#hero.hero.hero-scroll .hero-scroll__scene{
  z-index: 1;
  animation: heroUnblur linear forwards;
  animation-timeline: scroll(root);
  animation-range: 0vh 100dvh;
}

#hero.hero.hero-scroll .hero-scroll__starship{
  z-index: 2;
  animation: heroUpscale linear forwards;
  animation-timeline: scroll(root);
  animation-range: 0vh 60vh;
}

/* Keep hero content above images */
#hero.hero.hero-scroll .container{
  position: relative;
  z-index: 5;
}
#hero.hero.hero-scroll .book-cover{
  position: relative;
  z-index: 6;
}

/* Keyframes */
@keyframes heroUnblur{
  0%{
    filter: blur(10px);
    transform: translate(-50%, -50%) scale(1.1);
  }
  100%{
    filter: blur(0px);
    transform: translate(-50%, -50%) scale(1.4);
  }
}

@keyframes heroUpscale{
  0%{
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  95%{
    transform: translate(-50%, -50%) scale(5);
    opacity: 1;
  }
  100%{
    transform: translate(-50%, -50%) scale(5);
    opacity: 1;
  }
}

/* Responsive padding (match your site breakpoints) */
@media (max-width: 992px){
  #hero.hero.hero-scroll .hero-scroll__sticky{
    padding:
      calc(var(--hero-pad-top-992) + var(--header-h))
      0
      var(--hero-pad-bot-992);
  }
}

@media (max-width: 768px){
  #hero.hero.hero-scroll .hero-scroll__sticky{
    padding:
      calc(var(--hero-pad-top-768) + var(--header-h))
      0
      var(--hero-pad-bot-768);
  }
}


/* ==========================================================
   3) HERO TEXT READABILITY (SUBTLE, ON-THEME)
   - Soft wash behind text stack (contained)
   - Green-tinted glass behind the long description only
   ========================================================== */

/* Create a contained stacking context so overlay stays local */
#hero .book-hero-content{
  position: relative;
  isolation: isolate;
}

/* Soft “wash” behind the whole text stack (very subtle) */
#hero .book-hero-content::before{
  content:"";
  position:absolute;
  inset: -1.25rem -1.5rem;
  z-index: -1;

  background:
    radial-gradient(120% 140% at 15% 20%,
      rgba(120, 170, 140, .22),
      rgba(120, 170, 140, 0) 60%),
    linear-gradient(180deg,
      rgba(10, 18, 16, .38),
      rgba(10, 18, 16, .18));

  border-radius: 18px;

  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);

  box-shadow:
    0 10px 30px rgba(0,0,0,.22),
    0 0 0 1px rgba(255,255,255,.06) inset;
}

/* If blur isn’t supported, still readable */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  #hero .book-hero-content::before{
    background: rgba(10, 18, 16, .55);
  }
}

/* Title/subtitle subtle lift (no hard outlines) */
#hero .book-hero-content h1,
#hero .book-hero-content .book-subtitle{
  text-shadow:
    0 2px 10px rgba(0,0,0,.35),
    0 1px 2px rgba(0,0,0,.35);
}

/* Subtitle: slightly clearer against image */
#hero .book-hero-content .book-subtitle{
  color: color-mix(in srgb, var(--contrast-color), transparent 12%);
}

/* Green glass panel behind long description */
#hero .book-hero-content .book-description{
  max-width: 46ch;
  padding: 0.9em 1.05em;
  border-radius: 14px;
  line-height: 1.65;

  background: color-mix(in srgb, rgba(18, 38, 28, 0.52), transparent 35%);
  border: 1px solid color-mix(in srgb, rgba(190, 230, 205, 0.28), transparent 35%);

  box-shadow:
    0 10px 26px rgba(0,0,0,0.18),
    0 1px 0 rgba(255,255,255,0.06) inset;

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

  color: color-mix(in srgb, var(--default-color), white 12%);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  #hero .book-hero-content .book-description{
    background: rgba(10, 20, 14, 0.68);
  }
}

@media (max-width: 768px){
  #hero .book-hero-content .book-description{
    max-width: none;
    padding: 0.85em 1em;
    border-radius: 12px;
  }
}

/* Desktop-only title/subtitle bump */
@media (min-width: 992px){
  #hero .book-hero-content h1{
    font-size: clamp(3.1rem, 3.8vw, 4.1rem);
    line-height: 1.06;
  }

  #hero .book-hero-content .book-subtitle{
    font-size: clamp(1.35rem, 1.6vw, 1.7rem);
    line-height: 1.25;
    margin-top: 0.35em;
  }
}


/* ==========================================================
   4) HERO 3D BOOK — CodePen-true model (NO HOVER)
   - Spine (z=2) behind cover
   - Pages (z=3) behind cover
   - Face (z=5) on top
   - Adds lift shadow + subtle rim/spec
   ========================================================== */

/* --- TUNABLES (change these first) --- */
#hero .book-cover.libro{
  --book-w: 276px;
  --book-h: 375px;

  --book-scale: 1.32;
  --book-squash-x: 0.88;
  --book-squash-y: 0.95;

  --book-perspective: 150px;
  --book-tilt: -4deg;

  --spine-color: #89221B;
  --page-color: #F5F5F5;

  --lift-1: 0 28px 55px rgba(0,0,0,.45);
  --lift-2: 0 10px 20px rgba(0,0,0,.28);
  --rim: rgba(255,255,255,.08);
  --edge: rgba(0,0,0,.25);

  width: var(--book-w);
  height: var(--book-h);
  margin: 0;
  position: relative;

  perspective: var(--book-perspective);
  perspective-origin: right center;
  transform-style: preserve-3d;

  transform:
    scale(var(--book-scale))
    scaleX(var(--book-squash-x))
    scaleY(var(--book-squash-y));
  transform-origin: center right;

  filter: drop-shadow(var(--lift-1)) drop-shadow(var(--lift-2));
}

/* Cover face (clips cover art) */
#hero .book-cover.libro .libro__face{
  position: absolute;
  inset: 0;
  border-radius: 10px;
  overflow: hidden;
  z-index: 5;
  transform: rotateY(var(--book-tilt)) translateZ(0);
  box-shadow:
    0 0 0 1px var(--rim) inset,
    0 0 0 1px var(--edge);
}

/* Spec highlight */
#hero .book-cover.libro .libro__face::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(120% 90% at 20% 10%, rgba(255,255,255,.14), rgba(255,255,255,0) 55%),
    linear-gradient(120deg, rgba(255,255,255,.06), rgba(255,255,255,0) 40%);
  mix-blend-mode: screen;
  opacity: .75;
}

#hero .book-cover.libro .libro__face img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Spine + pages */
#hero .book-cover.libro::before,
#hero .book-cover.libro::after{
  content:"";
  position:absolute;
  top:0;
}

/* Spine (behind cover) */
#hero .book-cover.libro::before{
  height: 100%;
  width: 40px;
  right: -25px;
  background: var(--spine-color);
  z-index: 2;
  transform: rotateY(var(--book-tilt)) translateZ(0);
  box-shadow:
    -8px 0 18px rgba(0,0,0,.25) inset,
    0 0 0 1px rgba(0,0,0,.18);
}

/* Pages (behind cover, above spine) */
#hero .book-cover.libro::after{
  height: 98%;
  width: 30px;
  right: -19px;
  top: 1%;
  z-index: 3;
  background: var(--page-color);
  box-shadow:
    0 1px 4px rgba(0, 0, 0, 0.10),
    18px 3px 20px rgba(0, 0, 0, 0.25) inset;
  perspective: 5px;
  transform: rotateY(20deg) translateZ(5px);
}

/* Ground shadow slab */
#hero .book-cover.libro > span{
  display:block;
  position:absolute;
  bottom:-13px;
  right:-110px;
  width:200px;
  height:100px;
  background-image: linear-gradient(transparent, rgba(0,0,0,.10) 15%);
  border-radius: 15px;
  box-shadow: 5px 12px 15px 5px rgba(0,0,0,.10);
  transform: rotate(5deg) skew(-35deg);
}

/* Hide the 3D book at 980px and below (also covers mobile) */
@media (max-width: 980px){
  #hero .book-cover.libro{
    display: none !important;
  }
}



/* ==========================================================
   HERO CTA — Victoria Register + ember glow (matches About)
   - Square outline, transparent fill, center-fill on hover
   - Primary + Outline variants
   - Uses your site font + --accent-color
   ========================================================== */

#hero .hero-cta{
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

/* Base button */
#hero .hero-cta-btn.hero-cta-victoria{
  all: unset;
  box-sizing: border-box;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;

  padding: 14px 22px;
  min-height: 46px;

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

  cursor: pointer;
  text-decoration: none;

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

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

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

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

#hero .hero-cta-btn.hero-cta-victoria i{
  font-size: 1rem;
  line-height: 1;
  vertical-align: -1px;
}

/* Victoria Register “center fill” */
#hero .hero-cta-btn.hero-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 behind button */
#hero .hero-cta-btn.hero-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);
}

/* Primary variant (readable on hero) */
#hero .hero-cta-btn.hero-cta-primary{
  color: #fff;
}

/* Outline variant (a touch softer text) */
#hero .hero-cta-btn.hero-cta-outline{
  color: rgba(255,255,255,0.92);
  border-color: color-mix(in srgb, var(--accent-color), white 10%);
}

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

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

/* Make sure text stays white even when filled */
#hero .hero-cta-btn.hero-cta-victoria:hover,
#hero .hero-cta-btn.hero-cta-victoria:focus-visible{
  color: #fff;
}

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

/* ember animation */
@keyframes heroCtaEmber{
  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);
  }
}

/* Mobile: stack + full-width for easy tapping */
@media (max-width: 576px){
  #hero .hero-cta{
    flex-direction: column;
    align-items: stretch;
  }
  #hero .hero-cta-btn.hero-cta-victoria{
    width: 100%;
  }
}

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

/* Center the CTA row (desktop/tablet) */
#hero .hero-cta{
  justify-content: center;   /* <- centers the buttons */
}

/* Mobile: stack, but DON'T stretch full width */
@media (max-width: 576px){
  #hero .hero-cta{
    flex-direction: column;
    align-items: center;     /* <- centers each button */
  }

  #hero .hero-cta-btn.hero-cta-victoria{
    width: auto !important;  /* <- stop full-width */
    min-width: min(320px, 90vw); /* <- nice tap target, not edge-to-edge */
  }
}




/* HERO — Author block (centered + a little bigger, nicely clamped) */
#hero .book-hero-content .author{
  display: flex;
  flex-direction: column;
  align-items: center;      /* centers the whole block */
  text-align: center;
  gap: 0.25rem;

  margin: clamp(0.7rem, 1.1vw, 1.05rem) 0 clamp(0.9rem, 1.4vw, 1.25rem);
}

#hero .book-hero-content .author > span{
  font-size: clamp(0.82rem, 0.35vw + 0.78rem, 0.98rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.85;
}

#hero .book-hero-content .author h3{
  margin: 0;
  font-size: clamp(1.15rem, 0.9vw + 1.0rem, 1.55rem);
  line-height: 1.1;
  font-weight: 700;

  /* subtle separation on busy hero imagery */
  text-shadow:
    0 2px 12px rgba(0,0,0,0.35),
    0 1px 2px rgba(0,0,0,0.35);
}

/* HERO — Genre pill (centered + clamped) */
#hero .book-hero-content .book-genre{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* center the pill */
  align-self: center;
  margin: 0 auto clamp(0.65rem, 1vw, 1rem);

  /* size */
  font-size: clamp(0.78rem, 0.35vw + 0.72rem, 0.95rem);
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;

  /* pill styling (keeps it readable on the hero image) */
  padding: 0.6em 0.95em;
  border-radius: 999px;

  color: rgba(255,255,255,0.92);
  background: color-mix(in srgb, rgba(10,18,14,0.55), transparent 30%);
  border: 1px solid color-mix(in srgb, rgba(220,255,240,0.18), transparent 45%);
  box-shadow:
    0 12px 28px 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%);
}

/* If the container isn't flex, this ensures the span still centers */
#hero .book-hero-content{
  display: flex;
  flex-direction: column;
}


/* ==========================================================
   HERO — Rain overlay (scoped, no jQuery)
   - Above bg images, below content
   - Wind-aligned: falls diagonally LEFT → RIGHT (matches drift)
   - Pauses when hero leaves viewport OR during active scrolling (JS toggles .hero-rain-paused)
   ========================================================== */

#hero.hero-scroll .hero-scroll__sticky{
  position: relative; /* needed for overlay positioning */
}

/* Put the rain between images and content */
#hero.hero-scroll .hero-rain{
  /* WIND CONTROL (left → right) */
  --rain-drift-front: 12vw; /* + = drift to the RIGHT */
  --rain-drift-back:  8vw;  /* back layer drifts less */
  --rain-tilt: -18deg;      /* IMPORTANT: negative tilt aligns streak with rightward drift */

  position: absolute;
  inset: 0;
  z-index: 3;               /* images are 1/2; content is 6/7 */
  pointer-events: none;
  overflow: hidden;

  opacity: 0.65;            /* overall intensity */
  mix-blend-mode: screen;   /* rain reads like light */
}

/* Layer containers */
#hero.hero-scroll .hero-rain .rain-layer{
  position: absolute;
  inset: 0;
}

/* Back row = softer + slightly blurrier */
#hero.hero-scroll .hero-rain .rain-back{
  opacity: 0.55;
  filter: blur(0.3px);
}

/* Front row = stronger */
#hero.hero-scroll .hero-rain .rain-front{
  opacity: 0.95;
}

/* A single drop */
#hero.hero-scroll .hero-rain .drop{
  position: absolute;
  top: -160px;
  width: 18px;
  height: 160px;
  will-change: transform;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* Assign wind-aware animations per layer */
#hero.hero-scroll .hero-rain .rain-front .drop{
  animation-name: heroDropWindFront;
}
#hero.hero-scroll .hero-rain .rain-back .drop{
  animation-name: heroDropWindBack;
}

/* The streak (tilted to match motion) */
#hero.hero-scroll .hero-rain .stem{
  width: 2px;
  height: 65%;
  margin-left: 8px; /* centers inside 18px drop */
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0),
    rgba(255,255,255,0.42)
  );

  transform-origin: top center;
  transform: rotate(var(--rain-tilt));

  animation-name: heroStem;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* Optional splat at bottom (keeps same tilt so it “lands” directionally) */
#hero.hero-scroll .hero-rain .splat{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 18px;
  height: 10px;
  border-top: 2px dotted rgba(255,255,255,0.65);
  border-radius: 50%;

  transform-origin: center;
  transform: rotate(var(--rain-tilt)) scale(0);
  opacity: 0;

  animation-name: heroSplat;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* ----------------------------------------------------------
   KEYFRAMES — diagonal fall LEFT → RIGHT
---------------------------------------------------------- */
@keyframes heroDropWindFront{
  0%   { transform: translate3d(0, 0, 0); }
  92%  { transform: translate3d(var(--rain-drift-front), 104vh, 0); }
  100% { transform: translate3d(var(--rain-drift-front), 104vh, 0); }
}

@keyframes heroDropWindBack{
  0%   { transform: translate3d(0, 0, 0); }
  92%  { transform: translate3d(var(--rain-drift-back), 104vh, 0); }
  100% { transform: translate3d(var(--rain-drift-back), 104vh, 0); }
}

@keyframes heroStem{
  0%   { opacity: 1; }
  84%  { opacity: 1; }
  92%  { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes heroSplat{
  0%    { opacity: 0; transform: rotate(var(--rain-tilt)) scale(0); }
  96%   { opacity: 0; transform: rotate(var(--rain-tilt)) scale(0); }
  98.5% { opacity: 0.45; transform: rotate(var(--rain-tilt)) scale(1); }
  100%  { opacity: 0; transform: rotate(var(--rain-tilt)) scale(1.6); }
}
/* Keep hero content above rain */
#hero.hero-scroll .container{
  position: relative;
  z-index: 6;
}
#hero.hero-scroll .book-cover{
  position: relative;
  z-index: 7;
}

/* Pause control (JS toggles this class on #hero) */
#hero.hero-scroll.hero-rain-paused .hero-rain .drop,
#hero.hero-scroll.hero-rain-paused .hero-rain .stem,
#hero.hero-scroll.hero-rain-paused .hero-rain .splat{
  animation-play-state: paused !important;
}

/* Reduce motion: disable entirely */
@media (prefers-reduced-motion: reduce){
  #hero.hero-scroll .hero-rain{ display: none !important; }
}



/* Smooth fade when we kill it */
#hero.hero-scroll .hero-rain{
  transition: opacity 260ms ease;
}

/* Once killed, hide completely */
#hero.hero-scroll.hero-rain-killed .hero-rain{
  opacity: 0 !important;
}

  @media (max-width: 767.98px) {
    .mobile-hide {
      display: none !important;
    }

    #hero .hero-scroll__starship,
    #hero .hero-rain,
    #hero .hero-book-wrap {
      display: none !important;
    }
  }
@media (max-width: 767.98px) {
  #hero .book-hero-content {
    background: rgba(58, 56, 51, 0.52);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow:
      0 12px 32px rgba(0, 0, 0, 0.22),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
}
@media (max-width: 767.98px) {
  #hero .hero-scroll__scene,
  #hero .hero-scroll__starship,
  #hero .hero-scroll__sticky::before,
  #hero .hero-scroll__sticky::after {
    filter: none !important;
    -webkit-filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  #hero .hero-scroll__starship,
  #hero .hero-rain,
  #hero .hero-book-wrap {
    display: none !important;
  }

  #hero .book-hero-content {
    background: rgba(46, 44, 39, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
      0 14px 36px rgba(0, 0, 0, 0.26),
      inset 0 1px 0 rgba(255, 255, 255, 0.07);
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .mobile-hide {
    display: none !important;
  }
}

/* =========================================================
   HERO — small laptop / shorter viewport refinement
   Goals:
   - keep book at full size
   - move text/card higher
   - tighten gap above CTAs
   - nudge book slightly right/up
========================================================= */
@media (min-width: 992px) and (max-width: 1460px) and (max-height: 900px) {
  #hero.hero-scroll .container {
    position: relative;
    top: -1.5rem;
  }

  #hero.hero-scroll .row {
    align-items: center;
  }

  #hero .book-hero-content {
    margin-left: auto;
    margin-right: 0;
    transform: translateY(-1.25rem);
  }

  #hero .book-description {
    margin-bottom: 0.85rem;
  }

  #hero .hero-cta {
    margin-top: 0.25rem;
  }

  #hero .hero-book-wrap {
    justify-content: flex-end !important;
    transform: translate(0.75rem, -0.75rem);
  }

  #hero .book-cover.libro {
    transform: scale(1) !important;
    transform-origin: center right !important;
  }
}




/* =========================================================
   HERO — center glass panel + enlarge/cancel left alignment
   for tablet / small desktop widths
========================================================= */
@media (max-width: 991.98px) {
  #hero .row {
    justify-content: center;
  }

  #hero .col-lg-5 {
    display: flex;
    justify-content: center;
  }

  #hero .book-hero-content {
    margin-inline: auto;
    text-align: center;
    align-items: center;
  }

  #hero .book-genre {
    margin-inline: auto;
  }

  #hero .book-hero-content h1 {
    font-size: clamp(3rem, 6vw, 4.2rem);
    line-height: 1.05;
    text-align: center;
  }

  #hero .book-subtitle {
    font-size: clamp(1.25rem, 2.6vw, 1.6rem);
    line-height: 1.35;
    text-align: center;
    max-width: 28ch;
    margin-inline: auto;
  }

  #hero .author {
    justify-content: center;
    text-align: center;
  }

  #hero .hero-cta {
    justify-content: center;
  }
}