/* ============================================================
   Web design reel + Automations (between manifesto and capabilities)
   picked 2026-10-05 from ~/Desktop/kairos-sections (variant A)
   ============================================================ */
.sec-head { display: grid; grid-template-columns: 1fr 2fr; align-items: end; gap: 24px; padding: 0 var(--gut); margin-bottom: clamp(44px, 7vh, 80px); }
.sec-side { display: flex; justify-content: space-between; align-items: end; gap: 24px; }
.sec-side .hint { font-size: 12px; text-transform: uppercase; letter-spacing: .02em; color: var(--mute); text-align: right; max-width: 220px; }

/* ---------- web design: two rows of case cards drifting opposite ways (sections.js) ----------
   picked 2026-10-15 from demos/web-showcase/b-split.html. Each card = the recording at its own
   16:10 (1440x900, never cropped) + a panel with the client's logo in white, kind, one line, text. */
.web { position: relative; z-index: 7; background: var(--ink); padding: clamp(110px, 16vh, 180px) 0 clamp(80px, 12vh, 140px); }
.wc-rows { display: grid; gap: clamp(28px, 4vh, 48px); }
.wc-row { overflow: hidden; touch-action: pan-y; cursor: grab; }
.wc-row.is-dragging, .wc-row.is-dragging * { cursor: grabbing; }
.wc-track { display: flex; align-items: start; gap: clamp(14px, 1.6vw, 24px); width: max-content; will-change: transform; padding: 0 var(--gut); }
/* B3 matte glass (2026-10-15, demos/web-showcase/b3-glass.html): each card is one frosted slab tinted by its
   own website — the poster, blown up and blurred past recognition, darkened toward ink. Grain = matte, lit rim +
   a sheen that follows the cursor = glass. The film is set into the slab ABOVE the grain/sheen layer (z 5, own
   layer), otherwise the soft-light grain shimmers over the video while the row slides. */
.wc-card { --fw: clamp(360px, 38vw, 640px); --pad: 10px; --mx: 30%; --my: 0%; position: relative; isolation: isolate; flex: none; display: grid;
  grid-template-columns: var(--fw) clamp(250px, 19vw, 320px); height: calc(var(--fw) * .625 + var(--pad) * 2); padding: var(--pad);
  border-radius: 18px; overflow: hidden; user-select: none; -webkit-user-select: none;
  clip-path: inset(0 round 18px); }   /* the blurred tint is its own GPU layer and slips past overflow + radius; clip-path holds it */
/* the tint is BAKED (2026-10-18): assets/web/tint/<id>-d|m.webp = the poster under blur(46px) saturate(1.35)
   brightness(.62), rendered once at this box's size. A live 46px blur on ~36 moving cards made films stutter on older laptops. */
.wc-tint { position: absolute; inset: -20%; z-index: -3; background: var(--tint-d) center / 100% 100% no-repeat;
  transform: scale(1.1) translateZ(0); }
.wc-card::before { content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none; transition: opacity 1s var(--ease);
  background: linear-gradient(90deg, rgba(8,8,8,.18), rgba(8,8,8,.42) 70%), linear-gradient(rgba(8,8,8,0) 40%, rgba(8,8,8,.3)); }
.wc-card:hover::before { opacity: .7; }
.wc-card::after { content: ''; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(420px circle at var(--mx) var(--my), rgba(255,255,255,.10), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,255,255,0) 38%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light; opacity: .9;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 0 1px rgba(255,255,255,.08), inset 0 -24px 48px rgba(0,0,0,.22); }
.wc-rim { position: absolute; inset: 0; z-index: 4; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 1px 0 0 rgba(255,255,255,.06), inset 0 0 0 1px rgba(255,255,255,.07); }
.wc-film { position: relative; z-index: 5; transform: translateZ(0); width: calc(var(--fw) - var(--pad)); aspect-ratio: 16 / 10; align-self: start;
  overflow: hidden; border-radius: 10px; background: #141414; cursor: pointer; box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.08); }
.wc-film img, .wc-film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wc-film video { opacity: 0; z-index: 1; transition: opacity .5s var(--ease); }
.wc-card.is-playing .wc-film video, .wc-card.is-paused .wc-film video { opacity: 1; }
.wc-play { position: absolute; left: 50%; top: 50%; z-index: 4; width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(8,8,8,.42); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(252,252,252,.28);
  opacity: 0; transform: scale(.85); transition: opacity .4s var(--ease), transform .5s var(--ease); pointer-events: none; }
.wc-play svg { width: 16px; height: 16px; margin-left: 3px; fill: var(--paper); }
.wc-film:hover .wc-play, .wc-card.is-paused .wc-play { opacity: 1; transform: none; }
.wc-card.is-playing .wc-play, .wc-row.is-dragging .wc-play { opacity: 0; transform: scale(.85); }
/* timeline: a 2px line inside a 24px grab zone; click or drag it to scrub (sections.js) */
.wc-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; height: 24px; opacity: 0; pointer-events: none; cursor: pointer; touch-action: none; transition: opacity .4s; }
.wc-bar::before, .wc-bar i { position: absolute; left: 0; bottom: 0; height: 2px; transition: height .25s var(--ease); }
.wc-bar::before { content: ''; right: 0; background: rgba(252,252,252,.18); }
.wc-bar i { width: 0; background: var(--paper); }
.wc-bar i::after { content: ''; position: absolute; right: -7px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: var(--paper);
  box-shadow: 0 1px 6px rgba(0,0,0,.35); transform: scale(0); transition: transform .25s var(--ease); }
