/* Hero: the bundle flies in, the 5 books fan out of it, the bonus lands on top.
   Mobile first. Sizes and positions use % of the stage (works in every browser);
   only the movements use cqw (percent of the stage width) and only where supported.
   The hidden starting states apply only when .js is set (inline script in <head>),
   motion is allowed and cqw works; otherwise the final picture is simply shown. */

.hero{padding:18px 0 36px;overflow:hidden;background:radial-gradient(900px 520px at 70% 30%,rgba(217,171,74,.11),transparent 62%),radial-gradient(700px 460px at 0% 0%,rgba(110,140,190,.07),transparent 60%),var(--ink)}
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "visual" "body";gap:0}
.hero__head{grid-area:head}
.hero__visual{grid-area:visual;margin:2px 0 18px}
.hero__body{grid-area:body}
.hero h1{font-size:clamp(2.15rem,9.2vw,4.4rem);margin-bottom:.25em}
.hero__sub{font-size:1.1rem;color:#dcd5c9;max-width:540px;margin-bottom:18px}
.scope{margin:0 0 14px;display:flex;flex-direction:column;gap:2px}
.scope b{font-weight:600;color:#efe7d6;font-size:1.05rem}
.scope span{font-size:.9rem;color:var(--muted)}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin:0}
.hero__cta .btn{flex:1 1 auto}

/* stage: width W, height 1.1 W */
.hstage{container-type:inline-size;position:relative;z-index:2;width:100%;max-width:560px;margin:0 auto;transform:perspective(1300px) rotateX(var(--ty,0deg)) rotateY(var(--tx,0deg));transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.hstage__inner{position:relative;width:100%;aspect-ratio:1/1.1}
@supports not (aspect-ratio:1){.hstage__inner{height:0;padding-top:110%}}
.hstage__glow{position:absolute;left:4%;top:10%;width:92%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(242,207,122,.32),rgba(217,171,74,.10) 42%,transparent 68%);opacity:1;transform:scale(1);transition:opacity 1.4s ease,transform 1.6s cubic-bezier(.16,1,.3,1);pointer-events:none}
.hstage__books{position:absolute;inset:0}
.hb,.hbundle,.hbonus{position:absolute;display:block;will-change:transform,opacity}
.hb img,.hbundle img,.hbonus img{width:100%;height:auto;border-radius:2px 5px 5px 2px;box-shadow:0 22px 40px -16px rgba(0,0,0,.85)}

/* the 5 books, fanned behind the bundle */
.hb{left:50%;top:0;width:30%;margin-left:-15%;transform-origin:50% 195%;
  transform:translate3d(0,0,0) rotate(var(--r)) scale(1);opacity:1;
  transition:transform .95s cubic-bezier(.2,.95,.25,1.12) calc(var(--d) * 85ms + 40ms),opacity .45s ease calc(var(--d) * 85ms)}
.hb img{filter:brightness(.86)}
.hb:nth-child(1){--r:-27deg;--d:2}
.hb:nth-child(2){--r:-13.5deg;--d:1}
.hb:nth-child(3){--r:0deg;--d:0}
.hb:nth-child(4){--r:13.5deg;--d:1}
.hb:nth-child(5){--r:27deg;--d:2}

/* the bundle */
.hbundle{z-index:3;left:50%;bottom:4.55%;width:48%;margin-left:-29%;transform:perspective(900px) translate3d(0,0,0) rotateY(-9deg) rotate(-1.5deg) scale(1);opacity:1;filter:none;
  transition:transform 1.15s cubic-bezier(.16,1,.3,1),opacity .6s ease,filter .9s ease}
.hbundle img{box-shadow:-10px 14px 0 -3px #15171c,0 40px 70px -24px rgba(0,0,0,.95),0 0 46px -8px rgba(217,171,74,.35)}
.hbundle::after{content:"";position:absolute;inset:0;border-radius:2px 5px 5px 2px;background:linear-gradient(115deg,transparent 35%,rgba(255,241,196,.45) 48%,transparent 60%);background-size:260% 100%;background-position:120% 0;mix-blend-mode:screen;pointer-events:none;opacity:0}

/* the bonus, turned slightly to the right, over the bundle's corner */
.hbonus{z-index:4;right:8%;bottom:1.8%;width:31%;transform:perspective(900px) translate3d(0,0,0) rotateY(-14deg) rotate(7deg) scale(1);opacity:1;
  transition:transform 1.05s cubic-bezier(.16,1,.3,1),opacity .5s ease}
.hbonus img{box-shadow:-7px 10px 0 -2px #15171c,0 30px 50px -18px rgba(0,0,0,.95)}

/* golden drops: they leave the leaks in the pipe on the bundle cover and fall about 4 cm below the book (brand mark).
   They sit inside .hbundle, so they move with it. Positions are the leak points of bundle-cover.jpg (x/y in % of the cover);
   --fall is the way from the leak to the bottom edge of the cover (cover height = 72cqw). */
.hdrops{position:absolute;inset:0;z-index:2;pointer-events:none;/* the stage sits above .hero__tools, so the drops fall in front of the buttons */opacity:1;transition:opacity .8s ease}
.hdrops i{position:absolute;width:1.6cqw;min-width:6px;max-width:11px;aspect-ratio:2/3;margin-left:-.8cqw;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
  background:radial-gradient(circle at 35% 30%,#fffbe6 0,#ffd75e 32%,#f0b400 62%,#b98200 100%);
  box-shadow:0 0 6px 1px rgba(255,200,40,.85),0 0 16px rgba(255,190,40,.55);opacity:0;animation:hdrip 2.9s cubic-bezier(.55,0,1,.45) infinite}
.hdrops i:nth-child(1){left:22.5%;top:65%;--fall:25cqw}
.hdrops i:nth-child(2){left:39.7%;top:70.5%;--fall:21cqw;animation-delay:.9s}
.hdrops i:nth-child(3){left:62.8%;top:65%;--fall:25cqw;animation-delay:1.7s}
.hdrops i:nth-child(4){left:22.5%;top:65%;--fall:25cqw;animation-delay:2.3s}
.hdrops i:nth-child(5){left:62.8%;top:65%;--fall:25cqw;animation-delay:.45s}
.hstage.is-off .hdrops i,.hstage.is-off .hstage__inner,.hstage.is-off .hbundle::after{animation-play-state:paused}
@keyframes hdrip{
  0%{transform:translateY(-2px) scale(.3);opacity:0}
  10%{opacity:1;transform:translateY(0) scale(.7)}
  32%{opacity:1;transform:translateY(.4cqw) scale(1,1.15)}
  90%{opacity:1}
  100%{transform:translateY(calc(var(--fall,25cqw) + 4cm)) scale(.9,1.25);opacity:0}}

/* ---- the entrance and the closed state: only with JS, motion allowed and cqw support ---- */
@supports (width:1cqw){
  @media (prefers-reduced-motion:no-preference){
    .js .hstage:not(.s1) .hbundle{opacity:0;filter:blur(6px);transform:perspective(900px) translate3d(-6cqw,46cqw,0) rotateY(0deg) rotate(-24deg) scale(.35)}
    .js .hstage:not(.s2) .hb{opacity:0;transform:translate3d(-4cqw,36cqw,0) rotate(0deg) scale(.55)}
    .js .hstage:not(.s3) .hbonus{opacity:0;transform:perspective(900px) translate3d(55cqw,18cqw,0) rotateY(0deg) rotate(48deg) scale(.45)}
    .js .hstage:not(.s1) .hstage__glow{opacity:0;transform:scale(.4)}
    .js .hstage:not(.s4) .hdrops{opacity:0}
    .js .hero__visual:not(.is-done) .hero__tools{opacity:0;visibility:hidden;transform:translateY(12px)}
    .hstage.s4 .hbundle::after{animation:hshine 7s ease-in-out 0s 4}
    .hstage.s4 .hstage__inner{animation:hfloat 7s ease-in-out 4}
  }
  /* closing: the books slide back into the bundle, the last one first */
  .hstage.is-closed .hb{opacity:0;transform:translate3d(-4cqw,36cqw,0) rotate(0deg) scale(.55);transition:transform .7s cubic-bezier(.55,0,.75,.2) calc((2 - var(--d)) * 70ms),opacity .25s ease calc((2 - var(--d)) * 70ms + .45s)}
  .hstage.is-closed .hbundle{transform:perspective(900px) translate3d(4cqw,-12cqw,0) rotateY(-9deg) rotate(-1.5deg) scale(1.12);transition:transform .9s cubic-bezier(.2,.9,.25,1.05) .55s,opacity .6s ease,filter .9s ease}
  .hstage.is-closed .hbonus{transform:perspective(900px) translate3d(0,-10cqw,0) rotateY(-14deg) rotate(7deg) scale(1.08);transition:transform .9s cubic-bezier(.2,.9,.25,1.05) .62s,opacity .5s ease}
}
@supports not (width:1cqw){.stackbtn{display:none}}
.hstage.is-gulp .hbundle{animation:hgulp .55s cubic-bezier(.2,.9,.3,1.3)}
@keyframes hshine{0%,62%{opacity:0;background-position:120% 0}66%{opacity:1}86%{opacity:1;background-position:-30% 0}90%,100%{opacity:0;background-position:-30% 0}}
@keyframes hfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.4cqw)}}
@keyframes hgulp{0%{scale:1}40%{scale:1.045}100%{scale:1}}

/* buttons under the stage: story video left, stack/fan out books right */
.hero__tools{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:4px;opacity:1;visibility:visible;transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1),visibility 0s}
.hero__tools .watch{margin:0;min-width:0;flex:0 1 auto;padding:6px 14px 6px 6px;gap:10px;min-height:48px}
.hero__tools .watch__thumb{width:64px;height:40px;border-radius:7px}
.hero__tools .watch__thumb i{width:26px;height:26px;margin:-13px 0 0 -13px}
.hero__tools .watch__thumb i::after{left:10px;top:7px;border-left-width:9px;border-top-width:6px;border-bottom-width:6px}
.hero__tools .watch__text{white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.hero__tools .watch__text b{font-size:.92rem}
.hero__tools .watch__text small{font-size:.76rem}
.stackbtn{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;min-width:10.4em;padding:0 16px;border-radius:999px;border:1px solid rgba(217,171,74,.4);background:rgba(217,171,74,.07);color:var(--gold-2);font:600 .9rem var(--sans);cursor:pointer;white-space:nowrap;touch-action:manipulation;transition:border-color .2s,background .2s,transform .2s}
.stackbtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;transition:transform .4s}
.stackbtn[data-closed] svg{transform:rotate(90deg)}
.no-js .stackbtn{display:none}
@media (hover:hover){
  .stackbtn:hover{border-color:var(--gold);background:rgba(217,171,74,.14);transform:translateY(-2px)}
}

