/* Keyframes */
@keyframes site-window-enter{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes work-brand-dot-bounce{0%{opacity:0;translate:0 -1.1em}3%{opacity:1;animation-timing-function:cubic-bezier(.333333,0,.666667,.333333);translate:0 -1.1em}21%{translate:0}23%{animation-timing-function:cubic-bezier(.333333,.666667,.666667,1);translate:0}38%{animation-timing-function:cubic-bezier(.333333,0,.666667,.333333);translate:0 -.45em}53%{translate:0}55%{animation-timing-function:cubic-bezier(.333333,.666667,.666667,1);translate:0}64.5%{animation-timing-function:cubic-bezier(.333333,0,.666667,.333333);translate:0 -.2em}74%{translate:0}76%{animation-timing-function:cubic-bezier(.333333,.666667,.666667,1);translate:0}82%{animation-timing-function:cubic-bezier(.333333,0,.666667,.333333);translate:0 -.09em}88%{translate:0}90%{animation-timing-function:cubic-bezier(.333333,.666667,.666667,1);translate:0}93%{animation-timing-function:cubic-bezier(.333333,0,.666667,.333333);translate:0 -.04em}96%,to{translate:0}}
@keyframes work-brand-dot-impact{0%,21%,23%,53%,55%,74%,76%,88%,90%,96%,98%,to{transform:scale(1)}22%{transform:scale(1.12,.88)}54%{transform:scale(1.08,.92)}75%{transform:scale(1.04,.96)}89%{transform:scale(1.025,.975)}97%{transform:scale(1.012,.988)}}
@keyframes work-card-enter{0%{opacity:0;transform:translateY(6px)scale(.985)}to{opacity:1;transform:translateY(0)scale(1)}}
@keyframes work-card-marquee-ltr{0%{transform:translate(calc(-50% - 16px))}to{transform:translate(0,0)}}
@keyframes data-dictionary-hub-glow{0%,20%,to{box-shadow:0 4px #dedede,0 5px 10px #1414141a}7%{box-shadow:0 4px #dedede,0 5px 12px #1414141f,0 0 18px #03a96f47}}
@keyframes data-dictionary-hub-ring{0%{opacity:0;transform:scale(.92)}5%{opacity:.46}20%,to{opacity:0;transform:scale(1.48)}}
@keyframes sys-overlay-shot-next{0%{opacity:.72;transform:translate(12px)}}
@keyframes sys-overlay-shot-prev{0%{opacity:.72;transform:translate(-12px)}}
.workLensPane.is-leaving{animation:lens-out .14s linear both}
.workLensPane.is-entering{opacity:0}
.workLensPane.is-entering.is-in{animation:lens-in .3s cubic-bezier(.22,1,.36,1) both}
@keyframes lens-out{to{opacity:0;transform:translateY(4px)}}
@keyframes lens-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce) {
.workLensPane.is-leaving,.workLensPane.is-entering{animation:none;opacity:1}
}
.socialMenuPanel{opacity:0;clip-path:inset(0 0 88% 82% round 8px);transition:opacity .167s linear,clip-path .28s cubic-bezier(.22,1,.36,1)}
.socialMenu[data-open=true] .socialMenuPanel{opacity:1;clip-path:inset(0 0 0 0 round 8px)}
.socialMenuLink{opacity:0;transform:translateY(-4px) scale(.98);transition:opacity .167s linear,transform .167s linear}
.socialMenu[data-open=true] .socialMenuLink{opacity:1;transform:none}
.socialMenu[data-open=true] .socialMenuLink:nth-child(2){transition-delay:.03s}
.socialMenu[data-open=true] .socialMenuLink:nth-child(3){transition-delay:.06s}
.socialMenu[data-open=true] .socialMenuLink:nth-child(4){transition-delay:.09s}
.socialMenu[data-open=true] .socialMenuLink:nth-child(5){transition-delay:.12s}
.socialMenuGlyph .is-close{opacity:0;transform:scale(.72) rotate(45deg)}
.socialMenuGlyph svg{transition:opacity .133s linear,transform .167s cubic-bezier(.22,1,.36,1)}
.socialMenu[data-open=true] .socialMenuGlyph .is-menu{opacity:0;transform:scale(.72) rotate(-45deg)}
.socialMenu[data-open=true] .socialMenuGlyph .is-close{opacity:1;transform:none}
.intCopyLabel{transition:width .167s linear}
.intCopyMeasures{visibility:hidden;pointer-events:none;width:0;height:0;position:absolute;overflow:hidden}
.intCopyMeasures>span{white-space:nowrap;font:inherit;letter-spacing:inherit;position:absolute}
.sysOverlayScrim{border:0;padding:0;cursor:pointer;background:0 0}
.sysOverlay.is-open .sysOverlayStage{pointer-events:auto}
@media (prefers-reduced-motion:reduce) {
.socialMenuPanel,.socialMenuLink,.socialMenuGlyph svg,.intCopyLabel{transition:none}
}
/* intro: the brand dot waits, then bounces in (site sets data-intro on <html>) */
html[data-intro=play]:not([data-intro-done]) .workBrandDotBounce{animation:work-brand-dot-bounce 1.26s linear calc(1.25s * var(--intro-speed,1)) both,work-brand-dot-impact 1.26s ease-in-out calc(1.25s * var(--intro-speed,1)) both}
@media (prefers-reduced-motion:reduce) {
html[data-intro=play]:not([data-intro-done]) .workBrandDotBounce{animation:none}
}
/* ------------------------------------------------------------------ */
/* Personalisation layer: typographic plates + overlay lists           */
/* ------------------------------------------------------------------ */

.plate{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border-radius: inherit;
  background: linear-gradient(155deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 55%);
}
.plateKicker{
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}
.plateTitle{
  font-family: var(--font-display);
  font-size: var(--text-display-sm);
  line-height: 1.05;
  color: var(--text);
  margin-top: auto;
}
.plateNumber{
  font-family: var(--font-display);
  font-size: var(--text-display-lg);
  line-height: 1;
  color: var(--text);
  margin-top: auto;
}
.plateMeta{
  font-family: var(--font-body);
  font-size: var(--text-ui);
  line-height: 18px;
  color: var(--muted);
}
.overlayList{
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-body);
  color: var(--text);
  font-size: 16px;
  line-height: 24px;
}
.overlayList li{ list-style: disc; }
.overlayList li::marker{ color: var(--muted); }
/* Marquee markup is always present; only overflowing captions may scroll. */
.workCardTagline:not(.is-overflowing) .workCardTaglineGap,
.workCardTagline:not(.is-overflowing) .workCardTaglineDuplicate{ display: none; }

/* ------------------------------------------------------------------ */
/* Live preview                                                        */
/* ------------------------------------------------------------------ */

.livePreview {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1200;
  width: 360px;
  max-width: calc(100vw - 32px);
  padding: 6px;
  background: var(--color-surface);
  border: 1px solid #ffffff24;
  border-radius: 8px;
  box-shadow: 0 12px 40px #0006;
  pointer-events: none;
  opacity: 0;
  scale: .98;
  transition: opacity .167s linear, scale .25s cubic-bezier(.22, 1, .36, 1);
  will-change: transform, opacity;
}
.livePreview.is-visible { opacity: 1; scale: 1; }
.livePreviewMedia {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 6px;
  overflow: hidden;
  background: #0b0b0b;
}
.livePreviewMedia > img,
.livePreviewMedia > video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .2s linear, transform .167s ease-out;
}
.livePreview.is-ready .livePreviewMedia > img,
.livePreview.is-ready .livePreviewMedia > video { opacity: 1; }
.livePreviewFrame { position: absolute; inset: 0; overflow: hidden; background: #0b0b0b; }
.livePreviewFrameInner {
  position: absolute;
  top: 0;
  left: 0;
  width: 1440px;
  height: 900px;
  transform-origin: top left;
}
.livePreviewFrameInner > iframe { display: block; width: 100%; height: 100%; border: 0; pointer-events: none; }

.casePreview {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  overflow: hidden;
}
.casePreviewBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 8px 10px;
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}
.casePreviewHost { color: var(--faint); }
.casePreviewViewport { position: relative; aspect-ratio: 16 / 10; background: #0b0b0b; overflow: hidden; }
.casePreviewViewport > video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.casePreviewFrameInner {
  position: absolute;
  top: 0;
  left: 0;
  width: 1440px;
  height: 900px;
  transform-origin: top left;
}
.casePreviewFrameInner > iframe { display: block; width: 100%; height: 100%; border: 0; }

@media (hover: none) { .livePreview { display: none; } }
@media (prefers-reduced-motion: reduce) { .livePreview { transition: none; scale: 1; } }