/**
 * iOS Gesture System Styles
 * Swipe-back, context menus, and pull-to-refresh
 */

/* Swipe-back overlay */
.ios-swipe-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000;
    opacity: 0;
    pointer-events: none;
    z-index: 13000; /* Gesture layer - above all UI for touch detection */
    transition: opacity 0.2s ease;
}

/* Context menu pressing state */
.ios-context-pressing {
    transform: scale(0.97);
    opacity: 0.8;
    transition: all 0.15s ease;
}

/* Pull-to-refresh container */
.ios-pull-to-refresh {
    height: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    position: relative;
    z-index: 10;
}

/* Refresh spinner */
.ios-refresh-spinner {
    width: 28px;
    height: 28px;
    position: relative;
    transition: transform 0.2s ease;
}

.ios-refresh-spinner-svg {
    width: 100%;
    height: 100%;
    animation: none;
}

.ios-refresh-spinner-circle {
    stroke: #007AFF;
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 75;
    transform-origin: center;
    transition: stroke-dashoffset 0.3s ease;
}

/* Ready state */
.ios-pull-to-refresh.ios-refresh-ready .ios-refresh-spinner-circle {
    stroke-dashoffset: 25;
}

/* Refreshing state */
.ios-pull-to-refresh.ios-refreshing .ios-refresh-spinner {
    animation: ios-refresh-spin 0.8s linear infinite;
}

.ios-pull-to-refresh.ios-refreshing .ios-refresh-spinner-circle {
    stroke-dasharray: 80;
    stroke-dashoffset: 60;
    animation: ios-refresh-circle 1.6s ease-in-out infinite;
}

@keyframes ios-refresh-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes ios-refresh-circle {
    0% {
        stroke-dashoffset: 80;
    }
    50% {
        stroke-dashoffset: 20;
    }
    100% {
        stroke-dashoffset: 80;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .ios-refresh-spinner-circle {
        stroke: #0A84FF;
    }
}

.dark-mode .ios-refresh-spinner-circle {
    stroke: #0A84FF;
}

/* Container modifications for pull-to-refresh */
.ios-pull-to-refresh-container {
    position: relative;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Prevent text selection during gestures */
.ios-context-pressing * {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Context menu data attribute styling */
[data-context-menu] {
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

[data-context-menu]:active:not(.ios-context-pressing) {
    transform: scale(0.98);
}

/* Swipe indicator (optional visual hint) */
.ios-swipe-indicator {
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 60px;
    background: linear-gradient(to right, transparent, rgba(0, 122, 255, 0.3));
    border-radius: 0 4px 4px 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Show hint on first visit (can be controlled via JS) */
.ios-swipe-hint-visible .ios-swipe-indicator {
    opacity: 1;
    animation: ios-swipe-hint 2s ease-in-out;
}

@keyframes ios-swipe-hint {
    0%, 100% {
        opacity: 0;
        transform: translateY(-50%) translateX(0);
    }
    50% {
        opacity: 1;
        transform: translateY(-50%) translateX(15px);
    }
}

/* Haptic feedback class (for visual confirmation) */
.ios-haptic-feedback {
    animation: ios-haptic-pulse 0.3s ease;
}

@keyframes ios-haptic-pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.96);
    }
}

/* Long press visual feedback */
@keyframes ios-long-press-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(0, 122, 255, 0.4);
    }
    50% {
        transform: scale(0.97);
        box-shadow: 0 0 0 8px rgba(0, 122, 255, 0);
    }
}

.ios-context-pressing {
    animation: ios-long-press-pulse 0.5s ease;
}

/* Safe area adjustments */
.ios-pull-to-refresh {
    padding-top: max(8px, env(safe-area-inset-top, 0px));
}

/* Prevent overscroll on pages with pull-to-refresh */
.ios-pull-to-refresh-container {
    overscroll-behavior: none;
}

/* Loading state for pull-to-refresh */
.ios-pull-to-refresh.ios-refreshing {
    height: 60px !important;
    opacity: 1 !important;
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    .ios-context-pressing,
    .ios-refresh-spinner,
    .ios-swipe-overlay,
    .ios-pull-to-refresh {
        transition: none;
        animation: none;
    }

    .ios-haptic-feedback {
        animation: none;
    }
}

