/* ==========================================
   TOMODACHI LIFE: LIVING THE DREAM
   Custom styles to complement Tailwind CSS
   ========================================== */

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Nunito', sans-serif;
}

/* Brand gradient helpers */
.bg-tomo-gradient {
    background: linear-gradient(135deg, #00AEEF 0%, #5BC8F5 45%, #8CC63F 100%);
}

.bg-tomo-gradient-warm {
    background: linear-gradient(135deg, #FFCE00 0%, #FF9F1C 60%, #F94C43 100%);
}

.text-tomo-gradient {
    background: linear-gradient(90deg, #00AEEF, #F94C43);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Decorative blob behind hero art */
.blob {
    border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
    animation: blob-morph 12s ease-in-out infinite;
}

@keyframes blob-morph {
    0%, 100% { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; }
    50% { border-radius: 58% 42% 37% 63% / 56% 59% 41% 44%; }
}

/* Float animation */
.float {
    animation: float 5s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-14px); }
}

/* Scroll reveal */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* FAQ open/close marker */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details[open] .faq-icon { transform: rotate(45deg); }

/* Custom scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #EAF7FE; }
::-webkit-scrollbar-thumb { background: #00AEEF; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #0090c5; }

::selection { background: #00AEEF; color: #fff; }


/* Pulsing CTA for the download verification button */
.cta-pulse {
    animation: cta-pulse 1.8s ease-in-out infinite;
}

@keyframes cta-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(249, 76, 67, 0.45); }
    50% { box-shadow: 0 0 0 14px rgba(249, 76, 67, 0); }
}

.tabular-nums { font-variant-numeric: tabular-nums; }