/* Pocetna stranica byselbir.com.
 *
 * Odvojena od stil.css NAMJERNO: stranica proizvoda stoji na off-white podlozi
 * (#F2F2EC) sa zrnom, a pocetna je po zahtjevu cisto bijela. Da dijele jedan
 * fajl, jedna od dvije bi svaki put gasila ono sto druga postavi.
 *
 * Mjere su iz .claude/skills/apple-design-web (izmjereno sa theoutline.design):
 * kartica 2px ivica, radijus 20px, slika 7.5rem, pokret 0.55s, bez
 * letter-spacinga na tekstu. Boje su nase.
 */

:root {
    --bijelo:  #FFFFFF;
    --kartica: #FAFAF8;
    --ivica:   #EDEDE7;
    --ink:     #1B1A17;
    --tiho:    #8A857C;
    --plava:   #B9D8ED;
    --roza:    #F6C8E7;
    --cigla:   #982B25;

    /* Visina kartice, na JEDNOM mjestu. Stoji i kao `min-height` kartice i kao
       `height` otvorenog `.izlaz` na uskom ekranu, a te dvije se MORAJU
       poklapati: ako se raziđu, otvorena kartica je odrezana ili viri. Do
       08.09. je isti broj bio prepisan na dva mjesta.

       Podignuta je sa 19 na 20rem, i to POPRAVLJA gresku koja je bila tu i
       prije kartice za donacije. Izmjereno 08.09. na 19rem: u REDU su kartice
       visoke 310 px, jer toliko trazi tekst Flick kartice, a u KOLONI na
       telefonu `.izlaz` dobija fiksnih 304 (= 19rem) pa je Flick kartica bila
       odrezana 6 px. Na 20rem se te dvije poklapaju: red je 320 jer `min-height`
       nadjacava sadrzaj od 310, a kolona je isto 320, i nista se ne rezi.

       Ako se tekst na karticama produzi, ovaj broj se mora ponovo izmjeriti:
       treba biti >= visini koju sadrzaj trazi u redu. */
    --visina-kartice: 20rem;

    /* SF Pro na Macu i iPhoneu, Segoe UI na Windowsu, Roboto na Androidu. SF Pro
       se NE smije ugraditi u stranicu, pa se uzima onaj koji je na masini. */
    --naslov: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
              "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    background: var(--bijelo);
    color: var(--ink);
    font: 400 17px/1.55 "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
}

.marka {
    position: absolute;
    top: 26px;
    left: 28px;
    font-family: "Archivo Black", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 19px;
    letter-spacing: -0.04em;
    color: var(--ink);
    text-decoration: none;
}

/* ---------- pozornica ---------- */

main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 96px 24px 48px;
}

/* Sirok padding NIJE ukras. Kartice su centrirane, pa kad se druga otvori
 * grupa naraste na obje strane: sve sto je bilo unutar zatvorenog okvira
 * ostaje unutar otvorenog. Bez toga se pokazivac nadje van .polica u trenutku
 * kad se grupa pomjeri, hover se prekine, kartica se zatvori, pa opet otvori.
 * To je treperenje koje se ne vidi u kodu nego samo rukom na misu. */
.polica {
    position: relative;   /* sidro za strelicu koja stoji lijevo od nje */
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 40px 64px;
}

/* ---------- strelica koja se iscrtava ---------- */

/* Stoji LIJEVO od cijele police (`right: 100%`), pa se pomjera zajedno sa njom
 * kad se kartica otvori. Da je zakacena za sredinu stranice, otvaranje bi je
 * preklopilo sa karticom. */
.uvodna {
    position: absolute;
    right: 100%;
    top: 50%;
    width: 250px;
    height: 200px;
    /* Negativna desna margina gura strelicu U padding police, koji je prazan,
       da vrh dodje blize kartici. Bez toga izmedju vrha i kartice ostane 100 px
       praznine, izmjereno na ekranu. */
    margin: -132px -58px 0 0;
    pointer-events: none;
}
.uvodna path {
    /* `pathLength="1"` u HTML-u znaci da je cijela kriva duga tacno 1, pa je
       `dasharray: 1` jedna crta duz cijele krive, a offset 1 je gura potpuno van
       vidljivog: kriva je nevidljiva. Do 0 se iscrtava. */
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: uvodna-crta 1.5s .35s cubic-bezier(.4, 0, .2, 1) forwards;
}
@keyframes uvodna-crta { to { stroke-dashoffset: 0; } }

