/* Premium Black Bible: the one hover and motion layer (owner with Jev, 2026-10-30).

   Every pointer interaction on the shop takes its timing, its curve and its gesture from this file, so the whole site
   moves as one thing. The owner's reference is the nav of henrietta.wearetattoodigital.com: the letters of a link roll
   up and their twins roll in from below, a few milliseconds apart. js/store-shell.js builds those letters in the header.

   The rules of the layer
   - hover gestures only for a fine pointer that can hover: no sticky hover states on phones
   - one curve (the site's own cubic-bezier(.2,.7,.2,1)), three durations: fast 160 ms for colour and borders,
     base 280 ms for fills, underlines and icons, slow 560 ms for covers and pictures
   - prefers-reduced-motion sets --hv-rm to 0, which turns every distance, stagger and duration to zero and leaves a
     colour cue behind
   - only transform, opacity, colour, border and background move: never width, height, filter or a box-shadow ring
   - the 3D book renders never dim, snap or scale (owner, 2026-10-19): a cover may lift 4 px, that is all
   - one motif for text: the ink line. Links in prose carry a soft underline that turns ink on hover; nav-like links
     (breadcrumbs, footers, the site menu) have none and gain it on hover; tabs with a rule under them turn that rule ink.
   - the blanket rules that underlined every link and put a 2 px ring and brightness(.9) on every button and summary are
     gone from css/store-shell.css; nothing is dimmed any more
   This file is linked right after css/store-shell.css on every page (scripts/hover-20261030/apply_hover_layer.cjs).
   Where a component's own hover must give way, the selector carries an `html` prefix for specificity. */

:root{
  --hv-rm:1;
  --hv-fast:calc(160ms * var(--hv-rm));
  --hv-base:calc(280ms * var(--hv-rm));
  --hv-slow:calc(560ms * var(--hv-rm));
  --hv-ease:cubic-bezier(.2,.7,.2,1);
  --hv-ease-roll:cubic-bezier(.6,-.05,.25,1.08);          /* a hint of overshoot, for the nav letters only */
  --hv-roll-in:calc(480ms * var(--hv-rm));
  --hv-roll-out:calc(400ms * var(--hv-rm));
  --hv-stagger:calc(12ms * var(--hv-rm));
  --hv-lift:calc(-1px * var(--hv-rm));                     /* a button */
  --hv-lift-cover:calc(-4px * var(--hv-rm));               /* a book cover, a tile picture */
  --hv-zoom:calc(1 + .03 * var(--hv-rm));                  /* a photograph */
  --hv-press:calc(1 - .015 * var(--hv-rm));                /* a button while pressed */
  --hv-shadow:0 12px 22px -14px rgba(0,0,0,.55);
  --hv-tint:color-mix(in srgb, currentColor 5%, transparent);
  --hv-tint-strong:color-mix(in srgb, currentColor 9%, transparent);
  --hv-up:#2e2e2a;                                          /* a black button, one step up */
  --hv-soft-line:color-mix(in srgb, currentColor 42%, transparent);
}
@media (prefers-reduced-motion:reduce){:root{--hv-rm:0}}

/* ---------- 1. The header: the letter roll ---------- */
/* Each nav word becomes aria-hidden letters; the plain text stays in a visually hidden span, so the link reads the same to
   assistive technology, to search engines and to copy and paste. Each letter draws itself twice from data-c: the visible
   glyph and, one line below and clipped, its twin. On hover both move up one line, the letters 12 ms apart from the left;
   on leave they return 12 ms apart from the right. */
.hv-roll{display:inline-block;white-space:nowrap;line-height:1.15;vertical-align:baseline}
/* top-aligned: a clipped inline-block would otherwise put its baseline at its bottom edge and grow the line by a descender */
.hv-ch{position:relative;display:inline-block;overflow:hidden;vertical-align:top}
.hv-ch::before,.hv-ch::after{content:attr(data-c);display:block;transform:translateY(0);
  transition:transform var(--hv-roll-out) var(--hv-ease-roll) calc((var(--n,1) - 1 - var(--i,0)) * var(--hv-stagger))}
