/* State - State-based styles */

/* View Transitions API - seamless page navigation */
@view-transition {
    navigation: auto;
}

::view-transition-old(root) {
    animation: 0.15s ease-out fade-out;
}

::view-transition-new(root) {
    animation: 0.15s ease-in fade-in;
}

@keyframes fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Photo transitions between pages */
.photo-img {
    view-transition-name: hero-image;
}

::view-transition-old(hero-image) {
    animation: 0.2s ease-out fade-out;
}

::view-transition-new(hero-image) {
    animation: 0.2s ease-in fade-in;
}

.is-hidden {
    display: none !important;
}

.is-disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}

.is-loading {
    opacity: 0.7;
    pointer-events: none;
}

.is-dragging {
    opacity: 0.5;
    background: var(--bg-tertiary);
}

/* Loading states */
.btn.is-loading::after {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-left: 0.5em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 0.75s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Focus states */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Navigation states */
.nav-logo:hover {
    text-decoration: none;
}

.nav-filter:hover {
    border-color: var(--text-muted);
}

/* Photo focus mode - fullscreen image view */
.page-photo .site-header,
.page-photo .site-footer,
.page-photo .photo-info,
.page-photo .photo-nav {
    transition: opacity 0.3s ease;
}

.page-photo .photo-image-container {
    cursor: zoom-in;
    transition: background 0.3s ease;
}

.page-photo .photo-img {
    transition: transform 0.3s ease;
}

.page-photo .photo-image-container::before {
    content: '';
    position: fixed;
    inset: 0;
    background: #000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.is-focus-mode {
    overflow: hidden;
}

.is-focus-mode .site-header,
.is-focus-mode .site-footer,
.is-focus-mode .photo-info,
.is-focus-mode .photo-nav {
    opacity: 0;
    pointer-events: none;
}

.is-focus-mode .photo-image-container {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
}

.is-focus-mode .photo-img {
    max-height: 100vh;
    max-width: 100vw;
    width: auto;
    height: auto;
    object-fit: contain;
}

.is-focus-mode .photo-image-container::before {
    opacity: 1;
}

.is-focus-mode .photo-img {
    /* max-height: 100vh;
    max-width: 100vw;
    object-fit: contain; */
    transition: position 0.3s ease, transform 0.3s ease;
}

/* Print styles */
@media print {
    .site-header,
    .site-footer,
    .photo-nav,
    .admin-item-actions {
        display: none;
    }

    .photo-img {
        max-height: none;
    }
}