/* ==========================================================================
   ELT v3 component library (agent layer, 2026-07-12).
   Vanilla ports of the catalog components allocated in _v3-spec.md.
   Sources: sanctuary's proven vanilla ports (re-tokened) + catalog TSX
   extracted values. Tokens: ELT palette only, consumed via var() (defined
   in styles.css). Pairs with assets/js/components.js (window.ELTComponents).
   Conventions: one block per component; every component reads static under
   prefers-reduced-motion; .on-dark ancestors flip the skin where needed.
   No em dashes. No scroll-triggered text reveals on headings (standing rule).
   ========================================================================== */

:root {
  /* component-scoped motion tokens (not palette) */
  --elt-ease: cubic-bezier(.22, .61, .21, 1);
  --elt-spring: cubic-bezier(.34, 1.08, .64, 1);
}

/* ── 004 HorizontalScroller · catalog 004 ── */
/* markup: [data-component="004"].hscroll > .hs-sticky > (.hs-head > .hs-progress > i[data-hs-fill])? + .hs-track[data-hs-track] > .hs-card*N Sticky pin + scroll-sprung horizontal track (spring 500/60 in JS). */
.hscroll .hs-sticky { padding: 0 48px; }
.hs-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.hs-progress {
  width: 160px; height: 4px; border-radius: 4px;
  background: var(--line); overflow: hidden; display: none;
}
.on-dark .hs-progress { background: var(--line-dark); }
.hs-progress i {
  display: block; width: 100%; height: 100%; border-radius: 4px;
  background: var(--gold); transform: scaleX(0); transform-origin: 0 50%;
}
.hs-track { display: flex; flex-direction: column; gap: 24px; margin-top: 40px; }
.hs-card {
  border-radius: 24px; padding: 40px; overflow: hidden; position: relative;
  background: var(--card); color: var(--ink);
  display: flex; flex-direction: column; align-items: flex-start;
}
.on-dark .hs-card { background: var(--forest-2); color: var(--cream); }
@media (min-width: 821px) {
  .hscroll { height: 280vh; }
  .hscroll .hs-sticky {
    position: sticky; top: 0; height: 100vh; overflow: hidden;
    display: flex; flex-direction: column; justify-content: center;
    padding: 112px 48px 40px;
  }
  .hs-progress { display: block; }
  .hs-track { flex-direction: row; will-change: transform; }
  .hs-card { flex: 0 0 clamp(480px, 46vw, 640px); min-height: 420px; }
}
@media (max-width: 820px) { .hscroll .hs-sticky { padding: 0 20px; } .hs-card { padding: 24px; } .hscroll { padding-bottom: clamp(2.4rem, 7vw, 3.4rem); } }
@media (prefers-reduced-motion: reduce) {
  .hscroll { height: auto !important; }
  .hscroll .hs-sticky { position: static !important; height: auto !important; overflow: visible !important; padding-top: 0 !important; }
  .hs-track { flex-direction: column !important; transform: none !important; }
  .hs-card { flex: 1 1 auto !important; min-height: 0 !important; }
  .hs-progress { display: none !important; }
}

/* ── 011 Tilt Card · catalog 011 ── */
/* markup: [data-tilt] (any card; [data-component="011"] root). */
[data-tilt] { transition: transform .2s ease-out; transform-style: preserve-3d; position: relative; }
.tilt-glare {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; border-radius: inherit;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%),
              rgba(255, 255, 255, .38) 0%, rgba(255, 255, 255, 0) 80%);
  transition: opacity .2s ease-out;
}
[data-tilt]:hover .tilt-glare { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  [data-tilt] { transition: none; transform: none !important; }
  .tilt-glare { display: none; }
}

/* ── 012 Conic Animation · catalog 012 ── */
/* markup: [data-component="012"].conic-card > .conic-inner (content). */
.conic-card { position: relative; overflow: hidden; border-radius: 18px; isolation: isolate; }
.conic-card::before {
  content: ""; position: absolute; left: -25%; top: -450%; width: 150%; height: 1000%;
  background: conic-gradient(transparent 200deg,
              color-mix(in srgb, var(--gold) 0%, transparent) 250deg,
              color-mix(in srgb, var(--gold) 85%, transparent) 320deg,
              var(--gold) 360deg);
  animation: elt-conic-spin 4s linear infinite; z-index: 0;
}
.conic-inner {
  position: absolute; inset: 2px; border-radius: 16px;
  background: var(--card); color: var(--ink); z-index: 1;
}
.conic-card > .conic-inner ~ * { position: relative; z-index: 2; }
.conic-body { position: relative; z-index: 2; padding: 26px; }
.on-dark .conic-inner { background: var(--forest-2); color: var(--cream); }
@keyframes elt-conic-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .conic-card::before { animation: none; } }

