/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { overflow-x: hidden; }

/* ── Navbar ── */
.nav-link { color: rgba(255,255,255,0.85); }
nav.scrolled .nav-link { color: rgba(45,45,45,0.85); }
nav.scrolled .logo-text { color: #2D2D2D; }
nav.scrolled .logo-coral { color: #FF7F6E; }

/* ── Hero ── */
.hero-bg { will-change: transform; }
.hero-img { will-change: transform; }

@keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}
.hero-subtitle { animation: heroFadeUp 0.8s ease forwards; animation-delay: 0.2s; opacity: 0; }
.hero-headline { animation: heroFadeUp 0.8s ease forwards; animation-delay: 0.4s; opacity: 0; }
.hero-desc { animation: heroFadeUp 0.8s ease forwards; animation-delay: 0.6s; opacity: 0; }
.hero-ctas { animation: heroFadeUp 0.8s ease forwards; animation-delay: 0.8s; opacity: 0; }
.hero-scroll { animation: heroFadeUp 0.8s ease forwards; animation-delay: 1.2s; opacity: 0; }

@keyframes scrollPulse {
    0%, 100% { transform: translateY(0); opacity: 0.6; }
    50% { transform: translateY(6px); opacity: 1; }
}
.scroll-line { animation: scrollPulse 1.8s ease-in-out infinite; }

/* ── Reveal Animations ── */
.reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}
.reveal.delay-1 { transition-delay: 0.1s; }
.reveal.delay-2 { transition-delay: 0.2s; }
.reveal.delay-3 { transition-delay: 0.3s; }

/* ── Mobile Menu ── */
.mobile-link { transition: opacity 0.3s ease, color 0.3s ease; }
#mobile-menu.open { opacity: 1; pointer-events: all; }
#mobile-menu.closed { opacity: 0; pointer-events: none; }

/* ── Menu hover ── */
#menu ul li {
    border-bottom: 1px solid rgba(45,45,45,0.06);
    padding-bottom: 5px;
}
#menu ul li:last-child { border-bottom: none; }

/* ── Form ── */
#contact input:focus,
#contact textarea:focus {
    border-color: #FF7F6E;
    box-shadow: 0 0 0 4px rgba(255,127,110,0.1);
}

/* ── Custom Scrollbar ── */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #FFFBF8; }
::-webkit-scrollbar-thumb { background: #FF7F6E; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #E85D4A; }

/* ── Selection ── */
::selection { background: rgba(255,127,110,0.2); color: #2D2D2D; }