/* DIFF LABS — shared site styles */

:root {
    --bg-base: #06070c;
    --bg-layer: #0d111b;
    --panel-bg: rgba(20, 24, 35, 0.72);
    --panel-border: rgba(255, 255, 255, 0.12);
    --text-strong: #f5f7ff;
    --text-muted: #b3bdd3;
    --accent: #7c8cff;
    --accent-strong: #5e74ff;
    --radius-lg: 1rem;
    --radius-xl: 1.25rem;
    --shadow-soft: 0 20px 45px rgba(0, 0, 0, 0.35);
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
    background:
        radial-gradient(900px 500px at 10% -20%, rgba(124, 140, 255, 0.2), transparent 60%),
        radial-gradient(1000px 500px at 95% -20%, rgba(88, 101, 242, 0.2), transparent 65%),
        var(--bg-base);
    color: var(--text-strong);
}

.fade-in {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .fade-in {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

.glass-panel {
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-soft);
}

.hero-orb {
    background: radial-gradient(circle, rgba(124, 140, 255, 0.25) 0%, rgba(124, 140, 255, 0) 70%);
    filter: blur(16px);
}

.text-muted {
    color: var(--text-muted);
}

.focus-ring:focus-visible {
    outline: 2px solid rgba(124, 140, 255, 0.75);
    outline-offset: 3px;
}

/* Section eyebrow (Enliven-style label) */
.section-eyebrow {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #e2e8f0;
    letter-spacing: 0.04em;
}

/* Button rhythms */
.btn-rhythm {
    --btn-fill: #5e74ff;
    --btn-bg: rgba(94, 116, 255, 0.92);
    --btn-border: rgba(255, 255, 255, 0.18);
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid var(--btn-border);
    background: var(--btn-bg);
    transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.btn-rhythm::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, color-mix(in srgb, var(--btn-fill) 85%, white 15%) 0%, var(--btn-fill) 55%, color-mix(in srgb, var(--btn-fill) 70%, black 30%) 100%);
    transform: translateY(102%);
    transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
    z-index: -1;
}

.btn-rhythm:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.38);
}

.btn-rhythm:hover::before {
    transform: translateY(0%);
}

.btn-rhythm-blue {
    --btn-fill: #3562ff;
    --btn-bg: #244eff;
    --btn-border: rgba(141, 168, 255, 0.45);
}

.btn-rhythm-violet {
    --btn-fill: #8c61ff;
    --btn-bg: rgba(120, 82, 224, 0.55);
    --btn-border: rgba(172, 149, 255, 0.35);
}

.btn-rhythm-emerald {
    --btn-fill: #16b58a;
    --btn-bg: rgba(19, 126, 100, 0.6);
    --btn-border: rgba(110, 231, 183, 0.35);
}

.btn-rhythm-amber {
    --btn-fill: #e3a028;
    --btn-bg: rgba(150, 107, 30, 0.58);
    --btn-border: rgba(245, 198, 108, 0.35);
}

.btn-rhythm-cyan {
    --btn-fill: #2aa4e8;
    --btn-bg: rgba(34, 111, 149, 0.58);
    --btn-border: rgba(125, 211, 252, 0.35);
}

.btn-rhythm-rose {
    --btn-fill: #e460a4;
    --btn-bg: rgba(152, 62, 112, 0.58);
    --btn-border: rgba(251, 146, 176, 0.35);
}

.btn-rhythm-soft {
    --btn-fill: rgba(255, 255, 255, 0.22);
    --btn-bg: rgba(255, 255, 255, 0.05);
    --btn-border: rgba(255, 255, 255, 0.16);
    color: #dbe3ff;
}

/* Project card 3D tilt */
.project-cards-wrap {
    perspective: 1200px;
}

.interactive-project-card {
    position: relative;
    transform-style: preserve-3d;
    transition: transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease;
    will-change: transform;
}

.interactive-project-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    opacity: 0;
    background: radial-gradient(circle at var(--glow-x, 50%) var(--glow-y, 50%), rgba(124, 140, 255, 0.25), transparent 48%);
    transition: opacity 250ms ease;
    pointer-events: none;
}

.interactive-project-card:hover {
    box-shadow: 0 28px 50px rgba(0, 0, 0, 0.45);
    border-color: rgba(255, 255, 255, 0.2);
}

.interactive-project-card:hover::before {
    opacity: 1;
}

.interactive-project-card .card-content {
    transform: translateZ(24px);
}

@media (prefers-reduced-motion: reduce) {
    .interactive-project-card {
        transition: none;
    }
}

/* Floating actions (Enliven-style 우하단 CTA) */
.floating-actions {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.float-btn {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
    color: #fff;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.14);
    transition: transform 200ms ease, box-shadow 200ms ease;
    cursor: pointer;
}

.float-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 32px rgba(0, 0, 0, 0.55);
}

.float-btn--consult {
    background: linear-gradient(180deg, #5e74ff 0%, #3562ff 100%);
}

.float-btn--email {
    background: rgba(20, 24, 35, 0.9);
    border-color: rgba(255, 255, 255, 0.18);
}

.float-btn--top {
    background: rgba(20, 24, 35, 0.9);
    border-color: rgba(255, 255, 255, 0.18);
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease, transform 200ms ease;
}

.float-btn--top.is-visible {
    opacity: 1;
    pointer-events: auto;
}

@media (min-width: 640px) {
    .floating-actions {
        right: 1.5rem;
        bottom: 1.5rem;
        gap: 0.75rem;
    }
    .float-btn {
        width: 3.6rem;
        height: 3.6rem;
        font-size: 0.72rem;
    }
}