/* ── 013 Icon Slide In Button · catalog 013 ── */
/* markup: .btn-slide[data-component="013"] > .btn-fill + .btn-label + .btn-icon(svg). */
.btn-slide {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  height: 60px; padding: 0 36px; border-radius: 999px; overflow: hidden; isolation: isolate;
  background: var(--forest); color: var(--cream); font-weight: 600; font-size: 16px;
}
.btn-slide .btn-fill {
  position: absolute; left: 50%; bottom: -8px; width: 8px; height: 8px; border-radius: 100px;
  background: var(--emerald); transform: translateX(-50%); pointer-events: none; z-index: 0;
  transition: bottom .5s var(--elt-spring), width .5s var(--elt-spring), height .5s var(--elt-spring);
}
.btn-slide .btn-label { position: relative; z-index: 1; transition: color .5s var(--elt-spring), transform .5s var(--elt-spring); }
.btn-slide .btn-icon {
  position: absolute; top: 50%; right: -26px; transform: translateY(-50%);
  display: inline-flex; color: #FFFFFF; z-index: 1; transition: right .5s var(--elt-spring);
}
.btn-slide:hover .btn-fill, .btn-slide:focus-visible .btn-fill { bottom: -64px; width: 112%; height: 220px; }
.btn-slide:hover .btn-label, .btn-slide:focus-visible .btn-label { color: #FFFFFF; transform: translateX(-9px); }
.btn-slide:hover .btn-icon, .btn-slide:focus-visible .btn-icon { right: 16px; }
.btn-slide--gold { background: var(--gold); color: var(--ink); }
.btn-slide--gold .btn-fill { background: var(--forest); }
@media (hover: none) { .btn-slide { padding: 0 48px 0 28px; } .btn-slide .btn-icon { right: 20px; color: currentColor; } }
@media (prefers-reduced-motion: reduce) { .btn-slide .btn-fill, .btn-slide .btn-label, .btn-slide .btn-icon { transition: none; } }

/* ── 016 AnimatedNumber · catalog 016 ── */
/* markup: [data-count][data-count-end][data-count-decimals?][data-count-suffix?]. */
[data-count] { font-variant-numeric: tabular-nums; }

/* ── 019 Logo Preloader · catalog 019 ── */
/* markup: [data-component="019"][data-preloader].preloader > img (the emblem). */
.preloader { display: none; }
html.elt-preloading .preloader {
  display: flex; position: fixed; inset: 0; z-index: 1000;
  align-items: center; justify-content: center; background: var(--paper);
  transition: opacity .5s cubic-bezier(.7, .2, .2, 1);
}
html.elt-preloading .preloader img {
  width: 180px; height: auto; transform: translateY(60px); opacity: 0;
  transition: transform .5s cubic-bezier(.7, .2, .2, 1), opacity .5s cubic-bezier(.7, .2, .2, 1);
  will-change: transform, opacity;
}
html.elt-preloading .preloader.pre-in img { transform: translateY(0); opacity: 1; }
html.elt-preloading .preloader.pre-out img { transform: translateY(-60px); opacity: 0; }
html.elt-preloading .preloader.pre-out { opacity: 0; }

/* ── 020 Interactive Gradient · catalog 020 ── */
/* markup: [data-component="020"].igradient (absolute, inside a relative, overflow-hidden section) > .ig-a + .ig-b + .ig-c[data-glow-follow]. */
.igradient { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.igradient span { position: absolute; border-radius: 50%; will-change: transform; }
.igradient .ig-a {
  width: 52vw; height: 52vw; left: -14vw; top: -18vw;
  background: radial-gradient(circle, color-mix(in srgb, var(--emerald) 14%, transparent) 0%, transparent 65%);
  animation: elt-ig-a 26s ease-in-out infinite alternate;
}
.igradient .ig-b {
  width: 44vw; height: 44vw; right: -12vw; bottom: -16vw;
  background: radial-gradient(circle, color-mix(in srgb, var(--gold) 13%, transparent) 0%, transparent 65%);
  animation: elt-ig-b 34s ease-in-out infinite alternate;
}
.igradient .ig-c {
  width: 34vw; height: 34vw; left: 50%; top: 50%; margin: -17vw 0 0 -17vw;
  background: radial-gradient(circle, color-mix(in srgb, var(--emerald-deep) 12%, transparent) 0%, transparent 62%);
}
.on-dark .igradient .ig-a { background: radial-gradient(circle, color-mix(in srgb, var(--emerald) 22%, transparent) 0%, transparent 65%); }
.on-dark .igradient .ig-b { background: radial-gradient(circle, color-mix(in srgb, var(--gold) 16%, transparent) 0%, transparent 65%); }
.on-dark .igradient .ig-c { background: radial-gradient(circle, color-mix(in srgb, var(--cream) 10%, transparent) 0%, transparent 62%); }
@keyframes elt-ig-a { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(9vw, 6vw, 0); } }
@keyframes elt-ig-b { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-8vw, -5vw, 0); } }
@media (max-width: 820px) { .igradient .ig-c { display: none; } }
@media (prefers-reduced-motion: reduce) { .igradient .ig-a, .igradient .ig-b { animation: none; } }

/* ── 029 Tilt Card Grid · catalog 029 ── */
/* markup: [data-component="029"].tilt-grid > .tilt-card[data-tilt]*N. */
.tilt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
.tilt-card {
  border-radius: 18px; padding: 26px; overflow: hidden;
  background: var(--card); color: var(--ink); border: 1px solid var(--line);
}
.on-dark .tilt-card { background: var(--forest-2); color: var(--cream); border-color: var(--line-dark); }

/* ── 033 Social Media Icons · catalog 033 ── */
/* markup: [data-component="033"].social-row > li > a.social-tile > svg. */
.social-row { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }
.social-tile {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--card); color: var(--forest);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
  transition: transform .32s cubic-bezier(.34, 1.38, .64, 1), box-shadow .32s cubic-bezier(.34, 1.38, .64, 1);
}
.social-tile svg { width: 22px; height: 22px; display: block; fill: currentColor; }
.social-tile:hover, .social-tile:focus-visible {
  transform: translateY(-3px) scale(1.08);
  box-shadow: 0 8px 16px rgba(0, 0, 0, .12), 0 4px 6px rgba(0, 0, 0, .08);
  color: var(--emerald-deep);
}
.social-tile:active { transform: scale(.95); }
.on-dark .social-tile { background: color-mix(in srgb, var(--cream) 9%, transparent); color: var(--cream); box-shadow: none; }
.on-dark .social-tile:hover, .on-dark .social-tile:focus-visible { color: var(--gold); }
@media (prefers-reduced-motion: reduce) { .social-tile { transition: none; } .social-tile:hover { transform: none; } }

/* ── 036 Radius on Scroll · catalog 036 ── */
/* markup: [data-component="036"].radius-scroll > img|video. */
.radius-scroll { overflow: hidden; border-radius: calc(var(--ros, 1) * 24px); display: block; margin: 0; }
.radius-scroll img, .radius-scroll video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ── 040 FlowStack · catalog 040 ── */
/* markup: [data-component="040"].flowstack > .fcard[tabindex="0"]*4 (> .fico + .ftitle + .fbody). */
.flowstack { display: flex; gap: 12px; min-height: 236px; }
.fcard {
  position: relative; flex: 1 1 0; min-width: 0; overflow: hidden;
  border-radius: 20px; padding: 28px; background: var(--paper-2); color: var(--ink);
  display: flex; flex-direction: column; align-items: flex-start; cursor: default;
  transition: flex-grow .4s var(--elt-spring), background-color .4s var(--elt-ease);
}
.fcard:nth-child(2) { background: var(--card); }
.fcard:nth-child(3) { background: var(--cream); }
.fcard:nth-child(4) { background: color-mix(in srgb, var(--gold) 16%, var(--paper)); }
.on-dark .fcard { background: var(--forest-2); color: var(--cream); }
.on-dark .fcard:nth-child(even) { background: var(--forest); }
.flowstack:hover .fcard, .flowstack:focus-within .fcard { flex-grow: .55; }
.flowstack .fcard:hover, .flowstack .fcard:focus-visible { flex-grow: 3.4; }
.fcard:focus-visible { outline: 2px solid var(--emerald); outline-offset: 3px; }
/* Thomas 2026-07-12: the icon "pill" is gone; the illustration is now an
   integral image header bled to the card's top edges (no tile, no border). */
