/* =========================================
   SKENYDESIGN — dopracowanie strony głównej
   Ładowane tylko w front-page.php, po skeny-portfolio.css.
   Układ i kolory bez zmian: wejścia, przejścia, hover, czytelność.
   ========================================= */

/* ── Wejścia przy przewijaniu ──
   Ukrywamy treść tylko gdy działa skrypt (klasa skeny-js w <head>),
   więc bez JS wszystko jest widoczne od razu. Opóźnienie kolejnych
   elementów sekcji ustawia skrypt przez --i. */
.skeny-reveal,
.skeny-reveal--pop { opacity: 1; transform: none; }

html.skeny-js .skeny-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .8s var(--ease-out-soft), transform .9s var(--ease-out-soft);
    transition-delay: calc(var(--i, 0) * 80ms);
}
html.skeny-js .skeny-reveal--pop {
    opacity: 0;
    transform: translateY(36px) scale(.97);
    transition: opacity .7s var(--ease-out-soft), transform 1s var(--ease-out-soft);
    transition-delay: calc(var(--i, 0) * 80ms);
}
html.skeny-js .skeny-reveal.is-visible,
html.skeny-js .skeny-reveal--pop.is-visible { opacity: 1; transform: none; }

/* ── Hero: każda linia nagłówka wysuwa się spod maski ── */
@keyframes skenyLineUp {
    from { clip-path: inset(0 0 100% 0); transform: translateY(.45em); }
    to   { clip-path: inset(-20% -5% -20% -5%); transform: none; }
}
@keyframes skenyFadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
}
.skeny-hero__title .skeny-hero-in {
    opacity: 1;
    animation: skenyLineUp 1s cubic-bezier(.16, 1, .3, 1) both;
}
.skeny-hero__sub.skeny-hero-in,
.skeny-hero__btns.skeny-hero-in,
.skeny-hero__stats.skeny-hero-in {
    animation: skenyFadeUp .8s var(--ease-out-soft) both;
}
.skeny-hero__title em { display: inline-block; }

/* Statystyki: czytelniejsze podpisy */
.skeny-stat__label { color: rgba(255,255,255,.62); font-size: .8125rem; }

/* ── Pasek CTA: płaski kolor, bez poświaty ── */
.skeny-cta::before { display: none; }

/* ── Przyciski: wyraźniejszy hover i nacisk ── */
.skeny-btn {
    transition: background .25s ease, color .25s ease, border-color .25s ease,
                transform .35s var(--ease-spring);
}
.skeny-btn:hover { transform: translateY(-3px); }
.skeny-btn:active { transform: translateY(0) scale(.97); transition-duration: .12s; }
.skeny-btn:focus-visible { outline: 3px solid var(--clr-yellow); outline-offset: 3px; }
.skeny-btn--yellow:focus-visible { outline-color: var(--clr-white); }
.skeny-cta .skeny-btn:focus-visible { outline-color: var(--clr-black); }
body.skeny-page .skeny-skip-link { color: var(--clr-black); }

/* ── Portfolio: zamiast żółtej plamy na całym kafelku praca zostaje
   widoczna, przybliża się, a od dołu wysuwa się żółty pasek z nazwą ── */
.skeny-portfolio__bg { transition: transform .9s cubic-bezier(.16, 1, .3, 1); }
.skeny-portfolio__overlay {
    inset: auto 0 0 0;
    padding: 1.1rem 1.5rem 1.25rem;
    background: var(--clr-yellow);
    opacity: 1;
    transform: translateY(101%);
    transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}
