/**
 * YESORNOWHEEL.NET - Responsive Stylesheet
 * Fluid mobile-first media queries (320px, 360px, 430px, 768px, 1024px, 1280px+) and reduced motion.
 */

/* Mobile Bottom Sheet for Settings Modal */
@media (max-width: 640px) {
    .modal-overlay {
        align-items: flex-end;
        padding: 0;
    }

    .modal-card {
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        max-height: 85vh;
        width: 100%;
        max-width: 100%;
        animation: sheetSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    @keyframes sheetSlideUp {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }

    .hero-title {
        font-size: 1.85rem;
    }
    
    .hero-subtitle {
        font-size: 0.95rem;
    }

    .nav-btn-label {
        display: none;
    }

    .nav-action-btn {
        padding: 8px;
    }

    .footer-top-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

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

    .article-layout {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .toc-sidebar {
        display: none;
    }

    .use-case-grid {
        grid-template-columns: 1fr;
    }

    .result-badge {
        font-size: 2.4rem;
        padding: 8px 36px;
    }

    .btn-primary-spin {
        font-size: 1.3rem;
        padding: 16px 24px;
    }
}

/* Very Small Mobile Screens (320px - 360px) */
@media (max-width: 360px) {
    .header-brand .brand-tld {
        display: none;
    }

    .hero-title {
        font-size: 1.55rem;
    }

    .btn-primary-spin {
        font-size: 1.15rem;
        padding: 14px 18px;
    }

    .result-badge {
        font-size: 2rem;
        padding: 6px 24px;
    }

    .action-btn {
        flex: 1 1 100%;
    }
    
    .wheel-viewport {
        max-width: 290px;
    }
}

/* Tablet Screens (641px - 1023px) */
@media (min-width: 641px) and (max-width: 1023px) {
    .footer-top-grid {
        grid-template-columns: 1fr 1fr;
    }

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

    .article-layout {
        grid-template-columns: 1fr;
    }

    .toc-sticky-card {
        position: static;
        margin-bottom: 32px;
    }
}

/* Large Screens (1024px+) */
@media (min-width: 1024px) {
    .hero-title {
        font-size: 2.7rem;
    }

    .wheel-viewport {
        max-width: 520px;
    }

    .steps-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Accessibility: Prefers Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    .wheel-pointer-container.tick {
        animation: none !important;
    }

    .wheel-viewport.is-spinning .wheel-glow-ring {
        animation: none !important;
    }

    .effects-canvas {
        display: none !important;
    }
}