/* Pictures for the text sections (grid/visuals.js): dots, ink tiles and glyphs, the hero's parts. */

/* ---------- Signs: small SVG fields of 40-unit cells, dots on the corners ---------- */
.sign svg { display: block; width: 100%; height: auto; overflow: visible; fill: var(--ink); }
.sign .dots { fill: var(--ink); }
.sign .stroke { fill: none; stroke: var(--ink); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.sign .glyph {
  font-family: var(--f-display); font-size: 64px; font-weight: 800; text-transform: uppercase;
  text-anchor: middle; dominant-baseline: central; fill: var(--ink);
}
.sign .inv { fill: var(--paper); }
.sign:not(.on) * { animation-play-state: paused !important; }
.sign * { transform-box: fill-box; transform-origin: center; }

.services .head { grid-row: 1 / span 2; }
.services .sign { width: min(246px, 60%); margin-top: 32px; }
@media (max-width: 860px) {
  .services .head { grid-row: auto; }
  .services .sign { width: 200px; margin: 22px 0 6px; }
}

/* research: scattered findings gather into one frame */
[data-sign="research"] .pt { transform: translate(var(--x), var(--y)); animation: gather 5s var(--ease-in-out) infinite; }
[data-sign="research"] .box { fill: none; stroke: var(--ink); stroke-width: 2px; vector-effect: non-scaling-stroke; opacity: 0; animation: box 5s var(--ease) infinite; }
@keyframes gather { 0%, 8% { transform: translate(var(--x), var(--y)); } 38%, 82% { transform: none; } 100% { transform: translate(var(--x), var(--y)); } }
@keyframes box { 0%, 40% { opacity: 0; } 48%, 80% { opacity: 1; } 88%, 100% { opacity: 0; } }

/* web: the page builds itself */
[data-sign="web"] .grow { transform-origin: left center; transform: scaleX(0); animation: grow 5s var(--ease) infinite; animation-delay: calc(var(--d) - 5s); }
@keyframes grow { 0% { transform: scaleX(0); } 12%, 78% { transform: scaleX(1); } 88%, 100% { transform: scaleX(0); } }

/* e-commerce: into the cart, the count goes up */
[data-sign="ecommerce"] .fly { opacity: 0; animation: fly 4.8s var(--ease-in-out) infinite; animation-delay: calc(var(--d) - 4.8s); }
[data-sign="ecommerce"] .count { font-family: var(--f-display); font-weight: 800; font-size: 28px; text-anchor: middle; dominant-baseline: central; opacity: 0; animation: count 4.8s steps(1) infinite; animation-delay: calc(var(--d) - 4.8s); }
@keyframes fly { 0% { opacity: 1; transform: none; } 22% { opacity: 1; transform: translate(125px, 4px) scale(0.6); } 26%, 100% { opacity: 0; transform: translate(125px, 4px) scale(0.6); } }
@keyframes count { 0% { opacity: 1; } 33.3%, 100% { opacity: 0; } }

/* product: one screen after another, a tap before each */
[data-sign="product"] .screens { transform-box: view-box; animation: screens 6s var(--ease-in-out) infinite; }
[data-sign="product"] .tap { fill: none; stroke: var(--paper); stroke-width: 2px; opacity: 0; animation: tap 2s var(--ease) infinite; }
[data-sign="product"] .stroke { rx: 8px; }
@keyframes screens { 0%, 22% { transform: none; } 30%, 55% { transform: translateY(-100px); } 63%, 88% { transform: translateY(-200px); } 96%, 100% { transform: translateY(-300px); } }
@keyframes tap { 0%, 50% { opacity: 0; transform: scale(0.4); } 60% { opacity: 1; transform: scale(1); } 75%, 100% { opacity: 0; transform: scale(1.4); } }

/* brand: one letter, every weight */
[data-sign="brand"] .f { opacity: 0; animation: show 4.2s steps(1) infinite; animation-delay: calc(var(--d) * -1); }
@keyframes show { 0% { opacity: 1; } 33.3%, 100% { opacity: 0; } }

/* graphic design and motion: one visual, every format */
[data-sign="graphics"] .morph rect { animation: formats 6s var(--ease-in-out) infinite; }
[data-sign="graphics"] .spin { animation: spin 6s linear infinite; }
@keyframes formats {
  0%, 20% { transform: scale(0.6); } 25%, 45% { transform: scale(0.56, 0.7); }
  50%, 70% { transform: scale(0.45, 0.8); } 75%, 95% { transform: scale(1.1, 0.62); } 100% { transform: scale(0.6); }
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Services: a project follows the cursor over a row ---------- */
.peek {
  position: fixed; left: 0; top: 0; z-index: 30; margin: 0; pointer-events: none;
  width: clamp(180px, 17vw, 280px);
  transform: translate(var(--pos, -999px, -999px)) translate(28px, -50%);
  opacity: 0; scale: 0.92; transition: opacity 0.25s var(--ease), scale 0.4s var(--ease);
}
.peek.on { opacity: 1; scale: 1; }
.peek img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--photo); }
.peek figcaption { margin-top: 8px; font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: var(--t-s); }

/* ---------- A strip of work ---------- */
.work-strip { padding-top: clamp(90px, 12vw, 180px); overflow: hidden; }
.work-strip .track { display: flex; gap: var(--col-gap); padding: 0 var(--gutter); width: max-content; will-change: transform; }
.work-strip a { flex: 0 0 clamp(170px, 22vw, 360px); }
.work-strip img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--photo); }
.work-strip span { display: block; margin-top: 10px; font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: var(--t-s); }
.work-strip a:hover span { text-decoration: underline; text-decoration-thickness: var(--rule); text-underline-offset: 0.2em; }
.work-strip.still { overflow-x: auto; }

