/* ──────────────────────────────────────────────────────────────────────────
   film.css — the book advert, rendered by the browser.

   This is the "magical animated book" film, built in CSS and canvas instead
   of generated as an mp4. It lives on the site forever, weighs about 14KB,
   plays instantly with no buffering, never gets a YouTube logo on it and
   never sends anybody away from the page. It is also the only version we can
   re-cut in thirty seconds when the price or the title changes.

   The scene: one warm lamp off to the left, dust in the beam, a dark walnut
   table, and a book that opens itself. Ink lifts off the page as gold light
   while the pages turn. Camera pushes in on one real line from the book,
   holds it long enough to read, then the book closes and the title lands.

   Everything is driven by one class on .film — the JS timeline swaps it.
   ────────────────────────────────────────────────────────────────────────── */

.film {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(90% 120% at 12% 8%, rgba(255, 214, 148, .20) 0%, rgba(255, 196, 112, .07) 26%, transparent 58%),
    radial-gradient(120% 140% at 50% 115%, rgba(212,135,78,.22) 0%, transparent 62%),
    linear-gradient(170deg, #050f10 0%, #030a0b 55%, #030a0b 100%);
  isolation: isolate;
  cursor: pointer;
  user-select: none;
}

/* the lamp beam — a soft wedge of warm light falling in from the left */
.film-beam {
  position: absolute;
  inset: -20% -10% -10% -35%;
  pointer-events: none;
  background: conic-gradient(from 118deg at 8% 0%,
    transparent 0deg, rgba(255, 208, 140, .13) 11deg,
    rgba(255, 216, 158, .05) 26deg, transparent 38deg);
  filter: blur(14px);
  mix-blend-mode: screen;
  animation: filmbeam 9s ease-in-out infinite;
}
@keyframes filmbeam { 0%,100% { opacity: .85 } 50% { opacity: 1 } }

.film-dust {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* the table: a dark plane the book sits on, with its reflection */
.film-table {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 26%;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(42, 30, 18, 0) 0%, rgba(38, 27, 16, .55) 45%, rgba(20, 14, 8, .9) 100%);
}

/* ---- the camera: everything inside pushes in together ------------------- */

.film-cam {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transform-origin: 50% 46%;
  transition: transform 2.1s cubic-bezier(.33, 0, .2, 1);
  will-change: transform;
}
.film.is-push  .film-cam { transform: scale(1.66) translate(-15%, 2%); }
.film.is-pushl .film-cam { transform: scale(1.66) translate(15%, 2%); }
.film.is-close .film-cam { transform: scale(1); }

/* ---- the book ----------------------------------------------------------- */

.film-stage {
  position: relative;
  width: min(62%, 560px);
  aspect-ratio: 1560 / 1080;
  perspective: 2600px;
  perspective-origin: 50% 40%;
}

.film-book {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  transform-style: preserve-3d;
  transform: rotateX(13deg) translateX(-25%) scale(.92);
  transition: transform 1.7s cubic-bezier(.45, .02, .18, 1);
  will-change: transform;
}
.film.is-open .film-book { transform: rotateX(9deg) translateX(0) scale(1); }

/* the shadow the book casts, tied to how open it is */
.film-shadow {
  position: absolute;
  left: 8%; right: 8%; bottom: -7%;
  height: 13%;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, .78) 0%, transparent 72%);
  filter: blur(14px);
  transform: scaleX(.52);
  transition: transform 1.7s cubic-bezier(.45, .02, .18, 1), opacity 1.7s ease;
  opacity: .9;
}
.film.is-open .film-shadow { transform: scaleX(1); opacity: 1; }

/* ---- paper -------------------------------------------------------------- */

