/*
 * Základ webu Gosling Studios: design tokeny, reset, navigace, lišta průběhu
 * a sdílené prvky (čipy, tlačítka, hlavičky sekcí, odhalování prvků).
 * Vzhled vychází 1:1 z návrhu „Gosling Portfolio v4“ (Claude Design).
 */
:root {
    --bg: #0d0e0d;
    --surface: #151715;
    --surface-2: #181a18;
    --surface-deep: #121412;
    --text: #f1efe8;
    --accent: #b7c9a1;
    /* Průsvitné odstíny textové barvy — okraje a tlumený text */
    --ink-06: rgba(241, 239, 232, .06);
    --ink-10: rgba(241, 239, 232, .1);
    --ink-12: rgba(241, 239, 232, .12);
    --ink-14: rgba(241, 239, 232, .14);
    --ink-18: rgba(241, 239, 232, .18);
    --ink-40: rgba(241, 239, 232, .4);
    --ink-45: rgba(241, 239, 232, .45);
    --ink-50: rgba(241, 239, 232, .5);
    --ink-55: rgba(241, 239, 232, .55);
    --ink-60: rgba(241, 239, 232, .6);
    --ink-75: rgba(241, 239, 232, .75);
    --ink-78: rgba(241, 239, 232, .78);
    --ink-85: rgba(241, 239, 232, .85);
    --radius-xl: 28px;
    --radius-lg: 24px;
    --radius-md: 14px;
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-soft: cubic-bezier(.23, 1, .32, 1);
    --ease-pill: cubic-bezier(.22, 1, .36, 1);
    --font: 'Geist', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif;
}

/* Pulzující tečka u aktuální položky časové osy; marquee dlouhých názvů projektů */
@keyframes gs-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.6); opacity: .45; }
}
@keyframes gs-marquee {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-50%, 0, 0); }
}

/* ---------- Reset ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
a { color: var(--text); text-decoration: none; }
a:hover { color: var(--accent); }
::selection { background: var(--accent); color: var(--bg); }
input, textarea, button { font-family: inherit; }
input::placeholder, textarea::placeholder { color: rgba(241, 239, 232, .35); }
img { max-width: 100%; }
[hidden] { display: none !important; }

/* Obal stránky drží boční odsazení 20 px, obsah je vystředěný na 1400 px */
.site { position: relative; min-height: 100vh; padding: 0 20px 20px; }
.page { max-width: 1400px; margin: 0 auto; }

/* ---------- Lišta průběhu scrollu ---------- */
.progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: var(--accent); z-index: 90; }

/* ---------- Navigace ---------- */
.nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 70;
    padding: 18px 20px;
    background: linear-gradient(180deg, rgba(13, 14, 13, .85) 0%, rgba(13, 14, 13, 0) 100%);
    pointer-events: none; /* přechod nesmí blokovat klikání do hero, klikací je jen vnitřek */
}
.nav__inner {
    max-width: 1400px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    pointer-events: auto;
}
.nav__logo { font-size: 15px; font-weight: 500; letter-spacing: -.01em; }
.nav__center { position: relative; display: flex; gap: 4px; font-size: 14px; isolation: isolate; }
/* Pilulka pod odkazem — pozici a šířku nastavuje JS podle odkazu pod kurzorem */
.nav__pill {
    position: absolute; top: 0; bottom: 0; left: 0; z-index: 0;
    width: 0; opacity: 0;
    transform: translateX(0) scaleX(.6); transform-origin: left center;
    border-radius: 999px;
    background: var(--ink-10);
    border: 1px solid rgba(183, 201, 161, .35);
    box-shadow: 0 0 0 1px rgba(13, 14, 13, .2), 0 8px 24px -10px rgba(183, 201, 161, .5);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    transition: transform .45s var(--ease-pill), width .45s var(--ease-pill), opacity .3s ease;
    pointer-events: none;
}
.nav__link { position: relative; z-index: 1; padding: 8px 14px; border-radius: 999px; color: var(--ink-75); transition: color .3s; }
.nav__link:hover { color: var(--text); }
.nav__right { display: flex; align-items: center; gap: 8px; }
.lang { display: flex; background: var(--ink-06); border-radius: 999px; padding: 3px; font-size: 12px; letter-spacing: .04em; }
.lang__btn { border: 0; cursor: pointer; padding: 7px 12px; border-radius: 999px; background: transparent; color: var(--ink-60); transition: background .25s, color .25s; }
.lang__btn[aria-pressed="true"] { background: var(--text); color: var(--bg); }