/* ---------- How we work: dots that become each step, a tile that walks them ---------- */
.process .fig { position: relative; width: 120px; height: 80px; margin-bottom: 20px; }
.process .fig i {
  position: absolute; left: 0; top: 0; width: 8px; height: 8px; margin: -4px 0 0 -4px;
  background: var(--ink); border-radius: 50%;
  transform: translate(var(--x0), var(--y0)) scale(0.5);
  transition: transform 0.8s var(--ease) var(--d), border-radius 0.8s var(--ease) var(--d);
}
.process li.on .fig i { transform: translate(var(--x1), var(--y1)) scale(var(--sx), var(--sy)); border-radius: var(--r); }
.process ol { position: relative; }
.process .runner { display: none; position: absolute; left: 0; top: calc(var(--rule) / 2 - 12px); width: 24px; height: 24px; background: var(--ink); }
@media (max-width: 1000px) { .process .fig { grid-column: 1 / -1; margin: 6px 0 14px; } }

.process.pinned { min-height: 240vh; align-items: start; }
.process.pinned > .label, .process.pinned > .body { position: sticky; top: var(--stick, calc(var(--nav-h) + 10vh)); }
.process.pinned .runner { display: block; }
.process.pinned li :is(h3, p) { transition: color 0.4s var(--ease); }
.process.pinned li:not(.on) :is(h3, p) { color: var(--mute); }

/* ---------- AI: many variants, one picked ---------- */
.variants { position: relative; margin-top: clamp(40px, 5vw, 72px); --vh: clamp(84px, 10vw, 160px); }
.variants .row { display: flex; flex-wrap: wrap; gap: 10px; height: var(--vh); overflow: hidden; } /* frames that do not fit wrap out of sight */
.variants .v {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: calc(var(--vh) * var(--r)); height: var(--vh); border: var(--rule) solid var(--ink);
  font-family: var(--f-display); font-size: calc(var(--vh) * 0.46); line-height: 1; text-transform: uppercase;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.variants .v.picked { background: var(--ink); color: var(--paper); }
.variants .cursor {
  position: absolute; left: 0; top: 0; width: 28px; height: 28px;
  fill: var(--ink); stroke: var(--paper); stroke-width: 1.5px; stroke-linejoin: round;
  transition: transform 0.9s var(--ease-in-out);
}

/* ---------- Why Fluke: four cells, one sign each ---------- */
.why ul.cells { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); }
.why ul.cells li { border-top: var(--rule) solid var(--ink); padding: 26px 0 56px; }
.why ul.cells .sign { width: min(246px, 70%); margin-bottom: 28px; }
@media (max-width: 720px) { .why ul.cells { grid-template-columns: minmax(0, 1fr); } .why ul.cells .sign { width: 200px; } }

.why .sign * { transition: transform 0.8s var(--ease), opacity 0.5s var(--ease), stroke-dashoffset 0.6s var(--ease); }
/* one team: four dots meet in one tile */
.why .merge { transition-delay: 0.1s; }
.why .on .merge { transform: translate(var(--x), var(--y)); opacity: 0; }
.why .one { opacity: 0; transform: scale(0.2); }
.why .on .one { opacity: 1; transform: none; transition-delay: 0.6s; }
/* creativity first: ? becomes ! */
.why .x { opacity: 0; transform: translateY(30px); }
.why .on .q { opacity: 0; transform: translateY(-30px); transition-delay: 0.3s; }
.why .on .x { opacity: 1; transform: none; transition-delay: 0.45s; }
/* built for now: the layers go, the line goes straight to live */
.why .on .layer { opacity: 0; transform: translateY(40px); transition-delay: var(--d); }
.why [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; }
.why .on .go { stroke-dashoffset: 0; transition-delay: 0.5s; }
.why .live { opacity: 0; transform: scale(0.2); }
.why .on .live { opacity: 1; transform: none; transition-delay: 0.95s; }
/* honest feedback: what works, what doesn't */
.why .tick { stroke: var(--paper); }
.why .on .tick { stroke-dashoffset: 0; transition-delay: 0.2s; }
.why .on .cross { stroke-dashoffset: 0; transition-delay: 0.6s; }

/* ---------- Reduced motion: every picture holds its final frame ---------- */
@media (prefers-reduced-motion: reduce) {
  .sign *, .process .fig i, .variants * { animation: none !important; transition: none !important; }
  [data-sign="research"] .pt { transform: none; }
  [data-sign="research"] .box, [data-sign="ecommerce"] .count:last-of-type, [data-sign="brand"] .f:last-of-type { opacity: 1; }
  [data-sign="web"] .grow { transform: none; }
  [data-sign="graphics"] .morph rect { transform: scale(0.6); }
}

/* ---------- One section on ultramarine, to break the run of mist ---------- */
/* AI swaps the two colours, so everything inside that draws with ink or paper turns over with it. */
.ai {
  --ink: var(--mist); --paper: var(--ultramarine); --mute: color-mix(in srgb, var(--mist) 75%, var(--ultramarine));
  background: var(--paper); color: var(--ink);
  margin-top: clamp(90px, 12vw, 180px); padding-bottom: clamp(90px, 12vw, 180px);
}
.ai ::selection { background: var(--ink); color: var(--paper); }