.film-page {
  position: relative;
  overflow: hidden;
  transform: translateZ(-5px);
  background:
    radial-gradient(130% 100% at 0% 0%, #050f10 0%, #0b1a1b 46%, #1e3b3d 100%);
  box-shadow: inset 0 0 70px rgba(120, 95, 55, .17);
}
.film-l { border-radius: 4px 0 0 4px; }
.film-r { border-radius: 0 4px 4px 0; }
/* while the book is shut there is no spread to see — only the cover */
.film-page, .film-block { opacity: 0; transition: opacity .6s ease .35s; }
.film.is-open .film-page, .film.is-open .film-block { opacity: 1; }

/* the block of paper underneath — a closed stack of edges down each side,
   so the thing has mass instead of being two rectangles */
.film-block { position: absolute; top: 1.4%; bottom: 1.4%; width: 1.9%; z-index: 1; }
.film-block.l { left: -1.8%; border-radius: 3px 0 0 3px;
  background: repeating-linear-gradient(to right,#1e3b3d 0 1px,#1e3b3d 1px 2px,#0b1a1b 2px 3px); }
.film-block.r { right: -1.8%; border-radius: 0 3px 3px 0;
  background: repeating-linear-gradient(to left,#1e3b3d 0 1px,#1e3b3d 1px 2px,#0b1a1b 2px 3px); }

/* a warm bloom that swells out of the book the moment it opens */
.film-glow {
  position: absolute; inset: -18%; pointer-events: none; z-index: 0;
  background: radial-gradient(48% 42% at 50% 48%, rgba(255, 216, 150, .3) 0%, rgba(255, 198, 112, .1) 42%, transparent 72%);
  filter: blur(18px); mix-blend-mode: screen;
  opacity: 0; transform: scale(.7);
  transition: opacity 1.4s ease, transform 1.8s cubic-bezier(.16, 1, .3, 1);
}
.film.is-open .film-glow { opacity: 1; transform: scale(1); }

/* gutter shading — the single thing that stops two rectangles reading as
   two rectangles and starts them reading as one open book */
.film-l::after, .film-r::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
}
.film-l::after { background: linear-gradient(to left, rgba(60, 42, 20, .32), transparent 13%); }
.film-r::after { background: linear-gradient(to right, rgba(60, 42, 20, .32), transparent 13%); }

.film-spine { opacity:0; transition:opacity .7s ease .4s; }
.film.is-open .film-spine { opacity: 1; }
.film-spine {
  position: absolute; left: 50%; top: -1%; bottom: -1%; width: 3px; z-index: 6;
  transform: translateX(-1.5px); pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,.1), rgba(0,0,0,.52), rgba(0,0,0,.1));
}

/* type on the paper. Sized in cqw off .film-stage so the whole film scales as
   one object — the page is half the stage, so these read ~11 / 18 / 12px at
   the hero size and shrink in proportion on a product card. */
.film-txt {
  position: absolute;
  inset: 11% 9% 11% 10%;
  display: flex; flex-direction: column; justify-content: center;
  font-family: 'Cormorant Garamond', Georgia, serif;
  color: #ffe3bf;
}
.film-txt .n {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: clamp(.42rem, 1.85cqw, .78rem);
  font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: #c27a45; margin-bottom: .9em;
}
.film-txt .q {
  font-size: clamp(.78rem, 3.25cqw, 1.5rem);
  line-height: 1.34; font-style: italic; margin: 0 0 .85em;
  text-wrap: balance;
}
.film-txt .w {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: clamp(.48rem, 2.02cqw, .9rem);
  line-height: 1.58; color: #e4a26c;
  padding-top: .7em; border-top: 1px solid rgba(140, 112, 60, .22);
}
/* faint ruled lines so a page with little text still reads as a page */
.film-rule { position: absolute; left: 12%; right: 11%; height: 1px;
  background: rgba(120, 95, 55, .13); }

/* ---- the turning leaves ------------------------------------------------- */

.film-leaf {
  position: absolute; top: 0; left: 50%; width: 50%; height: 100%;
  transform-style: preserve-3d; transform-origin: left center;
  /* rotate FIRST, then push along the rotated Z — see the note in film.js */
  transform: rotateY(0deg) translateZ(var(--z, 1px));
  will-change: transform;
}
.film-leaf.turned { transform: rotateY(-180deg) translateZ(var(--z, 1px)); }
.film-leaf.anim { transition: transform 1.05s cubic-bezier(.52, .03, .28, 1); }

.film-face {
  position: absolute; inset: 0; overflow: hidden;
  backface-visibility: hidden;
  background: radial-gradient(130% 100% at 0% 0%, #050f10 0%, #0b1a1b 46%, #1e3b3d 100%);
  box-shadow: 0 0 40px rgba(0, 0, 0, .34);
}
.film-face.b { transform: rotateY(180deg); border-radius: 4px 0 0 4px; }
.film-face.f { border-radius: 0 4px 4px 0; }

/* ---- the cover ---------------------------------------------------------- */

.film-cover {
  position: absolute; inset: 0; overflow: hidden;
  backface-visibility: hidden;
  border-radius: 0 6px 6px 0;
  background:
    radial-gradient(120% 110% at 18% 10%, #e4a26c 0%, #7a5536 42%, #7a5536 100%);
  box-shadow: 0 0 48px rgba(0, 0, 0, .5), inset 0 0 70px rgba(0, 0, 0, .26);
}
/* linen weave */
.film-cover::before {
  content: ""; position: absolute; inset: 0; opacity: .3;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.055) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.075) 0 1px, transparent 1px 3px);
}
/* the foil shimmer that sweeps across just before it opens */
.film-cover::after {
  content: ""; position: absolute; top: -60%; bottom: -60%; width: 32%;
  left: -45%;
  background: linear-gradient(100deg, transparent, rgba(255, 234, 176, .5), rgba(11,26,27,.72), rgba(255, 234, 176, .45), transparent);
  filter: blur(7px); transform: rotate(14deg); opacity: 0;
}
.film.is-shine .film-cover::after { animation: filmshine 1.35s cubic-bezier(.4,0,.3,1) forwards; }
@keyframes filmshine {
  0%   { left: -45%; opacity: 0 }
  18%  { opacity: 1 }
  82%  { opacity: 1 }
  100% { left: 112%; opacity: 0 }
}

.film-cover-in {
  position: absolute; inset: 11% 10%;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; gap: .5em;
  border: 1px solid rgba(226, 198, 124, .3);
  border-radius: 3px;
}
.film-cover-in .ttl {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.05rem, 5.4cqw, 2.6rem); line-height: 1.02; font-weight: 600;
  color: #ffe3bf; letter-spacing: .005em;
  text-shadow: 0 1px 0 rgba(255,255,255,.26), 0 2px 7px rgba(0,0,0,.5);
}
.film-cover-in .ttl em { font-style: italic; display: block; color: #ffe3bf; }
.film-cover-in .rule { width: 34%; height: 1px; background: rgba(255,227,191,.55); }
.film-cover-in .sub {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: clamp(.38rem, 1.35cqw, .68rem);
  letter-spacing: .26em; text-transform: uppercase; color: rgba(255,227,191,0.78);
}
/* spine edge, so the closed book has thickness */
.film-edge {
  position: absolute; left: -2.2%; top: 1.5%; bottom: 1.5%; width: 2.4%;
  border-radius: 3px 0 0 3px;
  background: linear-gradient(to right, #1e3b3d 0%, #0b1a1b 30%, #1e3b3d 62%, #a9c2c0 100%);
  box-shadow: inset -2px 0 4px rgba(0,0,0,.3);
  transition: opacity .5s ease;
}
.film.is-open .film-edge { opacity: 0; }

/* ---- the card at the end ------------------------------------------------ */

.film-card {
  position: absolute; inset: 0; z-index: 9;
  display: grid; place-content: center; justify-items: center; gap: .55rem;
  text-align: center; padding: 1.5rem;
  background: radial-gradient(70% 70% at 50% 50%, rgba(10,12,8,.94) 0%, rgba(6,7,5,.995) 100%);
  opacity: 0; pointer-events: none;
  transition: opacity .9s ease;
}
.film.is-card .film-card { opacity: 1; }
.film-cam { opacity: 1; transition: transform 2.1s cubic-bezier(.33,0,.2,1), opacity .8s ease; }
.film.is-card .film-cam { opacity: 0; }
.film-card .t {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.6rem, 5.4cqw, 3.4rem); line-height: 1.02; font-weight: 600;
  color: #f3f1ec; margin: 0;
  transform: translateY(12px); transition: transform 1s cubic-bezier(.16,1,.3,1) .1s;
}
.film-card .t em { font-style: italic; color: #ffe3bf; }
.film-card .s {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: clamp(.6rem, 1.15cqw, .82rem); letter-spacing: .17em; text-transform: uppercase;
  color: rgba(243,241,236,0.78); margin: 0;
  transform: translateY(12px); transition: transform 1s cubic-bezier(.16,1,.3,1) .22s;
}
.film-card .hair { width: 46px; height: 1px; background: #d4874e;
  transform: scaleX(0); transition: transform .9s cubic-bezier(.16,1,.3,1) .35s; }
.film.is-card .film-card .t,
.film.is-card .film-card .s { transform: none; }
.film.is-card .film-card .hair { transform: none; }

/* ---- chrome ------------------------------------------------------------- */

.film-vig {
  position: absolute; inset: 0; pointer-events: none; z-index: 10;
  background: radial-gradient(78% 78% at 50% 44%, transparent 42%, rgba(0,0,0,.6) 100%);
}
/* a whisper of film grain. Without it the gradients look like a screensaver */
.film-grain {
  position: absolute; inset: -50%; pointer-events: none; z-index: 11; opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: filmgrain .7s steps(3) infinite;
}
@keyframes filmgrain {
  0%   { transform: translate(0, 0) }
  33%  { transform: translate(-3%, 2%) }
  66%  { transform: translate(2%, -3%) }
  100% { transform: translate(0, 0) }
}

.film-replay {
  position: absolute; right: .85rem; bottom: .85rem; z-index: 12;
  display: flex; align-items: center; gap: .4rem;
  padding: .42rem .85rem; border-radius: 99px; border: 1px solid rgba(30,59,61,.22);
  background: rgba(10,12,8,.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: rgba(243,241,236,.8); cursor: pointer;
  font-family: 'DM Sans', system-ui, sans-serif; font-size: .64rem;
  letter-spacing: .14em; text-transform: uppercase;
  opacity: 0; transition: opacity .35s ease, background .3s ease;
}
.film:hover .film-replay { opacity: 1; }
.film-replay:hover { background: rgba(212,135,78,.9); color: #f3f1ec; border-color: transparent; }

/* ──────────────────────────────────────────────────────────────────────────
   V2 — the pages of a real book, not six copies of the same page.
   ────────────────────────────────────────────────────────────────────────── */

/* fold shading: the turning leaf darkens as it passes the vertical, which is
   the single cue that makes a CSS rotation read as paper rather than a flap */
.film-face .fold, .film-cover .fold {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(to right, rgba(48, 33, 14, .62) 0%, rgba(48, 33, 14, .12) 34%, transparent 62%);
}
.film-leaf.anim.turned .fold { animation: filmfold 1.05s cubic-bezier(.52, .03, .28, 1); }
@keyframes filmfold {
  0%   { opacity: 0 }
  46%  { opacity: .9 }
  100% { opacity: 0 }
}

/* the running page number, bottom outer corner */
.film-folio {
  position: absolute; bottom: 5.5%; left: 0; right: 0; text-align: center;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: clamp(.34rem, 1.18cqw, .58rem);
  letter-spacing: .14em; color: rgba(120, 98, 58, .5);
}

/* the follow-up line — the bit of the book nobody else writes down */
.film-push {
  margin-top: .9em; padding: .72em .85em .78em;
  border-left: 2px solid rgba(212,135,78,.55);
  background: linear-gradient(to right, rgba(212,135,78,.11), rgba(212,135,78,0));
}
.film-push .l {
  display: block; font-family: 'DM Sans', system-ui, sans-serif;
  font-size: clamp(.38rem, 1.5cqw, .64rem); font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: #c27a45;
  margin-bottom: .55em;
}
.film-push .q2 {
  font-size: clamp(.64rem, 2.5cqw, 1.12rem); line-height: 1.3;
  font-style: italic; margin: 0 0 .4em; color: #ffe3bf;
}
.film-push .w2 {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: clamp(.42rem, 1.72cqw, .76rem); line-height: 1.5;
  color: #e4a26c; margin: 0;
}
/* a script page with a follow-up has more on it, so it sits to the top */
.film-txt:has(.film-push) { justify-content: flex-start; }

/* ---- the contents page -------------------------------------------------- */

.film-contents .h, .film-note .h, .film-end .h {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: clamp(.42rem, 1.72cqw, .74rem); font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase; color: #c27a45;
  margin-bottom: 1.1em;
}
.film-contents ul { list-style: none; margin: 0; padding: 0; }
.film-contents li {
  display: flex; align-items: baseline; gap: .5em;
  font-size: clamp(.66rem, 2.62cqw, 1.2rem); line-height: 1; padding: .44em 0;
  color: #ffe3bf;
}
.film-contents .c-d {
  flex: 1 1 auto; height: 0;
  border-bottom: 1px dotted rgba(120, 95, 55, .42);
  transform: translateY(-.18em);
}
.film-contents .c-n {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: clamp(.46rem, 1.84cqw, .82rem); color: #e4a26c;
  font-variant-numeric: tabular-nums;
}
.film-contents .f, .film-end .f {
  margin-top: 1.1em; padding-top: .7em;
  border-top: 1px solid rgba(140, 112, 60, .22);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: clamp(.42rem, 1.7cqw, .74rem);
  letter-spacing: .14em; text-transform: uppercase; color: #e4a26c;
}

/* ---- "how each one works" ---------------------------------------------- */

.film-note ul { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: .95em; }
.film-note b {
  display: block; font-family: 'DM Sans', system-ui, sans-serif;
  font-size: clamp(.42rem, 1.66cqw, .72rem); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: #ffe3bf;
  margin-bottom: .3em;
}
.film-note span {
  display: block; font-size: clamp(.64rem, 2.42cqw, 1.08rem);
  line-height: 1.35; color: #e4a26c; font-style: italic;
}

/* ---- a section opener --------------------------------------------------- */

.film-div { align-items: center; text-align: center; gap: .55em; }
.film-div .num {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.6rem, 7.4cqw, 3.6rem); line-height: 1;
  color: rgba(194,122,69,0.78); font-style: italic;
}
.film-div .rule { width: 26%; height: 1px; background: rgba(140, 112, 60, .34); margin: .5em 0; }
.film-div .t {
  font-size: clamp(1rem, 4.4cqw, 2rem); line-height: 1.05; color: #ffe3bf;
}
.film-div .s {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: clamp(.4rem, 1.6cqw, .7rem);
  letter-spacing: .2em; text-transform: uppercase; color: #e4a26c;
}

/* ---- the closing page --------------------------------------------------- */

.film-end .b {
  font-size: clamp(.72rem, 2.78cqw, 1.26rem); line-height: 1.38;
  font-style: italic; color: #ffe3bf; margin: 0;
}

/* ---- the card at the end gets the three things you get ------------------ */

.film-card ul.b {
  list-style: none; margin: .2rem 0 .1rem; padding: 0;
  display: flex; flex-direction: column; gap: .36em; align-items: flex-start;
}
.film-card ul.b li {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: clamp(.56rem, 1.42cqw, .8rem); color: rgba(243,241,236,.82);
  letter-spacing: .02em;
}
.film-card ul.b li::before {
  content: "\2014"; color: #d4874e; margin-right: .5em;
}
.film.is-card .film-card ul.b li {
  animation: filmcardin .8s cubic-bezier(.16, 1, .3, 1) backwards;
}
.film.is-card .film-card ul.b li:nth-child(1) { animation-delay: .34s }
.film.is-card .film-card ul.b li:nth-child(2) { animation-delay: .44s }
.film.is-card .film-card ul.b li:nth-child(3) { animation-delay: .54s }
@keyframes filmcardin {
  from { opacity: 0; transform: translateY(9px) }
  to   { opacity: 1; transform: none }
}

/* container queries drive the type so the film scales as one object */
.film, .film-stage { container-type: inline-size; }

@media (max-width: 620px) {
  .film { aspect-ratio: 4 / 5; border-radius: 14px; }
  .film-stage { width: min(84%, 420px); }
}

@media (prefers-reduced-motion: reduce) {
  .film-grain, .film-beam { animation: none; }
  .film-cam, .film-book, .film-leaf, .film-shadow { transition-duration: .01ms !important; }
}