/* ============================================
   COUNTER- CLT — SITE STYLESHEET
   ============================================
   Structure, tokens and layout live in base.css (imported below).
   All media queries live in responsive.css (linked after this file).

   This file holds only what is specific to Counter- CLT:
     - the font files and token overrides
     - the hero definition overlay (logo + copy)
     - the footer grid's extra-links expand toggle
   ============================================ */

@import url("base.css");

/* ---------- FONTS ---------- */
@font-face {
    font-family: "Pitch-Sans";
    src: url("../fonts/pitch-sans-medium.woff") format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Doner-Bold";
    src: url("../fonts/Doner-BoldText.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Doner";
    src: url("../fonts/doner-regulardisplay.woff2") format("woff2");
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Humane";
    src: url("../fonts/Humane-Black.ttf") format("truetype");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Tiempos";
    src: url("../fonts/tiempos-headline-semibold.woff") format("woff");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* ---------- SITE DESIGN TOKENS ---------- */
/* Overrides base.css defaults. Light-theme values are inherited from base. */
:root {
    --font-sans:    "Pitch-Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-display: "Doner-Bold", Georgia, serif;
    --bg:    #f8f2e6;
    --fg:    #212121;
    --fg-70: rgba(33, 33, 33, 0.70);
    --fg-30: rgba(33, 33, 33, 0.30);
    --fg-20: rgba(33, 33, 33, 0.20);
    --bg-70: rgba(248, 242, 230, 0.70);
    --bg-90: rgba(248, 242, 230, 0.90);
    --accentColor: #f4451e;
}
.dark_theme {
    --fg:    #f8f2e6;
    --bg:    #212121;
    --fg-70: rgba(248, 242, 230, 0.70);
    --fg-30: rgba(248, 242, 230, 0.30);
    --fg-20: rgba(248, 242, 230, 0.20);
}
/* ---------- BRAND MARK EXTRAS ---------- */
.michelin_star {
    width: 25px;
    margin-top: 8px;
}

.michelin_star_path {
    fill: var(--fg);
    transition: fill var(--theme-fade);
}

.brand-mark {
    pointer-events: all;
    z-index: 130;
}
.doner-font-add-space {
    font-family: var(--font-display);
    letter-spacing: 1px;
    font-size: .65em;
    text-transform: uppercase;
}

/* ---------- DEFINITION (hero overlay) ---------- */
.definition-phonetic {
    opacity: 0;
    transform: translateY(20px);
    /* Single grid cell everything shares, so the logos stack for the crossfade
       while the container still sizes itself to their natural height */
    display: grid;
    align-items: center;
    /* Containing block for the rotate prompt */
    position: relative;
}

.definition-logo {
    grid-area: 1 / 1;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 130px;
    display: block;
    opacity: 0;
    /* Settled state: a solid dark mark on the light background. During the
       black loading screen `body.intro` flips it light; when the reveal begins
       that class drops and it eases back to dark over the expansion. */
    fill: var(--fg);
    transition: fill 1.1s ease;
    will-change: opacity;
    /* The overlay is pointer-events: none, so only the visible logo opts back in */
    pointer-events: none;
}

.definition-logo.is-active {
    opacity: 1;
    pointer-events: auto;
}

.definition-text {
    font-size: clamp(12px, 1.2vw, 16px);
    letter-spacing: 0.08em;
    max-width: 800px;
    color: var(--fg);
    transition: color 1.1s ease;
    /* Reserve the tallest copy's height up front. The overlay is a centred
       column, so a change in line count here would otherwise shove the logo. */
    min-height: 4.8em;
    margin-top: 24px;
}

/* ---------- LOADING COUNTER (0 → 100, intro only) ---------- */
/* Pinned to the bottom-centre of the screen, out of the centred overlay's flow.
   It's a descendant of the overlay (z-index stacking context) so it still paints
   above the loader curtain. */
.loading-counter {
    position: fixed;
    left: 50%;
    bottom: 34px;
    transform: translateX(-50%);
    font-family: var(--font-sans);
    font-size: clamp(13px, 1.5vw, 17px);
    letter-spacing: 0.14em;
    line-height: 1;
    color: var(--intro-light);
    opacity: 0;
    pointer-events: none;
}

.loading-counter::after {
    content: "%";
    font-size: 0.8em;
    margin-left: 0.15em;
    opacity: 0.6;
}

/* ---------- INTRO (black loading curtain) ---------- */
/* The intro is a black curtain (#loader) over the canvas. The logo, copy and
   counter sit on top of it in a light colour; when everything's loaded the
   curtain fades away, the overlay switches to difference blend, and the canvas
   scrolls into view behind it. */
:root {
    --intro-black: #0d0d0d;
    --intro-light: #f4ede0;
}

/* The loader IS the curtain — black from the first paint, so nothing flashes
   before the JS runs. It fades to nothing at reveal, then display:none. */
.loader {
    background-color: var(--intro-black);
}

body.intro {
    background-color: var(--intro-black);
    overflow: hidden;
}

body.intro .definition-logo {
    fill: var(--intro-light);
}

body.intro .definition-text {
    color: var(--intro-light);
}

/* ---------- IMMERSIVE STATE (added at reveal) ---------- */
/* The overlay switches to difference blending so the mark and copy invert
   against the canvas revealed behind the dissolving curtain. Fill/colour go
   white because difference needs a light source to read as the backdrop's
   inverse; over the black curtain that lands on white, so the switch is seamless
   at the start of the reveal and only diverges (intentionally) over the photos. */
body.is-immersive .hero-definition-overlay {
    mix-blend-mode: difference;
}

/* transition:none — this flip happens the instant the zoom lands, not eased. */
body.is-immersive .definition-logo {
    fill: #fff;
    transition: none;
}

body.is-immersive .definition-text {
    color: #fff;
    transition: none;
}

/* ---------- GSAP initial states ---------- */
.hero-definition-overlay .definition-text {
    opacity: 0;
}

/* The canvas sits behind the curtain the whole time, so it can be visible from
   the start (base.css hides it for the old clip reveal — undo that here). The
   cream backdrop means transparent areas of the canvas read as the light page,
   not black. */
.main-content {
    mix-blend-mode: normal;
    background-color: var(--bg);
    opacity: 1;
    clip-path: none;
    -webkit-clip-path: none;
}

.site-grid-top-center {
    flex-direction: row;
    justify-content: center;
    gap: .5em;
}

/* ---------- INFINITE CANVAS ---------- */
.infinite-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    cursor: grab;
    /* The intro overlay and site grid sit above this */
    z-index: 1;
}

.infinite-canvas.is-dragging {
    cursor: grabbing;
}

.infinite-canvas canvas {
    display: block;
    width: 100%;
    height: 100%;
    /* Panning owns the gesture; don't let the browser scroll instead */
    touch-action: none;
}

/* ---------- CENTRED MENU (filters the canvas) ---------- */
/* base.css gives .bottom-bar an angled, --fg-filled bar pinned bottom-right.
   The canvas menu wants none of that: override to a transparent, centred,
   auto-sized container so only the Menu control itself shows. */
.bottom-bar {
    left: 0;
    right: 0;
    bottom: 12px;
    height: auto;
    background: none;
    border: none;
    -webkit-clip-path: none;
    clip-path: none;
    justify-content: center;
    align-items: flex-end;
    z-index: 130;
    pointer-events: none;
}

.canvas-menu {
    position: relative;
    display: flex;
    flex-direction: column;
    /* Bar and panel are one column of the same width — they share an edge, so
       they cannot be independently sized. */
    align-items: stretch;
    width: min(92vw, 430px);
    /* Only the control is interactive; the rest of the bar row stays clickable
       through to the canvas */
    pointer-events: auto;
}

/* The bar. Square, not a pill — the panel stacks flush on top of it and a
   radius at the join would leave a notch. */
.canvas-menu-bar {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--bg);
    border: 1px solid var(--fg-20);
    transition: border-color 0.3s ease, background-color var(--theme-fade);
}

