/*
  MOZGAS-RETEG (Ruben #68, docs/design/mozgas-modell-atvetel.md).

  EZ A FAJL KIZAROLAG ADDITIV. Ha a Motion:Enabled ki van kapcsolva, ki sem
  kerul a lapra (lasd MotionOptions) - es a lap akkor is TELJES: ugyanaz az
  elrendezes, ugyanazok a komponensek, csak allnak. A formanyelv es a mozgas
  szandekosan ket kulon fajlban el, hogy a vészfek ne tudjon felkesz
  allapotot eloidezni.

  MINDEN mozgas @media (prefers-reduced-motion: no-preference) alatt all, nem
  csak a base.css kikapcsolojara bizva. Oka: a base.css a csokkentett
  mozgasnal az animacio IDOTARTAMAT nullazza, a KESLELTETEST nem. A lepcsozott
  belepesnel ez csapda lenne - "both" kitoltessel a kartya a keslelteteskor
  (akar 0,66 mp-ig) a kiindulo, LATHATATLAN allapotban all. Aki csokkentett
  mozgast ker, annak a tartalomnak azonnal ott kell lennie.

  A ket gorbe es a harom idotartam a tokens.css-ben el (--motion-spring,
  --motion-ease, --duration-*).
*/

/*
  LAPVALTAS - dokumentumok kozotti View Transitions, JavaScript nelkul.

  A fejlec es az also ful-sav HELYBEN MARAD, csak a tartalom csuszik: ettol
  erzodik egy app-nak, nem lapok sorozatanak. Ahol a bongeszo nem tudja
  (Firefox), egyszeruen nincs animacio - a navigacio ugyanaz.

  Az @view-transition at-rule NEM allhat retegben (a bongeszo nem veszi
  figyelembe), ezert all itt a @layer blokkon kivul.
*/
@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }
}

