/* Contact: the SPORTLAZ business card from the brandbook (approved 2026-10-13, variant A) as a live card.
   85 × 55 mm proportions; back side (name, contacts, url, wordmark, logo-gradient strip) shows first; click, tap or Enter turns it over
   to the front (lockup and services line). It leans toward the pointer with a soft sheen. Fonts: Geologica (name) + Montserrat. */
.bc-stage{--rx:0deg;--ry:0deg;margin-top:clamp(26px,4.4vh,44px);perspective:1400px;width:min(100%,540px)}
.bc{position:relative;width:100%;aspect-ratio:85/55;transform-style:preserve-3d;cursor:pointer;outline:none;
  transform:rotateX(var(--rx)) rotateY(calc(var(--ry) + var(--turn,0deg)));transition:transform .9s cubic-bezier(.22,.8,.24,1)}
.bc.turned{--turn:180deg}
.bc-face{position:absolute;inset:0;border-radius:clamp(12px,1.4vw,18px);overflow:hidden;background:#030305;-webkit-backface-visibility:hidden;backface-visibility:hidden;
  box-shadow:0 50px 90px -30px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.08),0 0 80px -20px rgba(226,50,62,.35);container-type:inline-size}
.bc-front{transform:rotateY(180deg)}
.bc:focus-visible .bc-face{box-shadow:0 0 0 2px #F2545B,0 50px 90px -30px rgba(0,0,0,.9)}

/* back: sizes follow the printed card (design px / 850 × card width) */
.bc-name{position:absolute;left:8.47cqw;top:9.6cqw;font:700 7.7cqw/1 Geologica,Inter,sans-serif;letter-spacing:-.02em;
  background:linear-gradient(100deg,#B01B2C,#D6303A 38%,#F2545B 66%,#A3152A);-webkit-background-clip:text;background-clip:text;color:transparent}
.bc-role{position:absolute;left:8.47cqw;top:18.2cqw;font:600 2.2cqw/1 Montserrat,Inter,sans-serif;letter-spacing:.32em;text-transform:uppercase;color:#A3A9B4}
.bc-rows{position:absolute;left:8.47cqw;top:29.4cqw;list-style:none;margin:0;padding:0;display:grid;gap:2.2cqw}
.bc-rows li{display:flex;align-items:center;gap:2.6cqw;font:400 3.3cqw/1 Montserrat,Inter,sans-serif}
.bc-rows svg{width:3.1cqw;height:3.1cqw;fill:none;stroke:#A3A9B4;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.bc-rows a{color:#fff;text-decoration:none;transition:color .3s}
.bc-rows a:hover{color:#F2545B}
.bc-url{position:absolute;left:8.47cqw;top:52.6cqw;font:400 3.3cqw/1 Montserrat,Inter,sans-serif}
.bc-logo{position:absolute;right:11.6cqw;top:51.6cqw;width:26cqw}
.bc-strip{position:absolute;left:0;right:0;bottom:0;height:5.6cqw;background:linear-gradient(90deg,#9a2a33,#bd3b44 30%,#cf5c5e 62%,#b8474c 80%,#7e2530)}

/* front: centred lockup and the services line */
.bc-lock{position:absolute;left:50%;top:41%;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:2.6cqw;width:60cqw}
.bc-lock img{width:100%}
.bc-lock span{width:100%;display:flex;justify-content:space-between;font:600 1.95cqw/1 Montserrat,Inter,sans-serif;letter-spacing:.62em;text-transform:uppercase;color:#A3A9B4;white-space:nowrap}
.bc-svc{position:absolute;left:0;right:0;top:82%;display:flex;justify-content:center;align-items:center;gap:2.6cqw;font:500 2.4cqw/1 Montserrat,Inter,sans-serif;color:#A3A9B4;white-space:nowrap}
.bc-svc i{width:.7cqw;height:.7cqw;border-radius:50%;background:#E0323E}

/* sheen that follows the pointer */
.bc-sheen{position:absolute;inset:-40%;pointer-events:none;mix-blend-mode:screen;opacity:.7;
  background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.1) 48%,rgba(242,84,91,.12) 52%,transparent 58%);transform:translateX(var(--sx,-25%));transition:transform .5s ease-out}

.bc-flip{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:8px;margin-top:16px;font:600 12px/1 Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#A3A9B4;transition:color .3s}
.bc-flip:hover,.bc-flip:focus-visible{color:#fff}
.bc-flip span{font-size:15px;color:#F2545B}
@media (prefers-reduced-motion:reduce){.bc,.bc-sheen{transition:none}}

/* v2: sizes in px from the card's width (--u = 1% of it, set by JS) so every browser lays the card out the same way;
   the descriptor is spread letter by letter under the wordmark, exactly like the print; a gentler lean so the text never looks skewed */
.bc-face{container-type:normal}
.bc-name{left:calc(var(--u) * 8.47);top:calc(var(--u) * 9.6);font-size:calc(var(--u) * 7.7)}
.bc-role{left:calc(var(--u) * 8.47);top:calc(var(--u) * 18.2);font-size:calc(var(--u) * 2.2)}
.bc-rows{left:calc(var(--u) * 8.47);top:calc(var(--u) * 29.4);gap:calc(var(--u) * 2.2)}
.bc-rows li{gap:calc(var(--u) * 2.6);font-size:calc(var(--u) * 3.3)}
.bc-rows svg{width:calc(var(--u) * 3.1);height:calc(var(--u) * 3.1)}
.bc-url{left:calc(var(--u) * 8.47);top:calc(var(--u) * 52.6);font-size:calc(var(--u) * 3.3)}
.bc-logo{right:calc(var(--u) * 11.6);top:calc(var(--u) * 51.6);width:calc(var(--u) * 26)}
.bc-strip{height:calc(var(--u) * 5.6)}
.bc-lock{left:20%;right:20%;width:auto;top:38.5%;transform:translateY(-50%);gap:calc(var(--u) * 2.4)}
.bc-lock span{display:flex;justify-content:space-between;width:100%;letter-spacing:0;font-size:calc(var(--u) * 1.95)}
.bc-lock span b{font-weight:600}
.bc-lock span .sp{width:calc(var(--u) * 1.2)}
.bc-svc{gap:calc(var(--u) * 2.6);font-size:calc(var(--u) * 2.4)}
.bc-svc i{width:calc(var(--u) * .7);height:calc(var(--u) * .7)}

/* social links under the card */
.bc-soc{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:18px}
.bc-soc a{display:inline-flex;align-items:center;gap:9px;padding:10px 16px;border-radius:999px;font:600 13px/1 Inter,sans-serif;color:#fff;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),inset 0 1px 0 rgba(255,255,255,.18);transition:box-shadow .3s,color .3s}
.bc-soc a:hover{box-shadow:inset 0 0 0 1px rgba(242,84,91,.8),0 0 24px rgba(226,50,62,.35)}
.bc-soc svg{width:16px;height:16px}
.bc-soc .bc-flip{margin:0 0 0 auto}

/* v3: Telegram, Instagram and LinkedIn as small icon links in the back's top-right corner, in the card's grey, white on hover */
.bc-back .bc-soc{position:absolute;right:calc(var(--u) * 8.47);top:calc(var(--u) * 9.6);display:flex;gap:calc(var(--u) * 2.4);margin:0}
.bc-back .bc-soc a{all:unset;cursor:pointer;display:grid;place-items:center;width:calc(var(--u) * 6.4);height:calc(var(--u) * 6.4);border-radius:50%;color:#A3A9B4;
  box-shadow:inset 0 0 0 1px rgba(163,169,180,.45);transition:color .3s,box-shadow .3s}
.bc-back .bc-soc a:hover,.bc-back .bc-soc a:focus-visible{color:#fff;box-shadow:inset 0 0 0 1px #F2545B,0 0 calc(var(--u) * 3) rgba(226,50,62,.5)}
.bc-back .bc-soc svg{width:calc(var(--u) * 3);height:calc(var(--u) * 3)}
.bc-flip{margin-top:16px}

/* v4: every position taken from the print file (build_card.py, card = 850 × 550 design px; 1u = 8.5 design px).
   Front: the brandbook lockup (wordmark + descriptor) dead centre, services line centred 88% down. */
.bc-lock2{position:absolute;left:50%;top:50%;width:calc(var(--u) * 65.9);transform:translate(-50%,-50%)}
.bc-svc{top:auto;bottom:calc(100% - var(--u) * 58.6);transform:translateY(50%);gap:calc(var(--u) * 1.65);font-size:calc(var(--u) * 2.24)}
.bc-svc i{width:calc(var(--u) * .5);height:calc(var(--u) * .5)}
/* back */
.bc-name{left:calc(var(--u) * 8.47);top:calc(var(--u) * 7.1);font-size:calc(var(--u) * 5.88);letter-spacing:-.02em}
.bc-role{left:calc(var(--u) * 8.47);top:calc(var(--u) * 15.2);font-size:calc(var(--u) * 2.35);letter-spacing:.2em}
.bc-rows{left:calc(var(--u) * 8.47);top:calc(var(--u) * 27.7);gap:calc(var(--u) * 2)}
.bc-rows li{gap:calc(var(--u) * 1.9);font-size:calc(var(--u) * 2.82);height:calc(var(--u) * 3.08)}
.bc-rows svg{width:calc(var(--u) * 3.06);height:calc(var(--u) * 3.06)}
.bc-url{left:calc(var(--u) * 8.47);top:calc(var(--u) * 52.4);font-size:calc(var(--u) * 2.82)}
.bc-logo{left:calc(var(--u) * 64.47);right:auto;top:calc(var(--u) * 51.2);width:calc(var(--u) * 27.06)}
.bc-strip{height:calc(var(--u) * 1.88)}
.bc-back .bc-soc{top:calc(var(--u) * 7.6)}
/* v5: closer to a real card on screen: a little smaller, print-like corner radius (3 mm on 85 mm) */
.bc-stage{width:min(100%,480px)}
.bc-face{border-radius:calc(var(--u) * 3.6)}
/* v6: a slightly lower card (height = 57% of width); vertical positions from the print file are scaled by --k */
.bc-name{top:calc(var(--u) * 7.1 * var(--k,1))}
.bc-role{top:calc(var(--u) * 15.2 * var(--k,1))}
.bc-rows{top:calc(var(--u) * 27.7 * var(--k,1));gap:calc(var(--u) * 2 * var(--k,1))}
.bc-url{top:calc(var(--u) * 52.4 * var(--k,1))}
.bc-logo{top:calc(var(--u) * 51.2 * var(--k,1))}
.bc-back .bc-soc{top:calc(var(--u) * 7.6 * var(--k,1))}
.bc-svc{bottom:auto;top:88.4%;transform:translateY(-50%)}
/* v7: never rely on backface-visibility alone (Safari, and the page-load transition snapshot, can show the hidden side mirrored).
   The side facing away is truly hidden; the swap happens halfway through the turn, when the card is edge-on. */
.bc-back,.bc-front{-webkit-transform-style:flat;transform-style:flat}
.bc-back{transform:rotateY(0deg) translateZ(1px);visibility:visible;transition:visibility 0s linear .45s}
.bc-front{transform:rotateY(180deg) translateZ(1px);visibility:hidden;transition:visibility 0s linear .45s}
.bc.turned .bc-back{visibility:hidden}
.bc.turned .bc-front{visibility:visible}
@media (prefers-reduced-motion:reduce){.bc-back,.bc-front{transition:none}}
/* v8: the turn uses a symmetric ease, so the card is edge-on exactly halfway (0.45 s) — the moment the sides swap.
   (With the old ease-out the card passed edge-on after ~0.1 s and showed nothing until the swap.) */
.bc{transition:transform .9s cubic-bezier(.45,.05,.55,.95)}

/* Send message: on hover the button lifts a little and glows, a light sweeps across it and the arrow runs ahead; it presses in on click */
.send{position:relative;overflow:hidden;isolation:isolate;transition:transform .4s cubic-bezier(.22,.8,.24,1),box-shadow .4s ease}
.send::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;transform:translateX(-120%);
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%)}
.send .ar{display:inline-block;font-style:normal;transition:transform .4s cubic-bezier(.22,.8,.24,1)}
.send:hover,.send:focus-visible{transform:translateY(-2px);box-shadow:0 12px 30px -8px rgba(226,50,62,.7),0 0 0 1px rgba(255,255,255,.18) inset}
.send:hover::after,.send:focus-visible::after{transform:translateX(120%);transition:transform .8s ease}
.send:hover .ar,.send:focus-visible .ar{transform:translateX(5px)}
.send:active{transform:translateY(0) scale(.98);transition-duration:.1s}
@media (prefers-reduced-motion:reduce){.send,.send .ar,.send::after{transition:none}}

/* v9 fixes:
   1. Safari does not clip to rounded corners inside a 3D-turned element, so square corners of the sheen and strip showed behind the card.
      Each side is now clipped with clip-path (always honoured); the card's shadow moves to the card itself so the clip does not cut it off.
   2. The Send button's effect stays inside the button: no glow around it, the button itself brightens instead. */
.bc-face{-webkit-clip-path:inset(0 round calc(var(--u) * 3.6));clip-path:inset(0 round calc(var(--u) * 3.6));box-shadow:none}
.bc{border-radius:calc(var(--u) * 3.6);box-shadow:0 50px 90px -30px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.08),0 0 80px -20px rgba(226,50,62,.35)}
.bc:focus-visible{box-shadow:0 0 0 2px #F2545B,0 50px 90px -30px rgba(0,0,0,.9)}
.send:hover,.send:focus-visible{box-shadow:none;filter:brightness(1.12)}
.send{transition:transform .4s cubic-bezier(.22,.8,.24,1),filter .4s ease}
/* the page's own .send rule (all:unset) loads after this file and wiped position/overflow, so the sweep ran outside the button;
   scoped to the form so these win */
#brief .send{position:relative;overflow:hidden;isolation:isolate;-webkit-mask-image:-webkit-radial-gradient(white,black)}
/* no lift: the button stays in place on hover; only the sweep, the brightness and the arrow move */
#brief .send:hover,#brief .send:focus-visible{transform:none}
#brief .send:active{transform:scale(.98)}