/* ---------- Tlačítka a čipy ---------- */
.btn-solid { background: var(--text); color: var(--bg); padding: 11px 18px; border-radius: 999px; font-size: 14px; font-weight: 500; transition: transform .15s, background .2s; }
.btn-solid:hover { background: var(--accent); color: var(--bg); transform: scale(.97); }
.btn-outline {
    align-self: flex-start; display: inline-flex; align-items: center; gap: 12px;
    font-size: 15px; font-weight: 500; padding: 14px 22px; border-radius: 999px;
    border: 1px solid var(--ink-18);
    transition: border-color .3s, background .3s, color .3s;
}
.btn-outline:hover { border-color: var(--accent); background: var(--accent); color: var(--bg); }
.chip { padding: 8px 12px; border-radius: 999px; border: 1px solid var(--ink-14); font-size: 12px; }
.eyebrow { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-50); }

/* ---------- Sekce ---------- */
.section { padding: 160px 0 0; }
.section__head {
    display: flex; justify-content: space-between; align-items: center; gap: 24px;
    margin: 0 8px 56px; padding-top: 22px; border-top: 1px solid var(--ink-12);
    font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-50);
}
.section__head span:last-child { font-variant-numeric: tabular-nums; }

/* Obrázek přesahující kartu o 8 % nahoře i dole dává prostor parallaxu; stín přes celou kartu */
.media { position: absolute; inset: -8% 0; will-change: transform; }
.media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shade { position: absolute; inset: 0; pointer-events: none; }

/* ---------- Screenshoty v zařízeních (karty projektů, detail) ---------- */
/* Screenshot nikdy není pozadím karty: leží v okně prohlížeče a v telefonu na tmavém
   povrchu se září v barvě daného projektu (--glow = RGB trojice z dat projektu). */
.shot {
    --glow: 183 201 161;
    position: absolute; inset: 0; overflow: hidden; perspective: 2000px;
    background:
        radial-gradient(70% 70% at 72% 18%, rgb(var(--glow) / .32) 0%, rgb(var(--glow) / 0) 62%),
        radial-gradient(55% 45% at 12% 95%, rgb(var(--glow) / .14) 0%, rgb(var(--glow) / 0) 60%),
        #121412;
}
/* Okno prohlížeče: mírná 3D perspektiva, po najetí na kartu se narovná a nadzvedne */
.shot__browser {
    --bar-h: 32px; /* výška lišty prohlížeče; obrázek začíná pod ní */
    position: absolute; left: 6%; top: 10%; width: 64%; aspect-ratio: 16 / 10.6;
    border-radius: 14px; overflow: hidden; background: #1b1d1b;
    border: 1px solid rgba(241, 239, 232, .14);
    box-shadow: 0 50px 100px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(0, 0, 0, .35);
    transform: rotateY(-9deg) rotateX(4deg); transform-origin: 60% 50%;
    transition: transform 1.2s var(--ease-out);
}
.shot__bar { position: absolute; top: 0; left: 0; right: 0; height: var(--bar-h); display: flex; align-items: center; gap: 6px; padding: 0 12px; background: rgba(241, 239, 232, .04); border-bottom: 1px solid rgba(241, 239, 232, .08); }
.shot__bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-18); flex: none; }
.shot__url { margin-left: 10px; height: 18px; padding: 0 12px; max-width: 50%; border-radius: 999px; background: rgba(241, 239, 232, .06); font-size: 10px; letter-spacing: .02em; color: var(--ink-45); display: inline-flex; align-items: center; white-space: nowrap; overflow: hidden; }
/* Obrázek vyplní okno pod lištou; ořez zdola (object-position: top) ukáže hlavičku webu */
.shot__browser img { position: absolute; left: 0; right: 0; top: var(--bar-h); bottom: 0; width: 100%; height: auto; object-fit: cover; object-position: top; display: block; }
/* Telefon: výška přesahuje kartu, šířku určí poměr stran displeje */
.shot__phone {
    position: absolute; right: 7%; top: 26%; height: 94%; aspect-ratio: 390 / 844;
    border-radius: 34px; border: 5px solid #1e211e; background: #000; overflow: hidden;
    box-shadow: 0 40px 80px -24px rgba(0, 0, 0, .95), inset 0 0 0 1px rgba(241, 239, 232, .06);
    transition: transform 1.2s var(--ease-out);
}
.shot__phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
/* Aplikace: tři telefony ve vějíři, prostřední vpředu; --fan-x posouvá střed vějíře (široká karta ho dává doprava) */
.shot--app { --fan-x: 50%; }
.shot--app .shot__phone { top: 24%; height: 98%; opacity: .85; }
.shot--app .shot__phone--l { left: calc(var(--fan-x) - 32%); right: auto; transform: rotate(-8deg); transform-origin: bottom center; }
.shot--app .shot__phone--r { left: calc(var(--fan-x) + 14%); right: auto; transform: rotate(8deg); transform-origin: bottom center; }
.shot--app .shot__phone--c { left: var(--fan-x); right: auto; top: 10%; height: 114%; opacity: 1; z-index: 2; transform: translateX(-50%); }
/* Galerie v detailu: rovný prohlížeč, samotný telefon, dvojice telefonů */
.shot--browser .shot__browser { left: 8%; width: 84%; top: 8%; transform: none; }
.shot--phone .shot__phone { left: 50%; right: auto; top: 8%; height: 112%; transform: translateX(-50%); }
.shot--duo .shot__phone { top: 12%; height: 108%; }
.shot--duo .shot__phone--l { left: 12%; right: auto; transform: rotate(-4deg); transform-origin: bottom center; }
.shot--duo .shot__phone--r { right: 12%; top: 20%; transform: rotate(4deg); transform-origin: bottom center; }
/* Web bez telefonu (projekt nemá mobile): prohlížeč stojí sám, větší a blíž středu karty */
.shot--solo .shot__browser { left: 11%; width: 78%; top: 15%; transform-origin: 50% 50%; }
/* Portrétní galerie u webu bez telefonu: prohlížeč širší než box ukáže výřez stránky zblízka */
.shot--zoom .shot__browser { left: 8%; width: 150%; top: 8%; transform: none; }
/* Návrh (projekt bez kódu): artboardy jako v designovém nástroji — rámeček bez lišty, název obrazovky nad ním */
.shot__board { position: absolute; transform: rotateY(-9deg) rotateX(4deg); transform-origin: 60% 50%; transition: transform 1.2s var(--ease-out), opacity 1.2s var(--ease-out); }
.shot__label { position: absolute; left: 1px; bottom: 100%; margin-bottom: 8px; display: inline-flex; align-items: center; gap: 6px; font-size: 10px; letter-spacing: .04em; color: var(--ink-55); white-space: nowrap; }
.shot__label::before { content: ''; width: 7px; height: 7px; border: 1px solid currentColor; border-radius: 2px; flex: none; }
.shot__screen {
    position: relative; aspect-ratio: 16 / 10.3; border-radius: 10px; overflow: hidden; background: #1b1d1b;
    border: 1px solid rgba(241, 239, 232, .14);
    box-shadow: 0 50px 100px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(0, 0, 0, .35);
}
.shot__screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
/* Přední artboard vpravo, zadní ztlumený vlevo za ním — obě desky ve stejné perspektivě jako prohlížeč */
.shot--design .shot__board--front { left: 42%; top: 15%; width: 54%; z-index: 2; }
.shot--design .shot__board--back { left: 9%; top: 27%; width: 44%; opacity: .72; }
/* Galerie v detailu: rovný artboard v boxu 16:10 a celá dlouhá stránka v portrétním boxu */
.shot--board .shot__board { left: 8%; width: 84%; top: 12%; transform: none; }
.shot--tall .shot__board { left: 10%; width: 80%; top: 9%; transform: none; }
.shot--tall .shot__screen { aspect-ratio: auto; }
.shot--tall .shot__screen img { position: static; height: auto; }

