/* RUSHINGWIND V33 — variant B "FLIP": full-bleed open book with CSS 3D page turns. Stage only; bars/modal come from styles.css. */

:root {
  --page-ratio: 0.62745;            /* 1024 / 1632 */
  --spread-ratio: 1.2549;           /* 2048 / 1632 (two pages side by side) */
  --turn-ease: cubic-bezier(.2, .7, .2, 1);
  --paper: #e6e4df;
}
/* size tokens live on body. --vw/--vh are the stage's real size in px (set by flip.js; viewport units as fallback).
   fit "contain" (default): the whole sheet is always visible, as tall as the stage, never scrolled or cropped; the
     slack on the other axis (sides on wide screens, top/bottom on phones) is filled by .ext — the sheet's own edges
     mirrored outward and blurred — so the page reads as continuing to the screen edge.
   fit "cover" (config book.fit): the sheet spans the width and, being taller than the stage, scrolls vertically. */
.flip-body {
  --vw: 100vw;
  --vh: 100vh;
  --ph: min(var(--vh), calc(var(--vw) / 1.2549));
  --pw: calc(var(--ph) * 0.62745);
  --bw: calc(var(--pw) * 2);
}
@supports (height: 100svh) { .flip-body { --vh: 100svh; } }
.flip-body.mode-page {
  --pw: min(var(--vw), calc(var(--vh) * 0.62745));
  --ph: calc(var(--pw) * 1.59375);
  --bw: var(--pw);
}
.flip-body.fit-cover { --ph: max(var(--vh), calc(var(--vw) / 1.2549)); }
.flip-body.fit-cover.mode-page { --pw: max(var(--vw), calc(var(--vh) * 0.62745)); }
/* fit "fill": the sheet IS the screen — stretched to the stage's own proportion (book.maxStretch caps it: flip.js then
   sets the tokens inline and the excess is cropped, top-anchored). Images fill their box instead of covering it. */
.flip-body.fit-fill { --ph: var(--vh); --pw: calc(var(--vw) / 2); --bw: var(--vw); }
.flip-body.fit-fill.mode-page { --pw: var(--vw); --ph: var(--vh); --bw: var(--vw); }
.fit-fill .face img, .fit-fill .page img { object-fit: fill; }
.fit-fill .scene { place-items: start center; }

.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Stage ---------- */
.flip { position: fixed; inset: 0; overflow: hidden; background: var(--black); outline-offset: -6px; }

/* full-screen backdrop: the current spread's pre-blurred thumbnail (no runtime filter), cross-fading to the next one as the page turns */
.bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.bg-layer { position: absolute; inset: 0; background-position: center; background-size: cover; background-repeat: no-repeat; background-color: var(--black); }
.bg-layer--b { opacity: var(--bgp, 0); }
.bg::after { content: ""; position: absolute; inset: 0; background: rgba(11, 11, 12, .42); }

/* .ext: the slack around the sheet filled with the sheet itself — its outer strip mirrored outward (scaleX/Y(-1)) and
   blurred, anchored so the page edge and its reflection meet exactly at the book's edge. Each layer bleeds 40px past its
   clip box so the blur's soft edge is never seen; two layers cross-fade (--bgp) while a leaf turns, like the backdrop. */
.ext { position: absolute; z-index: 1; overflow: hidden; pointer-events: none; }
.ext[hidden] { display: none; }
.ext--l, .ext--r { top: 0; bottom: 0; width: max(0px, calc((var(--vw) - var(--bw)) / 2)); }
.ext--l { left: 0; }
.ext--r { right: 0; }
.ext--t, .ext--b { left: 0; right: 0; height: max(0px, calc((var(--vh) - var(--ph)) / 2)); }
.ext--t { top: 0; }
.ext--b { bottom: 0; }
.ext-layer { position: absolute; inset: -40px; background-repeat: no-repeat; filter: blur(16px) brightness(.66) saturate(1.05); }
.ext-layer--b { opacity: var(--bgp, 0); }
.ext--l .ext-layer, .ext--r .ext-layer { background-size: auto var(--ph); transform: scaleX(-1); }
.ext--l .ext-layer { background-position: 40px 40px; }
.ext--r .ext-layer { background-position: calc(100% - 40px) 40px; }
.ext--t .ext-layer, .ext--b .ext-layer { background-size: var(--pw) auto; transform: scaleY(-1); }
.ext--t .ext-layer { background-position: 40px 40px; }
.ext--b .ext-layer { background-position: 40px calc(100% - 40px); }

/* .scene scrolls vertically when the page is taller than the stage; .crop clips the horizontal excess (portrait) without
   becoming a scroll container (overflow: clip) and holds the perspective, so the leaves keep their 3D turn. */
