/* =========================================================
   Making It Work — cinematic animations + pronounced headers
   Layered on top of style.css. Loaded after the base sheet.
   ========================================================= */

/* =========================================================
   BIGGER, MORE PRONOUNCED HEADERS
   ========================================================= */

h1 {
  font-weight: 800;
  letter-spacing: -0.025em;
  font-size: clamp(2.7rem, 6.2vw, 5.2rem);
  line-height: 1.02;
}

h2 {
  font-weight: 700;
  letter-spacing: -0.018em;
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  line-height: 1.05;
}

h3 {
  font-weight: 700;
  font-size: clamp(1.3rem, 2.1vw, 1.55rem);
  letter-spacing: -0.005em;
}

/* Beefier eyebrow */
.eyebrow {
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  padding: 8px 16px;
  border: 1px solid rgba(243, 192, 59, 0.4);
  background: rgba(243, 192, 59, 0.10);
  text-transform: uppercase;
}

/* Section heads get an ornamental dashes-around-eyebrow treatment */
.section-head .eyebrow {
  position: relative;
  margin-bottom: 26px;
}
.section-head .eyebrow::before,
.section-head .eyebrow::after {
  content: "";
  display: inline-block;
  width: 36px;
  height: 1px;
  vertical-align: middle;
  background: linear-gradient(90deg, transparent, var(--gold));
  margin-right: 14px;
}
.section-head .eyebrow::after {
  background: linear-gradient(90deg, var(--gold), transparent);
  margin-right: 0;
  margin-left: 14px;
}

/* Animated golden underline under section-head h2 */
.section-head h2 {
  display: inline-block;
  position: relative;
  padding-bottom: 14px;
}
.section-head h2::after {
  content: "";
  display: block;
  width: 90px;
  height: 4px;
  background: linear-gradient(90deg, var(--gold), var(--orange));
  border-radius: 4px;
  margin: 16px auto 0;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 1000ms cubic-bezier(0.16, 1, 0.3, 1) 350ms;
}
.section-head.in-view h2::after { transform: scaleX(1); }

/* When the section head sits left-aligned (no .text-center), pull underline left */
.author-text .eyebrow + h1::after,
.author-text .eyebrow + h2::after,
.educators-band h2::after {
  margin-left: 0;
}

/* Stronger section separations — ornamental top accent */
section.author-teaser,
section.educators-band,
section.endorsement,
section.signup-band {
  position: relative;
}
section.author-teaser::before,
section.educators-band::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, var(--gold), var(--orange));
  border-radius: 0 0 6px 6px;
  box-shadow: 0 0 24px rgba(243, 192, 59, 0.35);
}

/* Decorative chapter-mark dot for plain sections */
section > .wrap > .section-head::before {
  content: "✦";
  display: block;
  text-align: center;
  font-size: 1rem;
  color: var(--gold);
  margin-bottom: 18px;
  letter-spacing: 0.4em;
  opacity: 0.65;
}

/* Stronger spacing between sections */
section { padding: clamp(72px, 10vw, 130px) 0; }
section.tight { padding: clamp(50px, 7vw, 86px) 0; }

/* HR gets a richer gradient */
hr {
  background: linear-gradient(90deg, transparent, var(--gold), var(--orange), transparent);
  height: 2px;
  margin: 5rem 0;
}

/* =========================================================
   SCROLL PROGRESS BAR (cinematic)
   ========================================================= */

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--gold), var(--orange), var(--blue));
  box-shadow: 0 0 12px rgba(243, 192, 59, 0.5);
  z-index: 100;
  transition: width 80ms linear;
  pointer-events: none;
}

/* =========================================================
   PAGE-LOAD HERO ENTRANCE (curtain rise)
   ========================================================= */

.hero { position: relative; overflow: hidden; }

/* Dark curtain panels that sweep open on load */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg) 50%, transparent 100%);
  z-index: 8;
  pointer-events: none;
  transform-origin: top;
  animation: curtainUp 1.4s cubic-bezier(0.77, 0, 0.18, 1) forwards;
}
@keyframes curtainUp {
  0%   { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(0); opacity: 0; }
}

