/* ========================================
   ENHANCE — интерактивный слой студии
   Частицы · 3D-tilt · spotlight · grain · reveal · parallax
   Бренд: terracotta #e07a5f, Space Grotesk. Уважает prefers-reduced-motion.
   ======================================== */

/* --- Kill horizontal scroll from reveal-offsets / blobs / marquee --- */
html,
body {
    overflow-x: hidden;
    max-width: 100%;
}

/* --- Hero particle canvas --- */
.hero-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 0.9;
}

.hero-content {
    position: relative;
    z-index: 1;
}

/* --- Film grain / atmosphere --- */
.grain {
    position: fixed;
    inset: 0;
    z-index: 9998;
    pointer-events: none;
    /* no mix-blend-mode: blending a fixed full-screen layer forces a full-page
       recomposite on every scroll frame (a common jank source). Plain low-opacity
       noise keeps the texture without the per-frame cost. */
    opacity: 0.045;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
}

.light-mode .grain {
    opacity: 0.04;
}

/* --- 3D Tilt cards --- */
.tilt {
    transform-style: preserve-3d;
    transform: perspective(900px) rotateX(0) rotateY(0);
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.tilt.is-tilting {
    transition: box-shadow 0.3s ease;
}

/* Spotlight glow that follows the cursor inside a card.
   z-index:-1 keeps it above the card background but below all content;
   the .tilt transform always establishes a stacking context, so it stays contained. */
.tilt-glow {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.35s ease;
    background: radial-gradient(
        260px circle at var(--mx, 50%) var(--my, 50%),
        var(--accent-glow),
        transparent 60%
    );
    z-index: -1;
}

.tilt.is-tilting .tilt-glow {
    opacity: 0.9;
}

/* Modal note for private repos */
.modal-private {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    color: var(--text-muted);
    padding: 0.6rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
}

.modal-private i {
    color: var(--accent);
}

/* --- Hero load reveal (blur-up) --- */
.hero-reveal {
    opacity: 0;
    transform: translateY(26px);
    filter: blur(10px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero.loaded .hero-reveal {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

.hero.loaded .hero-reveal:nth-child(1) { transition-delay: 0.05s; }
.hero.loaded .hero-reveal:nth-child(2) { transition-delay: 0.13s; }
.hero.loaded .hero-reveal:nth-child(3) { transition-delay: 0.21s; }
.hero.loaded .hero-reveal:nth-child(4) { transition-delay: 0.29s; }
.hero.loaded .hero-reveal:nth-child(5) { transition-delay: 0.37s; }
.hero.loaded .hero-reveal:nth-child(6) { transition-delay: 0.45s; }

/* --- Animated accent underline on hero title --- */
.hero-title {
    position: relative;
    display: inline-block;
}

.hero-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    height: 3px;
    width: 0;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--accent), var(--accent-secondary));
    transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.5s;
}

.hero.loaded .hero-title::after {
    width: 72%;
}

/* --- Section label shimmer --- */
.section-label {
    position: relative;
    overflow: hidden;
}

.section-label::after {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        var(--accent-glow),
        transparent
    );
    transform: skewX(-20deg);
    animation: labelShimmer 4.5s ease-in-out infinite;
}

@keyframes labelShimmer {
    0%, 60% { left: -120%; }
    100% { left: 220%; }
}

/* --- Scroll parallax targets get smoothed transform --- */
.parallax {
    will-change: transform;
}

/* --- Hand video as atmospheric hero background (behind the text) --- */
.hero-hand-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 22% center;
    z-index: 0;
    /* no per-frame filter here (expensive on a playing video) — darkening is handled
       by the static scrim below, which costs nothing per frame */
    opacity: 0;
    transform: scale(1.08);
    transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1),
        transform 1.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero.loaded .hero-hand-bg {
    opacity: 0.42;
    transform: scale(1);
}

/* scrim: darkest where the text sits (left), keeps copy legible over the hand */
.hero-hand-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(70% 80% at 40% 72%, rgba(14, 12, 16, 0.6), transparent 72%),
        linear-gradient(
            90deg,
            rgba(14, 12, 16, 0.92) 0%,
            rgba(14, 12, 16, 0.8) 48%,
            rgba(14, 12, 16, 0.86) 100%
        ),
        linear-gradient(0deg, var(--bg-primary) 0%, rgba(14, 12, 16, 0) 34%);
}

.light-mode .hero-hand-scrim {
    background:
        linear-gradient(
            90deg,
            rgba(253, 246, 238, 0.85) 0%,
            rgba(253, 246, 238, 0.5) 48%,
            rgba(253, 246, 238, 0.7) 100%
        ),
        linear-gradient(0deg, var(--bg-primary) 0%, rgba(253, 246, 238, 0) 32%);
}