/* High contrast mode adjustments */
@media (prefers-contrast: high) {
    .ios-refresh-spinner-circle {
        stroke-width: 4;
    }

    .ios-swipe-overlay {
        background: #000;
    }
}

/* ========================================
   iOS Swipe-Back Navigation
   Native iOS edge swipe gesture
   ======================================== */

.ios-page {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000000;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    will-change: transform;
    transition: transform 0.35s cubic-bezier(0.36, 0.66, 0.04, 1);
    z-index: 10;
}

.ios-page-previous {
    transform: translateX(-35%) scale(0.95);
    filter: brightness(0.7);
    pointer-events: none;
    z-index: 9;
}

.ios-page-entering {
    transform: translateX(100%);
}

.ios-page-exiting {
    transform: translateX(100%);
}

.ios-page-transitioning {
    transition: transform 0.35s cubic-bezier(0.36, 0.66, 0.04, 1),
                filter 0.35s cubic-bezier(0.36, 0.66, 0.04, 1);
}

/* Swipe-back edge detection zone */
.ios-swipe-edge {
    position: fixed;
    top: 0;
    left: 0;
    width: 20px;
    height: 100%;
    z-index: 14000;
    pointer-events: auto;
}

/* Swipe-back progress indicator */
.ios-swipe-back-indicator {
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    opacity: 0;
    pointer-events: none;
    z-index: 14001;
    transition: opacity 0.2s ease;
}

.ios-swipe-back-active .ios-swipe-back-indicator {
    opacity: 1;
}

.ios-swipe-back-chevron {
    width: 100%;
    height: 100%;
    border-left: 3px solid rgba(10, 132, 255, 0.8);
    border-bottom: 3px solid rgba(10, 132, 255, 0.8);
    transform: rotate(45deg);
    margin-left: 10px;
}

/* Page shadow for depth */
.ios-page::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 8px;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.3), transparent);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

.ios-page:not(.ios-page-previous)::before {
    opacity: 1;
}

/* Overlay during swipe */
.ios-swipe-back-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    pointer-events: none;
    z-index: 13999;
    transition: opacity 0.2s ease;
}

.ios-swipe-back-active .ios-swipe-back-overlay {
    opacity: 1;
}

/* ========================================
   iOS Page Transitions (Navigation)
   ======================================== */

/* Push transition (navigate forward) */
@keyframes ios-page-push-in {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes ios-page-push-out {
    from {
        transform: translateX(0) scale(1);
        filter: brightness(1);
    }
    to {
        transform: translateX(-35%) scale(0.95);
        filter: brightness(0.7);
    }
}

/* Pop transition (navigate back) */
@keyframes ios-page-pop-in {
    from {
        transform: translateX(-35%) scale(0.95);
        filter: brightness(0.7);
    }
    to {
        transform: translateX(0) scale(1);
        filter: brightness(1);
    }
}

@keyframes ios-page-pop-out {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(100%);
    }
}

/* Apply animations */
.ios-transition-push-enter {
    animation: ios-page-push-in 0.35s cubic-bezier(0.36, 0.66, 0.04, 1) forwards;
}

.ios-transition-push-exit {
    animation: ios-page-push-out 0.35s cubic-bezier(0.36, 0.66, 0.04, 1) forwards;
}

.ios-transition-pop-enter {
    animation: ios-page-pop-in 0.35s cubic-bezier(0.36, 0.66, 0.04, 1) forwards;
}

.ios-transition-pop-exit {
    animation: ios-page-pop-out 0.35s cubic-bezier(0.36, 0.66, 0.04, 1) forwards;
}

/* ========================================
   iOS Modal Presentations (Sheet from bottom)
   ======================================== */

@keyframes ios-modal-present {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes ios-modal-dismiss {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(100%);
        opacity: 0;
    }
}

.ios-modal-presenting {
    animation: ios-modal-present 0.5s cubic-bezier(0.32, 0.72, 0, 1) forwards;
}

.ios-modal-dismissing {
    animation: ios-modal-dismiss 0.4s cubic-bezier(0.32, 0.72, 0, 1) forwards;
}

/* Backdrop fade */
@keyframes ios-backdrop-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