/* Stagger the hero text content on load */
.hero-entrance > * {
  opacity: 0;
  transform: translateY(36px);
  animation: heroRise 1.05s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hero-entrance > *:nth-child(1) { animation-delay: 0.55s; }
.hero-entrance > *:nth-child(2) { animation-delay: 0.72s; }
.hero-entrance > *:nth-child(3) { animation-delay: 0.88s; }
.hero-entrance > *:nth-child(4) { animation-delay: 1.02s; }
.hero-entrance > *:nth-child(5) { animation-delay: 1.16s; }
.hero-entrance > *:nth-child(6) { animation-delay: 1.30s; }
@keyframes heroRise {
  to { opacity: 1; transform: none; }
}

/* Hero cover: dramatic entrance, then gentle float */
.hero-cover-entrance {
  opacity: 0;
  transform: translateY(80px) rotate(-6deg) scale(0.94);
  animation: coverEnter 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0.6s forwards,
             coverFloat 7s ease-in-out 2.4s infinite alternate;
}
@keyframes coverEnter {
  to { opacity: 1; transform: rotate(-1.2deg) scale(1); }
}
@keyframes coverFloat {
  from { transform: rotate(-1.2deg) translateY(0); }
  to   { transform: rotate(-0.4deg) translateY(-12px); }
}

/* Hero glow pulses softly */
.hero-cover-glow {
  animation: glowPulse 5s ease-in-out infinite alternate;
}
@keyframes glowPulse {
  from { opacity: 0.6; transform: scale(1); }
  to   { opacity: 1;   transform: scale(1.08); }
}

/* Scrawl handwriting draws attention */
.hero h1 .scrawl {
  display: inline-block;
  animation: scrawlBob 4s ease-in-out 2s infinite alternate;
}
@keyframes scrawlBob {
  from { transform: rotate(-3deg) translateY(2px); }
  to   { transform: rotate(-1.5deg) translateY(-2px); }
}

/* Subtle background spotlight drift */
.hero {
  background-size: 100% 100%, 100% 100%, 100% 100%;
  animation: heroBg 18s ease-in-out infinite alternate;
}
@keyframes heroBg {
  from { background-position: 80% -10%, 10% 110%, 0 0; }
  to   { background-position: 60% -5%,  20% 105%, 0 0; }
}

/* =========================================================
   SCROLL-TRIGGERED REVEALS
   ========================================================= */

.reveal {
  opacity: 0;
  transform: translateY(50px);
  transition:
    opacity 950ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 950ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal.in-view { opacity: 1; transform: none; }

.reveal-left {
  transform: translateX(-60px);
}
.reveal-left.in-view { transform: none; }

.reveal-right {
  transform: translateX(60px);
}
.reveal-right.in-view { transform: none; }

.reveal-zoom {
  transform: scale(0.9);
}
.reveal-zoom.in-view { transform: scale(1); }

/* Section heads animate in as a unit */
.section-head {
  opacity: 0;
  transform: translateY(36px);
  transition:
    opacity 900ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}
.section-head.in-view { opacity: 1; transform: none; }

/* Stagger children inside .stagger containers */
.stagger > * {
  opacity: 0;
  transform: translateY(34px);
  transition:
    opacity 850ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 850ms cubic-bezier(0.16, 1, 0.3, 1);
}
.stagger.in-view > * { opacity: 1; transform: none; }
.stagger.in-view > *:nth-child(1)  { transition-delay: 0ms;   }
.stagger.in-view > *:nth-child(2)  { transition-delay: 110ms; }
.stagger.in-view > *:nth-child(3)  { transition-delay: 220ms; }
.stagger.in-view > *:nth-child(4)  { transition-delay: 330ms; }
.stagger.in-view > *:nth-child(5)  { transition-delay: 440ms; }
.stagger.in-view > *:nth-child(6)  { transition-delay: 550ms; }
.stagger.in-view > *:nth-child(7)  { transition-delay: 620ms; }
.stagger.in-view > *:nth-child(8)  { transition-delay: 680ms; }
.stagger.in-view > *:nth-child(9)  { transition-delay: 740ms; }
.stagger.in-view > *:nth-child(10) { transition-delay: 800ms; }
.stagger.in-view > *:nth-child(11) { transition-delay: 850ms; }
.stagger.in-view > *:nth-child(12) { transition-delay: 900ms; }
.stagger.in-view > *:nth-child(13) { transition-delay: 940ms; }
.stagger.in-view > *:nth-child(14) { transition-delay: 970ms; }
.stagger.in-view > *:nth-child(15) { transition-delay: 1000ms; }
.stagger.in-view > *:nth-child(16) { transition-delay: 1030ms; }

/* =========================================================
   CARD INTERACTIONS — bigger, bolder
   ========================================================= */

.card {
  transition:
    transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 320ms ease,
    box-shadow 320ms ease;
  position: relative;
  overflow: hidden;
}
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    600px circle at var(--mx, 50%) var(--my, 50%),
    rgba(243, 192, 59, 0.10),
    transparent 40%
  );
  opacity: 0;
  transition: opacity 250ms ease;
  pointer-events: none;
}
.card:hover {
  transform: translateY(-8px) scale(1.012);
  border-color: rgba(243, 192, 59, 0.55);
  box-shadow:
    0 35px 60px -25px rgba(0, 0, 0, 0.7),
    0 20px 40px -20px rgba(243, 192, 59, 0.20);
}
.card:hover::before { opacity: 1; }

.card .num {
  transition: transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1), background 220ms ease;
}
.card:hover .num {
  transform: scale(1.15) rotate(-7deg);
  background: var(--gold-2);
}

