/* 1PXL Labs — motion layer.
   Everything here is progressive: hidden states only apply under html.motion,
   which motion.js adds when JS runs and the visitor has not asked for reduced motion. */
:root { --ease: cubic-bezier(0.2, 0.7, 0.2, 1); }

/* ── Page-to-page transition (browsers with cross-document view transitions) ── */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: vt-out 0.22s ease both; }
  ::view-transition-new(root) { animation: vt-in 0.5s var(--ease) both; }
}
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }

/* ── Nav tucks away on the way down, returns on the way up ── */
nav.site-nav { transition: border-color 0.3s, background 0.3s, transform 0.45s var(--ease); }
nav.site-nav.nav-hidden:not(.open) { transform: translateY(-100%); }

/* ── Softer, longer reveals ── */
.motion .reveal { transition: opacity 1s var(--ease), transform 1s var(--ease); }
.motion .reveal-stagger > * { transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }

/* ── Section titles rise line by line ── */
.motion .section-title.lines.reveal { opacity: 1; transform: none; }
.motion .section-title.lines .ln { display: block; }
.motion .section-title.lines .ln-i {
  display: block; opacity: 0; transform: translateY(46%);
  clip-path: inset(0 -10% 100% -10%);
  transition: transform 1.1s var(--ease), clip-path 1.1s var(--ease), opacity 0.4s ease;
}
.motion .section-title.lines .ln:nth-child(2) .ln-i { transition-delay: 0.12s; }
.motion .section-title.lines .ln:nth-child(3) .ln-i { transition-delay: 0.24s; }
.motion .section-title.lines.in .ln-i { opacity: 1; transform: none; clip-path: inset(-25% -10% -25% -10%); }
.motion .section-title.lines::after { transform: scaleX(0); transform-origin: left; transition: transform 0.9s 0.45s var(--ease); }
.motion .section-title.lines.in::after { transform: scaleX(1); }

/* ── Photographs wipe open ── */
.motion .wipe { clip-path: inset(0 0 100% 0); transition: clip-path 1.2s var(--ease); }
.motion .wipe.in { clip-path: inset(0); }
.motion .wipe:not(.in) img { transform: scale(1.14); }
.motion .wipe img { transition: transform 1.7s var(--ease), opacity 0.6s ease, filter 0.6s ease; }

/* ── Hand redlines are drawn, not shown ── */
.motion .redline path { transition: stroke-dashoffset 0.9s var(--ease); }
.motion .redline span { opacity: 0; transition: opacity 0.5s 0.55s ease; }
.motion .redline.in span { opacity: 1; }
.motion .circled svg { clip-path: inset(-20% 100% -20% -10%); transition: clip-path 0.9s 0.5s var(--ease); }
.motion .circled.in svg, .motion .in .circled svg, .motion .visible .circled svg { clip-path: inset(-20% -10% -20% -10%); }
.motion .struck::after { transform: rotate(-2deg) scaleX(0); transform-origin: left; transition: transform 0.6s 0.4s var(--ease); }
.motion .visible .struck::after, .motion .struck.in::after { transform: rotate(-2deg) scaleX(1); }

/* ── Sub-heading inside a section (second grid under one title) ── */
.sub-label { margin-top: 88px; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 16px; }
.sub-label::after { content: ''; flex: 1; height: 0.5px; background: var(--border); }
.sub-label + .cards { margin-top: 28px; }

@media (max-width: 860px) {
  .sub-label { margin-top: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  nav.site-nav { transition: none; }
}

/* ── LANDING: perspective field of rising pixels, oversized headline ── */
.hero-bg #pixel-wall {
  -webkit-mask-image: linear-gradient(98deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.42) 34%, #000 68%);
  mask-image: linear-gradient(98deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.42) 34%, #000 68%);
}
/* Pixel is the outline, Physical is the solid: the headline does what it says */
.hero > .hero-content .hero-title .hl:nth-of-type(1) .hl-inner { color: var(--black); -webkit-text-stroke: 1.5px rgba(255,255,255,0.92); }
.hero > .hero-content .hero-title .line3 { color: var(--white); -webkit-text-stroke: 0; }
@media (min-width: 861px) {
  .hero > .hero-content .hero-title { font-size: clamp(72px, 10.4vw, 172px); line-height: 0.88; margin-bottom: 44px; }
  .hero > .hero-content .hero-title .hl:nth-of-type(1) .hl-inner { -webkit-text-stroke-width: 2px; }
  .hero > .hero-content .hero-desc { font-size: 13px; max-width: 440px; color: var(--white-dim); }
}
@media (max-width: 860px) {
  .hero-bg #pixel-wall { -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 40%, rgba(0,0,0,0.3) 62%); mask-image: linear-gradient(180deg, #000 0%, #000 40%, rgba(0,0,0,0.3) 62%); }
}