.fillo {
  margin: -28px -28px 0; border-radius: 20px 20px 0 0; overflow: hidden;
  aspect-ratio: 16 / 10; background: var(--forest); flex-shrink: 0;
}
.fillo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--elt-spring); }
.flowstack .fcard:hover .fillo img, .flowstack .fcard:focus-within .fillo img { transform: scale(1.05); }
.ftitle { margin-top: 20px; font-size: 21px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; white-space: nowrap; }
.fbody { margin-top: 12px; font-size: 15px; line-height: 1.5; max-width: 340px; color: var(--ink-soft); transition: opacity .4s var(--elt-spring); }
.on-dark .fbody { color: color-mix(in srgb, var(--cream) 74%, transparent); }
.flowstack:hover .fbody, .flowstack:focus-within .fbody { opacity: 0; }
.flowstack .fcard:hover .fbody, .flowstack .fcard:focus-within .fbody { opacity: 1; }
@media (hover: none), (max-width: 820px) {
  .flowstack { flex-direction: column; min-height: 0; }
  .fcard { flex: 1 1 auto; }
  .fbody { opacity: 1 !important; }
  .ftitle { white-space: normal; }
  .fico { transform: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .flowstack { flex-direction: column; min-height: 0; }
  .fcard, .fico, .fbody { transition: none; }
  .fcard { flex: 1 1 auto !important; }
  .fico { transform: none !important; }
  .fbody { opacity: 1 !important; }
  .ftitle { white-space: normal; }
}

/* ── 043 Image Masked Text · catalog 043 ── */
/* markup: [data-component="043"].masked-text with style="background-image:url(...)". */
.masked-text {
  display: inline-block; margin: 0;
  font-weight: 800; letter-spacing: -.04em; line-height: 1em; text-align: center;
  font-size: clamp(64px, 14vw, 200px);
  background-size: cover; background-position: center center; background-repeat: no-repeat;
  color: var(--forest);
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .masked-text { -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
}

/* ── 052 Circle Expand Button · catalog 052 ── */
/* markup: [data-component="052"].circle-btn > .cb-bubble + .cb-label.cb-a + .cb-label.cb-b + .cb-circle > svg. */
.circle-btn {
  position: relative; display: inline-flex; align-items: center; gap: 20px;
  padding: 10px 11px 10px 24px; border-radius: 999px; overflow: hidden; isolation: isolate;
  background: var(--forest); color: var(--cream); font-size: 17px; font-weight: 600;
  box-shadow: inset 1px 3px 2px 0 rgba(255, 255, 255, .18);
}
.circle-btn .cb-bubble {
  position: absolute; left: 50%; top: 50%; width: 35px; height: 35px; border-radius: 50%;
  background: var(--cream); transform: translate(-50%, -50%) scale(0); pointer-events: none; z-index: 0;
  transition: transform .45s cubic-bezier(.25, 1, .4, 1);
}
.circle-btn:hover .cb-bubble, .circle-btn:focus-visible .cb-bubble { transform: translate(-50%, -50%) scale(9.2); }
.circle-btn .cb-label { position: relative; z-index: 1; grid-area: l; transition: opacity .4s var(--elt-ease); }
.circle-btn .cb-b { position: absolute; left: 24px; color: var(--ink); opacity: 0; }
.circle-btn:hover .cb-a, .circle-btn:focus-visible .cb-a { opacity: 0; }
.circle-btn:hover .cb-b, .circle-btn:focus-visible .cb-b { opacity: 1; }
.circle-btn .cb-circle {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center;
  width: 35px; height: 35px; border-radius: 50%; background: var(--cream); color: var(--ink);
  transition: background-color .4s var(--elt-ease), color .4s var(--elt-ease);
}
.circle-btn .cb-circle svg { width: 20px; height: 20px; fill: currentColor; transform: rotate(-45deg); transition: transform .4s var(--elt-ease); }
.circle-btn:hover .cb-circle, .circle-btn:focus-visible .cb-circle { background: var(--forest); color: var(--cream); }
.circle-btn:hover .cb-circle svg, .circle-btn:focus-visible .cb-circle svg { transform: rotate(0deg); }
@media (prefers-reduced-motion: reduce) { .circle-btn .cb-bubble, .circle-btn .cb-label, .circle-btn .cb-circle, .circle-btn .cb-circle svg { transition: none; } }

/* ── 055 Back To Top · catalog 055 ── */
/* markup: button[data-component="055"][data-to-top].to-top > svg. */
.to-top {
  position: fixed; right: 24px; bottom: 24px; z-index: 80;
  width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--forest); color: var(--cream);
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(12px); pointer-events: none;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--forest-deep) 30%, transparent);
  transition: opacity .25s var(--elt-ease), transform .25s var(--elt-ease), background-color .2s ease;
}
.to-top svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--emerald-deep); }
@media (prefers-reduced-motion: reduce) { .to-top { transition: opacity .01s; } }

/* ── 057 3D Carousel Roll · catalog 057 ── */
/* markup: [data-component="057"].ring3d > .ring3d-stage > .ring3d-ring[data-ring] > .ring3d-item*N > img. */
.ring3d { overflow: hidden; padding: 24px 0; }
.ring3d-stage { height: 300px; perspective: 1200px; display: flex; align-items: center; justify-content: center; }
.ring3d-ring { position: relative; width: 220px; height: 140px; transform-style: preserve-3d; cursor: grab; touch-action: pan-y; }
.ring3d-ring.dragging { cursor: grabbing; }
.ring3d-item {
  position: absolute; inset: 0; margin: 0; border-radius: 14px; overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .18); backface-visibility: hidden;
}
.ring3d-item img { width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; user-select: none; }
@media (prefers-reduced-motion: reduce) {
  .ring3d-stage { perspective: none; height: auto; }
  .ring3d-ring { width: auto; height: auto; display: flex; gap: 12px; overflow-x: auto; transform: none !important; }
  .ring3d-item { position: static; flex: 0 0 200px; height: 130px; transform: none !important; }
}