.skeny-portfolio__name { font-size: 1.0625rem; color: var(--clr-black); }
.skeny-portfolio__cat {
    font-size: .8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: #3a3a3a;
    margin-top: .2rem;
}
@media (hover: hover) and (pointer: fine) {
    .skeny-portfolio__item:hover .skeny-portfolio__overlay,
    .skeny-portfolio__item:focus-visible .skeny-portfolio__overlay { transform: none; }
    .skeny-portfolio__item:hover .skeny-portfolio__bg,
    .skeny-portfolio__item:focus-visible .skeny-portfolio__bg { transform: scale(1.06); }
    /* sąsiednie kafle lekko przygasają, wskazany zostaje w pełnym kolorze */
    .skeny-portfolio__grid:hover .skeny-portfolio__item { opacity: .55; }
    .skeny-portfolio__grid:hover .skeny-portfolio__item:hover { opacity: 1; }
}
/* Telefon: reflektor przy przewijaniu przygasał kafle do 40%, przez co
   portfolio wyglądało na ciemne. Teraz najniżej 70%. */
@media (pointer: coarse) {
    .skeny-portfolio__item { filter: brightness(calc(.7 + .3 * var(--spot))); }
}

/* ── Usługi: kafel podnosi się, ikona i strzałka reagują ── */
a.skeny-spec-tile { transition: transform .45s var(--ease-spring), filter .3s ease; }
a.skeny-spec-tile:hover { transform: translateY(-6px); filter: brightness(1.12); }
.skeny-spec-tile__icon img { transition: transform .5s var(--ease-spring); }
a.skeny-spec-tile:hover .skeny-spec-tile__icon img { transform: scale(1.08) rotate(-4deg); }
.skeny-spec-tile__more { transition: color .2s ease, transform .35s var(--ease-out-soft); }
a.skeny-spec-tile:hover .skeny-spec-tile__more { transform: translateX(6px); }
a.skeny-spec-tile:focus-visible { outline: 3px solid var(--clr-yellow); outline-offset: 3px; }
.skeny-spec-tile__desc { color: rgba(255,255,255,.72); }

