html { scroll-behavior: smooth; }
body {
    font-family: 'Inter', sans-serif;
    background-color: #000000;
    color: #F3F4F6;
    overflow-y: auto;
}
#particle-canvas {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; opacity: 0.6;
}
#sidebar {
    position: fixed; top: 0; left: 0; width: 90%; max-width: 600px; height: 100vh;
    background: rgba(10, 10, 10, 0.85);
    backdrop-filter: blur(15px);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateX(-100%);
    z-index: 50;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    will-change: transform;
}
#sidebar.open { transform: translateX(0); }
.sidebar-content-wrapper { 
    padding: 5rem 1.5rem 5rem 1.5rem;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s 0.2s ease, transform 0.4s 0.2s ease;
}
#sidebar.open .sidebar-content-wrapper {
    opacity: 1;
    transform: translateY(0);
}
@media (min-width: 640px) { 
    /* Also adding more top padding for desktop consistency */
    /* UPDATED: Increased bottom padding for consistency */
    .sidebar-content-wrapper { padding: 4rem 2.5rem 4rem 2.5rem; } /* 64px Top, 40px L/R, 64px Bottom */
}

.accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.7s ease-in-out; }
/* CORREÇÃO: Aumentado de 2000px para 20000px.
  Isso permite que o contêiner do acordeão se expanda
  o suficiente para conter todo o seu ensaio.
*/
.accordion-item.open .accordion-content { max-height: 20000px; }
.accordion-item.open .chevron { transform: rotate(180deg); transition: transform 0.3s ease; }

.lang-toggle button.active { color: #fff; background-color: rgba(255, 255, 255, 0.1); }
.prose p { margin-bottom: 1em; }

/* (PHASE 3) Harmonized transitions and hovers.
  - All cards (domains, accordions) now share the same transition.
  - All cards now lift on hover, with no distracting background change.
  - Removed unused ".project-card" selector.
*/
.domain-item, .accordion-item {
    transition: transform 0.3s ease;
}
.domain-item:hover, .accordion-item:hover {
    transform: translateY(-5px);
}

#contact-form-wrapper { max-height: 0; overflow: hidden; transition: max-height 0.5s ease-in-out; }
#contact-form-wrapper.open { max-height: 600px; }

/* --- UPDATED --- */
/* Scroll-triggered fade-in */
.fade-in-item {
    opacity: 0;
    transform: translateY(10px);
    /* This transition will animate the change when we add the .is-visible class */
    transition: opacity 0.5s ease, transform 0.5s ease;
    transition-delay: 0.1s; /* Adds a tiny, sophisticated delay */
}

.fade-in-item.is-visible {
    opacity: 1;
    transform: translateY(0);
}
/* --- END UPDATED BLOCK --- */


/* --- NEW TAB STYLES --- */
.tab-btn {
    padding: 8px 16px;
    font-size: 0.95rem; /* 15px */
    font-weight: 500;
    color: #9CA3AF; /* text-gray-400 */
    background-color: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
    margin-bottom: -1px; /* Overlaps with wrapper border */
}
.tab-btn:hover {
    color: #F3F4F6; /* text-gray-100 */
}
.tab-btn.active {
    color: #FFFFFF; /* text-white */
    /* --- COLOR UPDATED --- */
    border-bottom-color: #fbbf24; /* text-amber-400 */
}
.tab-panel.hidden {
    display: none;
}
/* The fade-in animation is now handled by the .fade-in-item
  classes on the *content inside* each tab panel.
  When the panel is switched from .hidden, the animations
  will re-trigger, giving a nice "fade-in-on-click" effect.
*/