.hv-ch::after{position:absolute;left:0;top:100%}
.hv-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
#store-header .store-links a,#store-header .store-cat-toggle{position:relative}
#store-header .store-cat-toggle::after{transition:transform var(--hv-base) var(--hv-ease)}
/* the header tools: the bag, the menu button and the language codes fade */
#store-header .store-bag,#store-header #store-menu-toggle,#store-header .store-lang a{transition:opacity var(--hv-fast) var(--hv-ease),color var(--hv-fast) var(--hv-ease)}
/* the Categories panel arrives: a fade and an 8 px settle when it opens, nothing when it closes (no layout shift) */
.store-cat-panel{transition:opacity var(--hv-base) var(--hv-ease),transform var(--hv-base) var(--hv-ease)}
@starting-style{.store-cat-panel:not([hidden]){opacity:0;transform:translateY(-8px)}}
.store-cat-tile{transition:background-color var(--hv-base) var(--hv-ease)}
.store-cat-pic img{transition:transform var(--hv-slow) var(--hv-ease)}
.store-cat-sub a{transition:color var(--hv-fast) var(--hv-ease)}
/* the site menu (the dialog) */
#store-menu nav a,#store-menu .store-social a,#store-menu .store-lang-menu a{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.22em;text-decoration-thickness:1px;
  transition:text-decoration-color var(--hv-base) var(--hv-ease),color var(--hv-fast) var(--hv-ease),opacity var(--hv-fast) var(--hv-ease)}
#store-menu .store-lang-menu a[aria-current="true"]{text-decoration-color:currentColor}