/* ── 062 Border Beam · catalog 062 ── */
/* markup: [data-component="062"].beam-card > .beam + content. */
.beam-card { position: relative; border-radius: 18px; background: var(--card); color: var(--ink); padding: 26px; }
.on-dark .beam-card { background: var(--forest-2); color: var(--cream); }
.beam {
  position: absolute; inset: 0; z-index: 0; border-radius: 18px; padding: 2px; pointer-events: none;
  background: radial-gradient(300px circle at var(--bx, 50%) var(--by, 50%), var(--emerald), transparent 79%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0; transition: opacity .2s ease;
}
.on-dark .beam { background: radial-gradient(300px circle at var(--bx, 50%) var(--by, 50%), var(--gold), transparent 79%); }
.beam-card:hover .beam, .beam-card:focus-within .beam { opacity: .9; }
.beam-card > :not(.beam) { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .beam { display: none; } }

/* ── 069 ScrollIndicator · catalog 069 ── */
/* markup: [data-component="069"].scroll-cue > .scroll-cue-pill > .scroll-cue-dot, + .scroll-cue-word. */
.scroll-cue { display: flex; flex-direction: column; align-items: center; gap: 12px; color: currentColor; }
.scroll-cue-pill {
  width: 26px; height: 42px; border: 2px solid currentColor; border-radius: 20px;
  display: flex; justify-content: center; opacity: .7;
}
.scroll-cue-dot {
  width: 5px; height: 5px; margin-top: 8px; border-radius: 50%; background: currentColor;
  animation: elt-cue-bounce 2.4s var(--elt-ease) infinite;
}
.scroll-cue-word { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; opacity: .68; }
@keyframes elt-cue-bounce {
  0%, 100% { transform: translateY(0); opacity: 1; }
  55% { transform: translateY(13px); opacity: .25; }
}
@media (prefers-reduced-motion: reduce) { .scroll-cue-dot { animation: none; } }

/* ── 071 SmoothTabs · catalog 071 ── */
/* markup: [data-component="071"].stabs[role=tablist] > .stabs-pill + button.stabs-tab*N; optional [data-tab-panel] siblings keyed by index. */
.stabs {
  position: relative; display: inline-flex; gap: 2px; padding: 4px;
  border-radius: 30px; background: var(--paper-2); border: 1px solid var(--line);
}
.on-dark .stabs { background: color-mix(in srgb, var(--cream) 7%, transparent); border-color: var(--line-dark); }
.stabs-pill {
  position: absolute; left: 0; top: 4px; bottom: 4px; width: 0; border-radius: 999px;
  background: var(--card); box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
  transition: transform .3s cubic-bezier(.34, 1.18, .64, 1), width .3s cubic-bezier(.34, 1.18, .64, 1);
  will-change: transform, width;
}
.on-dark .stabs-pill { background: var(--emerald-deep); }
.stabs-tab {
  position: relative; z-index: 1; border: 0; background: none; cursor: pointer;
  padding: 12px 20px; border-radius: 999px; font: inherit; font-size: 15px; font-weight: 600;
  color: var(--ink-soft); transition: color .2s ease;
}
.stabs-tab.is-active { color: var(--ink); }
.on-dark .stabs-tab { color: color-mix(in srgb, var(--cream) 62%, transparent); }
.on-dark .stabs-tab.is-active { color: var(--cream); }
[data-tab-panel][hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .stabs-pill { transition: none; } }

/* ── 074 Parallax Marquee · catalog 074 ── */
/* markup: [data-component="074"].pmarquee > .pm-track > .pm-card[data-depth] [data-voff]*N > img. */
.pmarquee { overflow: hidden; position: relative; height: 340px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.pm-track { position: absolute; inset: 0; perspective: 1200px; }
.pm-card {
  position: absolute; top: 50%; left: 0; width: 180px; height: 230px; margin: -115px 0 0;
  border-radius: 14px; overflow: hidden; background: var(--paper-2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .15); will-change: transform;
}
.pm-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (prefers-reduced-motion: reduce) {
  .pmarquee { height: auto; -webkit-mask-image: none; mask-image: none; }
  .pm-track { position: static; display: flex; gap: 16px; overflow-x: auto; perspective: none; padding: 12px 0; }
  .pm-card { position: static; margin: 0; flex: 0 0 180px; transform: none !important; }
}

/* ── 076 Origin Button · catalog 076 ── */
/* markup: [data-component="076"].origin-btn > .origin-fill + .origin-label. */
.origin-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  height: 60px; padding: 0 36px; border-radius: 999px; overflow: hidden; isolation: isolate;
  background: var(--cream); color: var(--ink); border: 1px solid var(--line);
  font-weight: 600; font-size: 16px;
}
.origin-fill {
  position: absolute; left: var(--ox, 50%); top: var(--oy, 50%);
  width: 12px; height: 12px; border-radius: 50%; background: var(--forest-deep);
  transform: translate(-50%, -50%) scale(0);
  transition: transform .55s cubic-bezier(.4, 0, .6, 1); pointer-events: none; z-index: -1;
}
.origin-btn:hover .origin-fill, .origin-btn:focus-visible .origin-fill { transform: translate(-50%, -50%) scale(46); }
.origin-label, .origin-icon { position: relative; z-index: 1; display: inline-flex; transition: color .35s ease; }
.origin-btn:hover .origin-label, .origin-btn:hover .origin-icon,
.origin-btn:focus-visible .origin-label, .origin-btn:focus-visible .origin-icon { color: var(--cream); }
.on-dark .origin-btn { background: var(--forest-2); color: var(--cream); border-color: var(--line-dark); }
.on-dark .origin-fill { background: var(--gold); }
.on-dark .origin-btn:hover .origin-label, .on-dark .origin-btn:focus-visible .origin-label { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .origin-fill { transition: none; } }

/* ── 079 Mouse Trail · catalog 079 ── */
/* markup: [data-component="079"].trail-zone (position:relative section). */
.trail-zone { position: relative; }
.trail-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }

/* ── 083 Compare Image · catalog 083 ── */
/* markup: [data-component="083"].compare > .cmp-frame > img.cmp-under(after) + .cmp-top > img(before) + .cmp-divider > button.cmp-handle + labels. */
.compare { margin: 0; }
.cmp-frame {
  position: relative; overflow: hidden; border-radius: 18px;
  aspect-ratio: 4 / 3; background: var(--forest-deep); --cmp: 50%;
}
.cmp-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; user-select: none; }
.cmp-top { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--cmp)) 0 0); }
.cmp-top img { position: absolute; inset: 0; }
.cmp-divider {
  position: absolute; top: 0; bottom: 0; left: var(--cmp); width: 2px; margin-left: -1px;
  background: #FFFFFF; z-index: 2;
}
.cmp-handle {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .15);
  background: #FFFFFF; color: var(--ink); cursor: ew-resize; touch-action: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.cmp-handle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.cmp-label {
  position: absolute; top: 12px; z-index: 2; padding: 5px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: #FFFFFF; background: rgba(0, 0, 0, .32);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.cmp-label-a { left: 12px; }
.cmp-label-b { right: 12px; }

/* ── 085 Hover Zoom · catalog 085 ── */
/* markup: [data-component="085"][data-zoom].zoom-media > img. */
.zoom-media { overflow: hidden; border-radius: 18px; display: block; margin: 0; }
.zoom-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform-origin: center; transition: transform .5s var(--elt-ease); will-change: transform;
}
[data-zoom]:hover img { transform: scale(1.09); }
@media (prefers-reduced-motion: reduce) {
  .zoom-media img { transition: none; }
  [data-zoom]:hover img { transform: none; }
}

/* ── 091 Dragable Ticker · catalog 091 ── */
/* markup: [data-component="091"][data-ticker].ticker-clip > .ticker-row [data-ticker-row] > .ticker-chip*N. */
.ticker-clip {
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; touch-action: pan-y;
}
.ticker-clip::-webkit-scrollbar { display: none; }
.ticker-clip.ticker-live { overflow: hidden; cursor: grab; }
.ticker-clip.ticker-live.dragging { cursor: grabbing; }
.ticker-row { display: flex; gap: 16px; width: max-content; padding: 0 48px; }
.ticker-live .ticker-row { padding: 0; }
.ticker-chip {
  display: inline-flex; align-items: center; height: 48px; padding: 0 22px; border-radius: 999px;
  background: var(--card); color: var(--ink); border: 1px solid var(--line);
  font-size: 16px; white-space: nowrap; transition: background-color .15s ease;
}
.ticker-chip:hover { background: var(--paper-2); }
.on-dark .ticker-chip { background: var(--forest-2); color: var(--cream); border-color: var(--line-dark); }
.on-dark .ticker-chip:hover { background: var(--forest); }
.ticker-live .ticker-chip { -webkit-user-drag: none; user-select: none; }
@media (max-width: 820px) { .ticker-chip { height: 44px; padding: 0 18px; } .ticker-row { padding: 0 20px; } }

