/* =============================================================
   Trident Tools — catalogue reader (/brands/{slug}/catalog)

   Standalone: this page does NOT load style.css or trident.css, so
   everything it needs is here. That is deliberate — the reader owns the
   viewport and the theme's smooth scroller, reveal animations and page
   transitions all fight a fixed-height canvas. See page_brand_catalog().

   Same Outfit @import the theme uses (style.css line 52), so the two look
   like one site; it degrades to the system sans exactly as the rest does
   when the font can't be fetched.

   --brand is set per page from the brand's colour, on <body>.
   ============================================================= */
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600&display=swap");

:root {
    --ttc-bg: #101010;
    --ttc-bar: rgba(255, 255, 255, .06);
    --ttc-line: rgba(255, 255, 255, .1);
    --ttc-ink: rgba(255, 255, 255, .92);
    --ttc-ink-soft: rgba(255, 255, 255, .55);
    --ttc-bar-h: 64px;
    --ttc-foot-h: 56px;
}

* { box-sizing: border-box; }

.ttc-body {
    margin: 0;
    background: var(--ttc-bg);
    color: var(--ttc-ink);
    font-family: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    /* The reader is the viewport. Nothing here scrolls. */
    overflow: hidden;
    overscroll-behavior: none;
    -webkit-font-smoothing: antialiased;
}

.ttc {
    display: flex;
    flex-direction: column;
    /* dvh so the mobile URL bar collapsing doesn't crop the book; vh first for
       browsers that don't know dvh. */
    height: 100vh;
    height: 100dvh;
}

/* -------------------------------------------
   bars
------------------------------------------- */
.ttc-bar {
    display: flex;
    align-items: center;
    flex: none;
    gap: 16px;
    padding: 0 18px;
    background: var(--ttc-bar);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.ttc-bar-top {
    height: var(--ttc-bar-h);
    justify-content: space-between;
    border-bottom: 1px solid var(--ttc-line);
}
.ttc-bar-bottom {
    height: var(--ttc-foot-h);
    border-top: 1px solid var(--ttc-line);
    /* iOS home indicator */
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.ttc-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}
/* Brand wordmarks are dark ink by design — flatten to white for this background,
   the same treatment the brand panel applies on a dark colour. */
.ttc-brand-mark {
    height: 22px;
    width: auto;
    max-width: 150px;
    filter: brightness(0) invert(1);
    opacity: .95;
}
.ttc-brand-word {
    font-weight: 600;
    font-size: 17px;
    letter-spacing: .5px;
}
.ttc-brand-sep {
    width: 1px;
    height: 20px;
    background: var(--ttc-line);
    flex: none;
}
.ttc-title {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ttc-ink-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ttc-bar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
}
.ttc-action {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 40px;
    padding: 0 18px;
    border: 1px solid var(--ttc-line);
    border-radius: 40px;
    background: transparent;
    color: var(--ttc-ink);
    font: 500 11px/1 "Outfit", sans-serif;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: .25s cubic-bezier(0, 0, .3642, 1);
}
.ttc-action svg { width: 17px; height: 17px; fill: currentColor; flex: none; }
.ttc-action:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .25); }
.ttc-icon-only { width: 40px; padding: 0; justify-content: center; }
.ttc-close:hover { background: var(--brand, #c99a2e); border-color: var(--brand, #c99a2e); color: #000; }

/* -------------------------------------------
   stage + book
------------------------------------------- */
.ttc-stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 26px 76px;
    /* The fold reads as depth only with a vanishing point in front of the book. */
    perspective: 2400px;
}

.ttc-book {
    position: relative;
    transform-style: preserve-3d;
    /* JS sets width/height from the PDF's own aspect ratio and the space left. */
    width: 0;
    height: 0;
    filter: drop-shadow(0 26px 50px rgba(0, 0, 0, .55));
}

.ttc-slot {
    position: absolute;
    top: 0;
    height: 100%;
    width: 50%;
    background: #fff;
    overflow: hidden;
}
.ttc-slot-left  { left: 0; }
.ttc-slot-right { left: 50%; }
/* Single-page mode (portrait / narrow): one slot, full width. */
.ttc[data-mode="single"] .ttc-slot-left { display: none; }
.ttc[data-mode="single"] .ttc-slot-right { left: 0; width: 100%; }
.ttc[data-mode="single"] .ttc-spine { display: none; }

/* An unpaired slot (the inside of the cover, or a final odd page) is the table
   the book is lying on, not a blank sheet. */
.ttc-slot.is-empty { background: transparent; }

.ttc-slot canvas,
.ttc-face canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* The gutter: paper curving into the binding. */
.ttc-spine {
    position: absolute;
    top: 0;
    left: calc(50% - 22px);
    width: 44px;
    height: 100%;
    pointer-events: none;
    z-index: 4;
    background: linear-gradient(to right,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, .13) 42%,
        rgba(0, 0, 0, .22) 50%,
        rgba(0, 0, 0, .13) 58%,
        rgba(0, 0, 0, 0) 100%);
}