@layer components {
    @media (prefers-reduced-motion: no-preference) {
        /*
          A view-transition-name RETEGKONTEXTUST nyit - a fejlecen ES a main-en is
          (plus-grid.css 1. pont: pontosan ez a csapda). Z-index nelkul a DOM-sorrend
          dont, a main a fejlec FOLE fest, es a harang-panel meg a fiok-menu a lap
          tartalma MOGE kerul (bejelentett hiba, 2026-09-29: az ertesites-panelen
          atlatszott a foglalas fejlece). Ezert a fejlec, amig nevet kap, a main fole
          all. Az also ful-sav (30) es a skip-link a fejlecen belul (100) ettol nem valtozik.
        */
        .site-header {
            view-transition-name: site-header;
            position: relative;
            z-index: 10;
        }

        .tab-bar {
            view-transition-name: tab-bar;
        }

        main#main {
            view-transition-name: main-content;
        }

        ::view-transition-old(main-content),
        ::view-transition-new(main-content) {
            animation-duration: var(--duration-slow);
            animation-timing-function: var(--motion-ease);
        }

        /* Elore: az uj lap jobbrol er be, a regi balra tavozik. */
        ::view-transition-old(main-content) {
            animation-name: vt-out-left;
        }

        ::view-transition-new(main-content) {
            animation-name: vt-in-right;
        }

        /*
          Vissza: forditva. A "back" tipust a motion.js teszi a lapvaltasra, ha
          a navigacio visszalepes volt - a bongeszo onmagaban nem kulonbozteti meg.
        */
        html:active-view-transition-type(back)::view-transition-old(main-content) {
            animation-name: vt-out-right;
        }

        html:active-view-transition-type(back)::view-transition-new(main-content) {
            animation-name: vt-in-left;
        }

        @keyframes vt-in-right {
            from {
                transform: translateX(28%);
                opacity: 0;
            }
        }

        @keyframes vt-out-left {
            to {
                transform: translateX(-14%);
                opacity: 0;
            }
        }

        @keyframes vt-in-left {
            from {
                transform: translateX(-28%);
                opacity: 0;
            }
        }

        @keyframes vt-out-right {
            to {
                transform: translateX(14%);
                opacity: 0;
            }
        }

        /*
          BELEPES - a prototipus harom keyframe-je.

          card-in: lentrol, enyhe nagyitassal, lagy gorbevel - kartyak, listasorok.
          tile-in: rugos gorbevel - chipek, kis csempek.
          pulse:   lassu legzes, SOSEM villogas - a "valaszra var" jelzes.
        */
        @keyframes card-in {
            from {
                opacity: 0;
                transform: translateY(14px) scale(0.985);
            }
        }

        @keyframes tile-in {
            from {
                opacity: 0;
                transform: translateY(10px) scale(0.94);
            }
        }

        @keyframes pulse {
            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: 0.45;
            }
        }

        :where(
            .result-card,
            .booking-row,
            .seat-card,
            .favorite-item,
            .notification-item,
            .stat-card,
            .card-list > .card,
            .continue-card,
            .auth-card
        ) {
            /* backwards, nem both: a vegallapot a termeszetes allapot - a lefutott
               animacio igy nem tartja fogva a transformot (a kartya :active
               besullyedese kulonben sosem latszana). */
            animation: card-in var(--duration-slow) var(--motion-ease) backwards;
            animation-delay: calc(var(--i, 0) * 55ms);
        }

        :where(.type-chip, .chip-check) {
            animation: tile-in var(--duration-slow) var(--motion-spring) both;
            animation-delay: calc(var(--i, 0) * 40ms);
        }

        /*
          A LEPCSOZES SORSZAMA CSS-BOL, nem markupbol. A modell style="--i:3"-at
          ir minden elemre; itt a :nth-child adja, igy a kozos reteg egyetlen
          lap markupjahoz sem nyul. Tizenketto utan mindenki egyszerre jon -
          egy hosszu listanal a sokadik elem kesleltetese mar varakozasnak hatna.
        */
        :where(.result-card, .booking-row, .seat-card, .favorite-item, .notification-item, .stat-card, .card-list > .card, .continue-card, .type-chip, .chip-check):nth-child(2) { --i: 1; }
        :where(.result-card, .booking-row, .seat-card, .favorite-item, .notification-item, .stat-card, .card-list > .card, .continue-card, .type-chip, .chip-check):nth-child(3) { --i: 2; }
        :where(.result-card, .booking-row, .seat-card, .favorite-item, .notification-item, .stat-card, .card-list > .card, .continue-card, .type-chip, .chip-check):nth-child(4) { --i: 3; }
        :where(.result-card, .booking-row, .seat-card, .favorite-item, .notification-item, .stat-card, .card-list > .card, .continue-card, .type-chip, .chip-check):nth-child(5) { --i: 4; }
        :where(.result-card, .booking-row, .seat-card, .favorite-item, .notification-item, .stat-card, .card-list > .card, .continue-card, .type-chip, .chip-check):nth-child(6) { --i: 5; }
        :where(.result-card, .booking-row, .seat-card, .favorite-item, .notification-item, .stat-card, .card-list > .card, .continue-card, .type-chip, .chip-check):nth-child(7) { --i: 6; }
        :where(.result-card, .booking-row, .seat-card, .favorite-item, .notification-item, .stat-card, .card-list > .card, .continue-card, .type-chip, .chip-check):nth-child(8) { --i: 7; }
        :where(.result-card, .booking-row, .seat-card, .favorite-item, .notification-item, .stat-card, .card-list > .card, .continue-card, .type-chip, .chip-check):nth-child(9) { --i: 8; }
        :where(.result-card, .booking-row, .seat-card, .favorite-item, .notification-item, .stat-card, .card-list > .card, .continue-card, .type-chip, .chip-check):nth-child(10) { --i: 9; }
        :where(.result-card, .booking-row, .seat-card, .favorite-item, .notification-item, .stat-card, .card-list > .card, .continue-card, .type-chip, .chip-check):nth-child(11) { --i: 10; }
        :where(.result-card, .booking-row, .seat-card, .favorite-item, .notification-item, .stat-card, .card-list > .card, .continue-card, .type-chip, .chip-check):nth-child(n + 12) { --i: 11; }

        /*
          NYOMAS-VISSZAJELZES: 3%-os zsugorodas 100 ms alatt. A modell szerint
          "ettol erzodik appnak". A letiltott gomb nem reagal - az hazudna.
        */
        .button {
            transition:
                transform 100ms ease,
                background-color var(--duration-fast),
                border-color var(--duration-fast),
                color var(--duration-fast);
        }

        .button:active:not(:disabled) {
            transform: scale(0.97);
        }

        :where(.type-chip, .chip-check, .tab-bar-item) {
            transition: transform 120ms ease;
        }

        :where(.type-chip, .chip-check, .tab-bar-item):active {
            transform: scale(0.96);
        }

        /*
          A fül-sav aktiv ikonja megemelkedik - rugosan. A kivalasztas igy nem
          csak szin (WCAG 1.4.1), hanem helyzet is.
        */
        .tab-bar-icon {
            transition: transform var(--duration-base) var(--motion-spring);
        }

        .tab-bar-item[aria-current="page"] .tab-bar-icon {
            transform: translateY(-2px);
        }

        /* "Valaszra var": a statusz-cimke pottye lelegzik. */
        .status-badge-requested::before {
            animation: pulse 1.6s ease-in-out infinite;
        }

        /*
          SZUROLAP (kereso, 4. fazis): alulrol csuszik fel a lagy gorbevel, a hatter
          kozben sotetedik - asztalon kozepen, kis emelkedessel. A popover a
          legfelso retegbol tunik el, ezert a display es az overlay is atmenetet kap
          (allow-discrete), kulonben a becsukas animacio nelkul ugrana.
        */
        @supports selector(:popover-open) {
            .filter-sheet {
                transform: translateY(100%);
                transition:
                    transform var(--duration-base) var(--motion-ease),
                    opacity var(--duration-base) var(--motion-ease),
                    overlay var(--duration-base) allow-discrete,
                    display var(--duration-base) allow-discrete;
            }

            .filter-sheet:popover-open {
                transform: none;
            }

            @starting-style {
                .filter-sheet:popover-open {
                    transform: translateY(100%);
                }
            }

            .filter-sheet::backdrop {
                opacity: 0;
                transition:
                    opacity var(--duration-base) ease,
                    overlay var(--duration-base) allow-discrete,
                    display var(--duration-base) allow-discrete;
            }

            .filter-sheet:popover-open::backdrop {
                opacity: 1;
            }

            @starting-style {
                .filter-sheet:popover-open::backdrop {
                    opacity: 0;
                }
            }

            @media (min-width: 768px) {
                .filter-sheet {
                    transform: translateY(1.5rem);
                    opacity: 0;
                }

                .filter-sheet:popover-open {
                    opacity: 1;
                }

                @starting-style {
                    .filter-sheet:popover-open {
                        transform: translateY(1.5rem);
                        opacity: 0;
                    }
                }
            }
        }

        /* A teljes kartya kattinthato: erintesre kicsit besullyed, mint egy gomb. */
        .seat-card:active {
            transform: scale(0.985);
        }


        /*
          ELKULDOTT KERES (5. fazis): a pipa berajzolodik - elobb a kor, aztan a pipa.
          A folyamatban levo lepes pottye ugyanugy lelegzik, mint a "Valaszra var" cimke.
        */
        .request-sent-check circle {
            stroke-dasharray: 151;
            stroke-dashoffset: 151;
            animation: draw 520ms var(--motion-ease) forwards;
        }

        .request-sent-check path {
            stroke-dasharray: 32;
            stroke-dashoffset: 32;
            animation: draw 360ms var(--motion-ease) 420ms forwards;
        }

        @keyframes draw {
            to {
                stroke-dashoffset: 0;
            }
        }

        .booking-progress-step.is-current .booking-progress-mark {
            animation: pulse 1.6s ease-in-out infinite;
        }


        /* Lenyithato foglalas-kartya (6. fazis): a nyil rugosan fordul. */
        .booking-card-chevron {
            transition: transform var(--duration-base) var(--motion-spring);
        }


        /*
          LENYITAS (foglalas-kartya, a varazslo nap-sora, GYIK): a tartalom magassaga
          0-rol "auto"-ra nyilik. Az interpolate-size csak ezekre az elemekre szol;
          a ::details-content-et nem ismero bongeszo azonnal nyit - a funkcio ugyanaz.
        */
        :is(.booking-card, .day-picker, .faq-item) {
            interpolate-size: allow-keywords;
        }

        :is(.booking-card, .day-picker, .faq-item)::details-content {
            block-size: 0;
            overflow: clip;
            transition:
                block-size var(--duration-base) var(--motion-ease),
                content-visibility var(--duration-base) allow-discrete;
        }

        :is(.booking-card, .day-picker, .faq-item)[open]::details-content {
            block-size: auto;
        }

    }
}