.wc-card.is-playing .wc-bar, .wc-card.is-paused .wc-bar { opacity: 1; pointer-events: auto; }
.wc-bar:hover::before, .wc-bar:hover i, .wc-bar.is-scrub::before, .wc-bar.is-scrub i { height: 4px; }
.wc-bar:hover i::after, .wc-bar.is-scrub i::after { transform: none; }
.wc-panel { position: relative; z-index: 2; display: flex; flex-direction: column; padding: clamp(14px, 1.4vw, 22px) clamp(14px, 1.4vw, 22px) clamp(10px, 1vw, 14px); min-width: 0; min-height: 0; overflow: hidden; }
.wc-logo { --lh: clamp(26px, 2.2vw, 36px); height: calc(var(--lh) * 1.5); display: flex; align-items: center; opacity: .7; transition: opacity .5s var(--ease); }
.wc-card:hover .wc-logo { opacity: 1; }
.wc-where { margin-top: 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .02em; color: rgba(252,252,252,.6); }
.wc-line { margin-top: auto; padding-top: 18px; font-size: clamp(16px, 1.25vw, 20px); line-height: 1.25; letter-spacing: -.01em; text-shadow: 0 1px 12px rgba(0,0,0,.25); }
.wc-text { margin-top: 8px; font-size: 13px; line-height: 1.5; color: rgba(252,252,252,.72); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
/* client logos, one ink: drawn marks through their alpha, wordmarks in their own face */
.wc-mark { display: block; height: calc(var(--lh) * var(--k, 1)); width: calc(var(--lh) * var(--k, 1) * var(--ar)); background: var(--paper);
  -webkit-mask: var(--src) no-repeat center / contain; mask: var(--src) no-repeat center / contain; }
.wc-word { display: block; font-size: calc(var(--lh) * .72); line-height: 1; white-space: nowrap; color: var(--paper); }
.wc-word.onetap   { font-family: 'Bricolage Grotesque', var(--sans); font-weight: 800; letter-spacing: .11em; transform: scaleX(1.06); transform-origin: left; }
.wc-word.asterion { font-family: 'Fraunces', serif; font-weight: 400; letter-spacing: .32em; text-transform: uppercase; font-size: calc(var(--lh) * .66); }
.wc-word.nola     { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; letter-spacing: 0; font-size: calc(var(--lh) * 1.03); }
.wc-word.brandt   { font-family: 'Fraunces', serif; font-weight: 400; letter-spacing: .02em; }
.wc-word.brandt i { font-family: 'Fraunces', serif; font-style: italic; }
.wc-word.sapori   { font-family: 'Fraunces', serif; font-weight: 300; font-variation-settings: 'opsz' 144; text-transform: uppercase; letter-spacing: -.03em; font-size: calc(var(--lh) * .81); }

/* ---------- automations ---------- */
.autos { position: relative; z-index: 7; background: var(--ink); padding: clamp(110px, 16vh, 180px) 0 clamp(60px, 10vh, 120px); }
.ka { display: flex; align-items: baseline; gap: .28em; font-size: 22px; line-height: 1; }
.ka b { font-weight: 600; letter-spacing: -.02em; }
.ka em { font-size: 1.04em; }
.auto-rows { margin: 0 var(--gut); border-top: 1px solid var(--line); padding: clamp(40px, 7vh, 80px) 0; }
/* a film that is not playing freezes its CSS loops too (blinking cursors, pulses), so off-screen rows cost nothing */
.auto.is-idle .frame *, .auto.is-idle .frame *::before, .auto.is-idle .frame *::after { animation-play-state: paused !important; }
.auto-rows .auto + .auto { margin-top: clamp(48px, 8vh, 96px); padding-top: clamp(48px, 8vh, 96px); border-top: 1px solid var(--line); }

@media (max-width: 980px) {
  .sec-head { grid-template-columns: 1fr; }
  .sec-side { flex-direction: column; align-items: start; }
  .sec-side .hint { text-align: left; }
}
@media (max-width: 760px) {
  .wc-card { --fw: 84vw; grid-template-columns: calc(var(--fw) - var(--pad) * 2); height: auto; }
  .wc-tint { background-image: var(--tint-m); }
  .wc-film { width: 100%; }
  .wc-text { -webkit-line-clamp: 4; }
}