/* ── 093 Avatar Animations · catalog 093 ── */
/* markup: [data-component="093"].avatars > .avatar[data-tip]*N > img. */
.avatars { display: flex; padding-left: 12px; }
.avatar {
  position: relative; width: 48px; height: 48px; margin-left: -12px; border-radius: 50%;
  background: var(--paper-2); border: 3px solid var(--card);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600; color: var(--forest);
  transition: transform .3s cubic-bezier(.34, 1.22, .64, 1); cursor: default;
}
.avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.avatar:hover { transform: translateY(-4px) scale(1.1); z-index: 2; }
.avatar[data-tip]::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translate(-50%, 5px); padding: 4px 10px; border-radius: 8px;
  background: var(--ink); color: var(--cream); font-size: 12px; font-weight: 500; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .2s ease-out, transform .2s ease-out;
}
.avatar[data-tip]:hover::after { opacity: 1; transform: translate(-50%, 0); }
.on-dark .avatar { border-color: var(--forest-deep); background: var(--forest-2); color: var(--cream); }
.on-dark .avatar[data-tip]::after { background: var(--cream); color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .avatar, .avatar[data-tip]::after { transition: none; }
  .avatar:hover { transform: none; }
}

/* ── 094 Photos Gallery · catalog 094 ── */
/* markup: [data-component="094"].pgallery > .pg-row*4 > figure.pg-card (optional .pg-w55/.pg-w25/.pg-w46/.pg-w49 basis helpers, export row map) > img + figcaption. */
.pgallery { display: flex; flex-direction: column; gap: 10px; }
.pg-row { display: flex; gap: 10px; }
.pg-card {
  position: relative; margin: 0; flex: 1 1 0; height: 300px; overflow: hidden; border-radius: 14px;
  background: var(--paper-2);
}
.pg-w55 { flex: 0 0 55%; } .pg-w25 { flex: 0 0 25%; } .pg-w46 { flex: 0 0 46%; } .pg-w49 { flex: 0 0 49%; }
.pg-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter .45s cubic-bezier(.2, 1, .3, 1); }
.pg-card figcaption {
  position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 16px;
  font-size: 18px; font-weight: 600; color: var(--cream);
  background: linear-gradient(180deg, transparent 46%, color-mix(in srgb, var(--forest-deep) 72%, transparent));
  opacity: 0; transition: opacity .45s cubic-bezier(.2, 1, .3, 1);
}
.pg-card:hover img, .pg-card:focus-within img { filter: blur(8px); }
.pg-card:hover figcaption, .pg-card:focus-within figcaption { opacity: 1; }
.js-appear .pg-card { opacity: 0; transform: scale(1.06); }
.js-appear .pg-card.pg-in { opacity: 1; transform: none; transition: opacity .5s cubic-bezier(.2, 1, .3, 1), transform .5s cubic-bezier(.2, 1, .3, 1); }
@media (max-width: 820px) { .pg-row { flex-direction: column; } .pg-card, .pg-w55, .pg-w25, .pg-w46, .pg-w49 { flex: 1 1 auto; } }
@media (prefers-reduced-motion: reduce) {
  .pg-card img, .pg-card figcaption { transition: none; }
  .pg-card:hover img { filter: none; }
  .js-appear .pg-card { opacity: 1; transform: none; }
}

/* ── 097 Text Glow · catalog 097 ── */
/* markup: [data-component="097"].text-glow (a display heading, ideally inside .on-dark). */
.text-glow {
  color: var(--cream);
  text-shadow:
    0 0 4px color-mix(in srgb, var(--cream) 80%, transparent),
    0 2px 9px color-mix(in srgb, var(--gold) 65%, transparent),
    0 2px 19px color-mix(in srgb, var(--gold) 85%, transparent),
    0 2px 30px color-mix(in srgb, var(--gold-deep) 75%, transparent),
    0 8px 46px color-mix(in srgb, var(--emerald-deep) 55%, transparent);
}

