/* ============================================================
   VetCo hero film — the notebook opening itself on an empty V2 record,
   which then fills in by hand. Everything .hf- prefixed; the scene is
   built and animated by hero-film.js.

   World units = the page artwork's scale: a page is 1000 × 1416, the open
   spread runs x 0–2000, the covers overhang by 14–16. The camera (.hf-cam)
   maps that world into the frame with one 2D transform.
   ============================================================ */

/* ---------- the hero around it ---------- */

.hf-hero-sec{position:relative;overflow:hidden;color:#fff;padding:72px 0 84px;
  background:radial-gradient(900px 560px at 76% 42%,rgba(159,211,191,.17),transparent 70%),
             linear-gradient(160deg,#22463b 0%,#1b372e 55%,#142a23 100%)}
.hf-hero{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr);gap:60px;align-items:center}
.hf-copy .eyebrow{color:#9fd3bf}
.hf-copy h1{color:#fff;font-size:clamp(2.5rem,4.6vw,4.1rem);max-width:11ch}
.hf-copy .lead{color:rgba(255,255,255,.84);font-size:1.13rem;max-width:44ch;margin:0}
.hf-copy .btn{background:#fff;color:var(--brand)}
.hf-copy .btn:hover{background:#9fd3bf}
.hf-copy .btn.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.45)}
.hf-copy .btn.ghost:hover{background:rgba(255,255,255,.1)}
.hf-figure{margin:0}
.hf-cap{margin:14px 4px 0;font-size:.86rem;color:rgba(255,255,255,.62)}

/* ---------- the frame ---------- */

.hf{position:relative;aspect-ratio:4/3;border-radius:22px;overflow:hidden;isolation:isolate;
  background:radial-gradient(130% 100% at 50% 34%,#f3efe7 0%,#e5ded2 56%,#d3cab9 100%);
  box-shadow:0 50px 100px -40px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.1)}
.hf::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 45%,transparent 58%,rgba(60,44,28,.2) 100%)}
.hf-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.hf-cam{position:absolute;left:0;top:0;width:2000px;height:1416px;transform-origin:0 0}
.hf-world{position:absolute;inset:0;perspective:2400px;perspective-origin:1000px 708px}
.hf-3d,.hf-flat{position:absolute;inset:0}
.hf-3d{transform-style:preserve-3d}
.hf-flat{opacity:0}

/* soft shadows on the desk; the left one arrives with the cover */
.hf-shadow{position:absolute;top:-14px;width:1016px;height:1444px;border-radius:34px;
  background:rgba(60,42,24,.46);filter:blur(30px);transform:translate(24px,38px)}
.hf-shadow-r{left:1000px}
.hf-shadow-l{left:-16px;opacity:0}

.hf-ribbon{position:absolute;left:900px;top:-560px;width:900px;height:580px;overflow:visible}

/* boards: seafoam leather, sampled from the product photo */
.hf-board,.hf-flat-board{position:absolute;top:-14px;height:1444px;
  background:linear-gradient(118deg,#7ac6af 0%,#6bbaa3 48%,#5fad97 100%);box-shadow:0 3px 6px rgba(20,40,34,.35)}
.hf-board{left:1000px;width:1016px;border-radius:3px 20px 20px 3px;transform:translateZ(-2px)}
.hf-flat-board{left:-16px;width:2032px;border-radius:20px}

/* pages: the artwork multiplied onto a warm paper */
.hf-page{position:absolute;top:0;width:1000px;height:1416px;background:#fdfbf5;overflow:hidden}
.hf-base{left:1000px}
.hf-flat .hf-page.l{left:0}
.hf-flat .hf-page.r{left:1000px}
.hf-page>img,.hf-face>img{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:multiply;
  -webkit-user-select:none;user-select:none}
.hf-gut{position:absolute;inset:0;pointer-events:none}
.hf-gut.l{background:linear-gradient(270deg,rgba(70,52,34,.22),rgba(70,52,34,.07) 3.2%,transparent 9%)}
.hf-gut.r{background:linear-gradient(90deg,rgba(70,52,34,.22),rgba(70,52,34,.07) 3.2%,transparent 9%)}

/* anything that turns: two faces back to back, hinged on its left edge */
.hf-leaf,.hf-cover,.hf-tab{position:absolute;transform-style:preserve-3d;transform-origin:0 50%}
.hf-leaf{left:1000px;top:0;width:1000px;height:1416px;transform:translateZ(2px)}
.hf-face{position:absolute;inset:0;overflow:hidden;background:#fdfbf5;
  -webkit-backface-visibility:hidden;backface-visibility:hidden}
.hf-face.back{transform:rotateY(180deg)}
.hf-shade{position:absolute;inset:0;background:#2b2217;opacity:0;pointer-events:none}

/* resting states before the film starts: cover shut, clasp folded over it */
.hf-cover{left:1000px;top:-14px;width:1016px;height:1444px;transform:translateZ(8px)}
.hf-cover .front{border-radius:3px 20px 20px 3px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(118deg,#7ac6af 0%,#6bbaa3 48%,#5fad97 100%);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.16),inset 0 -10px 18px rgba(0,0,0,.07)}
/* the hinge groove of a hardcover, just off the spine */
.hf-cover .front::before{content:"";position:absolute;left:30px;top:0;bottom:0;width:14px;
  background:linear-gradient(90deg,rgba(0,0,0,.13),rgba(255,255,255,.13) 60%,transparent)}
/* the real embossed logo, cut from the product photo and turned into a relief map:
   flat leather is 50% grey, so in overlay only the embossing shows, on the board's own colour */
.hf-cover .front>.hf-logo{inset:auto;left:28.5%;top:29.5%;width:51%;height:auto;mix-blend-mode:overlay;opacity:.9;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent),linear-gradient(180deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent),linear-gradient(180deg,transparent,#000 8%,#000 92%,transparent);
  mask-composite:intersect}
.hf-cover .back{border-radius:20px 3px 3px 20px;background:#62ae98}
.hf-endpaper{position:absolute;left:16px;top:14px;right:0;bottom:14px;background:#f6f1e6}

/* the clasp: a strap from the back board, folded over the front until it opens */
.hf-tab{left:2016px;top:585px;width:152px;height:176px;transform:translateZ(10px) rotateY(-180deg)}
.hf-tab .hf-face,.hf-tab-flat{background:linear-gradient(180deg,#74c0a9,#5ea993)}
.hf-tab .front,.hf-tab-flat{border-radius:0 46px 46px 0}
.hf-tab .back{border-radius:46px 0 0 46px}
.hf-tab-flat{position:absolute;left:2016px;top:585px;width:152px;height:176px;box-shadow:0 3px 6px rgba(20,40,34,.3)}
.hf-ring{position:absolute;top:24px;width:128px;height:128px;border-radius:50%;
  background:radial-gradient(circle,#5aa690 0 49%,#f5f7f8 51%,#b7bdc2 57%,#eef0f2 63%,#8b9298 69%,transparent 71%)}
.hf-tab .front .hf-ring,.hf-tab-flat .hf-ring{left:18px}
.hf-tab .back .hf-ring{right:18px}

/* ---------- the handwriting ---------- */

.hf-ink{position:absolute;left:0;top:0;width:2000px;height:1416px;pointer-events:none;color:rgba(26,58,140,.94)}
.hf-w{position:absolute;white-space:pre;font:500 30px/1 "Caveat","Bradley Hand","Segoe Print",cursive;
  -webkit-clip-path:inset(-45% 100% -45% -6%);clip-path:inset(-45% 100% -45% -6%)}
.hf-arr{display:inline-block;width:.86em;height:.86em;vertical-align:-.06em;margin:0 .06em;
  fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.hf-marks{position:absolute;left:0;top:0;width:2000px;height:1416px;overflow:visible}
.hf-marks path{fill:none;stroke:currentColor;stroke-width:3.1;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1 1;stroke-dashoffset:1}

/* ---------- the pen ---------- */

.hf-pen,.hf-pen-sh{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none}
.hf-pen svg,.hf-pen-sh svg{position:absolute;left:0;top:-30px;width:700px;height:60px;overflow:visible;transform-origin:0 30px}
/* --hf-pen shrinks the pen in a small frame, where a close-up would let it fill the shot */
.hf-pen svg{transform:rotate(-36deg) scale(var(--hf-pen,1))}
.hf-pen-sh svg{transform:rotate(-29deg) scale(var(--hf-pen,1));filter:blur(7px);opacity:.28}

/* ---------- controls ---------- */

.hf-ui{position:absolute;left:0;right:0;bottom:0;z-index:4;display:flex;align-items:center;gap:12px;
  padding:12px 14px;pointer-events:none}
.hf-bar{flex:1;height:3px;border-radius:3px;background:rgba(40,30,20,.14);overflow:hidden}
.hf-bar b{display:block;height:100%;background:rgba(31,61,51,.65);transform-origin:0 50%;transform:scaleX(0)}
.hf-btn{pointer-events:auto;flex:0 0 auto;width:38px;height:38px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.9);color:#1f3d33;display:grid;place-items:center;box-shadow:0 4px 14px rgba(0,0,0,.18);
  transition:transform .15s}
.hf-btn:hover{transform:scale(1.07)}
.hf-btn:focus-visible{outline:2px solid #9fd3bf;outline-offset:2px}
.hf-btn svg{width:16px;height:16px;display:none}
.hf[data-state="playing"] .i-pause,
.hf[data-state="paused"] .i-play,
.hf[data-state="loading"] .i-play,
.hf[data-state="ended"] .i-replay{display:block}
.hf[data-state="loading"] .hf-btn{opacity:.6}

@media(max-width:960px){
  .hf-hero{grid-template-columns:1fr;gap:40px}
  .hf-copy h1{max-width:none}
}
@media(max-width:600px){
  .hf-hero-sec{padding:40px 0 56px}
  .hf{aspect-ratio:1/1;border-radius:18px}
}