.scene { position: absolute; inset: 0; overflow: hidden; display: grid; place-items: center; }
.fit-cover .scene {
  display: block; overflow: hidden auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .35) transparent;
}
.fit-cover .scene::-webkit-scrollbar { width: 6px; }
.fit-cover .scene::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .35); border-radius: 3px; }
.fit-cover .scene::-webkit-scrollbar-track { background: transparent; }
.crop {
  position: relative; width: 100%; height: var(--ph); overflow: hidden; overflow: clip;
  perspective: calc(var(--bw) * 2.5); perspective-origin: 50% 50%;
}
.mode-page .crop { perspective: calc(var(--pw) * 4); }
.book-wrap { position: absolute; top: 0; left: 50%; width: var(--bw); height: var(--ph); margin-left: calc(var(--bw) / -2); transform-style: preserve-3d; }

/* labels over the book: caption top-left under the brand, drag hint top-right (fine pointers only) */
.label {
  position: absolute; z-index: 6; top: calc(var(--sat) + 4.1rem); margin: 0; display: inline-flex; align-items: center; gap: .7em;
  color: var(--grey); white-space: nowrap; pointer-events: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .9), 0 0 14px rgba(0, 0, 0, .7);
}
/* flat (filter-free) plates so the small mono text survives white/yellow/magenta pages underneath */
.label, .flip-body .counter, .flip-body .bar-right .tag { padding: .3em .6em; margin-inline: -.6em; background: rgba(11, 11, 12, .55); border-radius: 2px; }
.flip-body .bar-right .tag { margin-inline: 0; }
.flip-body .bar--top { padding-bottom: 3.4rem; background: linear-gradient(180deg, rgba(11, 11, 12, .9), rgba(11, 11, 12, .6) 50%, rgba(11, 11, 12, 0)); }
.flip-body .bar--bottom { background: linear-gradient(0deg, rgba(11, 11, 12, .92), rgba(11, 11, 12, .55) 45%, rgba(11, 11, 12, 0)); }
.flip-body .btn-buy { box-shadow: 0 0 0 1px rgba(11, 11, 12, .6), 0 12px 40px rgba(0, 0, 0, .35); }
.label .sq { flex: 0 0 auto; }
.sq--blue { background: var(--blue); }
.label--l { left: var(--gutter); max-width: min(60%, calc(100vw - 2 * var(--gutter))); }
.label--r { right: var(--gutter); color: var(--bone); opacity: .75; }
.label-n { color: var(--yellow); font-weight: 700; }
.label-txt { overflow: hidden; text-overflow: ellipsis; }
.mode-page .label--r { display: none; }
.mode-page .label--l { max-width: calc(100vw - 2 * var(--gutter)); }
@media (pointer: coarse) { .label--r { display: none; } }

/* ---------- Book ---------- */
.book {
  position: absolute; inset: 0; transform-style: preserve-3d; cursor: grab; touch-action: pinch-zoom;   /* single-finger drags reach pointer events; pinch-zoom stays available */
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.book.is-dragging { cursor: grabbing; }
.plate { position: absolute; inset: 0; background: var(--near); box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 24px 90px rgba(0, 0, 0, .55); }   /* lifts the sheet off its mirrored continuation */
.plate::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: rgba(0, 0, 0, .9); }
.mode-page .plate::after { display: none; }

.page, .leaf { position: absolute; top: 0; width: var(--pw); height: var(--ph); }
.page { overflow: hidden; background: var(--near); }
.page--l { left: 0; }
.page--r { left: 50%; }
.mode-page .page--r { left: 0; }
.mode-page .page--l { display: none; }
/* only the previous, current and next spreads stay in the render tree */
.page[hidden], .leaf[hidden] { display: none; }

.leaf { left: 50%; transform-origin: 0 50%; transform-style: preserve-3d; will-change: transform; }
.mode-page .leaf { left: 0; }
.face, .page-in { position: absolute; inset: 0; overflow: hidden; background: var(--near); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.face--back { transform: rotateY(180deg); }
.face img, .page img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; pointer-events: none; }
.face img:not([src]), .page img:not([src]) { visibility: hidden; }

