/* ===================================================================
   TEXPERT DEALS — 3D LINE CARD FLIPBOOK
   =================================================================== */

:root {
  --bg: #0a0a0a;
  --bg-2: #121212;
  --gold: #e1aa1b;
  --gold-soft: #f0c04a;
  --white: #ffffff;
  --gray-1: #b7b7b7;
  --gray-2: #7a7a7a;
  --gray-line: #232323;
  --page-ratio: 0.77273;   /* 2550 / 3300 — one page */
  --spread-ratio: 1.54545; /* two pages side by side */
  /* Vertical space taken by everything above/below the book (header, hero,
     controls, hint, section padding). Used to size the book to the viewport
     instead of pinning it to a fixed max-width. */
  --book-chrome: 345px;
  --radius: 6px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--white);
  font-family: 'Instrument Sans', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  overflow-x: hidden;
  width: 100%;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

::selection { background: var(--gold); color: #111; }

/* Ambient background glow */
.bg-glow {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 40% at 50% 18%, rgba(225,170,27,0.10), transparent 60%),
    radial-gradient(ellipse 50% 35% at 85% 85%, rgba(225,170,27,0.05), transparent 60%),
    linear-gradient(180deg, #0a0a0a 0%, #0d0d0d 40%, #0a0a0a 100%);
}

/* ---------------- HEADER ---------------- */
.site-header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px clamp(18px, 4vw, 44px);
  border-bottom: 1px solid var(--gray-line);
}

.site-header__logo {
  height: clamp(26px, 3.4vw, 36px);
  width: auto;
  display: block;
}

.site-header__tag {
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--gray-2);
  font-weight: 600;
}

/* ---------------- HERO ---------------- */
.hero {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: clamp(18px, 2.4vw, 26px) 20px clamp(10px, 1.4vw, 14px);
}

.hero__eyebrow {
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: 0.35em;
  color: var(--gold);
  font-weight: 700;
}

.hero__title {
  margin: 0;
  font-size: clamp(32px, 4.8vw, 50px);
  line-height: 0.95;
  font-weight: 800;
  letter-spacing: 0.01em;
  background: linear-gradient(180deg, #ffffff 0%, #d9d9d9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-transform: uppercase;
  font-family: 'Arial Narrow', Arial, sans-serif;
}

.hero__subtitle {
  margin: 10px 0 0;
  color: var(--gray-1);
  font-size: clamp(12.5px, 1.6vw, 15px);
  letter-spacing: 0.02em;
}

/* ---------------- BOOK SECTION ---------------- */
.book-section {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px clamp(8px, 1.4vw, 20px) 34px;
}

.book-stage {
  position: relative;
  width: 100%;
  max-width: min(1660px, 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(2px, 0.8vw, 14px);
}

.book-wrap {
  position: relative;
  width: 100%;
  max-width: 1460px !important;
  display: flex;
  justify-content: center;
  perspective: 2400px;
}

/* From tablet up the book renders as a two-page spread, so let it grow to
   whatever the viewport height allows instead of sitting at a fixed width
   with dead space on either side.

   The max(1000px, ...) floor matters: on a short viewport — a small laptop,
   or any window the user has zoomed into — the height-derived width collapses
   and the book would shrink to a stamp surrounded by empty space. The floor
   keeps it wide and lets the page scroll vertically instead, which is what
   someone who just zoomed in actually wants. The real upper bound is still
   `width: 100%` of the stage, so this can never overflow the viewport. */
@media (min-width: 761px) {
  .book-wrap {
    max-width: min(1460px, max(1000px, calc((100vh - var(--book-chrome)) * var(--spread-ratio))));
    max-width: min(1460px, max(1000px, calc((100svh - var(--book-chrome)) * var(--spread-ratio))));
  }
}

.book-shadow {
  position: absolute;
  left: 50%;
  bottom: -26px;
  transform: translateX(-50%);
  width: 78%;
  height: 40px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 72%);
  filter: blur(2px);
  z-index: 0;
  pointer-events: none;
  transition: opacity .4s var(--ease);
}

.book {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  box-shadow:
    0 30px 60px -20px rgba(0,0,0,0.65),
    0 10px 24px -8px rgba(0,0,0,0.5);
  border-radius: 3px;
  opacity: 0;
  transform: translateY(14px) scale(0.985);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}

.book.is-ready {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.book :is(.stf__item, .stf__wrapper) img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

/* soft inner spine shading to fake center gutter depth */
.book::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 40px;
  margin-left: -20px;
  background: linear-gradient(90deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.16) 45%,
    rgba(0,0,0,0.16) 55%,
    rgba(0,0,0,0) 100%);
  pointer-events: none;
  z-index: 5;
  opacity: 0.9;
}