/* ── 103 Masonry Caption Grid · catalog 103 ── */
/* markup: [data-component="103"].masonry > figure.ms-item*N > img + figcaption.ms-cap > strong + span. */
.masonry { columns: 3 240px; column-gap: 14px; }
.ms-item {
  position: relative; margin: 0 0 14px; break-inside: avoid; -webkit-column-break-inside: avoid;
  overflow: hidden; border-radius: 16px; background: var(--paper-2);
}
.ms-item img { width: 100%; display: block; transition: transform .3s ease; }
.ms-item:hover img { transform: scale(1.07); }
.ms-cap {
  position: absolute; inset: auto 0 0 0; padding: 40px 16px 14px;
  display: flex; flex-direction: column; gap: 2px; color: var(--cream);
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--forest-deep) 78%, transparent));
  opacity: 0; transition: opacity .2s ease;
}
.ms-cap strong { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.ms-cap span { font-size: 13.5px; line-height: 1.3; opacity: .82; }
.ms-item:hover .ms-cap, .ms-item:focus-within .ms-cap { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .ms-item img, .ms-cap { transition: none; }
  .ms-item:hover img { transform: none; }
  .ms-cap { opacity: 1; }
}

/* ── 110 Floating Particles · catalog 110 ── */
/* markup: [data-component="110"][data-fallback="1"].particles (absolute, inside a relative overflow-hidden section). */
.particles { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.particles canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.particles.particles-fallback::before {
  content: ""; position: absolute; inset: 0; opacity: .5;
  background-image:
    radial-gradient(2px 2px at 12% 28%, var(--gold) 50%, transparent 51%),
    radial-gradient(3px 3px at 34% 64%, color-mix(in srgb, var(--gold) 70%, transparent) 50%, transparent 51%),
    radial-gradient(2px 2px at 58% 18%, color-mix(in srgb, var(--cream) 80%, transparent) 50%, transparent 51%),
    radial-gradient(2px 2px at 72% 76%, var(--gold) 50%, transparent 51%),
    radial-gradient(3px 3px at 88% 42%, color-mix(in srgb, var(--gold-deep) 80%, transparent) 50%, transparent 51%),
    radial-gradient(2px 2px at 46% 88%, color-mix(in srgb, var(--cream) 70%, transparent) 50%, transparent 51%);
}

/* ── 112 Burger Menu Icon · catalog 112 ── */
/* markup: button[data-component="112"].burger[aria-expanded] > .bg-top + .bg-mid > i.bg-x1 + i.bg-x2 + .bg-bot. */
.burger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 6px;
  width: 38px; height: 38px; padding: 4px; border: 0; background: none; cursor: pointer;
  color: var(--ink);
}
.on-dark .burger { color: var(--cream); }
.burger .bg-top, .burger .bg-bot {
  display: block; width: 100%; height: 2px; border-radius: 2px; background: currentColor;
  transition: width .7s cubic-bezier(.34, 1.26, .64, 1);
}
.burger .bg-bot { align-self: flex-end; }
.burger .bg-mid { position: relative; height: 2px; width: 100%; }
.burger .bg-mid i {
  position: absolute; inset: 0; border-radius: 2px; background: currentColor;
  transition: transform .7s cubic-bezier(.34, 1.26, .64, 1);
}
.burger.open .bg-top, .burger[aria-expanded="true"] .bg-top,
.burger.open .bg-bot, .burger[aria-expanded="true"] .bg-bot { width: 0; }
.burger.open .bg-x1, .burger[aria-expanded="true"] .bg-x1 { transform: rotate(45deg); }
.burger.open .bg-x2, .burger[aria-expanded="true"] .bg-x2 { transform: rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .burger .bg-top, .burger .bg-bot, .burger .bg-mid i { transition: none; } }

/* ── 115 Ambient Background · catalog 115 ── */
/* markup: [data-component="115"].ambient[aria-hidden] > .amb-1 + .amb-2 + .amb-3 (absolute, inside a relative overflow-hidden section). */
.ambient { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.ambient span { position: absolute; border-radius: 50%; opacity: .6; will-change: transform; }
.ambient .amb-1 {
  width: 80%; aspect-ratio: 1; left: 10%; top: 10%;
  background: radial-gradient(circle, color-mix(in srgb, var(--emerald) 26%, transparent) 0%, transparent 62%);
  animation: elt-amb-1 14s ease-in-out infinite alternate;
}
.ambient .amb-2 {
  width: 70%; aspect-ratio: 1; right: 15%; top: 15%;
  background: radial-gradient(circle, color-mix(in srgb, var(--gold) 16%, transparent) 0%, transparent 60%);
  animation: elt-amb-2 10s ease-in-out infinite alternate;
}
.ambient .amb-3 {
  width: 60%; aspect-ratio: 1; left: 20%; bottom: 10%;
  background: radial-gradient(circle, color-mix(in srgb, var(--emerald-deep) 22%, transparent) 0%, transparent 60%);
  animation: elt-amb-3 12s ease-in-out infinite alternate;
}
@keyframes elt-amb-1 { from { transform: translate3d(-30px, -30px, 0) scale(1); } to { transform: translate3d(30px, 30px, 0) scale(1.1); } }
@keyframes elt-amb-2 { from { transform: translate3d(50px, 100px, 0); } to { transform: translate3d(-50px, -20px, 0); } }
@keyframes elt-amb-3 { from { transform: translate3d(-20px, 100px, 0); } to { transform: translate3d(80px, 50px, 0); } }
@media (prefers-reduced-motion: reduce) { .ambient span { animation: none; } }

/* ── 118 FF Map · catalog 118 ── */
/* markup: [data-component="118"].ffmap > iframe[src=maps.google.com embed] + .ffmap-tint[aria-hidden]. */
.ffmap {
  position: relative; margin: 0; overflow: hidden; border-radius: 16px;
  aspect-ratio: 14 / 9; background: var(--paper-2); isolation: isolate;
}
.ffmap iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block;
  filter: grayscale(1);
}
.ffmap-tint { position: absolute; inset: 0; pointer-events: none; }
.ffmap-tint::before {
  content: ""; position: absolute; inset: 0;
  background: var(--emerald-ink); mix-blend-mode: color;
}
.ffmap-tint::after {
  content: ""; position: absolute; inset: 0;
  background: color-mix(in srgb, var(--forest) 18%, transparent); mix-blend-mode: multiply;
}

/* ── 120 Step Carousel · catalog 120 ── */
/* markup: [data-component="120"].stepc > .stepc-stage > article.stepc-card*N (> .stepc-count + h3 + p) + .stepc-controls > button[data-step-prev] + .stepc-count-label + button[data-step-next]. */
/* Thomas 2026-07-12: stage was 240px but cards are absolute inset:0 and the
   is-next peek translates +40px below, so tall cards + the peek collided with
   the controls. Taller stage + the controls cleared below the peek. */
.stepc-stage { position: relative; min-height: 320px; }
.stepc-card {
  position: absolute; inset: 0; border-radius: 20px; padding: 32px;
  background: var(--card); color: var(--ink); border: 1px solid var(--line);
  display: flex; flex-direction: column; justify-content: center; gap: 10px;
  opacity: 0; transform: scale(.92) translateY(40px); pointer-events: none;
  transition: transform .4s cubic-bezier(.4, 0, .2, 1), opacity .4s cubic-bezier(.4, 0, .2, 1);
  will-change: transform, opacity;
}
.on-dark .stepc-card { background: var(--forest-2); color: var(--cream); border-color: var(--line-dark); }
.stepc-card.is-prev { opacity: .45; transform: scale(.92) translateY(-40px); z-index: 2; }
.stepc-card.is-next { opacity: .45; transform: scale(.92) translateY(40px); z-index: 1; }
.stepc-card.is-active { opacity: 1; transform: none; pointer-events: auto; z-index: 3; }
.stepc-count { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--emerald-ink); }
.on-dark .stepc-count { color: var(--gold); }
.stepc-controls { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 56px; }
.stepc-controls button {
  width: 40px; height: 40px; border-radius: 10px; border: 0; cursor: pointer;
  background: var(--card); color: var(--forest); display: grid; place-items: center;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .1);
  transition: background-color .2s ease;
}
.stepc-controls button:hover { background: var(--paper-2); }
.on-dark .stepc-controls button { background: var(--forest-2); color: var(--cream); box-shadow: none; }
.stepc-controls svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.stepc-count-label { font-size: 14px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.on-dark .stepc-count-label { color: color-mix(in srgb, var(--cream) 65%, transparent); }
@media (prefers-reduced-motion: reduce) {
  .stepc-card { transition: none; }
  .stepc-card.is-prev, .stepc-card.is-next { transform: none; }
}

/* ── 124 Scroll Progress Bar · catalog 124 ── */
/* markup: [data-component="124"].scroll-progress[aria-hidden] > i.scroll-progress-fill[data-progress-fill]. */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 200;
  background: transparent; pointer-events: none;
}
.scroll-progress-fill {
  display: block; width: 100%; height: 100%;
  background: var(--gold); transform: scaleX(0); transform-origin: left center; will-change: transform;
}

/* ── 127 Flow Marquee · catalog 127 ── */
/* markup: [data-component="127"].flow-marquee > .fm-track[data-fm-track] > (.fm-item + i.fm-dot)*N. */
.flow-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.fm-track {
  display: inline-flex; align-items: center; gap: 26px; width: max-content; padding-left: 26px;
  will-change: transform;
}
.flow-marquee.fm-live .fm-track { animation: elt-fm-scroll 46s linear infinite; }
.flow-marquee:hover .fm-track { animation-play-state: paused; }
.fm-item { font-size: 16px; color: var(--ink-soft); white-space: nowrap; }
.on-dark .fm-item { color: color-mix(in srgb, var(--cream) 72%, transparent); }
.fm-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); opacity: .8; flex: 0 0 auto; }
@keyframes elt-fm-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .flow-marquee.fm-live .fm-track { animation: none; }
  .flow-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}

/* ── 145 Premium Button · catalog 145 ── */
/* markup: [data-component="145"].premium-btn > .pb-fill + .pb-labels > .pb-label + .pb-label.pb-alt. */
.premium-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  padding: 20px 44px; border-radius: 999px; overflow: hidden; isolation: isolate;
  border: 2px solid var(--gold); background: transparent; color: var(--gold);
  font-weight: 600; font-size: 17px; line-height: 1;
}
.pb-fill {
  position: absolute; left: -10%; right: -10%; bottom: -30%; height: 130%;
  border-radius: 50% 50% 0 0; background: var(--gold);
  transform: translateY(101%); transition: transform .5s cubic-bezier(.4, 0, 0, 1);
  pointer-events: none; z-index: 0;
}
.premium-btn:hover .pb-fill, .premium-btn:focus-visible .pb-fill { transform: translateY(0); border-radius: 0; }
.pb-labels { position: relative; z-index: 1; display: block; height: 1em; overflow: hidden; }
.pb-label { display: block; height: 1em; transition: transform .5s cubic-bezier(.4, 0, 0, 1); }
.pb-alt { color: var(--ink); }
.premium-btn:hover .pb-label, .premium-btn:focus-visible .pb-label { transform: translateY(-1em); }
@media (prefers-reduced-motion: reduce) { .pb-fill, .pb-label { transition: none; } }

