:root {
    --indigo-night: #101C4F;
    --washed-cotton: #F4EAD2;
    --turmeric-thread: #E7A928;
    --madder-red: #A6342A;
    --betel-green: #21745A;
    --monsoon-blue: #4EA7C8;
    --charcoal-ink: #17130E;
    --warp-progress: 0;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    color: var(--washed-cotton);
    background: var(--charcoal-ink);
    font-family: "Hind Madurai", sans-serif;
    overflow-x: hidden;
}

button, a { font: inherit; }

.cloth-compiler {
    position: relative;
    min-height: 600vh;
    background:
        radial-gradient(circle at 16% 18%, rgba(78, 167, 200, .18), transparent 28rem),
        radial-gradient(circle at 86% 74%, rgba(166, 52, 42, .18), transparent 30rem),
        linear-gradient(135deg, #17130E 0%, #101C4F 54%, #17130E 100%);
    isolation: isolate;
}

.veranda-grain {
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: .32;
    background-image:
        repeating-linear-gradient(90deg, rgba(244, 234, 210, .03) 0 1px, transparent 1px 8px),
        repeating-linear-gradient(0deg, rgba(231, 169, 40, .025) 0 1px, transparent 1px 11px);
    mix-blend-mode: screen;
    z-index: 1;
}

.bamboo-pole {
    position: fixed;
    top: 2vh;
    bottom: 2vh;
    width: 16px;
    border-radius: 999px;
    background: linear-gradient(90deg, #21745A, #E7A928 44%, #8d6f25, #21745A);
    box-shadow: 0 0 0 2px rgba(23, 19, 14, .4), 0 20px 40px rgba(0,0,0,.35);
    z-index: 2;
}

.pole-left { left: 4vw; transform: rotate(-2deg); }
.pole-right { right: 4vw; transform: rotate(2deg); }

.clothesline {
    position: fixed;
    top: 10vh;
    left: 4vw;
    right: 4vw;
    height: 3px;
    background: repeating-linear-gradient(90deg, var(--washed-cotton) 0 18px, var(--turmeric-thread) 18px 24px, var(--washed-cotton) 24px 42px);
    transform: rotate(-1.5deg);
    z-index: 2;
    opacity: .7;
}

.fan-shadow {
    position: fixed;
    width: 42vw;
    height: 9vw;
    background: rgba(16, 28, 79, .4);
    filter: blur(12px);
    border-radius: 50%;
    z-index: 2;
    pointer-events: none;
    animation: fanSweep 9s ease-in-out infinite alternate;
}
.fan-a { top: 16vh; left: 18vw; transform-origin: 20% 50%; }
.fan-b { bottom: 20vh; right: 4vw; animation-delay: -3s; }

@keyframes fanSweep {
    from { transform: rotate(-18deg) translateX(-4vw); opacity: .12; }
    to { transform: rotate(22deg) translateX(5vw); opacity: .34; }
}

.monsoon-field {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 5;
}

.drop {
    position: absolute;
    width: 2px;
    height: 16px;
    background: linear-gradient(var(--monsoon-blue), transparent);
    opacity: .35;
    animation: fall linear infinite;
}

@keyframes fall { to { transform: translateY(110vh); } }

.seam-nav {
    position: fixed;
    left: 50%;
    bottom: 1.2rem;
    transform: translateX(-50%) rotate(-2deg);
    z-index: 20;
    display: flex;
    gap: .35rem;
    padding: .35rem;
    background: rgba(244, 234, 210, .85);
    border: 2px dashed var(--madder-red);
    box-shadow: 0 14px 30px rgba(0,0,0,.35);
}

.seam-nav a {
    color: var(--charcoal-ink);
    text-decoration: none;
    padding: .35rem .7rem;
    font-family: "Recursive", monospace;
    font-size: .78rem;
    background: transparent;
    transition: background .25s ease, color .25s ease, transform .25s ease;
}

.seam-nav a.active, .seam-nav a:hover {
    color: var(--washed-cotton);
    background: var(--indigo-night);
    transform: rotate(2deg);
}

.scene {
    min-height: 100vh;
    position: relative;
    display: grid;
    place-items: center;
    padding: 8vw;
    overflow: hidden;
    z-index: 3;
}

.cloth-panel, .folded-lungi, .unfolded-cloth, .hanging-cloth {
    background-color: var(--indigo-night);
    background-image:
        linear-gradient(90deg, rgba(244, 234, 210, .88) 0 4px, transparent 4px 15%, rgba(78, 167, 200, .55) 15% 17%, transparent 17% 36%, rgba(33, 116, 90, .55) 36% 39%, transparent 39% 68%, rgba(244, 234, 210, .8) 68% 71%, transparent 71%),
        linear-gradient(0deg, rgba(244, 234, 210, .72) 0 3px, transparent 3px 13%, rgba(166, 52, 42, .62) 13% 15%, transparent 15% 43%, rgba(231, 169, 40, .56) 43% 46%, transparent 46% 74%, rgba(244, 234, 210, .7) 74% 77%, transparent 77%),
        repeating-linear-gradient(45deg, rgba(255,255,255,.025) 0 2px, transparent 2px 5px);
    background-size: 180px 180px, 180px 180px, 14px 14px;
    border: 3px solid var(--washed-cotton);
    box-shadow: 0 35px 80px rgba(0,0,0,.45), inset 0 0 80px rgba(244,234,210,.08);
}

.scene-fold { position: sticky; top: 0; z-index: 8; pointer-events: none; }
.scene-fold.released { pointer-events: none; opacity: calc(1 - min(var(--warp-progress), .9)); }

.fold-stage { perspective: 1200px; pointer-events: auto; }

.folded-lungi {
    position: relative;
    width: min(58vw, 470px);
    aspect-ratio: 1;
    border: none;
    cursor: pointer;
    transform: rotate(-9deg) scale(calc(1 + var(--warp-progress) * .22));
    transform-style: preserve-3d;
    transition: transform .6s cubic-bezier(.2,.8,.2,1);
}

.folded-lungi.unfolding {
    animation: firstUnfold 1.3s cubic-bezier(.16,.85,.27,1) forwards;
}

@keyframes firstUnfold {
    0% { transform: rotate(-9deg) scale(1); }
    45% { transform: rotate(-22deg) scale(1.08) skewX(-8deg); }
    100% { transform: rotate(28deg) scale(1.38) skewX(0); opacity: .08; }
}

.fold-shadow {
    position: absolute;
    inset: 0;
    background: rgba(23,19,14,.32);
    filter: blur(20px);
    transform: translate(22px, 26px) translateZ(-20px);
}
.shadow-two { transform: translate(-20px, 22px) rotate(8deg); opacity: .5; }

.folded-lungi .cloth-panel {
    position: absolute;
    inset: 7%;
    border-width: 2px;
}
.square-a { transform: translate(-6%, 5%) rotate(-4deg); }
.square-b { transform: translate(5%, -4%) rotate(7deg); opacity: .9; }
.square-c { transform: translate(1%, 2%) rotate(-1deg); opacity: .95; }

.identity-label, .tag-caption {
    font-family: "Noto Serif Tamil", serif;
    color: var(--charcoal-ink);
    background: var(--washed-cotton);
    border: 1px solid var(--madder-red);
    box-shadow: 2px 2px 0 var(--turmeric-thread);
}

.identity-label {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(2deg);
    padding: .55rem .9rem;
    font-weight: 700;
    letter-spacing: .04em;
}

.tiny-tag { position: absolute; right: -1rem; bottom: 2rem; padding: .35rem .55rem; font-size: .8rem; transform: rotate(-8deg); }
.courtyard-note { position: absolute; bottom: 15vh; max-width: 32rem; color: rgba(244,234,210,.75); font-family: "Noto Serif Tamil", serif; text-align: center; }

.scene-warp { padding-top: 15vh; }
.unfolded-cloth {
    width: min(1180px, 82vw);
    min-height: 70vh;
    transform: rotate(-10deg) translateX(calc((1 - var(--warp-progress)) * -55vw));
    opacity: calc(.2 + var(--warp-progress) * .8);
    transition: transform .2s linear, opacity .2s linear;
    position: relative;
}

.title-panel {
    position: absolute;
    left: 9%;
    top: 16%;
    width: min(720px, 72vw);
    padding: clamp(1.2rem, 4vw, 4rem);
    transform: rotate(4deg);
}

h1, h2 {
    font-family: "Syne", sans-serif;
    margin: 0;
    line-height: .92;
    letter-spacing: -.055em;
}

h1 { font-size: clamp(3.7rem, 9.5vw, 10.5rem); color: var(--washed-cotton); text-shadow: 5px 5px 0 rgba(166,52,42,.55); }
h2 { font-size: clamp(3rem, 7vw, 8rem); color: var(--washed-cotton); }
p { font-size: clamp(1rem, 1.6vw, 1.35rem); line-height: 1.45; }

.tamil-hum, .tag-caption { display: inline-block; padding: .28rem .55rem; margin-bottom: 1rem; transform: rotate(-2deg); }
.loom-command, pre {
    display: inline-block;
    font-family: "Recursive", monospace;
    color: var(--turmeric-thread);
    background: rgba(23, 19, 14, .76);
    border: 1px dashed var(--washed-cotton);
    padding: .8rem 1rem;
}

.selvedge-stripe { position: absolute; left: 0; right: 0; height: 26px; background: repeating-linear-gradient(90deg, var(--madder-red) 0 18px, var(--washed-cotton) 18px 24px, var(--betel-green) 24px 38px); }
.stripe-top { top: 0; }
.stripe-bottom { bottom: 0; }

.thread-diagram { position: absolute; inset: 14vh 9vw; pointer-events: none; transform: rotate(-10deg); }
.weft-line { position: absolute; left: 8%; width: 0; height: 3px; background: var(--turmeric-thread); box-shadow: 0 0 14px var(--turmeric-thread); transition: width 1.4s ease; }
.scene-warp.active .weft-line { width: 72%; }
.line-one { top: 22%; }.line-two { top: 48%; background: var(--betel-green); box-shadow: 0 0 14px var(--betel-green); transition-delay: .2s; }.line-three { top: 71%; background: var(--monsoon-blue); box-shadow: 0 0 14px var(--monsoon-blue); transition-delay: .4s; }
.knot-marker { position: absolute; width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; background: var(--madder-red); color: var(--washed-cotton); font-family: "Recursive", monospace; font-size: .75rem; box-shadow: 0 0 0 8px rgba(231,169,40,.22); }
.knot-one { top: 18%; right: 28%; }.knot-two { bottom: 22%; left: 28%; background: var(--betel-green); }
.embroidered-cursor { position: absolute; left: 8%; top: 44%; font-size: 4rem; color: var(--turmeric-thread); text-shadow: 0 0 18px var(--turmeric-thread); transform: translateX(calc(var(--warp-progress) * 54vw)); }

.scene-weft { grid-template-columns: .75fr 1.4fr; gap: clamp(1rem, 5vw, 7rem); align-items: center; }
.pleat-panel { padding: clamp(1rem, 3vw, 3rem); transition: transform .5s ease, filter .5s ease; }
.narrow-pleat { min-height: 64vh; transform: rotate(7deg) scaleX(.72); }
.wide-pleat { min-height: 58vh; transform: rotate(-3deg); position: relative; }
.wide-pleat.reweaving { animation: reweave .9s cubic-bezier(.2,.8,.2,1); }
@keyframes reweave { 0%,100% { background-position: 0 0, 0 0, 0 0; transform: rotate(-3deg) skewX(0); } 45% { background-position: 80px 0, 0 -80px, 5px 5px; transform: rotate(-5deg) skewX(-6deg); } }
pre { display: block; white-space: pre-wrap; color: var(--washed-cotton); border-color: var(--turmeric-thread); }
.reweave-button, .knot-button {
    border: 2px solid var(--charcoal-ink);
    color: var(--charcoal-ink);
    background: var(--turmeric-thread);
    padding: .75rem 1rem;
    cursor: pointer;
    box-shadow: 4px 4px 0 var(--madder-red);
    transform: rotate(1deg);
}
.weft-bug { position: absolute; width: 24px; height: 14px; background: var(--madder-red); border-radius: 50% 50% 40% 40%; box-shadow: 0 0 0 2px var(--charcoal-ink); animation: crawl 11s linear infinite; }
.weft-bug::before, .weft-bug::after { content: ""; position: absolute; top: 5px; width: 14px; height: 2px; background: var(--charcoal-ink); }
.weft-bug::before { left: -10px; transform: rotate(28deg); }.weft-bug::after { right: -10px; transform: rotate(-28deg); }
.bug-a { left: 15%; top: 35%; }.bug-b { right: 18%; bottom: 18%; animation-delay: -5s; }
@keyframes crawl { 0% { transform: translateX(-10vw) rotate(0); } 50% { transform: translateX(22vw) translateY(6vh) rotate(8deg); } 100% { transform: translateX(55vw) rotate(-4deg); } }
.tea-ring { position: absolute; width: 150px; height: 130px; border: 8px solid rgba(231,169,40,.22); border-radius: 50%; right: 12vw; top: 20vh; transform: rotate(18deg); }

.scene-knot { align-items: center; }
.knot-cluster { position: relative; width: min(880px, 82vw); }
.knot-panel { padding: clamp(1.5rem, 4vw, 4rem); transform: rotate(5deg); position: relative; min-height: 58vh; }
.safety-pin { position: absolute; right: 11%; top: 10%; width: 90px; height: 32px; border: 5px solid var(--washed-cotton); border-left-color: transparent; border-radius: 50px; transform: rotate(24deg); transition: transform .5s ease; }
.knot-panel.tight .safety-pin, .safety-pin.spin { transform: rotate(390deg); }
.knot-cord { position: absolute; bottom: 18%; width: 46%; height: 7px; background: var(--turmeric-thread); box-shadow: 0 0 18px rgba(231,169,40,.45); transition: transform .5s ease; }
.cord-left { left: 0; transform: rotate(-10deg); }.cord-right { right: 0; transform: rotate(12deg); }
.knot-panel.tight .cord-left { transform: rotate(-4deg) translateX(8%); }.knot-panel.tight .cord-right { transform: rotate(4deg) translateX(-8%); }
.laundry-tag { position: absolute; right: -2rem; bottom: -2rem; display: grid; gap: .25rem; padding: 1rem; width: 190px; color: var(--charcoal-ink); background: var(--washed-cotton); border: 2px dashed var(--madder-red); font-family: "Recursive", monospace; transform: rotate(-7deg); box-shadow: 0 18px 30px rgba(0,0,0,.3); }

.hem-runner { width: min(1050px, 84vw); min-height: 68vh; position: relative; }
.hem-panel { padding: clamp(1.5rem, 4vw, 4rem); border-left: 18px solid var(--madder-red); border-bottom: 18px solid var(--madder-red); transform: rotate(-4deg); }
.folded-corner { position: absolute; right: 3%; top: 4%; width: 220px; height: 220px; background: linear-gradient(135deg, transparent 50%, rgba(244,234,210,.85) 50%); z-index: 5; transform: rotate(-4deg); filter: drop-shadow(-18px 18px 18px rgba(0,0,0,.24)); }
.hem-notes { list-style: none; padding: 0; display: grid; gap: .7rem; font-family: "Recursive", monospace; }
.hem-notes span { display: inline-block; width: 30px; height: 8px; background: var(--betel-green); margin-right: .5rem; box-shadow: 0 0 10px var(--betel-green); }
.chalk-mark { position: absolute; color: rgba(244,234,210,.72); font-family: "Recursive", monospace; font-size: clamp(1rem, 2vw, 1.5rem); transform: rotate(5deg); }
.mark-a { left: -2%; bottom: 9%; }.mark-b { right: 4%; top: 2%; transform: rotate(-8deg); }

.scene-night { min-height: 120vh; }
.hanging-cloth { width: min(940px, 78vw); min-height: 72vh; transform-origin: 50% 0; animation: flutter 5s ease-in-out infinite alternate; }
@keyframes flutter { from { transform: rotate(-2deg) skewX(-1deg); } to { transform: rotate(2deg) skewX(1.8deg); } }
.night-panel { margin: 8vh auto; width: 82%; min-height: 52vh; padding: clamp(1.5rem, 4vw, 4rem); background-color: rgba(16,28,79,.8); }
.glow-threads { display: grid; gap: 1rem; margin-top: 2rem; }
.glow-threads span { height: 4px; width: 72%; background: var(--turmeric-thread); box-shadow: 0 0 20px var(--turmeric-thread); animation: threadGlow 2.5s ease-in-out infinite alternate; }
.glow-threads span:nth-child(2) { width: 50%; background: var(--monsoon-blue); box-shadow: 0 0 20px var(--monsoon-blue); animation-delay: -.6s; }
.glow-threads span:nth-child(3) { width: 65%; background: var(--betel-green); box-shadow: 0 0 20px var(--betel-green); animation-delay: -1.2s; }
.glow-threads span:nth-child(4) { width: 38%; background: var(--madder-red); box-shadow: 0 0 20px var(--madder-red); animation-delay: -1.8s; }
@keyframes threadGlow { from { opacity: .35; transform: scaleX(.85); } to { opacity: 1; transform: scaleX(1); } }

@media (max-width: 800px) {
    .scene { padding: 6rem 1rem; }
    .scene-weft { grid-template-columns: 1fr; }
    .seam-nav { width: 92vw; overflow-x: auto; justify-content: start; }
    .unfolded-cloth, .hanging-cloth { width: 92vw; }
    .title-panel { width: 84vw; left: 4%; }
    .laundry-tag { right: .5rem; }
    .bamboo-pole { display: none; }
}