/* keep hero content above the hand background + scrim */
.hero .hero-content {
    position: relative;
    z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
    .hero-hand-bg {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* About: tighten heading→text gap + give the short copy room to breathe */
.about .section-header {
    margin-bottom: 32px;
}

.about-content {
    gap: 44px;
}

/* --- Private repo cards (limited access) --- */
.repo-card--private {
    border-style: dashed;
    border-color: var(--border-hover);
}

.repo-private-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 0.85rem;
}

.repo-private {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.repo-private i {
    color: var(--accent);
}

/* --- Case studies: sticky-stacking cards --- */
.projects-grid.case-stack {
    display: flex;
    flex-direction: column;
    gap: 26px;
    margin-bottom: 48px;
}

.case-card {
    position: sticky;
    top: calc(96px + var(--i, 0) * 16px);
    min-height: 52vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(1.8rem, 5vw, 4.5rem);
    border: 1px solid var(--border-hover);
    border-radius: var(--radius-xl);
    background: var(--bg-card);
    overflow: hidden;
    transform-origin: center top;
    will-change: transform;
    box-shadow: 0 -16px 50px -28px rgba(0, 0, 0, 0.7);
}

/* huge faded number watermark */
.case-num {
    position: absolute;
    top: clamp(-1rem, 0.5vw, 0.5rem);
    right: clamp(1rem, 3vw, 3.5rem);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(7rem, 20vw, 18rem);
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--accent);
    opacity: 0.09;
    pointer-events: none;
    z-index: 0;
    user-select: none;
}

.case-card > *:not(.case-num) {
    position: relative;
    z-index: 1;
}

.case-card .project-header {
    margin-bottom: 1.6rem;
}

.case-card .project-icon {
    width: 64px;
    height: 64px;
    font-size: 1.6rem;
}

.case-card .project-title {
    font-size: clamp(1.7rem, 4vw, 3rem);
    line-height: 1.05;
    margin-bottom: 1rem;
    max-width: 18ch;
}

.case-card .project-description {
    font-size: clamp(1rem, 1.5vw, 1.3rem);
    line-height: 1.6;
    max-width: 58ch;
    margin-bottom: 1.6rem;
}

.case-card .project-tags .tag {
    font-size: 0.95rem;
    padding: 0.5rem 1rem;
}

/* --- Flagship case extras: capability list, metrics, access proof --- */

/* Capability checklist — "what it actually does" */
.case-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem 1.6rem;
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
}

.case-highlights li {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: clamp(0.92rem, 1.05vw, 1.05rem);
    font-weight: 500;
    color: var(--text-secondary);
}

.case-highlights li i {
    display: grid;
    place-items: center;
    width: 1.35rem;
    height: 1.35rem;
    flex: none;
    font-size: 0.66rem;
    color: var(--accent);
    background: var(--accent-soft);
    border-radius: 50%;
}

/* Numeric metrics — data as a design element */
.case-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
}

.case-metrics li {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.75rem 1.15rem;
    min-width: 5.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--bg-secondary) 55%, transparent);
}

.case-metrics li b {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.3vw, 2.05rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--accent);
}

.case-metrics li b i {
    font-style: normal;
    font-size: 0.55em;
    color: var(--text-muted);
}

.case-metrics li span {
    font-size: 0.82rem;
    color: var(--text-muted);
}

/* Access / proof line — live address or private status */
.case-access {
    margin: 0 0 1.5rem;
}

.case-access-link {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.62rem 1.05rem;
    border: 1px solid var(--border-hover);
    border-radius: 999px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    background: var(--accent-soft);
    transition: transform 0.3s var(--ease-out-expo, cubic-bezier(0.22, 1, 0.36, 1)),
        box-shadow 0.3s ease, border-color 0.25s ease;
}

.case-access-link > i:first-child {
    color: var(--accent);
}

.case-access-go {
    font-size: 0.78rem;
    opacity: 0.65;
}

a.case-access-link:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
    box-shadow: 0 14px 30px -14px var(--accent-glow);
}

a.case-access-link:hover .case-access-go {
    opacity: 1;
}

.case-access.is-locked .case-access-link {
    background: transparent;
    border-style: dashed;
    color: var(--text-muted);
    font-weight: 500;
    cursor: default;
}

.case-access.is-locked .case-access-link i {
    color: var(--text-secondary);
}

/* Flagship distinction — accent rail on the top three cases */
.case-stack .case-card:nth-child(-n+3) {
    border-color: var(--border-hover);
}

.case-stack .case-card:nth-child(-n+3)::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), var(--accent-secondary, #f2a65a), transparent 78%);
    z-index: 2;
}

@media (max-width: 768px) {
    .case-card {
        min-height: 64vh;
        top: calc(80px + var(--i, 0) * 12px);
    }

    .case-metrics li {
        flex: 1 1 calc(50% - 0.4rem);
        min-width: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .case-card {
        position: static;
        transform: none !important;
        min-height: 0;
    }
}

/* --- Services CTA banner (replaces pricing) --- */
.services-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
    margin-top: 3rem;
    padding: 2.2rem 2.6rem;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-hover);
    background:
        radial-gradient(120% 140% at 0% 0%, var(--accent-soft), transparent 55%),
        var(--bg-card);
    position: relative;
    overflow: hidden;
}