.canvas-menu-bar:hover,
.canvas-menu.is-open .canvas-menu-bar {
    border-color: var(--fg-70);
}

/* Label lives at the left end; the bar's own chrome is drawn by the wrapper. */
.canvas-menu-toggle {
    flex: 1;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    padding: 14px 16px;
    cursor: pointer;
    background: none;
    color: var(--fg);
    border: none;
    font-family: var(--font-display);
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color var(--theme-fade);
}

/* ---------- three bars ---------- */
.canvas-menu-burger {
    flex: none;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 46px;
    align-self: stretch;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--fg);
    transition: color var(--theme-fade);
}

.canvas-menu-burger span {
    display: block;
    width: 17px;
    height: 1.5px;
    background: currentColor;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.25s ease;
}
.canvas-menu-burger span.middle_span {
    height: 2px;
}

.canvas-menu.is-open .canvas-menu-burger span:nth-child(1) { transform: translateY(5.5px); }
.canvas-menu.is-open .canvas-menu-burger span:nth-child(2) { opacity: 0; }
.canvas-menu.is-open .canvas-menu-burger span:nth-child(3) { transform: translateY(-5.5px); }

.canvas-menu-panel {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    display: grid;
    grid-template-rows: 0fr;
    background: var(--bg);
    border: 1px solid var(--fg-20);
    border-bottom: none;
    visibility: hidden;
    transition: grid-template-rows 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.3s ease,
                visibility 0s linear 0.5s;
}