/* paper back (single-page mode): bone paper with the globe mark */
.face--paper { background: var(--paper); color: #0b0b0c; }
.face--paper::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255, 255, 255, .55), rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .06) 100%); }
.face--paper .paper-mark { position: absolute; left: 50%; top: 50%; width: 34%; aspect-ratio: 3.62 / 1; transform: translate(-50%, -50%); background: currentColor; opacity: .85; -webkit-mask: url("../assets/logo/rwg-globe-mark.svg") center / contain no-repeat; mask: url("../assets/logo/rwg-globe-mark.svg") center / contain no-repeat; }
.face--paper .paper-txt { position: absolute; left: 10%; right: 10%; bottom: 7%; margin: 0; text-align: center; color: #0b0b0c; opacity: calc(var(--s, 0) * .7); }   /* paper text only while the leaf turns */
.face--paper .paper-folio { position: absolute; top: 5%; left: 10%; margin: 0; color: var(--blue); font-weight: 700; opacity: var(--s, 0); }
.mode-page .leaf.is-turned { visibility: hidden; }   /* resting turned leaves would show their paper backs in the side strip; the left edge stack stands in for them */

/* gutter shadow on the fold (right pages: left edge is the spine; left pages: right edge) */
.gutter { position: absolute; inset: 0; pointer-events: none; }
.face--front .gutter, .page--r .gutter { background: linear-gradient(to right, rgba(0, 0, 0, .55), rgba(0, 0, 0, .18) 4%, rgba(0, 0, 0, .04) 10%, transparent 18%); }
.face--back .gutter, .page--l .gutter { background: linear-gradient(to left, rgba(0, 0, 0, .55), rgba(0, 0, 0, .18) 4%, rgba(0, 0, 0, .04) 10%, transparent 18%); }
.mode-page .face--front .gutter, .mode-page .page--r .gutter { background: linear-gradient(to right, rgba(0, 0, 0, .5), rgba(0, 0, 0, .12) 3%, transparent 12%); }
.mode-page .face--back .gutter { background: none; }

/* moving shading + glare on the turning leaf (--s = sin(angle), --gx = 0..1 glare position) */
.shade { position: absolute; inset: 0; pointer-events: none; opacity: var(--s, 0); }
.face--front .shade { background: linear-gradient(to right, rgba(0, 0, 0, .58) 0%, rgba(0, 0, 0, .22) 30%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .28) 100%); }
.face--back .shade { background: linear-gradient(to left, rgba(0, 0, 0, .58) 0%, rgba(0, 0, 0, .22) 30%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .28) 100%); }
.glare { position: absolute; inset: 0; pointer-events: none; opacity: var(--s, 0); background-size: 240% 100%; background-repeat: no-repeat; background-position: calc(var(--gx, 0) * 100%) 0; }
.face--front .glare { background-image: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .22) 46%, rgba(255, 255, 255, .06) 50%, transparent 58%); }
.face--back .glare { background-image: linear-gradient(-105deg, transparent 38%, rgba(255, 255, 255, .22) 46%, rgba(255, 255, 255, .06) 50%, transparent 58%); }

/* shadow cast by the turning leaf on the page beneath (--co opacity, --cw width) */
.cast { position: absolute; top: 0; bottom: 0; width: var(--cw, 0%); opacity: var(--co, 0); pointer-events: none; }
.face--front .cast, .page--r .cast { left: 0; background: linear-gradient(to right, rgba(0, 0, 0, .62), rgba(0, 0, 0, .3) 55%, transparent); }
.face--back .cast, .page--l .cast { right: 0; background: linear-gradient(to left, rgba(0, 0, 0, .62), rgba(0, 0, 0, .3) 55%, transparent); }

.face::after, .page::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); pointer-events: none; }

/* page-edge stack: a few subtle 1px lines just inside the outer edges, thinning as you advance */
.edges { position: absolute; top: 0; bottom: 0; display: flex; gap: 2px; pointer-events: none; transform: translateZ(12px); }
.edges--l { left: 0; padding-left: 2px; }
.edges--r { right: 0; flex-direction: row-reverse; padding-right: 2px; }
.edges i { display: block; width: 1px; height: var(--eh, 100%); margin-top: auto; margin-bottom: auto; background: var(--bone); opacity: var(--eo, .3); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .35); transition: opacity .35s, height .35s; }
.edges i[hidden] { display: none; }

/* ---------- Arrows over the outer edges ---------- */
.flip .arrow { z-index: 6; opacity: .55; backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(11, 11, 12, .55); }   /* no runtime filters on this page */
.flip .arrow:hover, .flip .arrow:focus-visible { opacity: 1; }
.flip .arrow[disabled] { opacity: .18; }
.flip .arrow--prev { left: var(--gutter); }
.flip .arrow--next { right: var(--gutter); }
/* no side strip to hold the arrows (viewport aspect < 3:2): park them in the bottom corners, away from the edge-centre grab point and the fold */
@media (max-aspect-ratio: 3/2) {
  .flip .arrow { top: auto; bottom: calc(var(--sab) + 1.5rem); transform: none; }
}
/* fine pointers already get the drag hint in .label--r (spread mode) — do not say it twice in the bottom bar */
@media (hover: hover) and (pointer: fine) {
  .flip-body:not(.mode-page) .hint { display: none; }
}

@media (max-width: 900px) {
  .flip-body .tag { display: none; }      /* local twin of the shared 600px rule: the tag wraps next to the toggle at tablet widths */
}
@media (max-width: 600px) {
  .label { font-size: .6rem; top: calc(var(--sat) + 3.7rem); white-space: normal; }
}
/* short landscape (landscape phones): counter beside the button, no hint, so the bar covers less of the page */
@media (orientation: landscape) and (max-height: 540px) {
  .flip-body .bar--bottom { flex-direction: row; justify-content: center; align-items: center; gap: 1.2rem; padding-top: 1.4rem; padding-bottom: calc(var(--sab) + .7rem); }
  .flip-body .hint { display: none; }
  .flip-body .btn-buy { min-height: 2.6rem; padding: .55rem 1rem; font-size: .7rem; gap: .6rem; }
  .flip-body .btn-buy-price { padding-left: .6rem; }
  .label { font-size: .6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .edges i { transition: none; }
}