/* =========================================================
   TOC SECTIONS get a left-edge entrance
   ========================================================= */

.toc-section {
  transition:
    transform 600ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 400ms ease;
}
.toc-section:hover {
  transform: translateX(6px);
  border-left-color: var(--orange);
}

/* =========================================================
   CREDIT CHIPS — staggered pop-in
   ========================================================= */

.credit-strip.stagger > .credit-chip {
  transform: translateY(20px) scale(0.92);
}
.credit-strip.stagger.in-view > .credit-chip {
  transform: none;
}
.credit-chip {
  transition: transform 220ms ease, background 220ms ease, border-color 220ms ease;
}
.credit-chip:hover {
  transform: translateY(-2px);
  background: rgba(243, 192, 59, 0.12);
  border-color: rgba(243, 192, 59, 0.4);
}

/* =========================================================
   ENDORSEMENT — animated giant quote
   ========================================================= */

.endorsement blockquote::before {
  animation: quoteGlow 4s ease-in-out infinite alternate;
}
@keyframes quoteGlow {
  from { text-shadow: 0 0 0 transparent; transform: translateY(0); }
  to   { text-shadow: 0 0 28px rgba(243, 192, 59, 0.55); transform: translateY(-2px); }
}

/* =========================================================
   BUTTONS — punchier
   ========================================================= */

.btn {
  position: relative;
  overflow: hidden;
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    transparent 30%,
    rgba(255, 255, 255, 0.25) 50%,
    transparent 70%
  );
  transform: translateX(-100%);
  transition: transform 600ms ease;
}
.btn:hover::after { transform: translateX(100%); }
.btn:hover { transform: translateY(-2px); }
.btn-primary:hover { box-shadow: 0 20px 40px -10px rgba(232, 90, 31, 0.65); }
.btn-gold:hover    { box-shadow: 0 20px 40px -12px rgba(243, 192, 59, 0.65); }
.btn-blue:hover    { box-shadow: 0 20px 40px -12px rgba(47, 109, 240, 0.65); }

/* =========================================================
   NAV — subtle slide-in on load
   ========================================================= */

.site-header {
  animation: navDrop 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes navDrop {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal, .stagger > *, .hero-entrance > *, .section-head {
    opacity: 1 !important;
    transform: none !important;
  }
  .hero-cover-entrance { opacity: 1 !important; transform: rotate(-1.2deg) !important; }
  .hero::after { display: none !important; }
}

/* =========================================================
   FLOATING "BUY ON AMAZON" CTA — visible on every page,
   pinned at all times. Desktop = pill bottom-right,
   Mobile = full-width bottom bar (big tap target).
   ========================================================= */

.buy-float {
  position: fixed;
  z-index: 95;
  right: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 14px 22px;
  border-radius: 999px;
  background: var(--orange);
  color: #fff;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 18px 40px -12px rgba(232, 90, 31, 0.7),
    0 4px 14px -4px rgba(0, 0, 0, 0.5);
  transition:
    transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 200ms ease,
    background 160ms ease;
  will-change: transform;
  animation:
    buyFloatIn 700ms cubic-bezier(0.16, 1, 0.3, 1) 1.4s both,
    buyPulse 3.6s ease-in-out 2.8s infinite;
}
.buy-float:hover {
  background: var(--orange-2);
  color: #fff;
  transform: translateY(-3px) scale(1.03);
  box-shadow:
    0 24px 52px -12px rgba(232, 90, 31, 0.85),
    0 6px 18px -4px rgba(0, 0, 0, 0.5);
}
.buy-float:active { transform: translateY(-1px) scale(1.0); }
.buy-float svg { flex-shrink: 0; }
.buy-float .bf-label { line-height: 1.1; }
.buy-float .bf-label small {
  display: block;
  font-weight: 500;
  font-size: 0.72rem;
  opacity: 0.88;
  letter-spacing: 0.02em;
  margin-top: 2px;
}

@keyframes buyFloatIn {
  from { opacity: 0; transform: translateY(34px) scale(0.9); }
  to   { opacity: 1; transform: none; }
}
@keyframes buyPulse {
  0%, 100% { box-shadow: 0 18px 40px -12px rgba(232,90,31,0.7), 0 0 0 0 rgba(243,192,59,0); }
  50%      { box-shadow: 0 18px 40px -12px rgba(232,90,31,0.85), 0 0 0 9px rgba(243,192,59,0.12); }
}

/* Mobile: stretch into a full-width sticky bottom bar */
@media (max-width: 600px) {
  .buy-float {
    left: 12px;
    right: 12px;
    bottom: 12px;
    justify-content: center;
    padding: 16px 20px;
    font-size: 1.06rem;
    border-radius: 16px;
  }
  /* keep footer content from hiding permanently behind the bar */
  body { padding-bottom: 88px; }
}

@media (prefers-reduced-motion: reduce) {
  .buy-float { animation: none; opacity: 1; transform: none; }
}