/* ── 147 Polaroid Ticker · catalog 147 ── */
/* markup: [data-component="147"].polaroids > .pol-track[data-pol-track] > figure.polaroid*N > img + figcaption. */
.polaroids {
  overflow: hidden; padding: 18px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.pol-track { display: inline-flex; align-items: flex-start; gap: 40px; width: max-content; will-change: transform; }
.polaroids.pol-live .pol-track { animation: elt-pol-scroll var(--pol-dur, 40s) linear infinite; }
.polaroids:hover .pol-track { animation-play-state: paused; }
.polaroid {
  margin: 0; padding: 16px 16px 40px; border-radius: 4px; background: var(--card);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .14);
  transform: rotate(var(--pol-rot, 0deg));
  transition: transform .3s var(--elt-ease);
}
.polaroid:nth-child(4n + 1) { --pol-rot: -2.4deg; }
.polaroid:nth-child(4n + 2) { --pol-rot: 1.8deg; }
.polaroid:nth-child(4n + 3) { --pol-rot: -1.2deg; }
.polaroid:nth-child(4n + 4) { --pol-rot: 2.6deg; }
.polaroid:hover { transform: rotate(0deg) scale(1.05); }
.polaroid img { width: 190px; height: 190px; object-fit: cover; display: block; background: var(--paper-2); }
.polaroid figcaption { margin-top: 12px; font-size: 14px; text-align: center; color: var(--ink-soft); }
@keyframes elt-pol-scroll { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--pol-shift, 50%))); } }
@media (prefers-reduced-motion: reduce) {
  .polaroids.pol-live .pol-track { animation: none; }
  .polaroids { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .polaroid { transform: none; transition: none; }
}

/* ── 152 Digit Up · catalog 152 ── */
/* markup: [data-component="152"][data-digit-up][data-digit-value]. */
.du-wrap { display: inline-flex; align-items: flex-end; }
.du-col { display: inline-block; height: 1em; overflow: hidden; vertical-align: bottom; }
.du-strip { display: flex; flex-direction: column; transition: transform 1.1s var(--elt-ease); will-change: transform; }
.du-cell { height: 1em; line-height: 1; text-align: center; }
.du-static { display: inline-block; }
@media (prefers-reduced-motion: reduce) { .du-strip { transition: none; } }

/* ── 158 AnimatedSVGUnderline · catalog 158 ── */
/* markup: a[data-component="158"].ulink (plain text; JS splits chars and appends .ul-bar). */
.ulink { position: relative; display: inline-block; padding: 4px 0; color: inherit; text-decoration: none; }
.ulink .ul-ch { display: inline-block; white-space: pre; }
.ulink:hover .ul-ch, .ulink:focus-visible .ul-ch { animation: elt-char-rise .3s var(--elt-ease) both; animation-delay: calc(var(--chi, 0) * 22ms); }
.ulink .ul-bar {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 0; border-radius: 2px;
  background: var(--emerald); opacity: 0;
  transition: width 0s linear, opacity 0s linear;
}
.on-dark .ulink .ul-bar { background: var(--gold); }
.ulink:hover .ul-bar, .ulink:focus-visible .ul-bar {
  width: 100%; opacity: 1;
  transition: width .2s cubic-bezier(.44, 0, .56, 1), opacity .4s cubic-bezier(.44, 0, .56, 1);
}
@keyframes elt-char-rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .ulink:hover .ul-ch { animation: none; }
  .ulink .ul-bar, .ulink:hover .ul-bar { transition: none; }
}

/* ── 162 Dia Word Carousel · catalog 162 ── */
/* markup: [data-component="162"].word-carousel > .wc-sizer(widest word) + .wc-track[data-wc-track] > .wc-word*N. */
.word-carousel {
  position: relative; display: inline-block; height: 1.1em; overflow: hidden;
  vertical-align: bottom; color: var(--emerald-deep); text-align: center;
}
.on-dark .word-carousel { color: var(--gold); }
.wc-sizer { visibility: hidden; display: inline-block; }
.wc-track {
  position: absolute; left: 0; right: 0; top: 0;
  display: flex; flex-direction: column; align-items: center;
  transition: transform .6s var(--elt-ease); will-change: transform;
}
.wc-word { height: 1.1em; line-height: 1.1; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .wc-track { transition: none; } }

/* ── 167 Image Zoom Overlay · catalog 167 ── */
/* markup: figure[data-component="167"].zoomable > img. */
.zoomable { overflow: hidden; border-radius: 14px; display: block; margin: 0; }
.zoomable img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; transition: transform .2s ease; }
.zoomable:hover img { transform: scale(1.05); }
.zoom-overlay {
  position: fixed; inset: 0; z-index: 900; padding: 40px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--forest-deep) 84%, transparent);
  opacity: 0; transition: opacity .3s ease; cursor: zoom-out;
}
.zoom-overlay.open { opacity: 1; }
.zoom-overlay img {
  max-width: 90vw; max-height: 90vh; object-fit: contain; border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .2);
  transform: scale(.92); transition: transform .45s cubic-bezier(.25, 1.1, .5, 1);
}
.zoom-overlay.open img { transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
  .zoomable img, .zoom-overlay, .zoom-overlay img { transition: none; }
  .zoomable:hover img { transform: none; }
}

