/* ============================================================
   aisea — «Bonito» (07-10-2026): repàs de detalls per sobre de style.css.
   NO canvia la distribució: ni mides, ni marges, ni llocs. Només colors, ombres,
   transicions i petits efectes. Per treure-ho tot: esborrar el <link> a bonito.css
   de les 10 pàgines (o deixar aquest fitxer buit).
   ============================================================ */

:root {
    --grad-cool: linear-gradient(135deg, #120a8f 0%, #6a5cff 55%, #b06cff 100%);
    --grad-warm: linear-gradient(135deg, #ff7a45 0%, #e5484d 100%);
    --grad-line: linear-gradient(90deg, #120a8f, #6a5cff 30%, #b06cff 55%, #ff7a45 80%, #e5484d);
    --lilac: #6a5cff;
    --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Lletra ---------- */
body { text-rendering: optimizeLegibility; font-kerning: normal; }
p, figcaption, .work-meta { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; }
::selection { background: rgba(106, 92, 255, 0.22); color: inherit; }

/* ---------- Barra de dalt: línia de degradat en lloc de la gris ---------- */
/* 08-10-2026: menú i línia en gris (fosc → clar) en lloc de blau-lila */
header { border-bottom-color: transparent; box-shadow: 0 6px 24px -18px rgba(20, 19, 26, 0.3); }
header::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, #c9c9cd, #3a3a3e);
    opacity: 0.8;
    pointer-events: none;
}
.brand-logo { transition: transform .5s var(--ease), opacity .3s; }
.brand:hover .brand-logo { transform: rotate(-2deg) scale(1.03); }

nav.menu a { transition: color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease); }
nav.menu a:not(.on):hover { background: rgba(58, 58, 62, 0.08); color: var(--ink); }
nav.menu a.on {
    background: linear-gradient(135deg, #2e2e32 0%, #66666b 100%);
    box-shadow: 0 6px 18px -8px rgba(20, 19, 26, 0.45);
}

/* ---------- Fotos ---------- */
.canvas img, .tile .shot {
    box-shadow: 0 1px 2px rgba(20, 19, 26, 0.05), 0 18px 40px -22px rgba(20, 19, 26, 0.35);
    transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}
body:not(.ed-on) .canvas:hover img {
    transform: translateY(-4px);
    box-shadow: 0 2px 4px rgba(20, 19, 26, 0.05), 0 28px 50px -24px rgba(18, 10, 143, 0.4);
}
.tile:hover .shot { box-shadow: 0 2px 4px rgba(20, 19, 26, 0.05), 0 26px 46px -24px rgba(18, 10, 143, 0.4); }
.tile h4 { transition: color .3s; }
.tile:hover h4 { color: var(--accent); }
.work-meta { transition: color .3s; }

/* Línies separadores: s'esvaeixen als extrems */
.work { border-image: linear-gradient(90deg, transparent, var(--line) 12%, var(--line) 88%, transparent) 1; }

/* Etiqueta «disponible» */
.state.free { background: rgba(106, 92, 255, 0.06); }

/* ---------- Botons ---------- */
.btn { transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease); }
.btn:hover, .btn.solid {
    background: var(--grad-cool);
    border-color: transparent;
    color: #fff;
}
.btn:hover { box-shadow: 0 10px 24px -12px rgba(18, 10, 143, 0.6); transform: translateY(-1px); }
.btn.solid:hover { background: var(--grad-warm); box-shadow: 0 10px 24px -12px rgba(229, 72, 77, 0.6); }
.btn:active { transform: translateY(0); }
/* 08-10-2026: «Send message» de Contact amb el mateix gris del menú */
.contact-form .btn.solid { background: linear-gradient(135deg, #2e2e32 0%, #66666b 100%); }
.contact-form .btn.solid:hover {
    background: linear-gradient(135deg, #1f1f22 0%, #4e4e53 100%);
    box-shadow: 0 10px 24px -12px rgba(20, 19, 26, 0.55);
}

/* ---------- Formularis ---------- */
.field input, .field textarea, .field select { transition: border-color .3s, box-shadow .3s; }
.field input:focus, .field textarea:focus, .field select:focus {
    border-color: var(--lilac);
    box-shadow: 0 0 0 4px rgba(106, 92, 255, 0.12);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); opacity: 0.8; }
.form-msg.ok { background: var(--grad-cool); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Contacte ---------- */
.contact-title, .dispatch h3 {
    background: linear-gradient(120deg, #14131a 0%, #120a8f 70%, #6a5cff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
/* 08-10-2026: en passar el ratolí, el text es torna un degradat taronja → negre (el color s'esvaeix i deixa veure
   el degradat que hi ha a sota) i la ratlla de sota creix amb el mateix degradat */
.contact-mail, .contact-ig {
    align-self: flex-start;   /* (la ratlla de sota fa l'amplada del text, no de tota la fila) */
    position: relative;
    background: linear-gradient(90deg, #ff7a45 0%, #e5484d 35%, #14131a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    transition: color .45s var(--ease);
}
.contact-mail::after, .contact-ig::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, #ff7a45 0%, #e5484d 35%, #14131a 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .5s var(--ease);
    pointer-events: none;
}
.contact-mail:hover, .contact-ig:hover { color: transparent; }
.contact-mail:hover::after, .contact-ig:hover::after { transform: scaleX(1); }
.ig-logo { transition: color .3s, border-color .3s, transform .35s var(--ease), background .3s, box-shadow .35s; }
.ig-logo:hover {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, #6a5cff 0%, #b06cff 45%, #ff7a45 100%);
    box-shadow: 0 10px 22px -10px rgba(229, 72, 77, 0.55);
}

/* 08-10-2026: el sobre del correu (a baix de Selected works i About): normal com els altres; en passar el ratolí, beix càlid */
.ig-logo.social-mail:hover {
    color: #4a3b2a;
    background: #ecdcc4;
    border-color: #dcc6a6;
    box-shadow: 0 10px 22px -10px rgba(160, 120, 70, 0.5);
}

/* ---------- Peu ---------- */
footer a { background: currentColor no-repeat left bottom / 0% 1px; transition: color .3s, background-size .4s var(--ease); }
footer a:hover { background-size: 100% 1px; }

/* ---------- Foto ampliada ---------- */
.lb { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.lb.on { animation: bn-fade .35s var(--ease) both; }
.lb.on img { animation: bn-zoom .45s var(--ease) both; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.7); }
.lb .x { transition: transform .3s var(--ease), color .3s; }
.lb .x:hover { transform: rotate(90deg); color: #ff7a45; }

/* ---------- Teclat: on és el focus ---------- */
a:focus-visible, button:focus-visible, .canvas:focus-visible { outline: 2px solid var(--lilac); outline-offset: 3px; border-radius: 4px; }

/* ---------- Entrades suaus (no a l'editor) ---------- */
@keyframes bn-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bn-zoom { from { opacity: 0; scale: 0.96; } to { opacity: 1; scale: 1; } }
@keyframes bn-rise { from { opacity: 0; translate: 0 26px; } to { opacity: 1; translate: 0 0; } }
body:not(.ed-on) main { animation: bn-fade .7s var(--ease) both; }
/* les fotos pugen una mica en aparèixer en baixar (només als navegadors que ho saben fer; als altres, quiet) */
@supports (animation-timeline: view()) {
    body:not(.ed-on) .canvas img, body:not(.ed-on) .tile .shot {
        animation: bn-rise linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 40%;
    }
}

/* ---------- Mòbil ---------- */
@media (max-width: 820px) {
    header { position: relative; }   /* (allà no és fixa; així la línia de degradat té on agafar-se) */
    nav.menu a:not(.on):hover { background: rgba(58, 58, 62, 0.08); }

    /* 08-10-2026: el menú s'obre suau: la targeta es desplega de dalt a baix (es destapa i apareix a poc a poc)
       i les opcions baixen en ventall una darrere l'altra. En tancar, al revés (script.js posa .closing ~0,85 s). */
    .bar.open nav.menu {
        perspective: 700px;
        transform-origin: 100% 0;
        animation: bn-card .55s var(--ease) both;
    }
    .bar.open nav.menu > * {
        transform-origin: 50% 0;
        animation: bn-fan .55s var(--ease) both;
        animation-delay: .14s;
    }
    .bar.open nav.menu > :nth-child(2) { animation-delay: .21s; }
    .bar.open nav.menu > :nth-child(3) { animation-delay: .28s; }
    .bar.open nav.menu > :nth-child(4) { animation-delay: .35s; }
    .bar.open nav.menu > :nth-child(5) { animation-delay: .42s; }
    .bar.open nav.menu > :nth-child(6) { animation-delay: .49s; }
    /* tancar = obrir al revés, amb la mateixa durada i la corba invertida (accelera en lloc de frenar) */
    .bar.open.closing nav.menu { animation: bn-card-out .55s cubic-bezier(.64, 0, .78, .39) .28s both; }
    .bar.open.closing nav.menu > * { animation: bn-fan-out .55s cubic-bezier(.64, 0, .78, .39) both; animation-delay: 0s; }
    .bar.open.closing nav.menu > :nth-last-child(2) { animation-delay: .07s; }
    .bar.open.closing nav.menu > :nth-last-child(3) { animation-delay: .14s; }
    .bar.open.closing nav.menu > :nth-last-child(4) { animation-delay: .21s; }
    .bar.open.closing nav.menu > :nth-last-child(n+5) { animation-delay: .28s; }
}
@keyframes bn-card {
    from { opacity: 0; transform: translateY(-6px) scale(.98); clip-path: inset(0 0 100% 0 round 16px); }
    to   { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round 16px); }
}
@keyframes bn-card-out {
    from { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round 16px); }
    to   { opacity: 0; transform: translateY(-6px) scale(.98); clip-path: inset(0 0 100% 0 round 16px); }
}
@keyframes bn-fan-out {
    from { opacity: 1; transform: none; }
    to   { opacity: 0; transform: rotateX(-30deg) translateY(-6px); }
}
@keyframes bn-fan {
    from { opacity: 0; transform: rotateX(-30deg) translateY(-8px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}