/* Phase 3.2 - visible continuous spin, larger books, equal aligned containers - 2026-07-28 */

/* The animation engine owns transform interpolation. A CSS transition on every animation frame
   was making the books appear stationary, so it is explicitly removed here. */
.home-page .hero-book-stage-3d .book3d-book{
  transition:none!important;
  will-change:transform;
  transform-origin:50% 50%;
}
.home-page .hero-book-stage-3d .book3d-face,
.home-page .hero-book-stage-3d .book3d-side,
.home-page .hero-book-stage-3d .book3d-top-bottom{
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

.home-page .hero-book-stage-3d.has-three-books{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  align-items:stretch!important;
  justify-items:stretch!important;
}
.home-page .hero-book-stage-3d .hero-book-3d{
  position:relative!important;
  inset:auto!important;
  bottom:auto!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  align-self:stretch!important;
  display:flex!important;
  transform:none!important;
  --book3d-depth:calc(var(--book3d-book-w) * .13)!important;
}
.home-page .hero-book-stage-3d .hero-book3d-panel{
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  display:grid!important;
  place-items:center!important;
  overflow:visible!important;
  border:1px solid rgba(255,255,255,.105)!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.025)),
    radial-gradient(circle at 50% 43%,rgba(104,183,236,.145),transparent 52%)!important;
  box-shadow:0 24px 54px rgba(4,20,34,.25),inset 0 1px 0 rgba(255,255,255,.065)!important;
}
.home-page .hero-book-stage-3d .hero-book3d-wrap{
  margin:auto!important;
  max-width:100%!important;
  display:grid!important;
  place-items:center!important;
}
.home-page .hero-book-stage-3d .book3d-shadow{
  opacity:.88;
}

/* Desktop and wide laptop: substantially fill the red-marked usable area. */
@media(min-width:1041px){
  .home-page .hero-inner{
    width:min(1320px,calc(100vw - 56px))!important;
    max-width:1320px!important;
    grid-template-columns:minmax(350px,400px) minmax(0,1fr)!important;
    gap:clamp(2rem,3vw,2.8rem)!important;
  }
  .home-page .hero-book-stage-3d.has-three-books{
    gap:clamp(.85rem,1.2vw,1.15rem)!important;
    height:420px!important;
    min-height:420px!important;
  }
  .home-page .hero-book-stage-3d .hero-book-3d{
    --book3d-book-w:clamp(175px,14vw,205px)!important;
  }
  .home-page .hero-book-stage-3d .hero-book3d-panel{
    border-radius:30px!important;
  }
  .home-page .hero-book-stage-3d .hero-book3d-wrap{
    width:calc(var(--book3d-book-w) + var(--book3d-depth) * 2.2)!important;
    height:calc(var(--book3d-book-h) + 58px)!important;
  }
}

/* Tablet: one aligned row, with all three covers large and equal. */
@media(min-width:701px) and (max-width:1040px){
  .home-page .hero-inner{
    width:min(980px,calc(100vw - 32px))!important;
    max-width:980px!important;
    grid-template-columns:1fr!important;
    gap:1.35rem!important;
  }
  .home-page .hero-book-stage-3d.has-three-books{
    gap:clamp(.65rem,1.5vw,.9rem)!important;
    height:430px!important;
    min-height:430px!important;
  }
  .home-page .hero-book-stage-3d .hero-book-3d{
    --book3d-book-w:clamp(172px,21vw,215px)!important;
  }
  .home-page .hero-book-stage-3d .hero-book3d-panel{
    border-radius:26px!important;
  }
  .home-page .hero-book-stage-3d .hero-book3d-wrap{
    width:calc(var(--book3d-book-w) + var(--book3d-depth) * 2.2)!important;
    height:calc(var(--book3d-book-h) + 50px)!important;
  }
}

/* Mobile: preserve the requested three-book row without overlap. */
@media(max-width:700px){
  .home-page .hero-inner{
    width:min(100%,calc(100vw - 20px))!important;
    gap:.9rem!important;
  }
  .home-page .hero-book-stage-3d.has-three-books{
    gap:6px!important;
    height:244px!important;
    min-height:244px!important;
    margin-top:.55rem!important;
  }
  .home-page .hero-book-stage-3d .hero-book-3d{
    --book3d-book-w:min(25.6vw,104px)!important;
    --book3d-depth:calc(var(--book3d-book-w) * .085)!important;
  }
  .home-page .hero-book-stage-3d .hero-book3d-panel{
    border-radius:18px!important;
  }
  .home-page .hero-book-stage-3d .hero-book3d-wrap{
    width:100%!important;
    height:calc(var(--book3d-book-h) + 30px)!important;
  }
}

/* Phase 3.8 regression: force a visible keyboard-focus indicator on every interactive control. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible{
  outline:3px solid var(--focus, #2F8BC0) !important;
  outline-offset:3px !important;
}

/* Phase 3.8 focus-ring compatibility: use explicit longhands to avoid shorthand/custom-property parsing differences. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible{
  outline-color:#2F8BC0 !important;
  outline-style:solid !important;
  outline-width:3px !important;
  outline-offset:3px !important;
}