/* ========================================
   Responsive Breakpoints & Touch/Motion
   ======================================== */

/* Tablet breakpoint */
@media (max-width: 1024px) {
    .hero-content {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .globe-container {
        width: 300px;
        height: 300px;
    }

    .contact-content {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .skills-list {
        grid-template-columns: 1fr;
    }

    .projects-grid {
        grid-template-columns: 1fr;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .payment-demo {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .payment-card-scene {
        justify-self: center;
    }

    .payment-particles {
        display: none;
    }

    .qr-demo {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .qr-scanner-area {
        justify-self: center;
    }

    .nav-time {
        display: none;
    }

    .nav-links a {
        padding: 1.25rem 1rem;
    }
}

/* Mobile breakpoint */
@media (max-width: 768px) {
    .nav-links {
        display: none;
    }

    .nav-right {
        display: none;
    }

    .menu-toggle {
        display: flex;
    }

    .logo-section {
        border-right: none;
        padding: 0.75rem 1rem;
        flex: 1;
    }

    .logo-section::after {
        display: none;
    }

    .status-indicator {
        display: none;
    }

    nav .container {
        padding: 0;
    }

    section {
        padding: 6rem 0;
    }

    .container {
        padding: 0 1.25rem;
    }

    .hero-cta {
        flex-direction: column;
    }

    .btn {
        width: 100%;
        justify-content: center;
    }

    .timeline {
        padding-left: 1.5rem;
    }

    .timeline-item {
        padding-left: 1.5rem;
    }

    .timeline-item::before {
        left: -1.5rem;
        width: 12px;
        height: 12px;
    }

    .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }

    .stat-number {
        font-size: 2.5rem;
    }

    .cursor,
    .cursor-dot {
        display: none;
    }

    body {
        cursor: auto;
    }

    /* Mobile menu dropdown when open */
    .nav-links.open {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: rgba(5, 5, 6, 0.96);
        -webkit-backdrop-filter: blur(16px);
        backdrop-filter: blur(16px);
        border-bottom: 1px solid var(--border);
        padding: 0.5rem 0;
        z-index: 99;
        animation: mobileMenuSlide 0.3s ease-out;
    }

    .nav-links.open li::after {
        display: none;
    }

    .nav-links.open a {
        padding: 1rem 1.5rem;
        font-size: 0.8rem;
        border-bottom: 1px solid var(--border);
        min-height: 48px;
        display: flex;
        align-items: center;
    }

    .nav-links.open li:last-child a {
        border-bottom: none;
    }

    /* Menu toggle proper touch target (48x48px min) */
    .menu-toggle {
        min-width: 48px;
        min-height: 48px;
        align-items: center;
        justify-content: center;
    }

    /* Hero section mobile adjustments */
    .hero {
        min-height: auto;
        padding-top: 80px;
        padding-bottom: 2rem;
    }

    .hero-subtitle {
        font-size: 1.25rem;
    }

    .hero-description {
        font-size: 0.85rem;
    }

    /* Touch targets at least 44x44px */
    .nav-cta,
    .contact-link,
    .contact-card-link,
    .project-link,
    .footer-link {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Payment card on small screens */
    .payment-card {
        width: 100%;
        max-width: 280px;
    }

    .payment-card-scene {
        width: 100%;
        max-width: 280px;
    }

    /* Contact section */
    .contact-content {
        gap: 3rem;
    }

    .contact-info h3 {
        font-size: 1.75rem;
    }

    /* Section headers on mobile */
    .section-header {
        margin-bottom: 3rem;
    }

    /* Font size floors for readability */
    .timeline-description {
        font-size: 0.8rem;
    }

    .terminal-input {
        font-size: 16px;
    }

    /* Prevents iOS zoom on focus */

    /* Orbs - reduce on mobile for performance */
    .orb-1 {
        width: 300px;
        height: 300px;
    }

    .orb-2 {
        width: 250px;
        height: 250px;
    }

    .orb-3 {
        width: 200px;
        height: 200px;
    }

    /* Globe canvas - hide on mobile for GPU savings */
    #globe-canvas {
        display: none;
    }

    /* Fix sub-WCAG font sizes on mobile */
    .payment-card-label,
    .payment-step-sub,
    .payment-step-time,
    .payment-amount-label,
    .payment-hint,
    .qr-demo-badge,
    .qr-gps-status,
    .qr-log-status,
    .qr-stat-label,
    .hr-email-label,
    .hr-step-label,
    .hr-step-number,
    .hr-workflow-status,
    .newsletter-subtitle,
    .newsletter-issue,
    .newsletter-logo sup,
    .banner-tag,
    .banner-title,
    .nav-time-label {
        font-size: max(0.65rem, 10.4px);
    }

    /* Hide keyboard hints on mobile */
    .terminal-hint kbd {
        display: none;
    }
    .terminal-hint span {
        display: none;
    }
    .terminal-hint::before {
        content: 'Tap suggestions to navigate';
        font-size: 0.7rem;
        color: var(--text-muted);
    }

    /* Staggered nav link reveal */
    .nav-links.open li {
        opacity: 0;
        animation: navLinkFade 0.3s ease forwards;
    }
    .nav-links.open li:nth-child(1) { animation-delay: 0.05s; }
    .nav-links.open li:nth-child(2) { animation-delay: 0.10s; }
    .nav-links.open li:nth-child(3) { animation-delay: 0.15s; }
    .nav-links.open li:nth-child(4) { animation-delay: 0.20s; }
    .nav-links.open li:nth-child(5) { animation-delay: 0.25s; }

    @keyframes navLinkFade {
        from { opacity: 0; transform: translateX(-10px); }
        to { opacity: 1; transform: translateX(0); }
    }

    /* Smoother hamburger transition */
    .menu-toggle span {
        transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }

    /* Mobile spacing improvements */
    .timeline-item {
        margin-bottom: 3rem;
    }
    .project-card {
        padding: 1.75rem;
    }
    .footer-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
    }
}

@keyframes mobileMenuSlide {
    from {
        opacity: 0;
        transform: translateY(-20px);
        clip-path: inset(0 0 100% 0);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        clip-path: inset(0 0 0 0);
    }
}

/* Small mobile (480px and below) */
@media (max-width: 480px) {
    .hero h1 {
        font-size: 2.5rem;
    }

    .hero-subtitle {
        font-size: 1.1rem;
    }

    .section-title {
        font-size: 2rem;
    }

    .stat-number {
        font-size: 2rem;
    }

    .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
    }

    .payment-card-number {
        font-size: 0.85rem;
        letter-spacing: 0.1em;
    }

    .os-demo-container {
        gap: 1.5rem;
    }

    .terminal {
        max-width: 100%;
    }

    .terminal-container {
        max-width: 100%;
    }

    .container {
        padding: 0 1rem;
    }

    /* Small screen typography */
    body {
        line-height: 1.8;
    }
    .skill-item {
        padding: 0.6rem 1rem;
        min-height: 36px;
        display: inline-flex;
        align-items: center;
    }
}

/* Touch device / coarse pointer - disable custom cursor */
@media (pointer: coarse),
(hover: none) {
    body {
        cursor: auto !important;
    }

    .cursor-drop,
    .cursor-ring,
    .cursor-ring-outer,
    .cursor-stroke,
    .cursor-ripple {
        display: none !important;
    }

    .btn,
    a,
    button {
        cursor: pointer !important;
    }

    .payment-card {
        transform: rotateY(0) rotateX(0);
    }
    .payment-demo-container.processing .payment-card {
        animation: cardFloatTouch 2.5s ease-in-out infinite;
    }

    /* Touch-friendly press feedback */
    .project-card:active {
        border-color: var(--border-hover);
        box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.5);
        transform: scale(0.98);
    }
    .contact-link:active {
        transform: translateX(5px);
    }
    .skill-item:active {
        border-color: var(--accent);
        color: var(--accent);
    }
    .os-window-demo:active {
        transform: scale(0.98);
    }
    /* HR drag items tap style */
    .hr-draggable-item {
        cursor: pointer;
    }
    .hr-draggable-item.selected {
        border-color: var(--accent);
        background: rgba(94, 234, 212, 0.08);
    }
}

@keyframes cardFloatTouch {
    0%, 100% { transform: rotateY(0) rotateX(0) translateY(0); }
    50% { transform: rotateY(2deg) rotateX(-2deg) translateY(-6px); }
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    html {
        scroll-behavior: auto;
    }

    #globe-canvas {
        display: none;
    }
}