/* ── Cennik: wiersze rozdzielone tonem tła zamiast cienkich linii ── */
.skeny-pricing__list,
.skeny-pricing__row { border: 0; }
.skeny-pricing__row {
    padding: 1.125rem 1.25rem;
    transition: background .25s ease;
}
.skeny-pricing__list .skeny-pricing__row:nth-child(odd) { background: #121212; }
.skeny-pricing__row:hover { background: #1c1c1c; }
.skeny-pricing__lead,
.skeny-pricing__note,
.skeny-pricing__agency { color: rgba(255,255,255,.68); }
.skeny-pricing__price { transition: transform .3s var(--ease-out-soft); }
.skeny-pricing__row:hover .skeny-pricing__price { transform: translateX(-4px); }

/* ── O mnie i kontakt: czytelniejszy tekst pomocniczy ── */
.skeny-contact__text { color: rgba(255,255,255,.68); }
.skeny-about__photo-img { transition: transform 1.2s cubic-bezier(.16, 1, .3, 1); }
.skeny-about__photo:hover .skeny-about__photo-img { transform: scale(1.03); }

/* ── Mniej ruchu: treść zostaje, znika przesuw ── */
@media (prefers-reduced-motion: reduce) {
    html.skeny-js .skeny-reveal,
    html.skeny-js .skeny-reveal--pop { transform: none; transition: opacity .2s linear; transition-delay: 0s; }
    .skeny-hero__title .skeny-hero-in,
    .skeny-hero__sub.skeny-hero-in,
    .skeny-hero__btns.skeny-hero-in,
    .skeny-hero__stats.skeny-hero-in { animation: none; opacity: 1; }
    .skeny-btn:hover,
    a.skeny-spec-tile:hover,
    .skeny-portfolio__item:hover .skeny-portfolio__bg { transform: none; }
}

/* =========================================
   PODSTRONY: usługi, portfolio, projekt, polityka
   ========================================= */

/* Stopka na wszystkich stronach: czytelniejsza drobna treść */
.skeny-footer__copy,
body.skeny-page a.skeny-footer__legal-link { font-size: .8125rem; color: rgba(255,255,255,.6); }
body.skeny-page .skeny-footer__list a,
body.skeny-page .skeny-footer__phone,
.skeny-footer__place { color: rgba(255,255,255,.7); }

/* Realizacje przy usłudze: 1-2 projekty nie stoją już w rogu
   z pustą resztą szerokości */
.skeny-portfolio__grid:has(> .skeny-portfolio__item:only-child) { grid-template-columns: 1fr; }
.skeny-portfolio__grid:has(> .skeny-portfolio__item:only-child) .skeny-portfolio__item { aspect-ratio: 21 / 9; }
.skeny-portfolio__grid:has(> .skeny-portfolio__item:nth-child(2):last-child) { grid-template-columns: 1fr 1fr; }
.skeny-portfolio__grid:has(> .skeny-portfolio__item:nth-child(2):last-child) .skeny-portfolio__item { aspect-ratio: 4 / 3; }

/* Usługa: czytelniejszy tekst */
.skeny-service-hero__lead { color: rgba(255,255,255,.75); }
.skeny-checklist__item { font-size: 1.0625rem; color: rgba(255,255,255,.88); }
.skeny-steps__item {
    transition: background .3s ease, transform .45s var(--ease-spring);
}
.skeny-steps__item:hover { background: #1d1d1d; transform: translateY(-4px); }
.skeny-steps__title { font-size: 1.125rem; }
.skeny-steps__desc { font-size: 1rem; color: rgba(255,255,255,.72); }

/* FAQ: odstępy tonem zamiast linii, płynne otwieranie */
.skeny-faq,
.skeny-faq__item { border: 0; }
.skeny-faq { display: flex; flex-direction: column; gap: 6px; }
.skeny-faq__item { background: #121212; padding: 0 1.25rem; transition: background .25s ease; }
.skeny-faq__item:hover,
.skeny-faq__item[open] { background: #181818; }
.skeny-faq__q { padding-right: 3rem; }
.skeny-faq__q::after {
    content: '+';
    transition: transform .35s var(--ease-spring);
}
.skeny-faq__item[open] .skeny-faq__q::after { content: '+'; transform: translateY(-50%) rotate(45deg); }
.skeny-faq__q:focus-visible { outline: 3px solid var(--clr-yellow); outline-offset: 2px; }
.skeny-faq__a { font-size: 1rem; color: rgba(255,255,255,.75); }
.skeny-faq__item[open] .skeny-faq__a { animation: skenyFadeUp .45s var(--ease-out-soft) both; }

/* Inne usługi i filtry: wyraźna reakcja na hover */
body.skeny-page a.skeny-filters__btn,
.skeny-filters__btn { transition: background .2s ease, color .2s ease, border-color .2s ease, transform .3s var(--ease-spring); }
body.skeny-page a.skeny-filters__btn:hover,
.skeny-filters__btn:hover { transform: translateY(-2px); }

/* Projekt: opis w wygodnej szerokości i większym stopniu */
.skeny-project-hero__desc { max-width: 68ch; }
.skeny-project-hero__desc p { font-size: 1.0625rem; color: rgba(255,255,255,.78); }
.skeny-project-gallery__photo { transition: transform 1s cubic-bezier(.16, 1, .3, 1); }
@media (hover: hover) and (pointer: fine) {
    .skeny-project-gallery__frame:hover .skeny-project-gallery__photo { transform: scale(1.025); }
}

/* Polityka: tekst w pełniejszym kontraście */
.skeny-legal p,
.skeny-legal li { font-size: 1rem; color: rgba(255,255,255,.78); }
.skeny-legal__updated { color: rgba(255,255,255,.6); }

@media (prefers-reduced-motion: reduce) {
    .skeny-steps__item:hover,
    .skeny-filters__btn:hover,
    body.skeny-page a.skeny-filters__btn:hover { transform: none; }
    .skeny-faq__item[open] .skeny-faq__a { animation: none; }
    .skeny-project-gallery__frame:hover .skeny-project-gallery__photo { transform: none; }
}