/* Only chapter rules enter on scroll; content stays still and fully visible. */
:root { --motion-press: 120ms; --motion-state: 180ms; --motion-detail: 260ms; }

:is(.wordmark, .site-nav a, .nav-toggle, .hero-socials a, .text-action, .analytics-settings) { transition: color var(--motion-state) ease; }
.booking-section .contact-link,
:is(.package-action, .hero-action, .gallery-button, .viewer-close, .analytics-actions button) {
    transition: color var(--motion-state) ease, background-color var(--motion-state) ease, border-color var(--motion-state) ease, transform var(--motion-press) var(--ease-arrive);
}
:is(.brand-mark, .nav-city svg, .text-action svg, .hero-socials svg, .package-action svg, .viewer-close svg) { transition: transform var(--motion-detail) var(--ease-arrive); }
.portfolio-piece figcaption { transition: color var(--motion-state) ease; }
.portfolio-piece:focus-within figcaption { color: var(--ink); }
.hero-socials a:focus-visible, .text-action:focus-visible, .nav-toggle:focus-visible, .analytics-settings:focus-visible { color: var(--accent); }
.gallery-button--toggle[data-paused="true"] { color: var(--accent); border-color: var(--accent); background: var(--line-soft); }
.gallery-button--toggle:hover:not(:disabled) svg { translate: none; }
.analytics-settings, .analytics-close { transition: color var(--motion-state) ease, background-color var(--motion-state) ease, border-color var(--motion-state) ease; }
.analytics-notice summary { min-height: 44px; align-content: center; transition: color var(--motion-state) ease; }
.analytics-notice summary:hover { color: var(--ink); }

@media (prefers-reduced-motion: no-preference) {
    :is(.rule-pending, .rule-arrived) { position: relative; border-top-color: transparent; }
    .rule-arrived::before { content: ""; position: absolute; top: -1px; inset-inline: 0; height: 1px; background: var(--line); transform-origin: left; pointer-events: none; animation: rule-arrive 1200ms ease-in-out; }
    .booking-section :is(.pricing-heading, .city-session-layout, .contact-layout):is(.rule-pending, .rule-arrived) { border-top-color: transparent; }
    .photo-viewer[open]::backdrop { animation: viewer-dim 240ms ease-out; }
    .photo-viewer[open] :is(.viewer-toolbar, .viewer-controls) { animation: copy-arrive 240ms var(--ease-arrive); }
    .viewer-print .print-arrived { animation: image-arrive 240ms ease-out; }
    .viewer-feedback:not([hidden]) { animation: image-arrive 180ms ease-out; }
    .analytics-notice details[open] p { animation: image-arrive 180ms ease-out; }

    :is(.package-action, .hero-action, .booking-section .contact-link, .analytics-actions button):active { transform: scale(0.985); }
    .gallery-button:active:not(:disabled), .viewer-close:active { transform: scale(0.95); }
    .text-action:focus-visible svg, .package-action:focus-visible svg { transform: translate(2px, -2px); }
    .hero-action:focus-visible svg { translate: 0 3px; }
    .contact-link:focus-visible .contact-arrow { translate: 3px -3px; }
    .wordmark:focus-visible .brand-mark { transform: rotate(-3deg); }
    .nav-city:focus-visible svg { transform: translateX(3px); }

    @media (hover: hover) and (pointer: fine) {
        .wordmark:hover .brand-mark { transform: rotate(-3deg); }
        .nav-city:hover svg { transform: translateX(3px); }
        .text-action:hover svg, .package-action:hover svg { transform: translate(2px, -2px); }
        .hero-socials a:hover svg { transform: translateY(-2px); }
        .viewer-close:hover svg { transform: rotate(90deg); }
        .portfolio-piece:has(.photo-preview:hover) figcaption { color: var(--ink); }
        .package-photo { transition: transform 360ms var(--ease-arrive); }
    }

    @media (max-width: 1099px) {
        .nav-disclosure .nav-menu-icon, .nav-disclosure .nav-close-icon { display: block; transform-origin: center; transition: opacity var(--motion-state) ease, transform var(--motion-state) var(--ease-arrive); }
        .nav-disclosure .nav-menu-icon { opacity: 1; transform: rotate(0); }
        .nav-disclosure .nav-close-icon { opacity: 0; transform: rotate(-45deg); }
        .nav-disclosure:is([data-menu-open="true"], [open]:not([data-menu-open])) .nav-menu-icon { display: block; opacity: 0; transform: rotate(45deg); }
        .nav-disclosure:is([data-menu-open="true"], [open]:not([data-menu-open])) .nav-close-icon { opacity: 1; transform: rotate(0); }
    }
}

@keyframes rule-arrive { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes image-arrive { from { opacity: 0.45; } to { opacity: 1; } }
@keyframes copy-arrive { from { opacity: 0.65; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes viewer-dim { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 1099px) {
    .nav-disclosure[data-menu-open] .site-nav {
        opacity: 0;
        transform: translateY(-8px);
        transition: opacity 180ms ease-in, transform 180ms ease-in;
    }
    .nav-disclosure[data-menu-open="true"] .site-nav {
        opacity: 1;
        transform: translateY(0);
        transition-duration: 240ms;
        transition-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
    }
}

@media (prefers-reduced-motion: reduce) {
    /* Keep color feedback, with stable geometry and no photographic exposure effect. */
    .booking-section .contact-link,
    :is(.package-action, .hero-action, .gallery-button, .viewer-close, .analytics-actions button) {
        transition: color var(--motion-press) ease, background-color var(--motion-press) ease, border-color var(--motion-press) ease;
    }
    :is(.brand-mark, .nav-city svg, .text-action svg, .hero-socials svg, .package-action svg, .viewer-close svg) { transition: none; }
    .nav-disclosure[data-menu-open] .site-nav { transform: none; transition: opacity 100ms ease; }
}

/* Establish an invisible first frame without transitioning from cached styles. */
.nav-disclosure[data-menu-entering] .site-nav { opacity: 0; transition: none; }