.home-book-trailer {
  --trailer-ink: #0d0c0a;
  --trailer-gold: #f0c040;
  --trailer-gold-deep: #a87f1f;
  --trailer-cream: #f3ebda;
  --trailer-smoke: rgba(243, 235, 218, .62);
  padding: 90px 0;
  background: #0d1a26;
  color: var(--trailer-cream);
}
.home-book-trailer .trailer-heading { margin-bottom: 34px; }
.home-book-trailer .section-title { color: #fff; }
.home-book-trailer .section-title em { color: var(--trailer-gold); }
.trailer-stage {
  position: relative;
  min-height: clamp(440px, 57vw, 650px);
  overflow: hidden;
  border: 1px solid rgba(240, 192, 64, .28);
  border-radius: 10px;
  background: radial-gradient(ellipse 120% 90% at 50% 72%, #1c1810 0%, var(--trailer-ink) 62%);
  box-shadow: 0 24px 55px rgba(0, 0, 0, .42);
  isolation: isolate;
}
.trailer-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  box-shadow: inset 0 0 18vmin rgba(0, 0, 0, .8);
}
.trailer-grain {
  position: absolute;
  inset: -50%;
  z-index: 2;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
  animation: trailer-grain 1.6s steps(4) infinite;
}
.trailer-scene {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(28px, 6vmin, 70px) 8%;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.4s ease;
}
.trailer-scene.is-active { opacity: 1; visibility: visible; }
.trailer-scene.is-leaving { opacity: 0; visibility: visible; transition-duration: 1.1s; }
.trailer-bridge-wrap { width: min(88%, 900px); }
.trailer-bridge-wrap svg { display: block; width: 100%; height: auto; overflow: visible; }
.trailer-bridge-line { fill: none; stroke: var(--trailer-gold); stroke-width: 2.4; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(240, 192, 64, .35)); }
.trailer-cable { stroke-width: 1.4; opacity: .9; }
.trailer-deck { stroke-width: 3; }
.trailer-draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.is-active .trailer-draw { animation: trailer-draw 3.4s cubic-bezier(.4, 0, .2, 1) forwards; }
.is-active .trailer-delay-2 { animation-delay: .5s; }
.is-active .trailer-delay-3 { animation-delay: 1.1s; }
.trailer-water { stroke: var(--trailer-gold-deep); stroke-width: 1; opacity: 0; }
.is-active .trailer-water { animation: trailer-shimmer 2.5s ease 2.4s forwards; }
.trailer-bridge-caption { margin-top: 4vmin; color: var(--trailer-smoke); font: italic clamp(1.25rem, 3.2vmin, 2rem)/1.4 'Lora', Georgia, serif; letter-spacing: .02em; opacity: 0; transform: translateY(12px); }
.is-active .trailer-bridge-caption { animation: trailer-rise 1.6s ease 2.6s forwards; }
.trailer-kicker { color: var(--trailer-smoke); font: italic clamp(1rem, 2.3vmin, 1.4rem)/1.4 'Lora', Georgia, serif; opacity: 0; }
.is-active .trailer-kicker { animation: trailer-fade 1.4s ease .2s forwards; }
.trailer-title { max-width: 16ch; margin: 2.6vmin 0; color: var(--trailer-cream); font: 600 clamp(2.35rem, 7.8vmin, 5.4rem)/1.08 'Playfair Display', Georgia, serif; opacity: 0; transform: scale(.97); }
.trailer-title em { color: var(--trailer-gold); font-style: normal; }
.is-active .trailer-title { animation: trailer-title 2s cubic-bezier(.3, 0, .2, 1) .8s forwards; }
.trailer-rule { width: 0; height: 1px; margin: 1vmin auto 2vmin; background: linear-gradient(90deg, transparent, var(--trailer-gold), transparent); }
.is-active .trailer-rule { animation: trailer-rule 1.4s ease 2s forwards; }
.trailer-subtitle { max-width: 34ch; color: var(--trailer-smoke); font: clamp(1.1rem, 2.7vmin, 1.6rem)/1.5 'Lora', Georgia, serif; opacity: 0; }
.is-active .trailer-subtitle { animation: trailer-fade 1.6s ease 2.3s forwards; }
.trailer-byline { margin-top: 3.4vmin; color: var(--trailer-gold); font: 500 clamp(1rem, 2.5vmin, 1.5rem)/1.4 'Playfair Display', Georgia, serif; letter-spacing: .14em; opacity: 0; }
.is-active .trailer-byline { animation: trailer-fade 1.6s ease 3s forwards; }
.trailer-call { max-width: 18ch; color: var(--trailer-cream); font: 500 clamp(1.9rem, 6vmin, 3.9rem)/1.2 'Playfair Display', Georgia, serif; opacity: 0; transform: translateY(14px); }
.trailer-call span { color: var(--trailer-gold); }
.is-active .trailer-call { animation: trailer-rise 1.8s ease .3s forwards; }
.trailer-invite { margin-top: 3.2vmin; color: var(--trailer-smoke); font: italic clamp(1.1rem, 2.8vmin, 1.65rem)/1.5 'Lora', Georgia, serif; opacity: 0; }
.is-active .trailer-invite { animation: trailer-fade 1.6s ease 1.8s forwards; }
.trailer-mark { color: var(--trailer-cream); font: clamp(.9rem, 2.5vmin, 1.7rem)/1.4 'Playfair Display', Georgia, serif; letter-spacing: .16em; opacity: 0; }
.is-active .trailer-mark { animation: trailer-fade 1.4s ease .2s forwards; }
.trailer-coming { margin-top: 2.4vmin; color: var(--trailer-gold); font: 600 clamp(2rem, 6.5vmin, 4.4rem)/1.15 'Playfair Display', Georgia, serif; text-shadow: 0 0 34px rgba(240, 192, 64, .25); opacity: 0; transform: scale(.96); }
.is-active .trailer-coming { animation: trailer-title 1.8s ease 1s forwards; }
.trailer-site { margin-top: 3vmin; color: var(--trailer-cream); font: clamp(1rem, 2.7vmin, 1.7rem)/1.4 'Lora', Georgia, serif; letter-spacing: .1em; opacity: 0; }
.is-active .trailer-site { animation: trailer-fade 1.6s ease 2.2s forwards; }
.trailer-replay { margin-top: 5vmin; padding: .65em 1.6em; border: 1px solid rgba(240, 192, 64, .5); border-radius: 2em; background: none; color: var(--trailer-gold); font: 500 1rem/1.4 'Montserrat', sans-serif; letter-spacing: .06em; cursor: pointer; opacity: 0; transition: background .3s, color .3s; }
.is-active .trailer-replay { animation: trailer-fade 1.4s ease 3.2s forwards; }
.trailer-replay:hover, .trailer-replay:focus-visible { background: var(--trailer-gold); color: var(--trailer-ink); }
@keyframes trailer-grain { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-2%, 1%); } 50% { transform: translate(1%, -1%); } 75% { transform: translate(-1%, 2%); } }
@keyframes trailer-draw { to { stroke-dashoffset: 0; } }
@keyframes trailer-shimmer { to { opacity: .35; } }
@keyframes trailer-rise { to { opacity: 1; transform: translateY(0); } }
@keyframes trailer-fade { to { opacity: 1; } }
@keyframes trailer-title { to { opacity: 1; transform: scale(1); } }
@keyframes trailer-rule { to { width: min(46vw, 340px); } }
@media (max-width: 600px) {
  .home-book-trailer { padding: 65px 0; }
  .trailer-stage { min-height: 430px; }
  .trailer-scene { padding-inline: 22px; }
  .trailer-mark { letter-spacing: .09em; }
}
@media (prefers-reduced-motion: reduce) {
  .trailer-grain { animation: none; }
  .trailer-scene, .trailer-scene * { animation: none !important; transition: none !important; }
  .trailer-scene.is-active * { opacity: 1 !important; transform: none !important; }
  .trailer-scene.is-active .trailer-rule { width: min(46vw, 340px); }
  .trailer-scene.is-active .trailer-draw { stroke-dashoffset: 0; }
  .trailer-scene.is-active .trailer-water { opacity: .35; }
}