/* ============================================================
   VetCo Finder — the animated "build your VetCo" flow on the shop page.
   Everything here is prefixed .vf- so it can't collide with the site's
   own .book / .card / .swatch rules.
   ============================================================ */

.vf-overlay{
  position:fixed;inset:0;z-index:200;
  /* flex + margin:auto on the child, NOT place-items:center — centred grid/flex
     clips the top of anything taller than the viewport and you can't scroll to it. */
  display:flex;padding:24px 20px;
  /* heavy blur so the shop grid behind never competes with the notebook */
  background:radial-gradient(ellipse at 50% 22%,rgba(24,46,38,.86),rgba(8,11,10,.97) 70%);
  -webkit-backdrop-filter:blur(26px) saturate(.7);
  backdrop-filter:blur(26px) saturate(.7);
  opacity:0;transition:opacity .4s ease;overflow-y:auto;
}
.vf-overlay.on{opacity:1}
.vf-overlay[hidden]{display:none}

.vf-close{
  position:fixed;top:16px;right:20px;z-index:2;
  background:none;border:0;color:rgba(255,255,255,.75);
  font-size:1.9rem;line-height:1;cursor:pointer;padding:6px 10px;border-radius:8px;
}
.vf-close:hover{color:#fff;background:rgba(255,255,255,.1)}

.vf-inner{width:min(620px,100%);margin:auto;text-align:center;color:#fff}
.vf-inner.reading{width:min(1060px,100%)}   /* the reader needs the extra room */

/* ---- the version chooser: two real notebooks, not two boxes ---- */
.vf-picks{
  display:flex;justify-content:center;align-items:flex-start;gap:clamp(24px,6vw,64px);
  perspective:2000px;margin:0 auto 30px;transition:gap .6s ease;
}
.vf-picks[hidden]{display:none}
.vf-pick{
  background:none;border:0;padding:0;cursor:pointer;color:#fff;font:inherit;
  display:flex;flex-direction:column;align-items:center;gap:16px;max-width:280px;
  transition:opacity .45s ease, transform .62s cubic-bezier(.5,.05,.2,1),
             max-width .62s ease, margin .62s ease;
}
.vf-pick .vf-book{width:clamp(120px,20vw,180px)}
.vf-pick:hover .vf-book,.vf-pick:focus-visible .vf-book{
  transform:rotateX(6deg) rotateZ(-1deg) translateY(-10px);
}
.vf-pick:focus-visible{outline:none}
.vf-pick:focus-visible .vf-pick-label{color:#9fd3bf;text-decoration:underline;text-underline-offset:4px}
.vf-pick-label{font-size:.98rem;color:rgba(255,255,255,.78);transition:opacity .3s}

/* pick one: the other folds away, the chosen one grows, then opens */
.vf-picks.picked{gap:0}
.vf-pick.gone{opacity:0;transform:scale(.8);max-width:0;overflow:hidden;pointer-events:none}
.vf-pick.chosen{transform:scale(1.28)}
.vf-pick.chosen .vf-pick-label{opacity:0}

/* the V1 / V2 stamped under the logo on the cover */
.vf-mark{
  display:block;font-family:"Inter",sans-serif;font-size:.95rem;font-weight:600;
  letter-spacing:.22em;opacity:.85;margin-top:10px;
}

/* ---- the 3D notebook ---- */
.vf-stage{perspective:1900px;margin:0 auto 26px;width:min(210px,40vw)}
.vf-stage[hidden]{display:none}
.vf-book{
  position:relative;width:100%;aspect-ratio:3/4;
  transform-style:preserve-3d;
  transform:rotateX(6deg) rotateZ(-1deg);
  transition:transform .9s cubic-bezier(.65,.05,.25,1);
}
.vf-book.small{transform:rotateX(6deg) rotateZ(-1deg) scale(.72)}

/* the paper block behind the cover */
.vf-pages{
  position:absolute;inset:0;border-radius:5px 11px 11px 5px;background:#fbfaf7;
  box-shadow:0 30px 60px -26px rgba(0,0,0,.9), inset -10px 0 18px -16px rgba(0,0,0,.35);
  overflow:hidden;
}
.vf-pages::after{                       /* faint ruled lines */
  content:"";position:absolute;inset:16% 12% 14% 16%;
  background:repeating-linear-gradient(to bottom,transparent 0 15px,rgba(30,40,50,.13) 15px 16px);
}

/* the cover, hinged on its left edge */
.vf-cover{
  position:absolute;inset:0;transform-origin:left center;transform-style:preserve-3d;
  transition:transform 1.15s cubic-bezier(.66,.03,.22,1);
}
.vf-book.open .vf-cover{transform:rotateY(-157deg)}

.vf-face{
  position:absolute;inset:0;backface-visibility:hidden;
  border-radius:5px 11px 11px 5px;display:grid;place-items:center;
  box-shadow:0 26px 50px -22px rgba(0,0,0,.85);
}
.vf-front{
  background:linear-gradient(125deg,var(--vf-hex,#2f6b58),var(--vf-accent,#1f3d33));
  transition:background .55s ease;
}
.vf-front::before{                      /* spine shading */
  content:"";position:absolute;left:0;top:0;bottom:0;width:13%;
  background:linear-gradient(90deg,rgba(0,0,0,.34),transparent);border-radius:5px 0 0 5px;
}
.vf-back{transform:rotateY(180deg);background:#f3efe8}

.vf-logo{
  font-family:"Fraunces",Georgia,serif;font-size:1.5rem;letter-spacing:.06em;
  color:rgba(255,255,255,.94);text-shadow:0 1px 2px rgba(0,0,0,.3);
}
.vf-logo small{display:block;font-family:"Inter",sans-serif;font-size:.55rem;
  letter-spacing:.32em;opacity:.75;margin-top:8px;text-transform:uppercase}

/* the elastic closure band */
.vf-band{
  position:absolute;top:-2%;bottom:-2%;right:14%;width:9px;border-radius:3px;
  background:linear-gradient(90deg,rgba(0,0,0,.25),var(--vf-accent,#1f3d33));
  opacity:.85;transition:opacity .4s;
}
.vf-book.open .vf-band{opacity:0}

/* ============================================================
   The reader — the real notebook, one spread at a time.
   A leaf hinged on the spine sweeps across while the spread
   underneath swaps, so it reads as an actual page turn.
   ============================================================ */
/* As large as will fit: capped by width, but also by the height left over once the
   caption and the buttons below have taken their share — so it never pushes them off. */
.vf-reader{
  /* 320px is the measured height of the bar, caption, hint, buttons and padding
     below the spread, with room for a caption that runs to three lines. */
  width:max(320px, min(1060px, 95vw, (100vh - 320px) * 1.412));
  margin:0 auto 16px;
}
.vf-reader[hidden]{display:none}

/* two A5 pages side by side = the real proportions of the open notebook */
.vf-spread{
  position:relative;aspect-ratio:1.412;perspective:2200px;
  border-radius:6px;overflow:hidden;background:#fdfcfa;
  box-shadow:0 34px 70px -30px rgba(0,0,0,.95);
}
.vf-spread.is-photo{aspect-ratio:3/2;background:#0b0e0c}   /* V1 still uses photographs */

.vf-side{
  position:absolute;top:0;bottom:0;width:50%;
  background:#fdfcfa;background-size:cover;background-position:center;background-repeat:no-repeat;
}
.vf-side-l{left:0}
.vf-side-r{right:0}

/* click zones — left half goes back, right half goes forward */
.vf-half{
  position:absolute;top:0;bottom:0;width:50%;border:0;background:none;
  cursor:pointer;z-index:6;padding:0;
}
.vf-half.vf-back-zone{left:0}
.vf-half.vf-fwd-zone{right:0}
.vf-half::after{                       /* soft edge hint on hover */
  content:"";position:absolute;top:0;bottom:0;width:52px;opacity:0;transition:opacity .25s;
}
.vf-back-zone::after{left:0;background:linear-gradient(90deg,rgba(255,255,255,.22),transparent)}
.vf-fwd-zone::after{right:0;background:linear-gradient(270deg,rgba(255,255,255,.22),transparent)}
.vf-half:hover::after,.vf-half:focus-visible::after{opacity:1}
.vf-half:focus-visible{outline:2px solid #9fd3bf;outline-offset:-3px}

/* the turning leaf */
.vf-leaf{
  position:absolute;top:0;bottom:0;left:50%;right:0;
  transform-origin:left center;transform-style:preserve-3d;z-index:8;
  transition:transform .8s cubic-bezier(.52,.02,.28,1);
}
.vf-leaf.fwd{transform:rotateY(0)}
.vf-leaf.fwd.go{transform:rotateY(-180deg)}
.vf-leaf.back{transform:rotateY(-180deg)}
.vf-leaf.back.go{transform:rotateY(0)}
.vf-leaf-face{
  position:absolute;inset:0;backface-visibility:hidden;
  background:#fdfcfa;background-repeat:no-repeat;
  box-shadow:0 0 34px rgba(0,0,0,.4);
}
.vf-leaf-back{transform:rotateY(180deg)}

/* spine shadow down the middle, sells the fold */
.vf-spread::after{
  content:"";position:absolute;left:50%;top:0;bottom:0;width:40px;margin-left:-20px;z-index:7;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(0,0,0,.14) 42%,rgba(0,0,0,.20) 50%,rgba(0,0,0,.14) 58%,transparent);
}
.vf-spread.is-photo::after{background:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent)}

.vf-bar{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:14px}
.vf-nav{
  width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.08);color:#fff;font-size:1.3rem;line-height:1;cursor:pointer;
  transition:background .2s,transform .2s;
}
.vf-nav:hover:not(:disabled){background:rgba(255,255,255,.2);transform:translateY(-2px)}
.vf-nav:disabled{opacity:.3;cursor:default}
.vf-count{font-size:.85rem;color:rgba(255,255,255,.7);min-width:74px}
.vf-caption{
  color:rgba(255,255,255,.82);font-size:.92rem;line-height:1.45;
  margin:10px auto 0;max-width:66ch;min-height:2.7em;
}
.vf-hint{font-size:.78rem;color:rgba(255,255,255,.42);margin-top:4px}

/* ---- the question panel ---- */
.vf-panel{
  animation:vfRise .5s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes vfRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.vf-step{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:#9fd3bf;margin-bottom:10px}
.vf-q{font-family:"Fraunces",Georgia,serif;font-size:clamp(1.35rem,3.2vw,1.85rem);
  line-height:1.15;margin:0 0 8px}
.vf-sub{color:rgba(255,255,255,.72);font-size:.93rem;margin:0 auto 22px;max-width:46ch}

.vf-options{display:grid;gap:14px;grid-template-columns:1fr 1fr;text-align:left}
@media(max-width:560px){.vf-options{grid-template-columns:1fr}}

.vf-opt{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);
  border-radius:16px;padding:26px 20px;cursor:pointer;color:#fff;
  font-family:"Fraunces",Georgia,serif;font-size:1.4rem;letter-spacing:-.01em;
  transition:transform .2s,background .2s,border-color .2s;
}
.vf-opt:hover,.vf-opt:focus-visible{
  background:rgba(255,255,255,.14);border-color:#9fd3bf;transform:translateY(-3px);outline:none;
}
.vf-opt b{display:block;font-size:1.05rem;margin-bottom:6px}
.vf-opt span{color:rgba(255,255,255,.68);font-size:.88rem;line-height:1.45}

/* colour chips */
.vf-colours{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.vf-chip{
  background:none;border:0;padding:0;cursor:pointer;width:82px;color:#fff;font:inherit;
  transition:transform .2s;
}
.vf-chip:hover,.vf-chip:focus-visible{transform:translateY(-4px);outline:none}
.vf-chip i{
  display:block;width:100%;aspect-ratio:1;border-radius:50%;margin-bottom:8px;
  background-size:cover;background-position:center;
  box-shadow:0 0 0 2px rgba(255,255,255,.22), 0 10px 22px -10px rgba(0,0,0,.9);
  transition:box-shadow .2s;
}
.vf-chip:hover i,.vf-chip:focus-visible i{box-shadow:0 0 0 3px #9fd3bf, 0 14px 26px -10px rgba(0,0,0,.9)}
.vf-chip em{font-style:normal;font-size:.8rem;color:rgba(255,255,255,.85);line-height:1.3;display:block}

/* result */
.vf-result-name{font-family:"Fraunces",Georgia,serif;font-size:clamp(1.6rem,4.4vw,2.3rem);margin:0 0 4px}
.vf-result-meta{color:rgba(255,255,255,.72);margin:0 0 22px}
.vf-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.vf-btn{
  background:#fff;color:#12161c;border:0;border-radius:999px;padding:13px 26px;
  font:inherit;font-weight:500;cursor:pointer;text-decoration:none;display:inline-block;
  transition:transform .18s,background .2s;
}
.vf-btn:hover{transform:translateY(-2px);background:#eae5dc}
.vf-btn.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.45)}
.vf-btn.ghost:hover{background:rgba(255,255,255,.12)}

/* "Now choose your colour" — painted with the ten shades of whichever version you
   are reading. The gradient itself is set inline from products.json. The inset
   scrim keeps the white label readable over the palest stops (Baby Pink, Silver). */
.vf-btn.vf-swatchy{
  color:#fff;font-weight:600;background-color:transparent;
  /* a dark glow rather than a heavy scrim, so the palette stays vivid but the
     label still reads over the palest stops (Baby Pink, Burgundy & Silver) */
  text-shadow:0 1px 2px rgba(0,0,0,.8), 0 0 12px rgba(0,0,0,.55);
  background-size:220% 100%;background-position:0% 50%;
  box-shadow:inset 0 0 0 999px rgba(0,0,0,.26), 0 12px 26px -14px rgba(0,0,0,.9);
  transition:background-position .7s ease, box-shadow .3s ease, transform .18s;
}
.vf-btn.vf-swatchy:hover{
  background-color:transparent;                 /* keep the gradient, not the beige */
  background-position:100% 50%;                 /* slides through the other shades */
  box-shadow:inset 0 0 0 999px rgba(0,0,0,.14), 0 16px 30px -14px rgba(0,0,0,.95);
  transform:translateY(-2px);
}

/* two of them side by side on the result step */
.vf-links{display:flex;gap:22px;justify-content:center;flex-wrap:wrap}
.vf-skip{
  display:inline-block;margin-top:22px;background:none;border:0;cursor:pointer;font:inherit;
  color:rgba(255,255,255,.6);font-size:.9rem;text-decoration:underline;text-underline-offset:4px;
}
.vf-skip:hover{color:#fff}

/* the button that reopens it from the shop page */
.vf-launch{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--brand);color:#fff;border:0;border-radius:999px;
  padding:11px 22px;font:inherit;font-size:.94rem;cursor:pointer;
  transition:transform .18s,background .2s;
}
.vf-launch:hover{background:var(--brand-2);transform:translateY(-2px)}

@media(prefers-reduced-motion:reduce){
  .vf-overlay,.vf-book,.vf-cover,.vf-panel,.vf-opt,.vf-chip,.vf-btn,.vf-front{
    transition:none!important;animation:none!important;
  }
}