/* ── 173 Simple Timeline · catalog 173 ── */
/* markup: [data-component="173"].timeline > ol.tl-rail > li.tl-ev*N > .tl-dot + .tl-date + .tl-title + .tl-desc. */
.timeline { --tl-fill: 0%; }
.tl-rail { list-style: none; margin: 0; padding: 0; position: relative; }
.tl-ev { position: relative; }
.tl-dot {
  position: relative; display: block; width: 24px; height: 24px; border-radius: 50%;
  background: var(--paper-2); border: 2px solid var(--line); box-sizing: border-box;
  transition: all .4s cubic-bezier(.4, 0, .2, 1);
}
.tl-date { font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.tl-title { margin: 2px 0 0; font-size: 19px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.tl-desc { margin: 6px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); max-width: 240px; }
.on-dark .tl-title { color: var(--cream); }
.on-dark .tl-date, .on-dark .tl-desc { color: color-mix(in srgb, var(--cream) 66%, transparent); }
/* Thomas 2026-07-12: pulse removed (read as buggy/cheap) and the dots now sit
   EXACTLY on the rail line. A soft ring replaces the loud glow. Premium, in-line;
   dots still light on scroll (mobile IO) / hover (desktop). */
.tl-ev.on .tl-dot, .tl-ev:hover .tl-dot {
  background: var(--emerald); border-color: var(--emerald);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--emerald) 16%, transparent);
}
@media (min-width: 821px) {
  .tl-rail { display: flex; gap: 12px; padding-top: 12px; }
  .tl-rail::before {
    content: ""; position: absolute; left: 0; right: 0; top: 22px; height: 3px; border-radius: 3px;
    background: var(--line);
  }
  .on-dark .tl-rail::before { background: var(--line-dark); }
  .tl-rail::after {
    content: ""; position: absolute; left: 0; top: 22px; height: 3px; border-radius: 3px;
    width: var(--tl-fill); background: linear-gradient(90deg, var(--emerald), var(--gold));
    transition: width .6s cubic-bezier(.4, 0, .2, 1);
  }
  .tl-ev { flex: 1 1 0; padding-top: 40px; }
  .tl-dot { display: none; }
}
@media (max-width: 820px) {
  .tl-rail { padding-left: 0; }
  .tl-rail::before {
    content: ""; position: absolute; left: 11px; top: 4px; bottom: 4px; width: 4px; border-radius: 4px;
    background: var(--line);
  }
  .on-dark .tl-rail::before { background: var(--line-dark); }
  .tl-ev { padding: 0 0 30px 40px; }
  .tl-ev .tl-dot { position: absolute; left: 13px; top: 3px; width: 20px; height: 20px; transform: translateX(-50%);
    transition: width .3s, height .3s, background .3s, border-color .3s, box-shadow .3s; }
  .tl-ev.on .tl-dot { width: 24px; height: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .timeline { --tl-fill: 100%; }
  .tl-dot, .tl-rail::after { transition: none; }
  .tl-ev .tl-dot, .tl-ev.on .tl-dot, .tl-ev:hover .tl-dot {
    animation: none; background: var(--emerald); border-color: var(--emerald); box-shadow: none;
    width: 24px; height: 24px; margin: 0;
  }
}

/* ── 180 Wave Button · catalog 180 ── */
/* markup: button[data-component="180"].wave-btn > .wb-waves > i*3 + .wb-labels > .wb-label + .wb-label.wb-hover. */
.wave-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  padding: 16px 32px; border: 0; border-radius: 999px; overflow: hidden; isolation: isolate;
  background: var(--forest); color: #FFFFFF; cursor: pointer;
  font: inherit; font-size: 16px; font-weight: 600; line-height: 1;
  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, .15);
}
.wave-btn:active { background: var(--forest-deep); }
.wb-waves { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.wb-waves i {
  position: absolute; left: 51%; bottom: -240px; width: 400px; height: 400px;
  margin-left: -200px; border-radius: 50%;
  transform: scale(.05); transition: transform 1s cubic-bezier(.12, .23, .09, .99);
}
.wb-waves i:nth-child(1) { background: var(--cream); transition-delay: 0s; }
.wb-waves i:nth-child(2) { background: var(--gold); transition-delay: .07s; }
.wb-waves i:nth-child(3) { background: var(--emerald-deep); transition-delay: .14s; }
.wave-btn:hover .wb-waves i, .wave-btn:focus-visible .wb-waves i { transform: scale(1.2); }
.wb-labels { position: relative; z-index: 1; display: block; height: 1em; overflow: hidden; }
.wb-label { display: block; height: 1em; transition: transform .45s var(--elt-ease) .12s; }
.wb-hover { color: #FFFFFF; }
.wave-btn:hover .wb-label, .wave-btn:focus-visible .wb-label { transform: translateY(-1em); }
@media (prefers-reduced-motion: reduce) { .wb-waves i, .wb-label { transition: none; } }

/* ── 190 Glow Counter Cards · catalog 190 ── */
/* markup: [data-component="190"].glow-cards > article.gcard*N > .gcard-ring[aria-hidden] + .gcard-num([data-count...]) + .gcard-label. */
.glow-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.gcard {
  position: relative; padding: 30px 18px 26px; border-radius: 20px; text-align: center;
  background: color-mix(in srgb, var(--ink) 4%, transparent); color: var(--ink); overflow: hidden;
  transition: transform .3s var(--elt-ease), background-color .3s ease;
}
.on-dark .gcard { background: color-mix(in srgb, var(--cream) 5%, transparent); color: var(--cream); }
.gcard-ring {
  position: absolute; inset: 0; border-radius: 20px; padding: 1.4px; pointer-events: none; opacity: .82;
  background: linear-gradient(115deg, transparent 22%, var(--emerald) 46%, var(--gold) 54%, transparent 78%);
  background-size: 260% 100%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: elt-ring-flow 7s linear infinite;
}
.gcard:nth-child(2) .gcard-ring { animation-delay: -1.6s; }
.gcard:nth-child(3) .gcard-ring { animation-delay: -3.2s; }
.gcard:nth-child(4) .gcard-ring { animation-delay: -4.8s; }
.gcard:hover { transform: translateY(-3px); }
.gcard:hover .gcard-ring { opacity: 1; }
.gcard-num { display: block; font-size: 46px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.gcard-label { display: block; margin-top: 8px; font-size: 14.5px; color: var(--ink-soft); }
.on-dark .gcard-label { color: color-mix(in srgb, var(--cream) 66%, transparent); }
@keyframes elt-ring-flow { from { background-position: 0% 0; } to { background-position: 260% 0; } }
@media (prefers-reduced-motion: reduce) {
  .gcard-ring { animation: none; }
  .gcard { transition: none; }
  .gcard:hover { transform: none; }
}

/* ── 201 Draggable Testimonials · catalog 201 ── */
/* markup: [data-component="201"][data-testi-row].testi-row > figure.testi-card*N > .testi-mark + blockquote.testi-quote + figcaption (.testi-name + .testi-role). */
.testi-row {
  display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 6px 0 10px;
}
.testi-row::-webkit-scrollbar { display: none; }
.testi-row.drag-scroll { cursor: grab; }
.testi-row.drag-scroll.dragging { cursor: grabbing; }
.testi-card {
  flex: 0 0 clamp(280px, 33%, 372px); scroll-snap-align: center; margin: 0;
  background: var(--card); color: var(--ink); border: 1px solid var(--line);
  border-radius: 22px; padding: 32px 30px 28px; display: flex; flex-direction: column; min-height: 300px;
}
.on-dark .testi-card { background: var(--cream); border-color: transparent; }
.testi-mark { font-size: 58px; line-height: .5; height: 30px; color: var(--gold); font-weight: 800; }
.testi-quote { margin: 14px 0 0; font-size: 21px; line-height: 1.4; font-weight: 500; }
/* Thomas 2026-07-12: richer review cards — an initial avatar + footer row
   (no fabricated star ratings; the quotes are the growers' real words). */
.testi-card figcaption, .testi-foot { margin-top: auto; padding-top: 26px; display: flex; align-items: center; gap: 12px; }
.testi-avatar {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--emerald-ink); color: var(--cream);
  font-size: 14px; font-weight: 700; letter-spacing: 0.04em;
}
.on-dark .testi-card .testi-avatar { background: var(--emerald-ink); color: var(--cream); }
.testi-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.testi-name { font-size: 16px; font-weight: 600; }
.testi-role { font-size: 13px; color: var(--ink-soft); }
@media (max-width: 820px) {
  .testi-row { gap: 16px; }
  .testi-card { flex: 0 0 82vw; min-height: 260px; padding: 24px 22px 22px; }
  .testi-quote { font-size: 18px; }
}