/* footer.css — the dark footer #contact, "Taken in" (the owner's pick from the footer lab, Oct 22; prototype:
   _sandbox/footer-lab/R2-C2c-taken-in.html, built from _sandbox/footer-lab/_src-c2/). Pieces of shipped work stream in
   along curves and are taken in by a glass prompt bar; the visitor picks how the message reaches Lukas (call, email,
   LinkedIn). Interaction: js/footer.js. Everything is scoped to #contact; its own breakpoints (760 / 600) come from
   the prototype. A Z: the headline is the entry (top-left), the bar the exit (lower-right), the stream runs between. */
#contact { position: relative; z-index: 0; isolation: isolate; overflow: clip; margin: -32px 0 0; padding-top: 32px;   /* -32 tucks under the slab's rounded bottom */
  min-height: max(732px, calc(100svh + 32px)); display: flex; flex-direction: column; background: #050608; color: #fff; }
#contact[data-ch=call]  { --a: #642BE1; --b: #A485F7; }   /* call = violet, LinkedIn = blue (owner, Oct 22) */
#contact[data-ch=email] { --a: #E12B6A; --b: #F7859A; }
#contact[data-ch=in]    { --a: #266BE1; --b: #5395F7; }

#contact .ask { position: relative; z-index: 3; flex: 1; display: grid; grid-template-rows: auto 1fr; width: min(1200px, 100% - 80px); margin: 0 auto;
  padding: max(112px, 13vh) 0 56px; pointer-events: none; }   /* top: more air under the page edge (owner, Oct 22; was max(64px, 9vh)) */
#contact .ask > * { pointer-events: auto; }
#contact .hl { justify-self: start; margin: 0; font: 500 64px/1.08 'Surt Expanded', 'Surt', system-ui, sans-serif; letter-spacing: -2.8px; color: #fff; text-wrap: balance; }
#contact .dock { align-self: center; justify-self: end; width: min(600px, 100%); margin-top: 40px; }

/* the stream: one WAAPI transform + opacity flight per tile (compositor only). Same height for every tile, its width
   follows the artwork; composed art fills the tile, an object sits on a plain grey tile */
#contact .stream { position: absolute; z-index: 1; inset: 0; overflow: hidden; pointer-events: none; }
#contact .tl { position: absolute; left: 0; top: 0; border-radius: 12px; background: #f2f2f2; will-change: transform, opacity; opacity: 0; }
#contact .tl--f { background: none; }
#contact .tl img { position: absolute; display: block; max-width: none; border-radius: inherit; }
/* the bar lights up very softly where a piece lands (js: peak .18); its own box, fading inside it, so it never cuts off */
#contact .take { position: absolute; left: var(--tx, 30%); top: 50%; width: 300px; height: 180px; translate: -50% -50%; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, var(--b), transparent); }
#contact .s-bg, #contact .s-fast { position: absolute; inset: 0; }
#contact .s-bg { transition: opacity .6s ease; }
#contact.typing .s-bg { opacity: .28; }

#contact .cw { position: relative; width: 100%; }
/* the light comes from the bar, in the picked channel's colour: ONE wide, even wash centred under the whole bar (owner, Oct 26:
   local blobs read as odd patches, one below the bar and one left of the button). Pre-blurred gradient, crossfaded.
   farthest-side keeps the fade INSIDE the box: an ellipse wider than its box was cut off at the edges (Oct 26). */
#contact .glow { position: absolute; inset: -120px -220px -140px; pointer-events: none; animation: ft-drift 11s ease-in-out infinite alternate; }
#contact .glow i { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; }
#contact .glow i.on { opacity: 1; }
#contact .glow .g-call  { background: radial-gradient(farthest-side, rgba(100,43,225,.22), rgba(100,43,225,.10) 45%, rgba(100,43,225,.03) 75%, transparent); }
#contact .glow .g-email { background: radial-gradient(farthest-side, rgba(225,43,106,.20), rgba(225,43,106,.09) 45%, rgba(225,43,106,.03) 75%, transparent); }
#contact .glow .g-in    { background: radial-gradient(farthest-side, rgba(38,107,225,.22), rgba(38,107,225,.10) 45%, rgba(38,107,225,.03) 75%, transparent); }
@keyframes ft-drift { from { transform: translate3d(-14px, 4px, 0); } to { transform: translate3d(14px, -6px, 0); } }

