/* Sybernetic 2026 — shared layer loaded last.
   Header behaviour, interaction motion and service page rhythm live here,
   so older stylesheets no longer fight over the same properties. */

:root {
    --hdr-h: 92px;
    --hdr-h-compact: 64px;
    --ease-out: cubic-bezier(.2, .75, .25, 1);
    --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
}
@media (max-width: 1180px) {
    :root { --hdr-h: 76px; --hdr-h-compact: 60px; }
}

/* ---------- Header: large at the top, compact after scrolling ----------
   The header is fixed and a spacer keeps its full height in the flow, so
   resizing it never moves the page (that movement caused the jumping). */
html { scroll-padding-top: calc(var(--hdr-h-compact) + 20px); }
html body .sticky-header,
html body .sticky-header.scrolled {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--hdr-h);
    min-height: 0;
    padding: 0 clamp(1.25rem, 3.6vw, 3.5rem);
    box-sizing: border-box;
    background: #070a09;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .08);
    transition: height .45s var(--ease-out), box-shadow .45s var(--ease-out), background-color .45s var(--ease-out);
    will-change: height;
}
html body .sticky-header.is-compact {
    height: var(--hdr-h-compact);
    background: #070a09f2;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .1), 0 14px 34px -18px rgba(0, 0, 0, .9);
}
.header-spacer { height: var(--hdr-h); }

/* One size source for the logo; compact state scales it, layout stays put. */
html body .sticky-header > .brand-lockup {
    transform-origin: left center;
    transition: transform .45s var(--ease-out);
}
html body .sticky-header .header-logo,
html body .sticky-header.scrolled .header-logo { --mark-h: clamp(19px, 1.75vw, 26px); }
html body .sticky-header .brand-sygnet,
html body .sticky-header.scrolled .brand-sygnet { --mark-h: clamp(32px, 2.9vw, 44px); }
html body .sticky-header.is-compact > .brand-lockup { transform: scale(.74); }
@media (max-width: 1180px) {
    html body .sticky-header .header-logo,
    html body .sticky-header.scrolled .header-logo { --mark-h: clamp(18px, 5.4vw, 24px); }
    html body .sticky-header .brand-sygnet,
    html body .sticky-header.scrolled .brand-sygnet { --mark-h: clamp(29px, 8.6vw, 38px); }
    html body .sticky-header.is-compact > .brand-lockup { transform: scale(.8); }
    html body .sticky-header, html body .sticky-header.scrolled { padding: 0 1.1rem; }
}
.sticky-header .action-buttons a { transition: transform .45s var(--ease-out), background-color .2s, color .2s; }

/* ---------- Buttons and links answer every press ---------- */
.v-button, .estimate-next, .estimate-back, .estimate-add, .header-cta, .header-contact,
.v-option, .estimate-choice > span, .kontakt-submit, .sybe-policy__link {
    transition: transform .25s var(--ease-out), background-color .2s, border-color .2s, color .2s, box-shadow .25s var(--ease-out);
}
.v-button:hover, .header-cta:hover, .header-contact:hover, .estimate-next:hover { transform: translateY(-2px); }
.v-button:active, .header-cta:active, .header-contact:active, .estimate-next:active,
.estimate-back:active, .estimate-add:active, .kontakt-submit:active { transform: translateY(0) scale(.97); transition-duration: .08s; }
.estimate-choice:active > span, .v-option:active { transform: scale(.98); transition-duration: .08s; }
.v-button > span, .estimate-next > span, .v-text-link > span { display: inline-block; transition: transform .3s var(--ease-out); }
.v-button:hover > span, .estimate-next:hover > span { transform: translate(3px, -3px); }
.v-text-link:hover > span { transform: translateX(4px); }
.estimate-choice input:checked + span { animation: sybe-pick .35s var(--ease-spring); }
@keyframes sybe-pick { 0% { transform: scale(.96); } 100% { transform: scale(1); } }

/* ---------- Accordions open smoothly (JS animates height) ---------- */
.v-faq summary span, .v-component-list summary b {
    display: inline-block;
    transition: transform .35s var(--ease-out);
}
.v-faq details[open] summary span, .v-component-list details[open] summary b { transform: rotate(45deg); }
details.is-animating { overflow: hidden; }

