/**
 * Sarah Turns 24 - Responsive & Accessibility Stylesheet
 * Breakpoints: 375px, 768px, 1024px, 1440px
 */

/* Extra small mobile (375px and down) */
@media (max-width: 375px) {
    .opening-heading {
        font-size: 2.2rem;
    }
    .identity-big-number {
        font-size: 5.5rem;
    }
    .grand-heading {
        font-size: 2.3rem;
    }
    .thing-card-3d {
        height: 180px;
    }
    .cake-visual-wrapper {
        transform: scale(0.85);
        margin: 1rem auto;
    }
    .letter-envelope-wrapper {
        transform: scale(0.85);
    }
    .letter-paper-card {
        padding: 2rem 1.25rem;
    }
    .polaroid-card {
        flex: 0 0 240px;
    }
}

/* Tablet (768px and down) */
@media (max-width: 768px) {
    .screen-wrapper {
        padding-top: 5rem;
        padding-bottom: 2.5rem;
    }
    .floating-control-layer {
        top: 0.75rem;
        padding: 0.4rem 0.8rem;
    }
    .floating-progress-dots {
        gap: 4px;
    }
    .progress-dot {
        width: 6px;
        height: 6px;
    }
    .progress-dot.active {
        width: 14px;
    }
    .letter-paper-card {
        padding: 2.2rem 1.5rem;
    }
    .letter-heading-text {
        font-size: 1.6rem;
    }
    .letter-para {
        font-size: 0.95rem;
    }
    .quiz-question-card {
        padding: 1.75rem 1.25rem;
    }
    .surprise-reveal-card {
        padding: 2rem 1.25rem;
    }
}

/* Desktop & Large screens (1024px and up) */
@media (min-width: 1024px) {
    .opening-heading {
        font-size: 3.5rem;
    }
    .identity-big-number {
        font-size: 8.5rem;
    }
    .grand-heading {
        font-size: 3.8rem;
    }
    .thing-card-3d {
        height: 210px;
    }
    .thing-card-3d:hover:not(.flipped) .thing-card-inner {
        transform: translateY(-6px);
    }
}

/* Accessibility: prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    *, ::before, ::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .star-particle,
    .cake-flame,
    .mysterious-sparkle-icon {
        animation: none !important;
    }
}

@media (max-width: 480px) {
    .secret-gate-card {
        padding: 2.2rem 1.5rem;
    }
    .secret-gate-title {
        font-size: 1.7rem;
    }
    .secret-gate-subtitle {
        font-size: 0.88rem;
    }
}