/* Clickable overlays sitting on top of the last (contact) page image */
.pdf-link {
  position: absolute;
  z-index: 30;
  cursor: pointer;
  display: none;
  border-radius: 4px;
  -webkit-tap-highlight-color: transparent;
}
.pdf-link.is-visible { display: block; }
.pdf-link:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ---------------- SIDE NAV ARROWS (desktop) ---------------- */
/* Floated over the stage rather than laid out beside the book — as flex
   siblings they permanently reserved ~120px of horizontal room that the
   spread could otherwise use. */
.side-nav {
  position: absolute;
  top: 50%;
  z-index: 25;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--gray-line);
  background: rgba(10,10,10,0.55);
  backdrop-filter: blur(6px);
  color: var(--gray-1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transform: translateY(-50%);
  transition: color .25s var(--ease), background .25s var(--ease),
              border-color .25s var(--ease), transform .25s var(--ease),
              opacity .25s var(--ease);
}

.side-nav--prev { left: 12px; }
.side-nav--next { right: 12px; }

.side-nav { opacity: 0.5; }
.book-wrap:hover .side-nav:not(:disabled) { opacity: 1; }

.side-nav:hover {
  opacity: 1;
  color: #111;
  background: var(--gold);
  border-color: var(--gold);
  transform: translateY(-50%) scale(1.06);
}

.side-nav:active { transform: translateY(-50%) scale(0.96); }

.side-nav:disabled {
  opacity: 0;
  cursor: not-allowed;
  pointer-events: none;
}

@media (max-width: 760px) {
  .side-nav { display: none; }
}

/* ---------------- BOTTOM CONTROLS ---------------- */
.controls {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--gray-line);
  border-radius: 999px;
  backdrop-filter: blur(6px);
}

.ctrl-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--gray-1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .2s var(--ease);
  text-decoration: none;
}

.ctrl-btn:hover {
  color: #111;
  background: var(--gold);
}

.ctrl-divider {
  width: 1px;
  height: 20px;
  background: var(--gray-line);
}

.page-indicator {
  min-width: 64px;
  text-align: center;
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--white);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.hint {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--gray-2);
  text-align: center;
  letter-spacing: 0.01em;
}

@media (prefers-reduced-motion: reduce) {
  .hint { display: none; }
}

/* ---------------- CTA STRIP ---------------- */
.cta-strip {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 30px 20px 46px;
  text-align: center;
}

.cta-strip p {
  margin: 0;
  font-size: 15px;
  color: var(--gray-1);
}

.cta-strip__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 26px;
  background: var(--gold);
  color: #111;
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.03em;
  text-decoration: none;
  border-radius: 4px;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
  box-shadow: 0 8px 22px -8px rgba(225,170,27,0.55);
}

.cta-strip__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -8px rgba(225,170,27,0.7);
}

/* ---------------- FOOTER ---------------- */
.site-footer {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: center;
  justify-content: space-between;
  padding: 18px clamp(18px, 5vw, 56px);
  border-top: 1px solid var(--gray-line);
  font-size: 12px;
  color: var(--gray-2);
}

.site-footer__links {
  display: flex;
  gap: 18px;
}

.site-footer a {
  color: var(--gray-2);
  text-decoration: none;
  transition: color .2s;
}

.site-footer a:hover { color: var(--gold); }

/* ---------------- FULLSCREEN MODE ---------------- */
.book-section:fullscreen,
.book-section:-webkit-full-screen {
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  padding: 14px;
}

.book-section:fullscreen .book-stage { max-width: min(1900px, 99vw); }

/* Fullscreen drops the header/hero/footer, so nearly the whole viewport
   height is available to the spread. */
.book-section:fullscreen .book-wrap,
.book-section:-webkit-full-screen .book-wrap {
  max-width: min(1760px, calc((100vh - 130px) * var(--spread-ratio)));
}

/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 560px) {
  .controls { gap: 8px; padding: 8px 12px; }
  .ctrl-btn { width: 32px; height: 32px; }
  .book::before { display: none; }
}