/* the page's one backdrop-filter here: a Liquid-Glass-style bar. Specular rim = light (bright top-left, faint bottom-right), not a stroke */
#contact .cmp { position: relative; z-index: 1; padding: 8px; border-radius: 30px;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03) 55%, rgba(255,255,255,.045));   /* quieter white (owner, Oct 26: "the white glass effect is a bit weird") */
  -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 34px 60px -24px rgba(0,0,0,.75); }
#contact .cmp::before { content: ''; position: absolute; pointer-events: none; border-radius: inherit; }
#contact .cmp::before { inset: 0; padding: 1px; opacity: .7; transition: opacity .3s;
  background: linear-gradient(138deg, rgba(255,255,255,.38), rgba(255,255,255,.08) 26%, rgba(255,255,255,0) 48%, rgba(255,255,255,.03) 70%, rgba(255,255,255,.18));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
#contact .cmp:focus-within::before { opacity: 1; }
#contact .cmp:has(#ft-msg:focus-visible) { outline: 2px solid color-mix(in srgb, var(--b) 55%, transparent); outline-offset: 4px; }
#contact .field { position: relative; height: 56px; }
#contact .field input { width: 100%; height: 100%; padding: 0 16px; border: 0; outline: 0; background: none; color: #fff; font: 400 18px/1 'Surt', system-ui, sans-serif; caret-color: var(--b); }
#contact .ph { position: absolute; left: 16px; top: 50%; translate: 0 -50%; display: flex; font: 400 18px/1.3 'Surt', system-ui, sans-serif; color: rgba(255,255,255,.44); pointer-events: none; white-space: pre; transition: opacity .15s; }
#contact .field.has .ph { opacity: 0; }
#contact .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
/* channel picker: equal segments so the thumb only ever translates */
#contact .seg { position: relative; display: grid; grid-template-columns: repeat(3, 92px); padding: 4px; border-radius: 999px; background: rgba(0,0,0,.3);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.45), inset 0 -1px 0 rgba(255,255,255,.06); }
#contact .seg button { position: relative; z-index: 1; height: 40px; border: 0; border-radius: 999px; background: none; cursor: pointer; font: 500 14px/1 'Surt', system-ui, sans-serif; color: rgba(255,255,255,.5); transition: color .25s; }
#contact .seg button:hover { color: rgba(255,255,255,.8); }
#contact .seg button[aria-checked=true] { color: #fff; }
#contact .seg .th { position: absolute; left: 4px; top: 4px; width: 92px; height: 40px; border-radius: 999px; background: rgba(255,255,255,.13);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 2px 8px rgba(0,0,0,.25); transition: transform .5s cubic-bezier(.3,1.3,.5,1); }
/* send: the channel's brand gradient (crossfaded layers), icon pops, label rolls. Fixed width so nothing jumps */
#contact .go { position: relative; isolation: isolate; flex: none; width: var(--go-w, 200px); height: 48px; display: flex; align-items: center; gap: 0; padding: 0 16px 0 5px;
  border: 0; border-radius: 999px; cursor: pointer; color: #fff; font: 500 15px/1 'Surt Expanded', 'Surt', system-ui, sans-serif;
  /* lift (owner, Oct 26): a far, diffuse light ("imagine the light source was further away in y"): long, soft fall-off, low
     contrast, no hard contact edge. 5 layers, offsets doubling to y 24, blur ≈ 1.6 × y, alpha kept low; + a faint colour bloom */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.32), inset 0 -2px 8px rgba(255,255,255,.12),
    0 1.5px 3px rgba(0,0,0,.10), 0 3px 6px rgba(0,0,0,.11), 0 6px 11px rgba(0,0,0,.13), 0 12px 20px rgba(0,0,0,.15), 0 24px 38px rgba(0,0,0,.17),
    0 14px 30px -14px color-mix(in srgb, var(--a) 55%, transparent); transition: transform .3s cubic-bezier(.22,.8,.24,1), width .5s cubic-bezier(.3,1.25,.5,1); }
