*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{overflow-x:hidden;font-family:'DM Sans',sans-serif;font-weight:400;font-size:clamp(1rem,1.6vw,1.2rem);line-height:1.7;letter-spacing:0.01em}

.field{position:relative;overflow:hidden;width:100%}
.field-1{min-height:110vh;background:#FFFDF5;color:#1A1A1A}
.field-2{min-height:130vh;background:#0B0B0B;color:#F0ECE3}
.field-3{min-height:160vh;background:#FFFDF5;color:#1A1A1A}
.field-4{min-height:100vh;background:#0B0B0B;color:#F0ECE3;display:flex;align-items:center;justify-content:center}
.field-5{min-height:90vh;background:#FFFDF5;color:#1A1A1A;position:relative}

/* Navigation */
.nav-cluster{position:fixed;bottom:24px;right:24px;z-index:1000;display:flex;flex-direction:column;gap:6px;transform:rotate(-4deg);padding:16px;border-radius:20px}
.nav-blob{position:absolute;inset:-10px;background:#00E5C1;opacity:0.2;border-radius:40% 60% 50% 50%/60% 40% 60% 40%;z-index:-1;animation:blobMorph 12s ease-in-out infinite alternate}
.nav-link{font-family:'Caveat',cursive;font-size:clamp(1.1rem,2vw,1.5rem);color:#FF2D8A;text-decoration:none;transition:transform 0.1s}
.nav-cluster:hover .nav-link{animation:jitter 50ms steps(4) infinite}
@keyframes jitter{0%{transform:translate(0,0)}25%{transform:translate(2px,-1px)}50%{transform:translate(-2px,2px)}75%{transform:translate(1px,-2px)}100%{transform:translate(-1px,1px)}}

/* Atmosphere blobs */
.atmo-blob{position:absolute;border-radius:50%;filter:blur(30px);z-index:0;pointer-events:none}
.atmo-1{width:80vw;height:80vw;top:-20vw;left:-10vw;background:#FF2D8A;opacity:0.14;animation:drift1 25s ease-in-out infinite alternate}
.atmo-2{width:60vw;height:60vw;top:30vh;right:-15vw;background:#BAFF39;opacity:0.12;animation:drift2 22s ease-in-out infinite alternate}
.atmo-3{width:70vw;height:70vw;bottom:-20vw;left:20vw;background:#00E5C1;opacity:0.15;animation:drift3 28s ease-in-out infinite alternate}
@keyframes drift1{0%{transform:translate(0,0)}100%{transform:translate(15vw,10vw)}}
@keyframes drift2{0%{transform:translate(0,0)}100%{transform:translate(-20vw,8vw)}}
@keyframes drift3{0%{transform:translate(0,0)}100%{transform:translate(10vw,-15vw)}}

/* Title */
.title-main{font-family:'Bungee Shade',cursive;font-size:clamp(3.5rem,11vw,9rem);text-transform:uppercase;letter-spacing:-0.02em;line-height:0.9;position:absolute;top:25%;left:10%;z-index:2;color:#1A1A1A}
.title-suffix{font-family:'Caveat',cursive;font-size:clamp(2rem,5vw,4.5rem);color:#FF2D8A;position:absolute;top:calc(25% + clamp(3.5rem,11vw,9rem));left:calc(10% + clamp(10rem,30vw,40rem));transform:rotate(-8deg);z-index:2}
.field1-question{position:absolute;left:65%;top:85%;font-family:'DM Sans',sans-serif;font-size:clamp(0.9rem,1.4vw,1.1rem);color:#1A1A1A;opacity:0.5;max-width:30ch;z-index:2}

/* Particle field */
.particle-field{position:absolute;inset:0;pointer-events:none;z-index:1}

/* Geometric shapes */
.geo-shape{position:absolute;z-index:1;pointer-events:none}
.geo-tri{width:0;height:0;border-left:3vw solid transparent;border-right:3vw solid transparent;border-bottom:5vw solid #0B0B0B;opacity:0.6}
.geo-tri-light{width:0;height:0;border-left:3vw solid transparent;border-right:3vw solid transparent;border-bottom:5vw solid #FFFDF5;opacity:0.4}
.geo-diamond{width:4vw;height:4vw;background:#00E5C1;opacity:0.6;transform:rotate(45deg)}
.geo-circle-stroke{width:6vw;height:6vw;border:2px dashed #0B0B0B;border-radius:50%;animation:spin 30s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.geo-1{bottom:20%;right:15%;transform:rotate(20deg)}
.geo-2{bottom:30%;right:25%;transform:rotate(-15deg)}
.geo-3{bottom:15%;right:35%}
.geo-4{bottom:25%;right:8%}
.geo-5{bottom:18%;right:22%}
.geo-f2-1{top:10%;left:5%;transform:rotate(30deg)}
.geo-f2-2{bottom:15%;right:8%;transform:rotate(-20deg)}
.geo-f2-3{top:40%;right:3%;transform:rotate(10deg)}

/* Field 2 blobs */
.blob-left,.blob-right{position:absolute;padding:clamp(32px,6vw,60px);z-index:2}
.blob-left{width:40vw;top:15vh;left:8vw;background:#FF2D8A;opacity:0.85;border-radius:43% 57% 52% 48%/58% 42% 58% 42%;mix-blend-mode:screen}
.blob-right{width:35vw;top:35vh;left:35vw;background:#00E5C1;opacity:0.85;border-radius:55% 45% 48% 52%/42% 58% 46% 54%;mix-blend-mode:screen}
.blob-inner{position:relative;z-index:3}
.blob-inner p{margin-bottom:1em;color:#F0ECE3;font-size:clamp(0.9rem,1.3vw,1.05rem)}

.annotation{font-family:'Caveat',cursive;font-size:clamp(1.3rem,2.8vw,2.2rem);color:#BAFF39;position:absolute;z-index:4;white-space:nowrap}
.ann-1{top:12%;right:10%;transform:rotate(-7deg)}
.ann-2{top:55%;left:5%;transform:rotate(5deg)}
.ann-3{bottom:8%;right:15%;transform:rotate(-12deg)}

/* Field 3 clusters */
.cluster{position:relative;padding:clamp(20px,4vw,48px);z-index:2}
.field-3{display:grid;grid-template-columns:repeat(7,1fr);gap:clamp(8px,1.5vw,16px);padding:clamp(16px,4vw,48px);align-content:start}
.cluster-1{grid-column:1/4;transform:rotate(-3deg);margin-top:6vh}
.cluster-2{grid-column:4/8;transform:rotate(4deg);margin-top:2vh}
.cluster-3{grid-column:2/6;transform:rotate(-2deg)}
.cluster-4{grid-column:1/5;transform:rotate(5deg)}
.cluster-5{grid-column:4/8;transform:rotate(-4deg)}
.cluster-heading{margin-bottom:0.5em}
.heading-shade{font-family:'Bungee Shade',cursive;font-size:clamp(1.8rem,4vw,3rem);letter-spacing:-0.02em;line-height:0.9;text-transform:uppercase;color:#1A1A1A}
.heading-hand{font-family:'Caveat',cursive;font-size:clamp(2rem,5vw,3.5rem);color:#FF2D8A;font-weight:700}
.cluster p{max-width:45ch}
.cluster-blob{position:absolute;width:20vw;height:20vw;background:#BAFF39;opacity:0.15;border-radius:50% 40% 60% 45%;top:-5vw;right:-3vw;z-index:-1;pointer-events:none}
.cluster-geo{position:absolute;width:6vw;height:6vw;border:2px solid #0B0B0B;border-radius:50%;bottom:-2vw;right:2vw;z-index:-1}

/* Interruption stripe */
.interruption-stripe{grid-column:1/-1;background:#FF2D8A;padding:clamp(16px,3vw,32px) 4vw;z-index:999;transform:translateX(-100%);transition:transform 0.6s cubic-bezier(0.22,1,0.36,1)}
.interruption-stripe.visible{transform:translateX(0)}
.interruption-stripe span{font-family:'Bungee Shade',cursive;font-size:clamp(2rem,5vw,4rem);color:#FFFDF5;text-transform:uppercase;letter-spacing:-0.02em;display:block;text-align:center}

/* Field 4 */
.coherence-blob{width:clamp(280px,50vw,600px);padding:clamp(40px,8vw,80px);background:#FF2D8A;border-radius:48% 52% 45% 55%/55% 45% 52% 48%;z-index:2;text-align:center;animation:blobMorph 14s ease-in-out infinite alternate}
@keyframes blobMorph{0%{border-radius:48% 52% 45% 55%/55% 45% 52% 48%}50%{border-radius:55% 45% 50% 50%/45% 55% 48% 52%}100%{border-radius:50% 50% 55% 45%/50% 50% 45% 55%}}
.coherence-text{font-family:'DM Sans',sans-serif;font-weight:700;font-size:clamp(1.8rem,4vw,3.2rem);color:#FFFDF5;line-height:1.3}
.geo-ring{position:absolute;inset:0;z-index:1;pointer-events:none}

/* Field 5 */
.shatter-container{position:absolute;inset:0;z-index:1;pointer-events:none}
.shard{position:absolute;width:8vw;height:8vw;background:#FF2D8A;opacity:0.7;clip-path:polygon(20% 0%,80% 10%,100% 60%,70% 100%,10% 80%,0% 30%)}
.shard-1{top:30%;left:20%;animation:shatter1 2s ease-out forwards}
.shard-2{top:25%;left:45%;animation:shatter2 1.5s ease-out forwards}
.shard-3{top:40%;left:60%;animation:shatter3 1.8s ease-out forwards}
.shard-4{top:50%;left:30%;animation:shatter4 1.2s ease-out forwards}
.shard-5{top:35%;left:70%;animation:shatter5 2s ease-out forwards}
.shard-6{top:55%;left:50%;animation:shatter6 1.6s ease-out forwards}
.shard-7{top:20%;left:35%;animation:shatter7 1.4s ease-out forwards}
.shard-8{top:45%;left:55%;animation:shatter8 1.9s ease-out forwards}

.field-5.shattered .shard{animation-play-state:running}
.shard{animation-play-state:paused}

@keyframes shatter1{to{transform:translate(-30vw,-20vh) rotate(120deg) scale(0.3);opacity:0}}
@keyframes shatter2{to{transform:translate(10vw,-35vh) rotate(-90deg) scale(0.3);opacity:0}}
@keyframes shatter3{to{transform:translate(25vw,15vh) rotate(200deg) scale(0.3);opacity:0}}
@keyframes shatter4{to{transform:translate(-20vw,30vh) rotate(-150deg) scale(0.3);opacity:0}}
@keyframes shatter5{to{transform:translate(35vw,-10vh) rotate(80deg) scale(0.3);opacity:0}}
@keyframes shatter6{to{transform:translate(-10vw,25vh) rotate(-220deg) scale(0.3);opacity:0}}
@keyframes shatter7{to{transform:translate(15vw,-30vh) rotate(160deg) scale(0.3);opacity:0}}
@keyframes shatter8{to{transform:translate(-25vw,-15vh) rotate(-100deg) scale(0.3);opacity:0}}

.memory-dump{position:absolute;inset:0;z-index:2;pointer-events:none}
.mem-frag{position:absolute;font-family:'DM Sans',sans-serif;font-size:clamp(0.8rem,2vw,1.5rem);opacity:0.35;color:#1A1A1A}
.frag-1{top:15%;left:10%;transform:rotate(-5deg)}
.frag-2{top:25%;right:20%;transform:rotate(8deg)}
.frag-3{top:45%;left:30%;transform:rotate(-3deg)}
.frag-4{top:60%;right:15%;transform:rotate(6deg)}
.frag-5{top:35%;left:55%;transform:rotate(-8deg);font-family:'Bungee Shade',cursive;font-size:clamp(1.2rem,3vw,2rem);color:#FF2D8A;opacity:0.5}
.frag-6{top:70%;left:20%;transform:rotate(4deg)}
.frag-7{top:50%;right:30%;transform:rotate(-6deg)}
.frag-8{top:80%;left:45%;transform:rotate(3deg)}

.restart-link{position:absolute;bottom:15%;right:10%;font-family:'Caveat',cursive;font-size:clamp(1.8rem,4vw,3rem);color:#FF2D8A;cursor:pointer;z-index:10;transition:text-shadow 0.2s}
.restart-link:hover{text-shadow:0 0 20px #FF2D8A,0 0 40px #FF2D8A}

.footer-data{position:absolute;bottom:16px;left:16px;font-size:0.75rem;color:#1A1A1A;opacity:0.4;z-index:5}

/* Blur-focus system */
[data-blur="blur"]{filter:blur(8px);transition:filter 0.5s cubic-bezier(0.25,0,0.15,1)}
[data-blur="mid"]{filter:blur(4px);transition:filter 0.5s cubic-bezier(0.25,0,0.15,1)}
[data-blur="focus"]{filter:blur(0);transition:filter 0.5s cubic-bezier(0.25,0,0.15,1)}
[data-blur].in-focus{filter:blur(0) !important}
[data-blur="focus"].out-focus{filter:blur(6px)}

/* Flicker for field 5 */
@keyframes flicker{0%{background:#FFFDF5}50%{background:#0B0B0B}100%{background:#FFFDF5}}
.field-5.flickering{animation:flicker 0.15s steps(1) 13}

/* Mobile */
@media(max-width:768px){
  .blob-left,.blob-right{width:80vw;position:relative;top:auto;left:auto;margin:4vh auto}
  .field-3{grid-template-columns:1fr}
  .cluster-1,.cluster-2,.cluster-3,.cluster-4,.cluster-5{grid-column:1/-1;transform:rotate(0)}
  .title-main{font-size:clamp(2.5rem,14vw,5rem);left:5%}
  .title-suffix{left:50%;top:calc(25% + clamp(2.5rem,14vw,5rem))}
  .field1-question{left:10%;top:75%;max-width:80vw}
  .nav-cluster{bottom:12px;right:12px;padding:10px}
  .annotation{font-size:clamp(1rem,4vw,1.5rem)}
}