@media (max-width:479px){
  .hero__tools .watch__text small{display:none}
  .hero__tools .watch{padding:6px 12px 6px 6px}
  .hero__tools{gap:8px}
  .stackbtn{padding:0 13px;gap:7px;font-size:.86rem}
  .stackbtn svg{width:16px;height:16px}
  .hero__tools .watch__thumb{width:36px;height:36px;border-radius:50%;background:transparent}
  .hero__tools .watch__thumb img{display:none}
  .hero__tools .watch__thumb i{width:36px;height:36px;margin:-18px 0 0 -18px}
  .hero__tools .watch__thumb i::after{left:14px;top:11px;border-left-width:11px;border-top-width:7px;border-bottom-width:7px}
}
@media (max-width:374px){
  .stackbtn{padding:0 12px;font-size:.84rem;min-width:0}
  .stackbtn svg{display:none}
}
@media (min-width:640px){
  .hero{padding:34px 0 48px}
  .hero__cta .btn{flex:0 0 auto}
}
/* desktop: copy left, stage right and set high, not centred low */
@media (min-width:981px){
  .hero{padding:26px 0 64px}
  .hero__grid{grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);grid-template-areas:"head visual" "body visual";column-gap:44px;align-items:start}
  .hero__head{align-self:end;padding-top:28px}
  .hero__visual{margin:0;align-self:start}
  .hero__body{align-self:start}
  .hero h1{font-size:clamp(3rem,4.9vw,4.4rem)}
  .hero__sub{font-size:1.18rem}
}
@media (prefers-reduced-motion:reduce){
  .hb,.hbundle,.hbonus,.hstage__glow,.hero__tools,.hstage,.hdrops{transition:none!important}
  .hstage__inner{animation:none!important}
  .hdrops i{opacity:1;animation:none!important}
}