.ios-backdrop-entering {
    animation: ios-backdrop-fade-in 0.3s ease forwards;
}

.ios-backdrop-exiting {
    animation: ios-backdrop-fade-out 0.3s ease forwards;
}

/* ========================================
   iOS Tab Bar Navigation Transitions
   ======================================== */

.ios-tab-content {
    position: relative;
    width: 100%;
    height: 100%;
}

.ios-tab-pane {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.ios-tab-pane-active {
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
}

/* Cross-fade for tab switches */
@keyframes ios-tab-fade-in {
    from {
        opacity: 0;
        transform: scale(0.98);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes ios-tab-fade-out {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.98);
    }
}

.ios-tab-entering {
    animation: ios-tab-fade-in 0.25s ease forwards;
}

.ios-tab-exiting {
    animation: ios-tab-fade-out 0.25s ease forwards;
}

/* ========================================
   iOS Settings Navigation (Drill-in)
   ======================================== */

.ios-settings-nav {
    position: relative;
    overflow: hidden;
}

.ios-settings-page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
    background: #000000;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.36, 0.66, 0.04, 1);
}

.ios-settings-page-active {
    transform: translateX(0);
    position: relative;
}

.ios-settings-page-previous {
    transform: translateX(-35%);
    filter: brightness(0.7);
}

/* Settings drill animation */
@keyframes ios-settings-drill-in {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes ios-settings-drill-out {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(100%);
    }
}

.ios-settings-drilling-in {
    animation: ios-settings-drill-in 0.35s cubic-bezier(0.36, 0.66, 0.04, 1) forwards;
}

.ios-settings-drilling-out {
    animation: ios-settings-drill-out 0.35s cubic-bezier(0.36, 0.66, 0.04, 1) forwards;
}

/* ========================================
   Interactive Swipe Progress
   ======================================== */

/* Used for controlling swipe progress via JS */
.ios-swipe-interactive {
    transition: none !important;
}

/* Rubber band effect at edges */
.ios-swipe-rubber-band {
    transition: transform 0.3s cubic-bezier(0.36, 0.66, 0.04, 1);
}

/* Velocity-based snap */
.ios-swipe-snap-forward {
    animation: ios-swipe-complete 0.25s cubic-bezier(0.36, 0.66, 0.04, 1) forwards;
}

.ios-swipe-snap-back {
    animation: ios-swipe-cancel 0.3s cubic-bezier(0.36, 0.66, 0.04, 1) forwards;
}

@keyframes ios-swipe-complete {
    to {
        transform: translateX(100%);
    }
}

@keyframes ios-swipe-cancel {
    to {
        transform: translateX(0);
    }
}

/* ========================================
   Accessibility & Performance
   ======================================== */

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    .ios-page,
    .ios-settings-page,
    .ios-tab-pane {
        transition: none !important;
        animation: none !important;
    }

    .ios-transition-push-enter,
    .ios-transition-push-exit,
    .ios-transition-pop-enter,
    .ios-transition-pop-exit,
    .ios-modal-presenting,
    .ios-modal-dismissing,
    .ios-settings-drilling-in,
    .ios-settings-drilling-out {
        animation: none !important;
    }
}

/* Hardware acceleration */
.ios-page,
.ios-settings-page,
.ios-swipe-back-indicator,
.ios-modal-presenting,
.ios-modal-dismissing {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform;
}

/* Prevent overscroll during transitions */
.ios-transitioning {
    overflow: hidden;
}

/* ========================================
   Navigation Bar Transitions
   ======================================== */

.ios-navbar-transitioning {
    transition: all 0.35s cubic-bezier(0.36, 0.66, 0.04, 1);
}

.ios-navbar-title {
    transition: opacity 0.2s ease, transform 0.35s cubic-bezier(0.36, 0.66, 0.04, 1);
}

.ios-navbar-title-exiting {
    opacity: 0;
    transform: translateX(-20px);
}

.ios-navbar-title-entering {
    opacity: 0;
    transform: translateX(20px);
    animation: ios-navbar-title-in 0.35s cubic-bezier(0.36, 0.66, 0.04, 1) forwards;
}

@keyframes ios-navbar-title-in {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}