/* ============================================================
   WORK · highlights
   ============================================================ */

main { position: relative; z-index: 2; }

/* ───────── HERO ───────── */
.work-hero {
    position: relative;
    min-height: 92vh;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: 3rem;
    padding: 9rem 4.5% 4rem;
    overflow: hidden;
}
.work-hero-glow {
    position: absolute;
    width: 60vw; height: 60vw;
    right: -10%; top: -5%;
    background: radial-gradient(circle, rgba(232,132,58,0.20) 0%, transparent 62%);
    pointer-events: none;
    animation: glowDrift 15s ease-in-out infinite;
}
@keyframes glowDrift { 0%,100%{ transform: translate(0,0) scale(1);} 50%{ transform: translate(-3%,2%) scale(1.06);} }

.work-kicker {
    display: inline-block;
    font-size: 0.82rem; letter-spacing: 4px; text-transform: uppercase;
    color: var(--accent-deep); font-weight: 600; margin-bottom: 1.3rem;
}
.work-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(3rem, 8vw, 7rem);
    line-height: 0.88;
    letter-spacing: -2px;
    margin-bottom: 1.6rem;
}
.work-title .block { display: block; }
.work-title .outline { color: transparent; -webkit-text-stroke: 2px var(--ink); }
.hero-desc {
    max-width: 46ch;
    font-size: clamp(0.95rem, 1.3vw, 1.1rem);
    line-height: 1.75;
    color: var(--ink-soft);
}

/* infinity scrolling stack */
.hero-right { position: relative; }
.infinity-box {
    height: 70vh;
    border-radius: var(--r-card);
    overflow: hidden;
    box-shadow: var(--shadow);
    border: 6px solid #fff8ee;
    background: var(--paper-2);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
}
.infinity-track {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    animation: infinityScroll 30s linear infinite;
    will-change: transform;
}
.infinity-track img {
    width: 100%;
    border-radius: 14px;
    object-fit: cover;
}
@keyframes infinityScroll { to { transform: translateY(-50%); } }

/* ───────── PROJECT SECTIONS ───────── */
.project-section { padding: 5rem 4.5%; position: relative; }
.project-box {
    max-width: 1150px;
    margin: 0 auto;
    background: #fff8ee;
    border: 1.5px solid var(--ink);
    border-radius: 30px;
    padding: clamp(1.6rem, 4vw, 3.5rem);
    box-shadow: var(--shadow-sm);
}
.project-header { margin-bottom: 2.4rem; }
.proj-index {
    display: inline-block;
    font-size: 0.8rem; letter-spacing: 2px; text-transform: uppercase;
    color: var(--accent-deep); font-weight: 600; margin-bottom: 1rem;
}
.proj-index.center { display: block; text-align: center; }
.project-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2.4rem, 6vw, 5rem);
    line-height: 0.9;
    letter-spacing: -2px;
    margin-bottom: 1.2rem;
}
.project-text {
    max-width: 60ch;
    font-size: 0.98rem;
    line-height: 1.8;
    color: var(--ink-soft);
}
.project-images { display: flex; flex-direction: column; gap: 1.4rem; }
.full-width-img {
    width: 100%;
    border-radius: 18px;
    object-fit: cover;
    box-shadow: var(--shadow-sm);
}

/* Rasam link box */
.rasam-linkbox {
    position: relative;
    display: block;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.rasam-img { width: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out); }
.rasam-linkbox:hover .rasam-img { transform: scale(1.04); }
.rasam-visit {
    position: absolute;
    right: 1.2rem; bottom: 1.2rem;
    background: var(--accent);
    color: #fff;
    padding: 0.7rem 1.4rem;
    border-radius: 100px;
    font-size: 0.85rem; font-weight: 600;
    transform: translateY(8px);
    opacity: 0;
    transition: transform 0.4s var(--ease-spring), opacity 0.4s;
}
.rasam-linkbox:hover .rasam-visit { transform: translateY(0); opacity: 1; }

/* Social media gallery */
.section-social { text-align: center; }
.social-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2.2rem, 6vw, 4.5rem);
    letter-spacing: -1px;
    margin-bottom: 2rem;
    text-transform: lowercase;
}
.social-box {
    max-width: 560px;
    margin: 0 auto;
    aspect-ratio: 4 / 5;
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    border: 6px solid #fff8ee;
    box-shadow: var(--shadow);
    background: var(--paper-2);
}
.social-gallery { position: relative; width: 100%; height: 100%; }
.gallery-img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.04);
    transition: opacity 0.9s ease, transform 0.9s ease;
}
.gallery-img.active { opacity: 1; transform: scale(1); }

@media screen and (max-width: 980px) {
    .work-hero { grid-template-columns: 1fr; }
    .infinity-box { height: 55vh; }
}