/* tisser.ai v2 — foundation layer
   Bouwt op tisser.css (tokens leidend). Patronen uit de teardowns:
   - grid 12 kolommen, content 1320px, gutter 20px
   - sectie-ritme: ruimte is van de sectie zelf (padding-top), 80–160px
   - reveals: opacity + translateY(20px), 0.8s, 80ms stagger, -15% rootMargin
   - twee easings, meer niet */

:root {
  --v2-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --v2-ease-inout: cubic-bezier(0.83, 0, 0.17, 1);
  --v2-content: 1320px;
  --v2-gutter: 20px;
  --v2-margin: 32px;
}

.v2-wrap { max-width: calc(var(--v2-content) + 2 * var(--v2-margin));
           margin: 0 auto; padding-inline: var(--v2-margin); }
.v2-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
           gap: var(--t-s5) var(--v2-gutter); }
.v2-grid > * { min-width: 0; }

/* reveal-on-scroll — één beweging, overal dezelfde */
.v2-appear { opacity: 0; transform: translateY(20px);
             transition: opacity 0.8s var(--v2-ease-inout), transform 0.8s var(--v2-ease-inout);
             transition-delay: calc(var(--v2-i, 0) * 80ms); }
.v2-appear.is-seen { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .v2-appear { opacity: 1; transform: none; transition: none; }
}

/* header: vast, transparant → gevuld na 40px scroll */
.v2-header { position: fixed; inset: 0 0 auto 0; z-index: 100;
             background: transparent; transition: background 0.4s var(--v2-ease-out) 0.1s,
             box-shadow 0.4s var(--v2-ease-out) 0.1s; }
.v2-header.is-scrolled { background: var(--t-canvas);
             box-shadow: 0 1px 0 var(--t-border); }

/* display-type: vloeiend, strak, gewicht 400 — Signifier is al zo getekend */
.v2-display { font-family: var(--t-display); font-weight: 400;
              font-size: clamp(44px, 2.8vw + 24px, 72px);
              line-height: 1.02; letter-spacing: -0.02em; text-wrap: balance; }
.v2-display-md { font-family: var(--t-display); font-weight: 400;
              font-size: clamp(32px, 1.6vw + 20px, 48px);
              line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; }

/* media-kaart met browser-rand voor productpanelen */
.v2-shot { border-radius: var(--t-r-card); overflow: hidden;
           border: 1px solid var(--t-border);
           box-shadow: 0 0 0 1px rgba(10,10,10,0.02), 0 24px 64px rgba(10,10,10,0.10); }
.v2-shot img { display: block; width: 100%; height: auto; }
.v2-shot--bar { position: relative; }
.v2-shot--bar::before { content: ""; display: block; height: 36px;
           background: var(--t-surface); border-bottom: 1px solid var(--t-border); }

/* stille logo-cel: geen marquee, cross-fade gebeurt in JS */
.v2-logocell { display: flex; align-items: center; justify-content: center;
               min-height: 72px; font-family: var(--t-display);
               font-size: var(--t-display-xs); color: var(--t-ink); }