.canvas-menu.is-open .canvas-menu-panel {
    grid-template-rows: 1fr;
    border-color: var(--fg-70);
    visibility: visible;
    transition: grid-template-rows 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.3s ease,
                visibility 0s linear 0s;
}

/* min-height:0 is what lets the track actually collapse to nothing */
.canvas-menu-panel-inner {
    min-height: 0;
    overflow: hidden;
}

/* No padding — the rows run edge to edge so the panel reads as part of the bar */
.canvas-menu-options {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 6px 0;
}

/* ---------- contact + social ---------- */
.canvas-menu-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 16px 15px;
    /* the divider the foot sits under */
    border-top: 1px solid var(--fg-20);
}

.canvas-menu-contact {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.canvas-menu-meta {
    font-family: var(--font-display);
    font-size: 10px;
    letter-spacing: 1px;
    line-height: 1.5;
    text-transform: uppercase;
    color: var(--fg);
    text-decoration: none;
    opacity: 0.6;
    transition: opacity 0.25s ease;
}

.canvas-menu-meta:hover,
.canvas-menu-meta:focus-visible {
    opacity: 1;
}

.canvas-menu-social {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: none;
}

.canvas-menu-social a {
    display: inline-flex;
    color: var(--fg);
    opacity: 0.6;
    transition: opacity 0.25s ease;
}

.canvas-menu-social a:hover,
.canvas-menu-social a:focus-visible {
    opacity: 1;
}

.canvas-menu-social svg {
    display: block;
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Round cap on a zero-length path — the lens dot, without a second shape */
.canvas-menu-social-dot {
    stroke-width: 2.4;
}

/* Full-bleed rows, left-aligned to the label above them — a centred chip
   floating in a 430px square panel reads as a leftover from the pill. */
.canvas-menu-option {
    background: none;
    border: none;
    padding: 9px 16px;
    cursor: pointer;
    color: var(--fg);
    font-family: var(--font-display);
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
    text-align: left;
    opacity: 0.6;
    transition: opacity 0.25s ease, background-color 0.25s ease;
}

.canvas-menu-option:hover,
.canvas-menu-option:focus-visible {
    opacity: 1;
    background: var(--fg-20);
}

.canvas-menu-option.is-active {
    opacity: 1;
}

.canvas-menu-clear {
    flex: none;
    width: 0;
    height: 26px;
    margin-right: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--fg);
    opacity: 0;
    visibility: hidden;
    transform: scale(0.75);
    transition: opacity 0.3s ease, transform 0.3s ease, width 0.3s ease,
                margin-right 0.3s ease, visibility 0s linear 0.3s,
                color var(--theme-fade);
}

.canvas-menu.has-filter .canvas-menu-clear {
    width: 26px;
    margin-right: 2px;
    opacity: 0.7;
    visibility: visible;
    transform: scale(1);
    transition: opacity 0.3s ease, transform 0.3s ease, width 0.3s ease,
                margin-right 0.3s ease, visibility 0s linear 0s,
                color var(--theme-fade);
}

/* The label keeps its own padding, so trim the gap the X would otherwise add
   between the two. */
.canvas-menu.has-filter .canvas-menu-toggle {
    padding-right: 6px;
}

.canvas-menu.has-filter .canvas-menu-clear:hover,
.canvas-menu.has-filter .canvas-menu-clear:focus-visible {
    opacity: 1;
}

.canvas-menu-clear svg {
    width: 20px;
    height: 20px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linecap: round;
}

/* ---------- SELECTED PHOTO MARKER ---------- */
/* Positioned entirely from JS (translate3d to the photo's projected centre), so
   left/top stay at 0 and the transform is the only thing that moves. */
.canvas-focus-plus {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 126;
    /* The photo behind it is the click target — see the canvas hit-test */
    pointer-events: none;
    color: #fff;
    /* mix-blend-mode keeps it legible on a light photo as well as a dark one */
    mix-blend-mode: difference;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.canvas-focus-plus.is-visible {
    opacity: 0.9;
}

.canvas-focus-plus svg {
    display: block;
    width: 46px;
    height: 46px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.1;
    stroke-linecap: round;
}

/* ---------- OPENED PHOTO ---------- */
/* The chrome is faded to nothing by GSAP; this stops the invisible layers from
   swallowing the click that closes the photo. */
body.photo-focus .brand-mark,
body.photo-focus .pillars-tab,
body.photo-focus .site-grid,
body.photo-focus .bottom-bar,
body.photo-focus .filter-panels,
body.photo-focus .hero-definition-overlay {
    pointer-events: none;
}

.filter-panels {
    position: fixed;
    inset: 0;
    z-index: 125;
    pointer-events: none;
}

/* Placement comes from data-side, which main.js stamps as the opposite of that
   filter's strip. Note there is no `transform` in any of these rules: GSAP
   animates the panels in on x/y, and a CSS transform is exactly what it would
   overwrite — so centring is done with flexbox and auto margins instead. */
.filter-panel {
    position: absolute;
    color: var(--fg);
    /* GSAP owns opacity/visibility from here (autoAlpha); this is only the
       resting state before any filter is chosen. */
    opacity: 0;
    visibility: hidden;
}

/* Side columns: span the full height, centre the copy within it. */
.filter-panel[data-side="left"],
.filter-panel[data-side="right"] {
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: min(40vw, 700px);
}

.filter-panel[data-side="left"]  { left: 6vw; }
.filter-panel[data-side="right"] { right: 6vw; }

/* Bands: a centred block clear of the horizontal strip. */
.filter-panel[data-side="top"],
.filter-panel[data-side="bottom"] {
    left: 0;
    right: 0;
    width: min(64vw, 860px);
    margin: 0 auto;
}

.filter-panel[data-side="top"]    { top: 9vh; }
/* Sits above the menu pill rather than behind it */
.filter-panel[data-side="bottom"] { bottom: 16vh; }

.filter-panel-title {
    font-family: var(--font-display);
    font-size: clamp(16px, 1.15vw, 20px);
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: normal;
    margin: 0 0 18px;
}

.filter-panel-body {
    font-size: clamp(14px, 1.15vw, 18px);
    line-height: 1.85;
    letter-spacing: 0.04em;
    margin: 0;
    opacity: 0.75;
}

/* Panels with several paragraphs (the Details, the Beverages) need the break */
.filter-panel-body + .filter-panel-body {
    margin-top: 1.15em;
}

/* The layer is click-through so the canvas stays draggable behind it; links
   have to opt back in. */
.filter-panel a {
    pointer-events: auto;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---------- LIGHT / DARK THEME SWITCH ---------- */
.theme-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: none;
    border: none;
    padding: 0;
    margin-bottom: 8px;
    cursor: pointer;
    color: var(--fg);
    opacity: 0.7;
    transition: opacity 0.3s ease;
    pointer-events: all;
}

.theme-switch:hover {
    opacity: 1;
}

.theme-switch-icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.3s ease, transform 0.35s ease;
}

/* Light theme (default): sun shown, moon hidden */
.theme-switch-icon-moon {
    opacity: 0;
    transform: scale(0.5) rotate(-90deg);
}

/* Dark theme: moon shown, sun hidden */
.dark_theme .theme-switch-icon-sun {
    opacity: 0;
    transform: scale(0.5) rotate(90deg);
}

.dark_theme .theme-switch-icon-moon {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

.grid-social, .grid-extra-link {
    font-size: inherit;
    font-weight: inherit;
}

/* ---------- CURSOR HINT ---------- */
/* A badge that trails the cursor after the reveal: a "Drag" pill with an arrow
   bubble on each of its four sides, which becomes "Scroll" with only the top
   and bottom arrows left before the whole thing goes.
   Positioned entirely by GSAP (x/y from the element's top-left, offset clear of
   the pointer), so left and top stay at 0 and the transform does all the work. */
.cursor-hint {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 300;
    /* It teaches the canvas; it must never swallow a drag meant for it */
    pointer-events: none;
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto auto auto;
    align-items: center;
    justify-items: center;
    row-gap: 6px;
    /* Column spacing lives on the side arrows' own margins, not here: the gap
       would survive them collapsing and leave a hole where they used to be. */
    column-gap: 0;
    /* JS reveals this once it has placed the badge beside the cursor */
    visibility: hidden;
}

.cursor-hint-up    { grid-area: 1 / 2; }
.cursor-hint-left  { grid-area: 2 / 1; margin-right: 6px; }
.cursor-hint-label { grid-area: 2 / 2; }
.cursor-hint-right { grid-area: 2 / 3; margin-left: 6px; }
.cursor-hint-down  { grid-area: 3 / 2; }

.cursor-hint-label {
    background: var(--fg);
    color: var(--bg);
    font-family: var(--font-display);
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 1;
    padding: 11px 18px;
    border-radius: 999px;
    white-space: nowrap;
    /* The pill must not resize under the word swap, or the arrows centred on it
       jump sideways mid-transition. "Scroll" is the wider word and measures
       ~99px with this padding, so it sets the floor for both. */
    min-width: 100px;
    text-align: center;
}

.cursor-hint-arrow {
    width: 26px;
    height: 26px;
    border-radius: 50%;
     background: var(--fg);
    color: var(--bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* The side pair collapse their width on the swap to "Scroll"; without this
       their glyph would spill out of the shrinking circle. */
    overflow: hidden;
    flex: none;
}

/* One chevron rotated to face each way, rather than four separate glyphs */
.cursor-hint-arrow svg {
    display: block;
    width: 13px;
    height: 13px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cursor-hint-left svg  { transform: rotate(180deg); }
.cursor-hint-up svg    { transform: rotate(-90deg); }
.cursor-hint-down svg  { transform: rotate(90deg); }

/* Start invisible so nothing shows for the frame before GSAP takes over */
.cursor-hint-label,
.cursor-hint-arrow {
    opacity: 0;
}

/* ---------- PARTNERS PANEL ---------- */
/* Sits where the definition line is (JS pins `top` to that element's box) and
   is centred with auto margins rather than a transform — GSAP animates y on the
   way in, and a CSS transform is what it would overwrite. */
.partners-panel {
    position: fixed;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: min(78vw, 720px);
    z-index: 128;
    text-align: center;
    color: var(--fg);
    /* GSAP owns these via autoAlpha from here on */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Only interactive while open, so the closed panel can't eat clicks meant for
   the canvas underneath it. */
.partners-panel.is-open {
    pointer-events: auto;
}

.partners-close {
    display: block;
    margin: 0 auto 14px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--fg);
    font-family: var(--font-display);
    font-size: 24px;
    line-height: 1;
    transition: transform 0.3s ease, color var(--theme-fade);
}

.partners-close:hover,
.partners-close:focus-visible {
    transform: rotate(45deg);
}

.partners-title {
    font-family: var(--font-display);
    font-size: clamp(12px, 1.1vw, 15px);
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: normal;
    margin: 0 0 30px;
}

.partners-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(14px, 3vw, 46px);
    align-items: center;
}

.partners-item {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.75;
    transition: opacity 0.3s ease;
}

.partners-item:hover,
.partners-item:focus-visible {
    opacity: 1;
}

/* The three logos are different formats and proportions; contain them in a
   shared box so the row reads as one line rather than three sizes. */
.partners-item img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 74px;
    object-fit: contain;
}

/* The canvas is dimmed to almost nothing behind the panel — take it out of the
   click path too, so a click meant to dismiss the panel isn't also read as a
   drag or a photo selection. */
body.partners-open .infinite-canvas {
    pointer-events: none;
}

/* ============================================
   LEGAL — TERMS OF USE / PRIVACY POLICY
   ============================================
   Modelled on the Codrops "responsive and SEO-friendly WebGL text" layout: a
   centred column, a small label over an enormous condensed heading, oversized
   body copy, and a mask reveal as each block enters the viewport. The type is
   real DOM text throughout — the whole point of that piece is that the
   spectacle never costs you the readable, selectable, indexable content.

   Scrolling happens only inside .legal-scroll. Palette is the site's own
   (--bg / --fg); Humane is scoped to this section and used nowhere else. */

.legal_scroll_wrapper {
    position: fixed;
    inset: 0;
    z-index: 400;
    background: var(--bg-90);
    /* GSAP owns these from here (autoAlpha) */
    opacity: 0;
    visibility: hidden;
    /* The wrapper itself never scrolls — the inner column does */
    overflow: hidden;
}

.legal-scroll {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    /* Reaching either end must not start scrolling the page behind it */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.legal-scroll::-webkit-scrollbar {
    display: none;
}

.legal-doc {
    width: min(92vw, 1180px);
    margin: 0 auto;
    padding: 14vh 0 22vh;
    color: var(--fg);
    font-family: "Humane", var(--font-display), sans-serif;
    font-weight: 900;
    text-align: center;
    /* Scroll velocity drives this — see the JS. At rest it is 0. */
    transform: skewY(var(--legal-skew, 0deg));
}

/* ---------- masthead ---------- */
.legal-head {
    margin-bottom: 12vh;
}

.legal-eyebrow {
    font-family: var(--font-display);
    font-weight: normal;
    font-size: clamp(11px, 1vw, 14px);
    letter-spacing: 0.32em;
    text-transform: uppercase;
    margin: 0 0 clamp(10px, 1.6vh, 22px);
    opacity: 0.6;
}

.legal-title {
    font-size: clamp(64px, 15.5vw, 280px);
    line-height: 0.78;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    margin: 0;
}

/* ---------- body ---------- */
.legal-h {
    font-size: clamp(30px, 5.4vw, 96px);
    line-height: 0.9;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    margin: clamp(48px, 9vh, 140px) 0 clamp(14px, 2vh, 30px);
}

.legal-p,
.legal-list {
    font-size: clamp(14px, 2.3vw, 20px);
    line-height: 1.28;
    font-family: var(--font-sans);
    margin-left: auto;
    margin-right: auto;
}

.legal-p {
    margin-top: 0;
    margin-bottom: clamp(14px, 2vh, 28px);
}

.legal-list {
    list-style: none;
    padding: 0;
    margin-top: 0;
    margin-bottom: clamp(14px, 2vh, 28px);
}

.legal-list li {
    margin-bottom: 0.7em;
}

.legal-list em,
.legal-p em {
    font-style: normal;
    opacity: 0.55;
}

.legal-emphasis {
    color: var(--accentColor);
}

.legal-outro {
    font-size: clamp(56px, 13vw, 240px);
    line-height: 0.8;
    text-transform: uppercase;
    margin: clamp(80px, 16vh, 260px) 0 0;
}

/* ---------- mask reveal ----------
   Each block is clipped away at its own baseline and lifted into place as it
   enters the view — the DOM equivalent of the tutorial's vertex/fragment
   reveal, where the text appears to rise out of nothing.

   The clip lives on an inner span, and the class that releases it is set on the
   *parent* block. That split is deliberate: the observer watching for entry has
   to measure an element the clip hasn't already reduced to zero area, or the
   hidden state defeats the very thing meant to undo it. */
.legal-reveal {
    display: block;
    clip-path: inset(0 -0.15em 105% -0.15em);
    transform: translateY(0.42em);
    opacity: 0;
    will-change: clip-path, transform;
}

.legal-in > .legal-reveal {
    clip-path: inset(0 -0.15em -0.35em -0.15em);
    transform: translateY(0);
    opacity: 1;
    transition:
        clip-path 1.15s cubic-bezier(0.16, 1, 0.3, 1),
        transform 1.15s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.5s ease;
}

/* The masthead's two lines arrive as a pair rather than together */
.legal-title.legal-in > .legal-reveal {
    transition-delay: 0.14s;
}

/* ---------- scroll-velocity chromatic shift ----------
   Stands in for the tutorial's post-processing RGB split: two offset copies of
   the display type, pushed apart by how fast you are scrolling and gone the
   moment you stop. Kept off the paragraphs — a text-shadow on that much heavy
   type at that size is the one thing here that would cost frames. */
.legal-title,
.legal-h,
.legal-outro {
    text-shadow:
        calc(var(--legal-shift, 0px) * -1) 0 0 rgba(244, 69, 30, 0.55),
        var(--legal-shift, 0px) 0 0 rgba(30, 160, 244, 0.45);
}

/* ---------- close ---------- */
.legal-close {
    position: fixed;
    top: clamp(18px, 3vh, 40px);
    right: clamp(18px, 3vw, 46px);
    z-index: 2;
    padding: 0;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--fg);
    font-family: var(--font-display);
    font-size: 30px;
    line-height: 1;
    transition: transform 0.3s ease, color var(--theme-fade);
}

.legal-close:hover,
.legal-close:focus-visible {
    transform: rotate(45deg);
}

/* While a document is open the canvas is dimmed and must not take clicks */
body.legal-open .infinite-canvas {
    pointer-events: none;
}

/* ---------- LEGAL CURSOR ----------
   Every pixel of the panel dismisses it, so the pointer says so: an X in a
   circle, hotspot dead centre.

   Spelled out twice because a cursor image is a data URI and a data URI cannot
   read --fg — the stroke has to be baked in, so light and dark each need their
   own copy. The trailing `pointer` is the fallback if the image is refused. */
body.legal-open .legal_scroll_wrapper,
body.legal-open .legal_scroll_wrapper * {
    cursor:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Ccircle cx='18' cy='18' r='12.6' fill='none' stroke='%23212121' stroke-width='1.5'/%3E%3Cpath d='M13.9 13.9 22.1 22.1M22.1 13.9 13.9 22.1' fill='none' stroke='%23212121' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") 18 18,
        pointer;
}

body.dark_theme.legal-open .legal_scroll_wrapper,
body.dark_theme.legal-open .legal_scroll_wrapper * {
    cursor:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Ccircle cx='18' cy='18' r='12.6' fill='none' stroke='%23f8f2e6' stroke-width='1.5'/%3E%3Cpath d='M13.9 13.9 22.1 22.1M22.1 13.9 13.9 22.1' fill='none' stroke='%23f8f2e6' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") 18 18,
        pointer;
}

.pillars-tab {
    position: fixed;
    top: 50%;
    right: var(--grid-pad);;
    transform: translateY(-50%);
    z-index: 129;
    display: flex;
    align-items: stretch;
    padding: 0;
    background: var(--bg);
    border: 1px solid var(--fg-20);
    border-radius: 2em;
    cursor: pointer;
    color: var(--fg);
    opacity: 0;
    transition: border-color 0.3s ease, background-color var(--theme-fade);
}

.pillars-tab:hover,
.pillars-tab:focus-visible,
.pillars-tab.is-open {
    border-color: var(--fg-70);
}


.pillars-tab-label {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-width 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.08s,
                opacity 0.2s ease;
}

.pillars-tab:hover .pillars-tab-label,
.pillars-tab:focus-visible .pillars-tab-label,
.pillars-tab.is-open .pillars-tab-label {
    max-width: 200px;
    opacity: 1;
    transition: max-width 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.3s ease 0.14s;
}

.pillars-tab-label > span {
    display: block;
    padding-left: 18px;
    padding-right: 4px;
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
}

.pillars-tab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 42px;
    height: 42px;
}

.pillars-tab-icon svg {
    display: block;
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
}

.pillars-tab-dot {
    stroke-width: 2.4;
}


.pillars-panel {
    position: fixed;
    inset: 0;
    z-index: 127;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6vw;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.pillars-panel.is-open .pillars-grid {
    pointer-events: auto;
}

.pillars-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(22px, 4.5vw, 76px);
    width: min(92vw, 1060px);
    color: var(--fg);
}

.pillar-name {
    font-family: var(--font-display);
    font-weight: normal;
    font-size: clamp(12px, 1.1vw, 16px);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0 0 clamp(12px, 1.6vw, 20px);
}

.pillar-text {
    font-size: clamp(12px, 0.95vw, 15px);
    line-height: 1.75;
    letter-spacing: 0.03em;
    margin: 0;
    opacity: 0.72;
}


body.pillars-open .infinite-canvas {
    pointer-events: none;
}