#contact .go:hover { transform: translateY(-1px); }
#contact .go:active { transform: scale(.98); }
#contact .go > i { position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0; transition: opacity .45s; }
#contact .go > i.on { opacity: 1; }
#contact .go .b-call  { background: linear-gradient(135deg, #9D7BF6 7%, #642BE1 93%); }   /* 45° diagonal, light top-left → deep bottom-right (owner, Oct 26: 168° read 'too candy'); light end −2 L, dark footer only */
#contact .go .b-email { background: linear-gradient(135deg, #F67B92 7%, #E12B6A 93%); }
#contact .go .b-in    { background: linear-gradient(135deg, #498FF7 7%, #266BE1 93%); }
#contact .ic { position: relative; flex: none; width: 38px; height: 38px; border-radius: 50%; background: color-mix(in srgb, var(--b) 80%, #fff); transition: background-color .45s;   /* SOLID fill in the channel's light tone: the translucent white let the button gradient show through (owner, Oct 26) */
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.3), 0 1px 2px rgba(10,8,30,.10),   /* a solid 1px stroke all round (owner, Oct 26), drawn inside so the 38px size holds */
              0 2px 4px rgba(10,8,30,.10), 0 4px 7px rgba(10,8,30,.11), 0 7px 12px rgba(10,8,30,.12); display: grid; place-items: center; }
#contact .ic > * { grid-area: 1 / 1; opacity: 0; transform: scale(.5) rotate(-14deg); transition: opacity .2s, transform .45s cubic-bezier(.3,1.5,.5,1); }
#contact .ic > .on { opacity: 1; transform: none; }
#contact .lbl { display: flex; min-width: 0; padding: 0 12px; overflow: hidden; white-space: pre; }   /* the old 12px gap as padding on BOTH sides: container → label 12, label → edge 12 + 16 = 28 (rule: optical-alignment §2) */   /* clips itself while the button's width animates */
#contact .lbl-twin { position: absolute; visibility: hidden; pointer-events: none; }   /* measures the final label (js fit) */
#contact .go:focus-visible, #contact .seg button:focus-visible { outline: 2px solid var(--b); outline-offset: 3px; }
#contact .note { height: 20px; margin: 14px 0 0 18px; display: flex; font: 400 14px/1.3 'Surt', system-ui, sans-serif; color: rgba(255,255,255,.62); white-space: pre; }
/* letter-shift reel (hero #hp-text): each glyph in a clipped cell; changed glyphs roll a step or two and flash the channel colour */
#contact .rc { display: inline-block; overflow: hidden; height: 1.3em; line-height: 1.3; vertical-align: bottom; }
#contact .rc > span { display: block; transition: transform .5s cubic-bezier(.36,1.28,.5,1), color .14s ease, filter .5s ease; }
#contact .rc b { display: block; height: 1.3em; font-weight: inherit; white-space: pre; text-align: center; }   /* the cell is locked to the target glyph while it rolls; wider glyphs clip evenly */
#contact .rc.f > span { color: var(--fl, #9cc0fb); filter: blur(2.5px); transition: transform .5s cubic-bezier(.36,1.28,.5,1), color .08s ease, filter .12s ease; }

#contact .legal { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 16px; width: min(1200px, 100% - 80px); margin: 0 auto; padding: 0 0 26px;
  font: 400 13px/1 'Surt', system-ui, sans-serif; color: rgba(255,255,255,.42); }
#contact .who { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.7); }
#contact .who img { width: 28px; height: 28px; border-radius: 50%; }
#contact.off *, #contact.off *::before, #contact.off *::after { animation-play-state: paused !important; }   /* offscreen or hidden tab */

@media (max-width: 760px) {
  #contact .ask { width: auto; margin: 0 20px; padding: 56px 0 48px; }   /* 20 = the page gutter every other section uses on phones */
  #contact .hl { justify-self: center; text-align: center; font-size: 44px; letter-spacing: -1.8px; }   /* phones: centred (owner, Oct 26) */
  #contact .dock { justify-self: stretch; width: 100%; align-self: end; margin: 0 0 40px; }
  #contact .legal { width: auto; margin: 0 20px; }
}
@media (max-width: 600px) {
  #contact .hl { font-size: 36px; letter-spacing: -1.4px; }
  #contact .row { flex-wrap: wrap; row-gap: 16px; }   /* more air between the channel picker and the button (was 10) */
  #contact .seg { width: 100%; grid-template-columns: repeat(3, 1fr); }
  #contact .seg .th { width: calc((100% - 8px) / 3); }
  #contact .go { margin-inline: auto; }   /* phones: the button hugs its label, centred under the centred heading (owner, Oct 26) */
  #contact .field input, #contact .ph { font-size: 16px; }
  #contact .note { margin-left: 8px; }
}