@media (hover:hover) and (pointer:fine){
  #store-header .store-links :is(a,button):is(:hover,:focus-visible) .hv-ch::before,
  #store-header .store-links :is(a,button):is(:hover,:focus-visible) .hv-ch::after,
  .opening-cta:is(:hover,:focus-visible) .hv-ch::before,
  .opening-cta:is(:hover,:focus-visible) .hv-ch::after{transform:translateY(-100%);
    transition-duration:var(--hv-roll-in);transition-delay:calc(var(--i,0) * var(--hv-stagger))}
  #store-header .store-bag:hover,#store-header #store-menu-toggle:hover{opacity:.62}
  .store-cat-tile:hover .store-cat-pic img{transform:translateY(var(--hv-lift-cover))}
  .store-cat-sub a:hover{color:#292820}
  #store-menu nav a:hover,#store-menu .store-social a:hover,#store-menu .store-lang-menu a:hover{text-decoration-color:currentColor;opacity:1}
}
@media (prefers-reduced-motion:reduce){
  #store-header .store-links :is(a,button):hover{opacity:.6}   /* the roll is still, so the word fades instead */
}

/* ---------- 2. Text links: the ink line ---------- */
/* prose: a soft underline at rest that turns ink on hover (:where keeps this generic rule below any class, so a
   breadcrumb or a switch inside a list item keeps its own rule below) */
:where(p,li,dd,dt,td,figcaption,small,blockquote) > a:where([href]):where(:not([class*="btn"]):not([class*="button"]):not(.store-cat-tile)),
.article-body a,.article-related a,.bk-links a,.store-cat-sub a,.lang-suggest a,.store-added a,.cart-main p a,.eu-guarantee-content a{
  text-decoration-color:var(--hv-soft-line);text-decoration-thickness:1px;
  transition:text-decoration-color var(--hv-base) var(--hv-ease),color var(--hv-fast) var(--hv-ease),opacity var(--hv-fast) var(--hv-ease)}
/* nav-like links: no line at rest, the line fades in on hover */
.bk-crumbs a,.crumbs a,.tp-crumbs a,.tk-crumbs a,.bk-page>footer div a,.footer a,.homepage-footer a,.order-footer a,.order-social a,.bk-switch a,.edition-switch a,.th-bk-go{
  text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.24em;text-decoration-thickness:1px;
  transition:text-decoration-color var(--hv-base) var(--hv-ease),color var(--hv-fast) var(--hv-ease),background-color var(--hv-base) var(--hv-ease),opacity var(--hv-fast) var(--hv-ease)}
.bk-page>footer .wordmark{text-decoration:none;transition:opacity var(--hv-fast) var(--hv-ease)}
/* tabs and labels that already carry a rule under them: the rule turns ink */
.garment-navigation a,.text-button,.collection-facts-grid h3 a{transition:border-color var(--hv-base) var(--hv-ease),color var(--hv-fast) var(--hv-ease)}

@media (hover:hover) and (pointer:fine){
  html :where(p,li,dd,dt,td,figcaption,small,blockquote) > a:where([href]):where(:not([class*="btn"]):not([class*="button"]):not(.store-cat-tile)):hover,
  html .article-body a:hover,html .article-related a:hover,html .bk-links a:hover,html .store-cat-sub a:hover,html .lang-suggest a:hover,html .store-added a:hover,html .cart-main p a:hover,html .eu-guarantee-content a:hover,
  html .bpg-guide .article-body a:hover{text-decoration-color:currentColor}
  html .bk-crumbs a:hover,html .crumbs a:hover,html .tp-crumbs a:hover,html .tk-crumbs a:hover,html .bk-page>footer div a:hover,html .footer a:hover,html .homepage-footer a:hover,html .order-footer a:hover,html .order-social a:hover{text-decoration-color:currentColor;color:var(--fg,var(--ink,#161616))}
  html .bk-page>footer .wordmark:hover{opacity:.6}
  html .garment-navigation a:hover,html .text-button:hover{border-color:var(--ink,currentColor)}
  html .collection-facts-grid h3 a:hover{border-bottom-color:currentColor}
  html .tbk .tp-crumbs a:hover{text-decoration-thickness:1px!important;text-underline-offset:.24em!important}
}

/* ---------- 3. Buttons ---------- */
/* solid (black on white, or light on a dark page): one step of tint, a 1 px lift with a soft shadow; pressed, it settles */
html .bk-btn,html .tb-btn,html .tb-home-btn,html .tk-btn,html .th-btn,html .tp-btn,html .buy,html #bible-buy-now,html #genesis-buy-now,html .options-primary,html .options-add,
html .waitlist-row button,html #pay,html .buy-button,html .collection-grid .buy-preview,html #store-menu>button,html .guide-buy__btn,html .guide-buy__more,html .mobile-purchase-bar .mobile-buy,
html .article-buy,html .article-sample,html .download-card,html .order-continue,html .ebook-alternative-link,html .format-card__choose,html .tk-look,html .tp-look,html .tk-occ-go,
html .tk-rd-ctrl button,html .tk-rd-close,html .tb-ctrl button,html .tk-filter button,html .look-pagination button,html .shipping-fields button,html .collection-cart,html .pg-thumb,html .store-add,
html .th-tab,html .tb-picker button,html .view-book,html .cart-main button,html .bag-reward button,html .fs-progress button{
  transition:background-color var(--hv-base) var(--hv-ease),border-color var(--hv-fast) var(--hv-ease),color var(--hv-fast) var(--hv-ease),
    opacity var(--hv-fast) var(--hv-ease),transform var(--hv-base) var(--hv-ease),box-shadow var(--hv-base) var(--hv-ease)}
html #cookie-settings{transition:background-color var(--hv-base) var(--hv-ease),border-color var(--hv-fast) var(--hv-ease),transform .32s var(--hv-ease)}

@media (hover:hover) and (pointer:fine){
  /* solid dark buttons */
  html .bk-btn:not(.ghost):not([disabled]):hover,html .tb-btn:not(.ghost):not([disabled]):hover,html .tb-home-btn:not(.ghost):hover,html .tk-btn:not([disabled]):hover,
  html .th-btn:not(.ghost):hover,html .tp-btn:not(.ghost):not(:disabled):hover,html .buy:hover,html #bible-buy-now:hover,html #genesis-buy-now:hover,html .options-primary:hover,
  html .waitlist-row button:hover,html #pay:hover:not(:disabled),html .buy-button:hover,html .collection-grid .buy-preview:hover,html .guide-buy__btn:hover,
  html .mobile-purchase-bar .mobile-buy:hover,html .download-card.primary:hover,html .view-book:not(.quick-shop-card .view-book):hover{
    background:var(--hv-up);border-color:var(--hv-up);opacity:1;transform:translateY(var(--hv-lift));box-shadow:var(--hv-shadow)}
  html #store-menu>button:hover{background:var(--hv-up)!important;border-color:var(--hv-up)!important;transform:translateY(var(--hv-lift))}
  html body[data-book=black] #bible-buy-now:hover{background:#fff;border-color:#fff}
  /* light solid buttons on the dark article pages */
  html .article-buy:hover{background:#fff;transform:translateY(var(--hv-lift));box-shadow:0 12px 22px -14px rgba(0,0,0,.9)}
  /* outlined (ghost) buttons: a 5% tint of their own ink, the border turns ink, the same lift */
  html .bk-btn.ghost:hover,html .tb-btn.ghost:hover,html .tb-home-btn.ghost:hover,html .th-btn.ghost:hover,html .tbk a.th-btn.ghost:hover,html .tp-btn.ghost:hover:not(:disabled),
  html .options-add:hover,html .store-add:hover,html .tb-ctrl button:not(:disabled):hover,html .tk-filter button:hover,html .look-pagination button:hover,html .shipping-fields button:hover,
  html .guide-buy__more:hover,html .quick-shop-card .view-book:hover,html .cart-main button:not([disabled]):hover{
    background:var(--hv-tint);border-color:currentColor;color:inherit;opacity:1;transform:translateY(var(--hv-lift));box-shadow:none}
  html .bk-btn.ghost:hover,html .tb-btn.ghost:hover,html .th-btn.ghost:hover,html .tp-btn.ghost:hover{color:var(--fg,var(--tb-fg,#161616))}
  /* the ones that fill with ink on hover keep that gesture, now timed and lifted like the rest */
  html .article-sample:hover,html .bpg-guide .article-actions .article-sample:hover,html .bpg-guide .guide-interior>.article-sample:hover,html .order-continue:hover,html .ebook-alternative-link:hover,
  html .format-card__choose:hover,html .tk-look:hover,html .tp-look:hover,html .tk-occ-go:hover,html .tk-rd-ctrl button:hover:not(:disabled),html .tk-rd-close:hover{
    transform:translateY(var(--hv-lift));box-shadow:var(--hv-shadow)}
  /* pressed: the lift settles and the button gives a little */
  html .bk-btn:active,html .tb-btn:active,html .tb-home-btn:active,html .tk-btn:active,html .th-btn:active,html .tp-btn:active,html .buy:active,html #bible-buy-now:active,html #genesis-buy-now:active,
  html .options-primary:active,html .options-add:active,html .waitlist-row button:active,html #pay:active,html .buy-button:active,html .collection-grid .buy-preview:active,html .guide-buy__btn:active,
  html .article-buy:active,html .article-sample:active,html .order-continue:active,html .ebook-alternative-link:active,html .format-card__choose:active,html .tk-look:active,html .tp-look:active,
  html .store-add:active,html .collection-cart:active,html .view-book:active{
    transform:translateY(0) scale(var(--hv-press));box-shadow:none;transition-duration:90ms}
  /* small round and square controls */
  html .collection-cart:hover{background:#f4f4f2;border-color:#292820;transform:translateY(var(--hv-lift))}
  /* the cookie button keeps its own transform (the guides lift it above their sticky bar), so it only tints */
  html #cookie-settings:hover{background:var(--hv-tint);border-color:currentColor}
  html .pg-thumb:hover{border-color:var(--tb-fg,var(--fg,#161616))}
}

/* ---------- 4. Pills, chips and switches ---------- */
html .bk-pill span,html .pill input+span,html .tb-opt label>span,html .tp-chips label span,html .tk-version label span,html .options-pill,html .purchase-option,html .th-tab,html .tk-filter button,
html .bk-switch a,html .edition-switch a,html .bk-switch,html .nt-pick select,html .shipping-fields select,html .shipping-fields input,html .eu-guarantee-content select{
  transition:border-color var(--hv-fast) var(--hv-ease),background-color var(--hv-base) var(--hv-ease),color var(--hv-fast) var(--hv-ease),text-decoration-color var(--hv-base) var(--hv-ease)}

@media (hover:hover) and (pointer:fine){
  /* an unchecked pill: the border turns ink and the pill takes a 5% tint; the checked one is left alone */
  html .bk-pill:hover input:not(:checked)+span,html .pill:hover input:not(:checked)+span,html .tb-opt label:hover input:not(:checked)+span,html .tp-chips label:hover input:not(:checked)+span,
  html .tk-version label:hover input:not(:checked)+span,html .options-pill:hover:not(:has(input:checked)),html .purchase-option:hover:not(:has(input:checked)),
  html .tb-picker button:not([aria-pressed="true"]):hover,html .th-tab:not([aria-current]):hover,html .tk-filter button:not([aria-pressed="true"]):hover{
    border-color:var(--fg,var(--tb-fg,#161616));background-color:var(--hv-tint);transform:none;box-shadow:none}
  html .bk-pill:hover input:checked+span,html .tb-picker button[aria-pressed="true"]:hover{box-shadow:none}
  /* the segmented switch (Black Edition | White Edition): the other side takes ink text on a 9% pill */
  html .bk-switch a:not([aria-current]):hover,html .edition-switch a:not([aria-current]):hover{color:var(--fg,var(--ink,#161616));background:var(--hv-tint-strong);text-decoration-color:transparent}
  /* selects and fields: the border turns ink */
  html .nt-pick select:hover,html .shipping-fields select:hover,html .shipping-fields input:hover,html .eu-guarantee-content select:hover{border-color:var(--tb-fg,var(--fg,#161616))}
}

/* ---------- 5. Questions (the FAQ accordions) ---------- */
/* No ring, no band. On hover the '+' spins a quarter turn and turns ink, and the item's bottom rule draws itself in ink
   from left to right; it leaves to the right. Open items keep their '–' still. */
html :is(.bk-faq,.tb-faq,.tk-faq-list,.th-faq-list,.eu-guarantee-notice) summary{position:relative;transition:color var(--hv-fast) var(--hv-ease)}
html :is(.bk-faq,.tb-faq,.tk-faq-list,.th-faq-list) summary::after{transition:transform var(--hv-base) var(--hv-ease),color var(--hv-fast) var(--hv-ease)}
html :is(.bk-faq,.tb-faq,.tk-faq-list,.th-faq-list,.eu-guarantee-notice) summary::before{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right center;transition:transform calc(var(--hv-slow) * .75) var(--hv-ease);pointer-events:none}
@media (hover:hover) and (pointer:fine){
  html :is(.bk-faq,.tb-faq,.tk-faq-list,.th-faq-list,.eu-guarantee-notice) summary:hover{box-shadow:none;filter:none;color:inherit}
  html :is(.bk-faq,.tb-faq,.tk-faq-list,.th-faq-list,.eu-guarantee-notice) summary:hover::before{transform:scaleX(1);transform-origin:left center}
  html :is(.bk-faq,.tb-faq,.tk-faq-list,.th-faq-list) summary:hover::after{color:currentColor}
  html :is(.bk-faq,.tb-faq,.tk-faq-list,.th-faq-list) details:not([open])>summary:hover::after{transform:rotate(calc(90deg * var(--hv-rm)))}
}

/* ---------- 6. Covers, tiles and pictures ---------- */
/* a book cover lifts 4 px (never scales, never dims); a photograph breathes to 103%; a tile or card takes a tint or an
   ink border; the text on a card never gains an underline */
html .tb-cover img,html .nt-unit img,html .tb-home-covers a img,html .rail-item a img,html .th-bk img,html .th-gc img,html .tp-more-list a img,html .nt-edition img,html .book-art img,html .bk-spread-thumb img,html .tk-art .tk-cover{
  transition:transform var(--hv-slow) var(--hv-ease),box-shadow var(--hv-slow) var(--hv-ease),outline-color var(--hv-fast) var(--hv-ease),border-color var(--hv-fast) var(--hv-ease)}
html .outfit-piece-image img,html .look .look-model img,html .article-inline-preview img{transition:transform var(--hv-slow) var(--hv-ease)}
html .nt-edition,html .article-block,html .journal-container .article-block,html .tp-give-list a,html .download-card,html .invoice-row,html .collection-book-cover,html .book{
  transition:background-color var(--hv-base) var(--hv-ease),border-color var(--hv-fast) var(--hv-ease),transform var(--hv-base) var(--hv-ease),box-shadow var(--hv-base) var(--hv-ease)}
html .th-fc .th-fc-name{transition:opacity var(--hv-base) var(--hv-ease),transform var(--hv-base) var(--hv-ease)}

@media (hover:hover) and (pointer:fine){
  html .tb-cover:hover img,html .nt-unit:hover img,html .tb-home-covers a:hover img,html .rail-item a:hover img,html .rail-item a:focus-visible img,html .th-bk:hover img,html .th-gc:hover img,
  html .tp-more-list a:hover img,html .nt-edition:hover img,html .book-art:hover img,html .tk-art .tk-cover:hover{transform:translateY(var(--hv-lift-cover))}
  html .th-fc:hover img{transform:translateY(var(--hv-lift-cover))}
  html .nt-grid .tb-cover:hover .nt-members-strip img{transform:none}
  html .outfit-piece-image:hover img,html .look:hover .look-model img,html .look:focus-visible .look-model img,html .article-inline-preview a:hover img{transform:scale(var(--hv-zoom))}
  html .nt-edition:hover{background:#fff;border-color:var(--tb-fg,#161616)}
  html .tp-give-list a:hover,html .download-card:hover,html .invoice-row:hover,html .bk-spread-thumb:hover img{border-color:var(--fg,var(--ink,#161616));transform:none}
  html .journal-container .article-block:hover{transform:none}
  html .article-block:hover .article-title{text-decoration-color:currentColor}
  html a[href]:has(img,picture,svg image):hover img,html .tbk a[href]:has(img):hover img{filter:none}
}

/* ---------- 7. What the layer must never touch ---------- */
/* the 3D book components of the theme pages (tk-art, th-fc fan, tp-book) keep their own designed motion */