/* dilemma.studio - Inflated Pastoral Neon */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
    --fuchsia:#FF2D8A;
    --violet:#8B5CF6;
    --cyan:#06D6A0;
    --charcoal:#0F0F14;
    --parchment:#F5EDE3;
    --cream:#E8DDD0;
    --lavender:#9B8EC4;
    --sepia:#3D3429;
}

body{
    background:var(--charcoal);
    color:var(--cream);
    font-family:'Lora',serif;
    font-weight:400;
    font-size:clamp(1rem,1.2vw,1.15rem);
    line-height:1.7;
    overflow-x:hidden;
}

/* Film grain */
.grain-overlay{
    position:fixed;
    inset:0;
    z-index:999;
    pointer-events:none;
    opacity:0.07;
    mix-blend-mode:overlay;
    animation:grainShift 0.1s steps(2) infinite;
}

@keyframes grainShift{
    0%{transform:translate(0,0)}
    50%{transform:translate(-1px,1px)}
    100%{transform:translate(1px,-1px)}
}

/* Tableaux */
.tableau{
    position:relative;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:clamp(24px,4vw,60px);
    overflow:hidden;
}

/* Tableau I: Hero */
.tableau-1{
    background:var(--charcoal);
}

.hero-word{
    font-family:'Cormorant Garamond',serif;
    font-weight:600;
    font-size:clamp(4rem,12vw,11rem);
    letter-spacing:-0.03em;
    line-height:1.1;
    color:var(--fuchsia);
    text-shadow:0 0 4px var(--fuchsia),0 0 11px var(--fuchsia),0 0 19px var(--fuchsia),0 0 40px rgba(255,45,138,0.5),0 0 73px rgba(255,45,138,0.2);
    text-align:center;
    opacity:0;
    animation:heroFade 2s cubic-bezier(0.22,1,0.36,1) 0.8s forwards;
}

@keyframes heroFade{to{opacity:1}}

.fern-hero{
    margin:2rem 0 1rem;
    height:100px;
    opacity:0;
    animation:heroFade 1.5s ease 2s forwards;
}

.fern-svg{height:100%;width:auto}

.draw-path{
    stroke-dasharray:300;
    stroke-dashoffset:300;
}

.draw-on-view.drawn .draw-path{
    stroke-dashoffset:0;
    transition:stroke-dashoffset 1.5s cubic-bezier(0.22,1,0.36,1);
}

.hero-sub{
    font-family:'DM Sans',sans-serif;
    font-weight:500;
    font-size:clamp(0.7rem,0.9vw,0.85rem);
    letter-spacing:0.15em;
    text-transform:uppercase;
    color:var(--lavender);
    margin-left:30%;
    opacity:0;
    animation:heroFade 1s ease 3s forwards;
}

/* Z-pattern grids */
.z-grid{
    display:grid;
    width:100%;
    min-height:80vh;
    align-items:center;
}

.z-left{grid-template-columns:60% 40%}
.z-right{grid-template-columns:40% 60%}

.zone-a{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:50vh;
}

.zone-b{
    padding:clamp(24px,3vw,48px);
}

/* Inflated blobs */
.blob-cluster{
    position:relative;
    width:100%;
    height:400px;
}

.blob{
    position:absolute;
    border-radius:50%;
}

.blob-1{
    width:200px;height:200px;
    top:20%;left:15%;
    background:radial-gradient(circle at 35% 30%,rgba(255,45,138,0.5),rgba(255,45,138,0.2) 50%,rgba(139,92,246,0.15) 70%,transparent);
    filter:drop-shadow(0 20px 40px rgba(255,45,138,0.25));
}

.blob-2{
    width:120px;height:120px;
    top:10%;left:55%;
    background:radial-gradient(circle at 40% 35%,rgba(139,92,246,0.5),rgba(139,92,246,0.2) 50%,transparent);
    filter:drop-shadow(0 15px 30px rgba(139,92,246,0.2));
}

.blob-3{
    width:80px;height:80px;
    top:55%;left:35%;
    background:radial-gradient(circle at 35% 30%,rgba(6,214,160,0.4),rgba(6,214,160,0.15) 50%,transparent);
    filter:drop-shadow(0 10px 20px rgba(6,214,160,0.15));
}

/* Heart form */
.heart-form{
    width:240px;height:220px;
    position:relative;
    margin:0 auto;
}

.heart-form::before,.heart-form::after{
    content:'';
    position:absolute;
    width:140px;height:220px;
    border-radius:140px 140px 0 0;
}

