/* ==========================================
   STYLE.CSS
   Scope: Reset · CSS Variables · Body/Theme · HTML base
   ========================================== */

/* ── Reset ─────────────────────────────── */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ── CSS Variables ──────────────────────── */
:root {
    /* Surfaces */
    --glass-light: rgba(255, 255, 255, 0.30);
    --glass-light-hover: rgba(255, 255, 255, 0.48);
    --glass-dark: rgba(255, 255, 255, 0.05);
    --glass-dark-hover: rgba(255, 255, 255, 0.09);

    /* Borders */
    --border-light: rgba(0, 0, 0, 0.08);
    --border-dark: rgba(255, 255, 255, 0.10);

    /* Text */
    --text-primary-light: #0a0a0a;
    --text-primary-dark: #f0f0f0;
    --text-secondary-light: #555;
    --text-secondary-dark: #999;
    --text-muted-light: #999;
    --text-muted-dark: #555;

    /* Accent — monochromatic only */
    --accent-light: rgba(0, 0, 0, 0.65);
    --accent-dark: rgba(255, 255, 255, 0.65);

    /* Brand (for social icons only — do not use elsewhere) */
    --brand-linkedin: #0077b5;
    --brand-github: #24292e;
    --brand-instagram: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    --brand-whatsapp: #25d366;
    --brand-email: #555;

    /* Shadows */
    --shadow-light: 0 8px 32px rgba(0, 0, 0, 0.08);
    --shadow-dark: 0 8px 32px rgba(0, 0, 0, 0.50);
    --shadow-hover-light: 0 16px 48px rgba(0, 0, 0, 0.13);
    --shadow-hover-dark: 0 16px 48px rgba(0, 0, 0, 0.65);

    /* Radii */
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-pill: 100px;

    /* Spacing */
    --section-padding: 5rem 5%;
    --nav-height: 72px;

    /* Typography */
    --font-base: 'Plus Jakarta Sans', sans-serif;

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.6s ease;
    --transition-theme: 0.5s ease;
}

/* ── HTML base ──────────────────────────── */
html {
    overflow-x: hidden;
    max-width: 100%;
    scroll-padding-top: 80px;
}

/* ── Body ───────────────────────────────── */
body {
    font-family: var(--font-base);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background var(--transition-theme);
}

body.light { background: #f8f8f6; }
body.dark  { background: #080808; }

/* ── Portfolio page ─────────────────────── */
body.portfolio-page {
    display: block;
    padding: 0;
    overflow-x: hidden;
    width: 100vw;
    max-width: 100%;
    opacity: 0;
    animation: pageLoad 0.5s ease forwards;
}

@keyframes pageLoad {
    to { opacity: 1; }
}

/* ── Main ───────────────────────────────── */
main {
    width: 100%;
    display: block;
}
/* ==========================================
   MATERIAL 3 — ikon & motion (monokromatik)
   ========================================== */
:root {
    /* M3 easing + duration tokens */
    --m3-standard: cubic-bezier(0.2, 0, 0, 1);
    --m3-decelerate: cubic-bezier(0, 0, 0, 1);
    --m3-short: 150ms;
    --m3-medium: 250ms;
    --m3-long: 400ms;
}

/* Material Symbols Rounded — variable font */
.msym {
    font-family: 'Material Symbols Rounded';
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    direction: ltr;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    font-size: 1.15em;
    vertical-align: -0.18em;
    user-select: none;
    transition: font-variation-settings var(--m3-short) var(--m3-standard),
                transform var(--m3-medium) var(--m3-standard);
}
.msym.filled { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.msym.spin { animation: m3spin 1s linear infinite; }
@keyframes m3spin { to { transform: rotate(360deg); } }

/* M3 state layer + ripple */
.btn, .theme-toggle, button {
    position: relative;
    overflow: hidden;
    transition: background var(--m3-short) var(--m3-standard),
                box-shadow var(--m3-medium) var(--m3-standard),
                transform var(--m3-short) var(--m3-standard),
                opacity var(--m3-short) var(--m3-standard);
}
.btn:active, .theme-toggle:active, button:active { transform: scale(0.97); }
.ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    background: currentColor;
    opacity: 0.18;
    pointer-events: none;
    animation: m3ripple var(--m3-long) var(--m3-decelerate) forwards;
}
@keyframes m3ripple { to { transform: scale(2.4); opacity: 0; } }

/* Ikon theme-toggle muter halus saat ganti tema */
.theme-toggle .msym { transform: rotate(0deg); }
.theme-toggle:hover .msym { transform: rotate(18deg); }

/* ── View Transitions: animasi ganti tema ── */
@media (prefers-reduced-motion: no-preference) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none;
        mix-blend-mode: normal;
    }
    /* tema baru nyebar dari tombol toggle */
    ::view-transition-new(root) { z-index: 9999; }
    ::view-transition-old(root) { z-index: 1; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}