@import './variables.css';

/* ═══════════════════════════════════════════════════════
   SixTree — Shared Styles
   Used by: all HTML pages
   ═══════════════════════════════════════════════════════ */

/* ─── Fonts ─── */
/* ── Creato Display — fonte dos títulos ── */
@font-face {
    font-family: 'Creato Display';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/CreatoDisplay-Regular.otf') format('opentype');
}
@font-face {
    font-family: 'Creato Display';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/CreatoDisplay-Bold.otf') format('opentype');
}
@font-face {
    font-family: 'Creato Display';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('fonts/CreatoDisplay-ExtraBold.otf') format('opentype');
}
@font-face {
    font-family: 'Creato Display';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('fonts/CreatoDisplay-Light.otf') format('opentype');
}

/* ─── Base ─── */
body {
    background-color: var(--color-ivory);
    color: var(--color-blueoxford);
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 300;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Creato Display', sans-serif;
    font-weight: normal;
    color: var(--color-blueoxford);
}

/* ─── Scrollbar ─── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--color-blueoxford); }
::-webkit-scrollbar-thumb { background: var(--color-navylight); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-lemonzest); }

/* ─── GSAP initial hidden states (CRITICAL) ─── */
/* gsap.to() needs a starting point — these define it */
.gsap-hero {
    opacity: 1;
    transform: none;
}
.gsap-reveal {
    opacity: 1;
    transform: none;
}

/* ─── Nav ─── */
#main-nav {
    transition: background-color 0.35s ease, box-shadow 0.35s ease;
}
#main-nav.scrolled {
    background-color: rgba(var(--color-ivory-rgb), 0.98);
    box-shadow: 0 2px 24px rgba(var(--color-blueoxford-rgb), 0.07);
}

/* ─── Hover underline ─── */
.hover-line {
    position: relative;
}
.hover-line::after {
    content: '';
    position: absolute;
    left: 0; bottom: -2px;
    width: 0; height: 1px;
    background: var(--color-lemonzest);
    transition: width var(--transition-line);
}
.hover-line:hover::after { width: 100%; }

/* ─── Mobile menu: CSS slide transition ─── */
#mobile-menu-panel {
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
    opacity: 0;
    pointer-events: none;
}
#mobile-menu-panel.menu-open {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

/* ─── Section label utility ─── */
.section-label {
    font-size: var(--text-label);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: rgba(var(--color-blueoxford-rgb), 0.35);
}

/* ─── Service card hover ─── */
.service-card {
    transition: transform var(--transition-card), box-shadow var(--transition-card);
}
.service-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-card-light-hover);
}

/* ─── Studio card gradient ─── */
.studio-gradient-bg {
    background-color: var(--color-blueoxford);
    background-image: var(--gradient-studio);
}

/* ─── Hero background ─── */
.hero-gradient-bg {
    background-color: var(--color-blueoxford);
    background-image: url('assets/hero-bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* ─── Stats number ─── */
.stat-number {
    font-family: 'Creato Display', sans-serif;
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    line-height: 1;
    color: var(--color-blueoxford);
}