/* ── Manifesto: one large statement, lit word by word on scroll ── */
.manifesto {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(24px, 3.5vw, 50px); line-height: 1.14; letter-spacing: -0.02em;
  color: var(--white); max-width: 1180px; margin-top: 56px;
}
.manifesto b { font-weight: 700; color: var(--red); }
.motion .manifesto .w { color: #2e2e2e; transition: color 0.35s ease; }
.motion .manifesto .w.on { color: var(--white); }
.motion .manifesto b .w.on { color: var(--red); }

/* ── Rib model as a drawing plate ── */
.plate.ribs { aspect-ratio: 16 / 6; margin-top: 56px; }
.plate.ribs canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (max-width: 860px) { .plate.ribs { aspect-ratio: 4 / 3; margin-top: 40px; } }
.hero .hero-actions .btn:not(.btn-red) { background: rgba(10, 10, 10, 0.86); }

/* Offer cards without a printed figure: the fee line is words, not a number */
.offer-price.quoted b { font-size: 20px; letter-spacing: -0.01em; }

/* ── Service icons: one small line drawing per service, top right of its card ── */
.svc-ico { width: 40px; height: 40px; color: #8f8f8f; display: block; overflow: visible; }
.card { position: relative; }
.card > .svc-ico { position: absolute; top: 30px; right: 30px; transition: color 0.3s ease; }
.card:hover > .svc-ico { color: var(--white); }
.layer-k .svc-ico { width: 34px; height: 34px; margin-bottom: 16px; }
@media (max-width: 860px) { .card > .svc-ico { width: 32px; height: 32px; top: 24px; right: 24px; } }

/* ── Service icon motion: plays while the card is hovered, focused or pressed (.ico-on) ── */
.svc-ico .l { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; }
.svc-ico .r { fill: none; stroke: var(--red); stroke-width: 1.5; stroke-linecap: square; }
.svc-ico .rf { fill: var(--red); stroke: none; } .svc-ico .k { fill: #101010; }
.svc-ico [class*="an-"] { transform-box: fill-box; transform-origin: center; }
.svc-ico .an-pulse { --an: icoPulse; } .svc-ico .an-beat { --an: icoBeat; }
.svc-ico .an-bar { --an: icoBar; --dur: 0.9s; }
.svc-ico .an-ring { --an: icoRing; --dur: 1.4s; --tf: ease-out; }
.svc-ico .an-beam { --an: icoBeam; transform-origin: left center; }
.svc-ico .an-flow { stroke-dasharray: 100; --an: icoFlow; --dur: 1.6s; --tf: linear; }
.svc-ico .an-slide { --an: icoSlide; --dur: 1.6s; }
.svc-ico .an-draw { stroke-dasharray: 100; --an: icoDraw; --dur: 1.8s; }
.svc-ico .an-chase { --an: icoChase; --dur: 0.75s; --tf: steps(1); }
.svc-ico .an-bob { --an: icoBob; --dur: 0.9s; }
.svc-ico .an-focus { --an: icoFocus; --dur: 1.4s; }
/* At rest nothing is animating, so every part sits in its drawn position */
.card:hover .svc-ico [class*="an-"], .card:focus-visible .svc-ico [class*="an-"], .layer:hover .svc-ico [class*="an-"], .ico-on .svc-ico [class*="an-"] { animation: var(--an) var(--dur, 1.1s) var(--tf, ease-in-out) var(--d, 0s) infinite backwards; }
.ico-on > .svc-ico { color: var(--white); }
@keyframes icoPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
@keyframes icoBeat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }
@keyframes icoBar { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.35); } }
@keyframes icoRing { 0% { transform: scale(1); opacity: 1; } 15% { transform: scale(0.55); opacity: 0; } 40% { opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes icoBeam { 0%, 100% { transform: scaleX(1); opacity: 1; } 50% { transform: scaleX(0.25); opacity: 0.4; } }
@keyframes icoFlow { from { stroke-dashoffset: 200; } to { stroke-dashoffset: 0; } }
@keyframes icoSlide { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(var(--x, 8px)); } }
@keyframes icoDraw { 0% { stroke-dashoffset: 100; } 55%, 100% { stroke-dashoffset: 0; } }
@keyframes icoChase { 0%, 100% { opacity: 1; } 34% { opacity: 0.15; } }
@keyframes icoBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes icoFocus { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.82); } }
@media (prefers-reduced-motion: reduce) { .svc-ico [class*="an-"] { animation: none !important; } }