/* ---------- Skeleton loading ---------- */
/* Prvek s data-skeleton (musí být pozicovaný — .media, .studio__media, box galerie detailu) drží přes
   obsah plochu v barvě povrchu s probíhajícím leskem, dokud js/skeleton.js nenačte obrázky uvnitř
   a nepřidá is-loaded. Texty nad obrázkem (název, štítek) leží mimo tento prvek, takže jsou čitelné hned. */
@keyframes gs-shimmer {
    from { transform: translateX(-100%); }
    to { transform: translateX(100%); }
}
[data-skeleton], .skel-card { overflow: hidden; }
[data-skeleton]::after, .skel-card::after {
    content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
    background: var(--surface-2);
    transition: opacity .7s var(--ease-soft);
}
[data-skeleton]::before, .skel-card::before {
    content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none;
    background: linear-gradient(100deg, transparent 25%, rgba(241, 239, 232, .05) 50%, transparent 75%);
    animation: gs-shimmer 1.8s ease-in-out infinite;
    transition: opacity .7s var(--ease-soft);
}
[data-skeleton].is-loaded::before, [data-skeleton].is-loaded::after { opacity: 0; animation: none; }
/* Kostra karty projektu (index.html) — zmizí, jakmile JS vykreslí skutečné karty; bez JS se neukáže vůbec */
.skel-card { position: relative; border-radius: var(--radius-xl); background: var(--surface); aspect-ratio: 4 / 3; }
.skel-card--wide { grid-column: 1 / span 2; aspect-ratio: 21 / 9; }
.skel-card__bar { position: absolute; left: 22px; bottom: 26px; z-index: 5; width: 42%; height: 14%; border-radius: 12px; background: var(--ink-06); }
html.no-js [data-skeleton]::before, html.no-js [data-skeleton]::after, html.no-js .skel-card { display: none; }

/* ---------- Odhalování prvků při scrollu ---------- */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease-soft), transform .9s var(--ease-soft); }
[data-reveal].is-revealed { opacity: 1; transform: translateY(0); }
html.no-js [data-reveal] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    [data-reveal] { opacity: 1; transform: none; transition: none; }
    .nav__pill { transition: none; }
    [data-skeleton]::before, .skel-card::before { animation: none; }
}