/* Ispod 1100 px nema mjesta lijevo od kartice, pa strelice nema. Da ostane,
 * izlazila bi van ekrana ili preko kartice. */
@media (max-width: 1100px) { .uvodna { display: none; } }

/* Ko je iskljucio pokret u sistemu, dobija strelicu odmah nacrtanu. */
@media (prefers-reduced-motion: reduce) {
    .uvodna path { animation: none; stroke-dashoffset: 0; }
}

.kartica {
    flex: 0 0 auto;
    width: 15rem;
    background: var(--kartica);
    border: 2px solid var(--ivica);
    border-radius: 20px;
    padding: 20px;
    text-align: left;
    color: inherit;
    text-decoration: none;
    font: inherit;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* Obje kartice su iste visine i to je zadano brojem, ne sadrzajem. Da nije,
     * otvaranje druge kartice (u kojoj je duzi tekst) bi povuklo visinu reda i
     * cijela grupa bi poskocila uvis. */
    min-height: var(--visina-kartice);
    transition: border-color .3s, box-shadow .3s, transform .3s;
}
.kartica:hover { border-color: #E2E2DA; box-shadow: 0 2px 9px #0000000f; }
.kartica:focus-visible { outline: 2px solid var(--cigla); outline-offset: 3px; }

.crtez {
    height: 7.5rem;
    border-radius: 14px;
    /* SIVA, i to namjerno. Komad puzzle ima bijeli strok oko sebe; na bijeloj
     * podlozi taj strok postoji u fajlu i ne vidi se na ekranu. Sivo je i na
     * referenci koju je korisnik dao. */
    background: #F1F1F1;
    border: 1px solid var(--ivica);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.crtez img { width: 84%; height: auto; display: block; }

/* Komad je korisnikova slika, izvadjena iz njegovog snimka alatom
 * `tools/izrezi-puzzlu.js`. Nakrivljen je u samoj slici, pa se ovdje NE rotira:
 * rotacija bi mu pomjerila okvir i izbacila ga iz sredine.
 *
 * Slika je 288 px za prikaz na 96, dakle 3x, jer na Retini 96 px znaci 288
 * stvarnih. Okvir onoga sto je nacrtano u fajlu ide 5..282 po x i 4..283 po y,
 * sredina 143.5 u oba smjera, a to je tacno sredina slike od 288: zato je
 * dovoljno da je flex centrira i nista se ne dostampava. */
.crtez img.puzzla { width: 96px; height: 96px; }

/* Selektor je NAMJERNO `.crtez img.puzzla`, ne `.puzzla`. Iznad stoji
 * `.crtez img { width: 84% }`, a to je specificnije od cistog `.puzzla`, pa je
 * gasilo sirinu od 96 px bez ijedne greske u konzoli. Izmjereno na ekranu. */

.ime {
    /* SF Pro je Applov sistemski font i ne smije se ugraditi u stranicu, pa se
     * uzima ONAJ KOJI JE NA MASINI. Na Macu i iPhoneu to je SF Pro. Na Windowsu
     * i Androidu SF Pro ne postoji, pa pada na Segoe UI odnosno Roboto: slicna
     * je gradnja, ali NIJE isti font. To se ne moze zaobici bez licence. */
    font-family: var(--naslov);
    font-weight: 700;
    font-size: 1.0625rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
}
.ispod { font-size: .875rem; line-height: 1.4; color: var(--tiho); margin-top: -8px; }

/* Znak da se tu nesto otvara. Bez njega kartica izgleda kao natpis i posjetilac
 * nema razloga da predje misem preko nje. */
.strelica {
    display: inline-block;
    margin-left: 8px;
    color: var(--tiho);
    transition: transform .55s ease;
}
.polica.otvoren .strelica { transform: translateX(5px); }

/* Pastelno samo kao sitna oznaka, nikad kao podloga. */
.oznaka {
    align-self: flex-start;
    background: var(--plava);
    color: var(--ink);
    font-size: .75rem;
    border-radius: 50px;
    padding: 4px 10px;
}

/* ---------- kartica koja izlijece ---------- */

/* Vanjski okvir mijenja SIRINU (0 → 15rem) i time otkriva karticu, a sadrzaj
 * unutra je stalno pune sirine i klizi ulijevo-udesno. Zato izgleda kao da
 * kartica izlijece IZ prve, a ne kao da se razvlaci: nista se ne rasteze. */
.izlaz {
    flex: 0 0 auto;
    width: 0;
    overflow: hidden;
    transition: width .55s ease, margin-left .55s ease;
}
.izlaz > .kartica {
    width: 15rem;
    height: 100%;
    transform: translateX(-100%);
    opacity: 0;
    pointer-events: none;
    transition: transform .55s ease, opacity .4s ease,
                border-color .3s, box-shadow .3s;
}

/* Otvara SAMO klik, i to je jedno jedino stanje: klasa `otvoren`.
 *
 * Prelaz mišem je izbačen 01.09. na zahtjev. Ranije je otvarao i hover, i to je
 * nosilo dva buga koja se ne vide u kodu: na dodiru Chrome ostavi `:hover`
 * zakačen poslije dodira, pa je prst otvarao karticu a klik koji stiže odmah
 * poslije ju je zatvarao, dakle dodir nije radio ništa; a `.polica:hover .izlaz`
 * i `.polica.zatvoreno .izlaz` imaju ISTU specifičnost 0,3,0, pa je odlučivao
 * red u fajlu i zatvaranje je radilo ili ne zavisno od trenutka. Sa jednim
 * stanjem nema šta da se sudari. */
.polica.otvoren .izlaz { width: 15rem; margin-left: 20px; }

.polica.otvoren .izlaz > .kartica {
    transform: none;
    opacity: 1;
    pointer-events: auto;
}

/* ---------- podnozje ---------- */

footer {
    padding: 24px 28px 32px;
    text-align: center;
    font-size: .8125rem;
    color: var(--tiho);
}
footer a { color: var(--tiho); }
footer a:hover { color: var(--ink); }

/* ---------- uski ekran ---------- */

/* Ispod 939px se ne skupljaju u red nego stoje jedna pod drugom, a otvaranje
 * mijenja VISINU. Na telefonu hover ne postoji, pa sve ide na dodir.
 *
 * GRANICA JE 939, a bila je 767 dok su bile DVIJE kartice. Sa karticom za
 * donacije red trazi 3*240 + 20 + 20 + 2*64 = 888 px, pa je izmedju 768 i 888
 * otvaranje police izbacivalo tekst van ekrana. Izmjereno 08.09. Ako se doda
 * cetvrta kartica, ovaj broj se mora ponovo izracunati. */
@media (max-width: 939px) {
    .polica { flex-direction: column; align-items: center; padding: 24px 12px; }
    .izlaz { width: 15rem; height: 0; transition: height .55s ease, margin-top .55s ease; }
    .izlaz > .kartica { transform: translateY(-24px); }
    /* Na uskom ekranu se otvara VISINA, ne sirina. */
    .polica.otvoren .izlaz { width: 15rem; height: var(--visina-kartice); margin-left: 0; margin-top: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .izlaz, .izlaz > .kartica, .kartica { transition-duration: .01s; }
}


/* ---------- mreze u donjem lijevom cosku ----------
   Bile su gore desno i bile su premale (21 px): korisnik je 08.09. rekao da se
   ne vide. Sad su 28 px u donjem lijevom cosku.

   Ikonice su INLINE SVG, ne slike i ne ikonicni font: nema fajla koji moze ne
   stici, a boja ide iz `currentColor` pa se mijenja na jednom mjestu.

   BOJE NA PRELAZ MISEM SU IZMJERENE, ne izabrane po osjecaju. Brend roza
   (#F6C8E7) na bijeloj podlozi daje kontrast 1.47:1, dakle ikonica bi bila
   nevidljiva; WCAG 1.4.11 trazi najmanje 3.0:1 za grafiku. Zato su uzete
   potamnjene verzije: crvena 4.38:1, roza 4.22:1, a mirna siva 3.67:1. */
.mreze {
    position: fixed;
    left: 22px;
    bottom: 18px;
    display: flex;
    gap: 6px;
    z-index: 5;
}

.mreze a {
    display: flex;
    align-items: center;
    justify-content: center;
    /* 44 px je Applova najmanja mjera za prst; ikonica je 28 px, ostatak je
       prazan prostor oko nje, ne veca slika. */
    width: 44px;
    height: 44px;
    color: var(--tiho);
    border-radius: 14px;
    transition: color .2s, background .2s;
}
.mreze a:hover { background: #F4F4F1; }
.mreze a:focus-visible { outline: 2px solid var(--cigla); outline-offset: 2px; }

/* Svoja boja po mrezi, na prelaz misem. Selektor je preko `aria-label`, jer je
   to jedina oznaka koju ta veza ionako MORA nositi: dodatna klasa bi bila drugo
   mjesto koje se moze raziici sa prvim. */
.mreze a[aria-label="YouTube"]:hover   { color: #D14B41; }
.mreze a[aria-label="Instagram"]:hover { color: #C74F94; }

.mreze svg {
    width: 28px;
    height: 28px;
    display: block;
    fill: currentColor;
}

/* Na uskom ekranu tekst podnozja dodje do cosaka, pa fiksne ikonice padnu preko
   njega. Tu ulaze u tok, iznad podnozja i centrirane.

   GRANICA JE IZRACUNATA IZ MJERENJA, ne pogodjena. Tekst podnozja je sirok
   ~322 px i centriran, pa mu je lijeva ivica na `(sirina - 322) / 2`. Ikonice
   zavrsavaju na 116 px. Preklapanje pocinje kad je `(sirina - 322) / 2 < 116`,
   dakle **ispod 554 px**. Izmjereno na 580 px: tekst pocinje na 129, ikonice
   staju na 116, dakle 13 px zraka. 560 je iznad granice sa 6 px rezerve. */
@media (max-width: 560px) {
    .mreze {
        position: static;
        justify-content: center;
        gap: 8px;
        padding-top: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mreze a { transition: none; }
}

/* ---------- ulaz stranice ----------

   ZASTO NE `@view-transition`: probano i snimljeno 08.09. na pravom pregledniku
   (Arc), 120 kadrova u sekundi. Redoslijed je bio:

     stara stranica → 33 ms CISTO BIJELO → stara se VRATI → pa fade na novu

   Ta bijela praznina je predaja izmedju dva dokumenta u pregledniku i CSS-om se
   ne moze skloniti; a „stara se vrati" je bio nas prelaz koji pocinje tek
   POSLIJE nje. Skupa se to cita kao greska, ne kao pokret.

   ZATO OVAKO: nema prelaza izmedju dokumenata. Nova stranica se otkriva ispod
   BIJELE ZAVJESE koja se gasi. Praznina u predaji je takodjer bijela, pa izmedju
   nje i zavjese NEMA RUBA: oko vidi jedno neprekidno bijelo koje se rastvori u
   stranicu. Nema vracanja na staru stranicu, nema dupliranog sadrzaja.

   Zavjesa je `html::after`, ne `opacity` na `body`: prozirnost na `body` bi
   napravila novo uporiste za `position: fixed`, pa bi odbrojavanje i ikonice
   mreza za trajanje animacije skocili (na dugackoj stranici drasticno).

   Radi u SVAKOM pregledniku, i u Firefoxu. Nema sta da se ne podrzi.

   DVIJE POLOVINE: ovo je ULAZ (zavjesa se gasi). IZLAZ stare stranice
   pali zavjesu i radi ga `prelaz.js`, jer CSS ne moze uhvatiti trenutak
   prije navigacije. Bez te druge polovine je ulaz mekan a izlaz rez. */
@media (prefers-reduced-motion: no-preference) {
    html::after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 99999;
        background: #FFFFFF;
        pointer-events: none;
        animation: zavjesa-gasi 60ms cubic-bezier(.4, 0, .2, 1) both;
    }

    /* IZLAZ: klasu postavlja `prelaz.js` na klik, prije navigacije. Bez ovoga je
       ulaz mekan a izlaz rez, pa se stara stranica gubi u bijelo odjednom, i to
       je ono sto se vidi kao „blic".

       TRAJANJA (90 izlaz, 150 ulaz) su jedino mjesto gdje se mijenja brzina:
       `prelaz.js` CITA izlazno trajanje odavde, iz `getComputedStyle`, pa se ta
       dva broja ne mogu raziici. Bilo je 130 i 220 i korisnik je 09.09. rekao da
       je sporo. Ispod ~60ms se fade prestaje citati kao pokret i vraca se rez. */
    html.izlazi::after {
        animation: zavjesa-pali 60ms cubic-bezier(.4, 0, .2, 1) both;
    }
}

@keyframes zavjesa-gasi {
    from { opacity: 1; }
    to   { opacity: 0; }
}

@keyframes zavjesa-pali {
    from { opacity: 0; }
    to   { opacity: 1; }
}