.services-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 30%, var(--accent-glow) 50%, transparent 70%);
    background-size: 250% 100%;
    opacity: 0.25;
    animation: ctaSheen 6s ease-in-out infinite;
    pointer-events: none;
}

.services-cta__text {
    max-width: 60ch;
    position: relative;
    z-index: 1;
}

.services-cta__text h3 {
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 1rem + 1.4vw, 2rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin-bottom: 0.6rem;
}

.services-cta__text p {
    color: var(--text-secondary);
    font-size: 1.02rem;
    line-height: 1.6;
}

.services-cta__btn {
    position: relative;
    z-index: 1;
    white-space: nowrap;
    flex-shrink: 0;
}

@keyframes ctaSheen {
    0%, 100% { background-position: 140% 0; }
    50% { background-position: -40% 0; }
}

@media (max-width: 640px) {
    .services-cta {
        padding: 1.8rem 1.4rem;
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .services-cta::before { animation: none; opacity: 0.12; }
}

/* --- Marquee for tech stack (optional decorative strip) --- */
.tech-marquee {
    overflow: hidden;
    white-space: nowrap;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.tech-marquee__track {
    display: inline-flex;
    gap: 3rem;
    padding: 0.5rem 1.5rem;
    animation: marquee 26s linear infinite;
}

.tech-marquee__track span {
    font-family: var(--font-display);
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    text-transform: uppercase;
}

.tech-marquee:hover .tech-marquee__track {
    animation-play-state: paused;
}

@keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* ===== Cinematic reveal upgrades ===== */

/* Softer blur-up on existing scroll reveals */
.fade-in {
    filter: blur(8px);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.8s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.fade-in.visible {
    filter: blur(0);
}

/* Section title — mask wipe from bottom up */
.js-title {
    opacity: 0;
    transform: translateY(26px);
    clip-path: inset(0 0 100% 0);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        clip-path 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: clip-path, transform;
}

.js-title.is-in {
    opacity: 1;
    transform: translateY(0);
    clip-path: inset(0 0 -10% 0);
}

/* Section label — slide + fade */
.js-label {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.js-label.is-in {
    opacity: 1;
    transform: translateY(0);
}

/* Process timeline — alternating slide-in */
.timeline-item.js-step {
    opacity: 0;
    transform: translateX(-48px);
    transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.timeline-item.js-step:nth-child(even) {
    transform: translateX(48px);
}

.timeline-item.js-step.is-in {
    opacity: 1;
    transform: translateX(0);
}

/* On phones slide up instead of sideways — avoids any horizontal overflow */
@media (max-width: 640px) {
    .timeline-item.js-step,
    .timeline-item.js-step:nth-child(even) {
        transform: translateY(28px);
    }
    .timeline-item.js-step.is-in {
        transform: translateY(0);
    }
}

/* Service card icon — lively hover */
.service-card .service-icon {
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.4s ease;
}

.service-card:hover .service-icon {
    transform: translateY(-4px) rotate(-6deg) scale(1.08);
    box-shadow: 0 12px 30px -8px var(--accent-glow);
}

/* Hero title — animated gradient sheen sweep */
.hero-title {
    background: linear-gradient(
        100deg,
        var(--text-primary) 0%,
        var(--text-primary) 38%,
        var(--accent-secondary) 50%,
        var(--text-primary) 62%,
        var(--text-primary) 100%
    );
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: nameSheen 7s ease-in-out infinite;
}

@keyframes nameSheen {
    0%, 100% { background-position: 130% 0; }
    50% { background-position: -30% 0; }
}

/* Reduced motion: disable reveal transforms, show content */
@media (prefers-reduced-motion: reduce) {
    .fade-in { filter: none !important; }
    .js-title, .js-label, .timeline-item.js-step {
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
        transition: none !important;
    }
    .hero-title {
        animation: none;
        -webkit-text-fill-color: var(--text-primary);
    }
}

/* --- Reduced motion: disable heavy interactivity --- */
@media (prefers-reduced-motion: reduce) {
    .hero-canvas { display: none; }
    .grain { display: none; }
    .tilt {
        transform: none !important;
        transition: none !important;
    }
    .tilt-glow { display: none; }
    .hero-reveal {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
    .hero-title::after { width: 72%; transition: none; }
    .section-label::after { animation: none; display: none; }
    .tech-marquee__track { animation: none; }
}

/* --- Touch / small screens: skip tilt, keep look --- */
@media (max-width: 1023px) {
    .tilt { transform: none !important; }
    .tilt-glow { display: none; }
    .hero-canvas { opacity: 0.6; }
}