/* ============================================================
   polish.css — HTML reveal animations to match the 3D
   ============================================================ */

/* ── Section heads: number + title + tag slide in from left ── */
.section-head {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.section-head.revealed {
    opacity: 1;
    transform: translateY(0);
}
.section-head .section-num {
    display: inline-block;
    transform: translateX(-20px);
    opacity: 0;
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.1s,
                opacity 0.9s ease 0.1s;
}
.section-head.revealed .section-num {
    transform: translateX(0);
    opacity: 1;
}
.section-head .section-title {
    display: inline-block;
    transform: translateX(-12px);
    opacity: 0;
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.18s,
                opacity 0.9s ease 0.18s;
}
.section-head.revealed .section-title {
    transform: translateX(0);
    opacity: 1;
}
.section-head .section-tag {
    opacity: 0;
    transition: opacity 1s ease 0.35s;
}
.section-head.revealed .section-tag {
    opacity: 1;
}

/* ── Hero text: already handled by .hero.is-ready ── */

/* ── About body paragraphs: staggered fade-up ── */
.about-body > * {
    opacity: 0;
    transform: translateY(16px);
    transition:
        opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.about-body > *:nth-child(1) { transition-delay: 0.05s; }
.about-body > *:nth-child(2) { transition-delay: 0.15s; }
.about-body > *:nth-child(3) { transition-delay: 0.25s; }
.about-body > *:nth-child(4) { transition-delay: 0.35s; }

.revealed .about-body > *,
.about-body.revealed > * {
    opacity: 1;
    transform: translateY(0);
}

/* ── About side blocks: slide from right ── */
.about-side {
    opacity: 0;
    transform: translateX(30px);
    transition:
        opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s,
        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}
.about-side.revealed {
    opacity: 1;
    transform: translateX(0);
}

/* ── Work rows: alternate direction + stagger ── */
.work-row {
    opacity: 0;
    transform: translateY(30px);
    transition:
        opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.work-row.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ── Lab cards: 3D flip entrance ── */
.lab-card {
    opacity: 0;
    transform: perspective(900px) rotateX(-12deg) translateY(30px);
    transform-origin: center bottom;
    transition:
        opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.lab-card.revealed {
    opacity: 1;
    transform: perspective(900px) rotateX(0deg) translateY(0);
}

/* ── Contact block: rise from bottom ── */
.contact-grid {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.contact-grid.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ── Footer: subtle fade ── */
.footer-inner {
    opacity: 0;
    transition: opacity 1s ease 0.2s;
}
.footer.revealed .footer-inner {
    opacity: 1;
}

/* ── Nav link hover underline sweep ── */
.nav-link {
    position: relative;
}
.nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 1px;
    background: var(--accent, #4d8bf5);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-link:hover::after,
.nav-link.active::after {
    transform: scaleX(1);
}

/* ── Buttons: magnetic hover lift ── */
.btn,
.contact-btn {
    transition:
        transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        background 0.35s ease,
        border-color 0.35s ease;
}

/* ── Work row hover: number + title shift ── */
.work-row .work-num {
    transition: color 0.3s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.work-row:hover .work-num {
    transform: translateX(-3px);
}
.work-row .work-arrow {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.work-row:hover .work-arrow {
    transform: translateX(8px);
}

/* ── Lab list items: hover slide ── */
.lab-card-list li {
    transition: padding-left 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                color 0.3s ease;
}
.lab-card:hover .lab-card-list li {
    padding-left: 4px;
}

/* ── Hero name underline sweep on hover ── */
.hero-title {
    position: relative;
}
.hero-title .reveal-line > span {
    transition: letter-spacing 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-title:hover .reveal-line > span {
    letter-spacing: 0.02em;
}

/* ── Status bar: numbers tabular so they don't jitter ── */
.status-value {
    font-variant-numeric: tabular-nums;
}

/* ── Reduced motion: skip everything ── */
@media (prefers-reduced-motion: reduce) {
    .section-head,
    .section-head .section-num,
    .section-head .section-title,
    .section-head .section-tag,
    .about-body > *,
    .about-side,
    .work-row,
    .lab-card,
    .contact-grid,
    .footer-inner {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}