/* =============================================
   Daniel Bernardes — Theme CSS
   Design system, layout, animations, components
============================================= */

:root {
    --brand:    #FF5C00;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Reset ─────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
img { display: block; }

/* ── Base ───────────────────────────────────── */
body {
    font-family: "Epilogue", sans-serif;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.light body, body   { background: #f9f9f9; color: #1a1c1c; }
.dark  body         { background: #121414; color: #e2e2e2; }

/* ── Scrollbar ──────────────────────────────── */
::-webkit-scrollbar              { width: 4px; }
.light ::-webkit-scrollbar-track { background: #f9f9f9; }
.dark  ::-webkit-scrollbar-track { background: #121414; }
::-webkit-scrollbar-thumb        { background: #FF5C00; }

/* ── Material Symbols ───────────────────────── */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ── Fonts ──────────────────────────────────── */
.font-satoshi  { font-family: "Satoshi",  sans-serif; }
.font-epilogue { font-family: "Epilogue", sans-serif; }

/* ── Surface utility classes ────────────────── */
.light .surf     { background: #ffffff; }
.dark  .surf     { background: #1a1c1c; }
.light .surf-lo  { background: #f3f3f4; }
.dark  .surf-lo  { background: #1e2020; }
.light .surf-hi  { background: #e8e8e8; }
.dark  .surf-hi  { background: #282a2b; }
.light .on-bg    { color: #1a1c1c; }
.dark  .on-bg    { color: #e2e2e2; }
.light .on-secondary { color: #5e5e5e; }
.dark  .on-secondary { color: #c8c6c5; }
.light .border-subtle { border-color: rgba(0,0,0,0.08); }
.dark  .border-subtle { border-color: rgba(255,255,255,0.08); }
.light .bg-page  { background: #f9f9f9; }
.dark  .bg-page  { background: #121414; }

/* ── CTA section ─────────────────────────────── */
.light .cta-section { background: #f3f3f4; border-top: 1px solid rgba(0,0,0,0.06); }
.dark  .cta-section { background: #0c0f0f; border-top: 1px solid rgba(255,255,255,0.05); }

/* ── Nav ────────────────────────────────────── */
.nav-btn    { transition: color 0.15s ease; }
.nav-active { color: #FF5C00 !important; border-bottom: 2px solid #FF5C00; padding-bottom: 4px; }

/* ── Page fade ──────────────────────────────── */
.page         { display: none; }
.page.active  { display: block; animation: pgFade 0.25s ease; }
@keyframes pgFade { from { opacity: 0; } to { opacity: 1; } }

/* ── Scroll indicator ───────────────────────── */
.scroll-line {
    position: relative;
    width: 1px; height: 96px;
    background: rgba(255,255,255,0.12);
    overflow: hidden;
}
.scroll-line::after {
    content: '';
    position: absolute; top: 0; left: 0;
    width: 100%; height: 40%;
    background: #FF5C00;
    animation: scrollDrop 2.4s ease-in-out infinite;
}
@keyframes scrollDrop {
    0%   { transform: translateY(-100%); opacity: 0; }
    20%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { transform: translateY(260%); opacity: 0; }
}

/* ── Accordion rows ─────────────────────────── */
.accordion-row {
    display: flex;
    flex-direction: column;
    width: 100%;
}
@media (min-width: 768px) {
    .accordion-row { flex-direction: row; height: 720px; }
    .accordion-row .story-panel {
        flex: 1 1 0;
        transition: flex 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .accordion-row:hover .story-panel { flex: 0.6 1 0; }
    .accordion-row .story-panel:hover { flex: 2.4 1 0; }
}

/* ── Story panel ────────────────────────────── */
.story-panel          { position: relative; overflow: hidden; height: 420px; }
@media (min-width: 768px) { .story-panel { height: 100%; } }
.story-panel img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.story-panel:hover img { transform: scale(1.04); }
.story-panel .panel-label { transition: color 0.2s ease; }
.story-panel .reveal {
    overflow: hidden; max-height: 0; opacity: 0;
    transition: max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.3s ease 0.1s;
}
.story-panel:hover .reveal { max-height: 60px; opacity: 1; }
.story-panel + .story-panel { border-left: 1px solid rgba(255,255,255,0.06); }

/* ── Card lift ──────────────────────────────── */
.card-lift { transition: transform 0.2s ease, box-shadow 0.2s ease; will-change: transform; }
.card-lift:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,0.10); }
.dark .card-lift:hover { box-shadow: 0 12px 32px rgba(0,0,0,0.4); }

/* ── Masonry ────────────────────────────────── */
.masonry { column-count: 1; column-gap: 24px; }
@media (min-width: 768px)  { .masonry { column-count: 2; } }
@media (min-width: 1024px) { .masonry { column-count: 3; } }
.masonry-item {
    break-inside: avoid; margin-bottom: 24px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    will-change: transform;
}
.masonry-item:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
.dark .masonry-item:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.5); }

/* ── Portfolio overlay ──────────────────────── */
.port-item { cursor: pointer; }
.port-item .overlay {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.55); opacity: 0;
    transition: opacity 0.25s ease;
    display: flex; flex-direction: column; justify-content: flex-end; padding: 1.75rem;
}
.port-item:hover .overlay { opacity: 1; }
.port-item img { transition: transform 0.5s var(--ease-out); }
.port-item:hover img { transform: scale(1.04); }

/* ── Buttons ────────────────────────────────── */
.btn-press  { transition: filter 0.15s ease, transform 0.1s ease; }
.btn-press:hover  { filter: brightness(1.08); }
.btn-press:active { transform: scale(0.97); }
.btn-outline { transition: background 0.2s ease, color 0.2s ease; }

/* ── Bento hover ────────────────────────────── */
.bento-hover { transition: border-color 0.2s ease; }
.light .bento-hover:hover { border-color: #FF5C00; }
.dark  .bento-hover:hover { border-color: rgba(255,92,0,0.35); }

/* ── Social tiles ───────────────────────────── */
.social-tile { transition: border-color 0.2s ease, background 0.2s ease; }

/* ── Filter bar ─────────────────────────────── */
.filter-btn { transition: color 0.15s ease, border-color 0.15s ease; }
.light .filter-btn { color: rgba(26,28,28,0.45); }
.dark  .filter-btn { color: rgba(226,226,226,0.4); }
.light .filter-btn:hover { color: #1a1c1c; }
.dark  .filter-btn:hover { color: #e2e2e2; }
.filter-btn.active-filter { color: #FF5C00; border-bottom: 1px solid #FF5C00; }

/* ── Lightbox ───────────────────────────────── */
#lightbox         { display: none; position: fixed; inset: 0; z-index: 200; background: #000; }
#lightbox.open    { display: flex; flex-direction: column; align-items: center; justify-content: center; }

/* ── Form fields ────────────────────────────── */
.field-input {
    width: 100%; background: transparent;
    border: none; border-bottom: 1px solid;
    padding: 14px 0; outline: none;
    font-family: "Epilogue", sans-serif; font-size: 16px;
    transition: border-color 0.2s ease;
}
.field-input:focus { border-color: #FF5C00; }
.light .field-input { border-color: rgba(26,28,28,0.25); color: #1a1c1c; }
.dark  .field-input { border-color: rgba(255,255,255,0.15); color: #e2e2e2; }
.light .field-input::placeholder { color: #bbb; }
.dark  .field-input::placeholder { color: #555; }
.field-textarea { resize: none; }

/* ── Project type buttons ───────────────────── */
.proj-btn {
    padding: 6px 20px; border: 1px solid;
    font-size: 11px; font-family: "Satoshi", sans-serif;
    font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    transition: border-color 0.15s ease, color 0.15s ease;
    cursor: pointer; background: transparent;
}
.light .proj-btn { border-color: rgba(0,0,0,0.18); color: #1a1c1c; }
.dark  .proj-btn { border-color: rgba(255,255,255,0.15); color: #e2e2e2; }
.proj-btn:hover, .proj-btn.selected { border-color: #FF5C00; color: #FF5C00; }