.heart-form::before{
    left:0;
    transform:rotate(-45deg);
    transform-origin:bottom right;
    background:radial-gradient(circle at 40% 30%,rgba(6,214,160,0.4),rgba(6,214,160,0.15) 50%,transparent);
    filter:drop-shadow(0 20px 40px rgba(6,214,160,0.2));
}

.heart-form::after{
    right:0;
    transform:rotate(45deg);
    transform-origin:bottom left;
    background:radial-gradient(circle at 60% 30%,rgba(139,92,246,0.4),rgba(139,92,246,0.15) 50%,transparent);
    filter:drop-shadow(0 20px 40px rgba(139,92,246,0.2));
}

/* Text cards */
.text-card{
    background:var(--parchment);
    padding:clamp(32px,4vw,48px);
    border:2px solid rgba(139,92,246,0.3);
    position:relative;
    overflow:hidden;
}

.leaf-watermark{
    position:absolute;
    top:10%;right:-10%;
    width:200px;height:200px;
    background:var(--fuchsia);
    opacity:0.06;
    border-radius:50% 0 50% 50%;
    transform:rotate(-12deg);
}

.body-text{
    color:var(--charcoal);
    max-width:50ch;
    position:relative;
    z-index:1;
}

.section-heading{
    font-family:'Cormorant Garamond',serif;
    font-weight:600;
    font-size:clamp(1.6rem,3vw,3rem);
    letter-spacing:-0.03em;
    line-height:1.1;
    color:var(--charcoal);
    margin-bottom:1.5rem;
}

.pullquote{
    font-family:'Cormorant Garamond',serif;
    font-weight:300;
    font-size:clamp(1.2rem,2vw,1.6rem);
    letter-spacing:0.02em;
    line-height:1.35;
    color:var(--charcoal);
    margin-top:1.5rem;
    padding-bottom:4px;
    border-bottom:2px solid var(--fuchsia);
    box-shadow:0 2px 0 0 rgba(255,45,138,0.3),0 2px 8px rgba(255,45,138,0.15);
}

/* Slide reveal */
.slide-reveal{
    clip-path:inset(0 100% 0 0);
    transition:clip-path 1s cubic-bezier(0.22,1,0.36,1);
}

.slide-reveal.revealed{
    clip-path:inset(0 0 0 0);
}

/* Vine bridge */
.vine-bridge{
    height:30vh;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    transform:skewY(-3deg);
    overflow:hidden;
}

.neon-line{
    width:0;
    height:1px;
    background:var(--fuchsia);
    box-shadow:0 0 12px var(--fuchsia),0 0 24px rgba(255,45,138,0.3);
    transition:width 1.5s cubic-bezier(0.22,1,0.36,1);
}

.neon-line.extended{width:80%}

.neon-violet{
    background:var(--violet);
    box-shadow:0 0 12px var(--violet),0 0 24px rgba(139,92,246,0.3);
}

.tendril-svg{
    position:absolute;
    width:60%;
    bottom:20%;
}

/* Tableau V: Closing */
.tableau-5{
    min-height:80vh;
    background:linear-gradient(180deg,var(--charcoal) 0%,#141018 100%);
}

.closing-fern{
    height:120px;
    margin-bottom:2rem;
}

.fern-svg-lg{height:100%;width:auto}

.closing-line{
    font-family:'Cormorant Garamond',serif;
    font-weight:300;
    font-size:clamp(1.2rem,2.5vw,2rem);
    letter-spacing:0.02em;
    color:var(--cream);
    text-align:center;
    max-width:30ch;
}

.closing-meta{
    display:block;
    margin-top:2rem;
    font-family:'DM Sans',sans-serif;
    font-weight:500;
    font-size:clamp(0.65rem,0.8vw,0.75rem);
    letter-spacing:0.15em;
    text-transform:uppercase;
    color:var(--lavender);
    opacity:0.4;
}

/* Responsive */
@media(max-width:768px){
    .z-left,.z-right{
        grid-template-columns:1fr;
    }

    .zone-a{min-height:30vh}

    .blob-cluster{height:250px}
    .blob-1{width:140px;height:140px}
    .blob-2{width:80px;height:80px}
    .blob-3{width:60px;height:60px}
}

@media(prefers-reduced-motion:reduce){
    .grain-overlay{animation:none}
    .hero-word{animation:none;opacity:1}
    .fern-hero,.hero-sub{animation:none;opacity:1}
    .draw-path{stroke-dashoffset:0}
    .slide-reveal{clip-path:none}
    .neon-line{width:80%;transition:none}
}