/* Karnet: karnet.photos teaser. The full site is kept in site-full/. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;background:#0A0A0B;color:#F5F5F7;font-family:Inter,system-ui,sans-serif}
:focus-visible{outline:2px solid #FF6B5E;outline-offset:3px;border-radius:4px}
.teaser{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:22px;padding:48px 24px 24px}
.name{margin:0;font-family:'Inter Tight',Inter,sans-serif;font-weight:700;font-size:28px;letter-spacing:-0.01em}
h1{margin:0;font-family:'Inter Tight',Inter,sans-serif;font-weight:700;font-size:clamp(44px,7vw,88px);line-height:1;letter-spacing:-0.04em;max-width:960px}
.pill{margin-top:6px;font-size:13px;font-weight:500;background:#1C1C1E;border:1px solid #2C2C2E;padding:6px 12px;border-radius:999px}
.foot{width:100%;max-width:1200px;margin:0 auto;padding:24px 24px 40px;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:13px;color:#8E8E93}

/* The logo is still; a click plays the app's "spin and hop" once (SpinHop.swift, 1.6 s): an eased full turn about the centre
   (0-70 %), a hop of 12 % (70-80 %), a landing squashed about the base (80-90 %), a settle. Two elements, because the turn and the
   squash have different origins; every keyframe uses the same transform list so the browser interpolates each one. */
.logo{all:unset;cursor:pointer;display:inline-block;border-radius:50%;-webkit-tap-highlight-color:transparent}
.logo:focus-visible{outline:2px solid #FF6B5E;outline-offset:6px}
.hop{display:inline-block;transform-origin:50% 100%}
.hop svg{display:block;transform-origin:50% 50%}
@keyframes khop{
0%,70%{transform:translateY(0) scale(1,1);animation-timing-function:ease-out}
80%{transform:translateY(-12%) scale(1,1);animation-timing-function:ease-in}
90%{transform:translateY(0) scale(1.06,.94);animation-timing-function:ease-out}
100%{transform:translateY(0) scale(1,1)}}
@keyframes kspin{
0%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.45,0,.3,1)}
70%,100%{transform:rotate(360deg)}}
.logo.play .hop{animation:khop 1.6s 1}
.logo.play .hop svg{animation:kspin 1.6s 1}
@media (prefers-reduced-motion:reduce){.logo.play .hop{animation:none}.logo.play .hop svg{animation:kspin 1.6s 1 linear}}