/* ══════════════════════════════════════════════
   mobile-massive.css — Global phone overrides
   Covers: topnav, sidenav, footer, bottom nav,
   base typography, and spacing for ALL pages.

   Full redesign for 3x retina phones, not just
   font scaling. Everything in vw for consistency.

   Anchor: body text ~5vw (~22px @ 440px)
   ══════════════════════════════════════════════ */

@media (max-width: 480px) {

    /* ===========================
       TOPNAV
       Logo 10vw, icons 9vw,
       all vertically centered in
       a 20vw tall bar.
       =========================== */
    nav.custom-topnav {
        height: 20vw;
        line-height: 20vw;
        border-bottom-width: 0.5px;
    }

    /* Logo */
    .logo-pt1 {
        font-size: 10vw;
    }
    .logo-topnav {
        line-height: 20vw;
        padding-top: 1.5vw;
    }

    /* Nav wrapper */
    .custom-topnav .nav-wrapper {
        height: 20vw;
        position: relative;
    }

    /* Hamburger + Search: shared mobile override */
    .sidenav-trigger,
    #search-trigger {
        height: 20vw !important;
        width: 12vw !important;
        padding-top: 1.5vw;
    }
    .sidenav-trigger {
        position: absolute !important;
        left: 4vw !important;
    }
    #search-trigger {
        position: absolute !important;
        right: 4vw !important;
    }
    .sidenav-trigger i,
    #search-trigger i {
        font-size: 7vw !important;
        color: #333 !important;
    }



     /* ===========================
       TOPNAV SEARCH OVERLAY
       =========================== */
    .topnav-search-inner {
        padding: 0 5vw;
        gap: 4vw;
    }
    .topnav-search-icon {
        font-size: 7vw !important;    /* ~31px */
        color: #999 !important;
    }
    .topnav-search-inner input[type=search] {
        font-size: 8vw !important;    /* ~35px */
    }
    .topnav-search-inner input[type=search]::placeholder {
        font-size: 6vw;
    }

    /* ===========================
       SIDENAV — fully massive
       =========================== */
    .sidenav {
        width: 92vw;              /* nearly full screen */
        padding-top: 6vw;
    }

    /* Close button: top right, big target */
    .sidenav .sidenav-close {
        height: 16vw !important;
        line-height: 16vw !important;
        padding: 0 6vw !important;
    }
    .sidenav .sidenav-close i {
        font-size: 9vw !important;
        color: #999 !important;
    }

    /* Section labels (EXPLORE, ACCOUNT) */
    .sidenav .sidenav-section-label {
        font-size: 4vw;
        padding: 6vw 7vw 2vw;
        letter-spacing: 0.15em;
    }

    /* Menu links — big tappable rows */
    .sidenav li > a {
        font-size: 7vw;           /* ~31px — same as card titles */
        font-weight: 500;
        height: auto;
        line-height: 1.3;
        padding: 4.5vw 7vw;
        color: #333 !important;
    }
    .sidenav li > a i {
        font-size: 6vw !important;
        vertical-align: middle;
        margin-right: 2vw;
    }
    .sidenav li > a:hover {
        background: rgba(123,82,168,0.06);
    }

    /* Dividers */
    .sidenav .sidenav-divider {
        margin: 4vw 7vw;
    }

    /* User info row */
    .sidenav .sidenav-user {
        font-size: 4.5vw;
        padding: 3vw 7vw;
        color: #888;
    }
    .sidenav .sidenav-user img {
        width: 8vw;
        height: 8vw;
        margin-right: 2.5vw;
    }

    /* ===========================
       FOOTER
       =========================== */
    .footer-inner {
        flex-direction: column;
        align-items: flex-start;
        padding: 10vw 7vw;
        gap: 6vw;
    }
    .footer-brand {
        font-size: 8vw;
    }
    .footer-tagline {
        font-size: 4.5vw;
    }
    .footer-links {
        flex-direction: column;
        gap: 3vw;
        font-size: 5vw;
    }
    .footer-right {
        align-items: flex-start;
    }
    .footer-copy {
        font-size: 3.8vw;
    }

    /* ===========================
       BOTTOM NAV (standalone mode)
       =========================== */
    .custom-bottom-nav {
        height: 18vw;
    }
    .bottom-nav-icon {
        font-size: 7vw !important;
    }

    /* ===========================
       GLOBAL BASE TEXT
       =========================== */
    main, footer {
        font-size: 5vw;
    }


    /* ===========================
       ANIMATIONS
       =========================== */

    /* Hero text: words fade up */
    .home-hero h1 {
        animation: fadeUp 0.6s ease both;
    }
    .home-hero .subtitle {
        animation: fadeUp 0.6s ease 0.2s both;
    }
    .home-hero .home-search {
        animation: fadeUp 0.5s ease 0.35s both;
    }
    @keyframes fadeUp {
        from { opacity: 0; transform: translateY(3vw); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* Search bar: breathing glow */
    .home-search {
        animation: fadeUp 0.5s ease 0.35s both, searchBreath 4s ease-in-out 1.5s infinite !important;
    }
    @keyframes searchBreath {
        0%, 100% { box-shadow: 0 2px 12px rgba(123,82,168,0.08), 0 0 0 1px rgba(123,82,168,0.06); }
        50%      { box-shadow: 0 4px 20px rgba(123,82,168,0.18), 0 0 0 1.5px rgba(180,138,230,0.2); }
    }

    /* Bento cards: dramatic stagger */
    .bento-card {
        opacity: 0;
        transform: translateY(6vw);
        animation: cardUp 0.5s ease both;
    }
    .bento-card:nth-child(1) { animation-delay: 0.1s; }
    .bento-card:nth-child(2) { animation-delay: 0.18s; }
    .bento-card:nth-child(3) { animation-delay: 0.26s; }
    .bento-card:nth-child(4) { animation-delay: 0.34s; }
    .bento-card:nth-child(5) { animation-delay: 0.42s; }
    .bento-card:nth-child(6) { animation-delay: 0.50s; }
    @keyframes cardUp {
        to { opacity: 1; transform: translateY(0); }
    }

    /* Chip shimmer: light sweep */
    .recent-chip {
        background-size: 200% 100%;
        background-image: linear-gradient(
            105deg,
            white 40%,
            rgba(180,138,230,0.12) 50%,
            white 60%
        );
        animation: chipShimmer 2s ease 0.8s both;
    }
    @keyframes chipShimmer {
        from { background-position: 200% 0; }
        to   { background-position: -200% 0; }
    }

    /* Card icons: gentle float */
    .bento-card .card-icon {
        animation: iconFloat 3s ease-in-out infinite;
    }
    .bento-card:nth-child(odd) .card-icon { animation-delay: 0s; }
    .bento-card:nth-child(even) .card-icon { animation-delay: 1.5s; }
    @keyframes iconFloat {
        0%, 100% { transform: translateY(0); }
        50%      { transform: translateY(-1vw); }
    }

    /* Nav logo: crystallize in */
    .logo-pt1 {
        animation: logoIn 0.8s ease both;
    }
    @keyframes logoIn {
        from { opacity: 0; letter-spacing: 0.15em; }
        to   { opacity: 1; letter-spacing: 0; }
    }
}