/* ---------- Tab panels and form steps slide in ---------- */
.v-panel.is-entering, .estimate-step.is-entering { animation: sybe-enter .45s var(--ease-out); }
.estimate-step.is-entering-back { animation: sybe-enter-back .45s var(--ease-out); }
@keyframes sybe-enter { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes sybe-enter-back { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }

/* ---------- Content reveal while scrolling ---------- */
.js-reveal .sybe-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
.js-reveal .sybe-reveal.is-in { opacity: 1; transform: none; }

/* ---------- Page to page: a short cross-fade where supported ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; }
.sticky-header { view-transition-name: site-header; }

@media (prefers-reduced-motion: reduce) {
    html body .sticky-header, html body .sticky-header > .brand-lockup { transition: none; }
    .js-reveal .sybe-reveal { opacity: 1; transform: none; transition: none; }
    .v-panel.is-entering, .estimate-step.is-entering, .estimate-step.is-entering-back, .estimate-choice input:checked + span { animation: none; }
    @view-transition { navigation: none; }
}

/* ---------- PC builds carousel ---------- */
.sybe-build-carousel .sbc-viewport { margin-top: 36px; }
.sbc-track { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.sbc-track::-webkit-scrollbar { display: none; }
.sbc-slide { scroll-snap-align: start; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); align-items: center; min-width: 0; }
.sbc-photo { position: relative; display: block; width: 100%; padding: 0; border: 1px solid #415a47; border-radius: 10px; overflow: hidden; background: #101a13; cursor: zoom-in; aspect-ratio: 4 / 3; }
.sbc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease-out); }
.sbc-photo:hover img { transform: scale(1.04); }
.sbc-zoom-hint { position: absolute; right: 14px; bottom: 14px; display: inline-flex; gap: 8px; align-items: center; padding: 8px 12px; border-radius: 999px; background: #070a09d9; color: #eaf1e7; font: 500 13px/1 Inter, sans-serif; }
.sbc-info h3 { font: 500 clamp(26px, 2.6vw, 36px)/1.15 Manrope, Inter, sans-serif; letter-spacing: -.03em; color: #f1f6ee; margin: 0 0 10px; }
.sbc-usage { color: #c9d8c4; margin: 0 0 22px; }
.sbc-parts { display: grid; gap: 0; margin: 0 0 22px; border-top: 1px solid #34483a; }
.sbc-parts div { display: grid; grid-template-columns: 9.5em 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid #34483a; font-size: 14px; }
.sbc-parts dt { color: #a9bea5; }
.sbc-parts dd { margin: 0; color: #eef4ea; }
.sbc-verdict { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.sbc-verdict h4 { font: 600 13px/1.4 Inter, sans-serif; color: #c6dfb7; margin: 0 0 8px; }
.sbc-verdict ul { margin: 0; padding-left: 18px; color: #dfe9da; font-size: 14px; line-height: 1.6; }
.sbc-controls { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 28px; }
.sbc-arrow { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid #5d7761; background: transparent; color: #eaf1e7; cursor: pointer; transition: background-color .2s, transform .25s var(--ease-out); }
.sbc-arrow:hover { background: #203628; }
.sbc-arrow:active { transform: scale(.94); }
.sbc-dots { display: flex; gap: 6px; }
.sbc-dots button { width: 34px; height: 34px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.sbc-dots span { display: block; width: 8px; height: 8px; border-radius: 4px; background: #4d6652; transition: width .35s var(--ease-out), background-color .35s; }
.sbc-dots [aria-selected=true] span { width: 24px; background: #c6dfb7; }
.sbc-lightbox { border: 0; padding: 0; background: transparent; max-width: min(1200px, 94vw); max-height: 92vh; }
.sbc-lightbox::backdrop { background: #050807e6; }
.sbc-lightbox[open] { animation: sybe-zoom-in .35s var(--ease-out); }
.sbc-lightbox figure { margin: 0; }
.sbc-lightbox img { display: block; max-width: 100%; max-height: 84vh; border-radius: 8px; }
.sbc-lightbox figcaption { color: #dfe9da; padding: 12px 4px 0; font-size: 14px; }
.sbc-close { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: #070a09cc; color: #fff; display: grid; place-items: center; cursor: pointer; }
@keyframes sybe-zoom-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) {
    .sbc-slide { grid-template-columns: 1fr; align-items: start; }
    .sbc-verdict { grid-template-columns: 1fr; }
    .sbc-parts div { grid-template-columns: 8em 1fr; }
}

/* ---------- Icons (SVG instead of text symbols) ---------- */
.sybe-icon { display: inline-block; vertical-align: middle; flex: none; }
.estimate-choice-mark .sybe-icon { width: 16px; height: 16px; }
.estimate-choice input:checked + span .estimate-choice-mark { font-size: 0; }
.estimate-choice input:checked + span .estimate-choice-mark .sybe-icon { display: none; }
.estimate-choice input:checked + span .estimate-choice-mark::after {
    content: ""; display: inline-block; width: 18px; height: 18px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.estimate-success-mark .sybe-icon { width: 24px; height: 24px; }

/* ---------- PC configurator: path cards ---------- */
.estimate-choices--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.estimate-card-choice > span { min-height: 120px; align-items: flex-start; padding: 20px; }
.estimate-card-choice .estimate-choice-label { display: grid; gap: 8px; }
.estimate-card-choice strong { font: 600 17px/1.3 Manrope, Inter, sans-serif; letter-spacing: -.01em; }
.estimate-card-choice small { font-size: 13px; line-height: 1.55; font-weight: 400; opacity: .82; }
.estimate-choices--link { grid-template-columns: 1fr; }
.estimate-subgroup[hidden] { display: none; }
@media (max-width: 540px) {
    .estimate-choices--cards { grid-template-columns: 1fr; }
    .estimate-card-choice > span { min-height: 0; }
}

/* ---------- Form header rhythm and compact progress on phones ---------- */
.estimate-intro h2 { margin-bottom: 22px; }
@media (max-width: 540px) {
    .estimate-progress li > span:last-child { display: none; }
    .estimate-progress ol { gap: 4px; }
}

/* ---------- Service pages: rhythm and purposeful motion ---------- */
/* The process sits on its own band, so "how it goes and what it costs" reads as one block. */
.v-service #przebieg {
    position: relative;
    background: linear-gradient(180deg, #111d15, #0d1611);
    border: 1px solid #243629;
    border-radius: 16px;
    padding-inline: clamp(20px, 4vw, 56px);
    margin-block: 24px;
}
/* Each step's top rule fills in when the timeline comes into view. */
.v-process li { border-top-color: #2e4334; }
.v-process li::before {
    content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px;
    background: #c6dfb7; transform: scaleX(0); transform-origin: left;
    transition: transform .9s var(--ease-out); transition-delay: calc(var(--i, 0) * 160ms + 150ms);
}
.js-reveal .v-process li.is-in::before, html:not(.js-reveal) .v-process li::before { transform: scaleX(1); }
.v-process .v-step { transition: color .4s; }

/* Cards answer the pointer. */
.v-deep article, .v-aid-list article, .v-service-card, .sybe-policy__options > li {
    transition: transform .35s var(--ease-out), border-color .25s, background-color .25s;
}
@media (hover: hover) {
    .v-service-card:hover { transform: translateY(-4px); border-color: #7f9c80; }
    .v-service-card:hover .v-card-arrow { transform: translate(3px, -3px); }
    .v-deep article:hover { transform: translateY(-3px); }
}
.v-card-arrow { display: inline-block; transition: transform .3s var(--ease-out); }

/* Explorer options: the active one carries a sliding indicator. */
.v-option { position: relative; overflow: hidden; }
.v-option::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: #c6dfb7; transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease-out); }
.v-option[aria-selected=true]::after { transform: scaleX(1); }

/* Hero art sits closer to the copy on phones (less empty space above the fold). */
@media (max-width: 650px) {
    .v-service-hero, .v-build .v-service-hero { padding-top: 28px; padding-bottom: 8px; gap: 8px; min-height: 0; }
    .v-service-hero .v-hero-art { margin: 0 auto; max-width: 420px; }
    .v-breadcrumb { padding-top: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .v-process li::before { transition: none; transform: scaleX(1); }
}
@media (max-width: 650px) {
    .v-service #przebieg { padding-block: 36px; padding-inline: 18px; border-radius: 12px; }
    .v-service .v-process { grid-template-columns: 1fr; gap: 0; }
    .v-service .v-process li { display: grid; grid-template-columns: 52px 1fr; column-gap: 12px; padding: 18px 0; }
    .v-service .v-process .v-step { grid-row: span 2; font-size: 30px; }
    .v-service .v-process h3 { margin: 2px 0 6px; font-size: 18px; }
}

/* ---------- One orchestrated entrance per page: the hero assembles on load ---------- */
@media (prefers-reduced-motion: no-preference) {
    .home-cinema__copy > *, .v-service-hero .v-hero-copy > *, .pr-hero > div > *, .pr-hero-intro > * {
        animation: sybe-rise .8s var(--ease-out) both;
    }
    .home-cinema__copy > :nth-child(2), .v-service-hero .v-hero-copy > :nth-child(2) { animation-delay: .08s; }
    .home-cinema__copy > :nth-child(3), .v-service-hero .v-hero-copy > :nth-child(3) { animation-delay: .16s; }
    .home-cinema__copy > :nth-child(4), .v-service-hero .v-hero-copy > :nth-child(4) { animation-delay: .24s; }
    .home-cinema__copy > :nth-child(5) { animation-delay: .32s; }
    .v-service-hero .v-hero-art { animation: sybe-art-in 1.1s var(--ease-out) .15s both; }
    .home-cinema__media img { animation: sybe-settle 2.4s var(--ease-out) both; }
}
@keyframes sybe-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes sybe-art-in { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes sybe-settle { from { transform: scale(1.06); } to { transform: none; } }

/* Desktop navigation: an underline slides in on hover and marks the current page. */
@media (min-width: 1181px) {
    .sticky-header .main-nav a:not(.brand-lockup) { position: relative; }
    .sticky-header .main-nav a:not(.brand-lockup)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease-out); }
    .sticky-header .main-nav a:not(.brand-lockup):hover::after, .sticky-header .main-nav a.active::after { transform: scaleX(1); transform-origin: left; }
}