/* -------------------------------------------
   the turning leaf
------------------------------------------- */
.ttc-leaf {
    position: absolute;
    top: 0;
    height: 100%;
    width: 50%;
    z-index: 6;
    transform-style: preserve-3d;
    /* visibility, not display: a hidden leaf must still be measurable, and
       display:none would drop the 3D context mid-animation. */
    visibility: hidden;
    pointer-events: none;
}
.ttc-leaf.is-turning { visibility: visible; }
/* Forward: the right-hand page swings over on its inner edge. */
.ttc-leaf[data-dir="next"] { left: 50%; transform-origin: left center; }
/* Backward: the left-hand page swings back on its inner edge. */
.ttc-leaf[data-dir="prev"] { left: 0; transform-origin: right center; }

.ttc-face {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #fff;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.ttc-face-back { transform: rotateY(180deg); }

/* Light falling off the curling sheet. JS drives the opacity through the turn. */
.ttc-face-shade {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}
.ttc-leaf[data-dir="next"] .ttc-face-front .ttc-face-shade,
.ttc-leaf[data-dir="prev"] .ttc-face-back  .ttc-face-shade {
    background: linear-gradient(to right, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 60%);
}
.ttc-leaf[data-dir="next"] .ttc-face-back  .ttc-face-shade,
.ttc-leaf[data-dir="prev"] .ttc-face-front .ttc-face-shade {
    background: linear-gradient(to left, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 60%);
}

/* -------------------------------------------
   nav arrows
------------------------------------------- */
.ttc-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 8;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ttc-line);
    border-radius: 50%;
    background: rgba(255, 255, 255, .05);
    color: var(--ttc-ink);
    cursor: pointer;
    transition: .25s cubic-bezier(0, 0, .3642, 1);
}
.ttc-nav svg { width: 22px; height: 22px; fill: currentColor; }
.ttc-nav-prev { left: 14px; }
.ttc-nav-next { right: 14px; }
.ttc-nav:hover:not(:disabled) {
    background: var(--brand, #c99a2e);
    border-color: var(--brand, #c99a2e);
    color: #000;
}
.ttc-nav:disabled { opacity: .22; cursor: default; }

/* -------------------------------------------
   footer: counter + scrubber
------------------------------------------- */
.ttc-counter {
    flex: none;
    min-width: 96px;
    font: 500 12px/1 "Outfit", sans-serif;
    letter-spacing: 2px;
    color: var(--ttc-ink-soft);
    font-variant-numeric: tabular-nums;
}
.ttc-scrub {
    flex: 1 1 auto;
    -webkit-appearance: none;
    appearance: none;
    height: 3px;
    border-radius: 3px;
    background: var(--ttc-line);
    cursor: pointer;
}
.ttc-scrub::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: none;
    background: var(--brand, #c99a2e);
    cursor: grab;
}
.ttc-scrub::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: none;
    background: var(--brand, #c99a2e);
    cursor: grab;
}
.ttc-scrub:disabled { opacity: .35; cursor: default; }

/* -------------------------------------------
   splash / error
------------------------------------------- */
.ttc-splash {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ttc-bg);
    text-align: center;
    transition: opacity .4s ease;
}
.ttc[data-state="ready"] .ttc-splash { opacity: 0; pointer-events: none; }
.ttc-splash-inner { padding: 24px; max-width: 420px; }
.ttc-spinner {
    width: 34px;
    height: 34px;
    margin: 0 auto 22px;
    border: 2px solid var(--ttc-line);
    border-top-color: var(--brand, #c99a2e);
    border-radius: 50%;
    animation: ttc-spin 1s linear infinite;
}
.ttc[data-state="error"] .ttc-spinner { display: none; }
@keyframes ttc-spin { to { transform: rotate(360deg); } }
.ttc-splash-text {
    margin: 0 0 10px;
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ttc-ink-soft);
}
.ttc-splash-sub { margin: 0; font-size: 13px; color: rgba(255, 255, 255, .38); }
.ttc-splash a { color: var(--brand, #c99a2e); }

/* Respect a reduced-motion preference: the spinner and the page turn both go. */
@media (prefers-reduced-motion: reduce) {
    .ttc-spinner { animation: none; }
}

/* -------------------------------------------
   small screens
------------------------------------------- */
@media screen and (max-width: 860px) {
    :root { --ttc-bar-h: 56px; }
    .ttc-stage { padding: 14px 12px; }
    /* Arrows would sit on top of the page at this width — the footer carries
       navigation instead (tap the page edges, or drag the scrubber). */
    .ttc-nav { display: none; }
    .ttc-title, .ttc-action span { display: none; }
    .ttc-brand-sep { display: none; }
    .ttc-action { width: 40px; padding: 0; justify-content: center; }
}