@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

/* Compliance mirror: Interaction Specifications:** Specifications* Specifications:* Specifications::* Specifications: Specifications:: Interactive Intersection Observer Intersection Observer entry detection only. Keep JS minimal. */

:root {
    --midnight: #1a1033;
    --indigo: #2a1f4e;
    --violet: #3d1e6d;
    --orchid: #3d2b6b;
    --cream: #e8d5f5;
    --lavender: #c8b8d8;
    --rose: #f0a8c8;
    --cyan: #7ecbc0;
    --magenta: #b86ea8;
    --peach: #f5c4a1;
    --aurora: linear-gradient(135deg, #f0a8c8 0%, #b86ea8 35%, #3d2b6b 70%, #7ecbc0 100%);
    --pulse: conic-gradient(from var(--angle), #f0a8c8, #7ecbc0, #b86ea8, #f5c4a1, #f0a8c8);
}

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

html {
    background: #1a1033;
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 74% 14%, rgba(240, 168, 200, 0.13), transparent 34vw),
        radial-gradient(circle at 12% 52%, rgba(126, 203, 192, 0.08), transparent 30vw),
        linear-gradient(180deg, #1a1033 0%, #2a1f4e 36%, #1a1033 72%);
    color: #c8b8d8;
    font-family: 'Quicksand', 'Inter', sans-serif;
    font-size: clamp(1rem, 1.8vw, 1.2rem);
    line-height: 1.7;
    letter-spacing: 0.01em;
}

.atmosphere {
    position: fixed;
    inset: 0;
    z-index: -5;
    overflow: hidden;
    pointer-events: none;
}

.aurora {
    position: absolute;
    left: -10vw;
    width: 120vw;
    height: 26vh;
    background: var(--aurora);
    background-size: 220% 100%;
    filter: blur(22px);
    mix-blend-mode: screen;
    opacity: 0.14;
    transform: skewY(-3deg) rotate(-1deg);
    animation: aurora 30s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
}

.aurora-one { top: -4vh; }
.aurora-two { top: 38vh; opacity: 0.08; animation-duration: 42s; transform: skewY(4deg) rotate(2deg); }
.local-aurora { inset: 2rem auto auto -8vw; opacity: 0.3; height: 32vh; }

.bokeh {
    position: absolute;
    border-radius: 50%;
    background: currentColor;
    transform: translate3d(0, 0, 0);
    animation: drift var(--dur) cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite alternate;
}

.bokeh-deep { width: var(--size); height: var(--size); opacity: 0.06; filter: blur(36px); box-shadow: 0 0 90px currentColor; }
.bokeh-mid { width: var(--size); height: var(--size); opacity: 0.10; filter: blur(30px); box-shadow: 0 0 70px currentColor; }
.bokeh-near { width: var(--size); height: var(--size); opacity: 0.15; filter: blur(8px); box-shadow: 0 0 36px currentColor; }
.b1 { --size: 320px; --dx: 11vw; --dy: -10vh; --s: 0.92; --dur: 41s; top: 8%; left: 4%; color: #f0a8c8; }
.b2 { --size: 390px; --dx: -14vw; --dy: 12vh; --s: 1.05; --dur: 45s; top: 48%; right: 2%; color: #7ecbc0; }
.b3 { --size: 240px; --dx: 15vw; --dy: 8vh; --s: 0.95; --dur: 38s; bottom: 8%; left: 28%; color: #b86ea8; }
.b4 { --size: 145px; --dx: -8vw; --dy: 8vh; --s: 1.1; --dur: 27s; top: 23%; left: 43%; color: #b86ea8; }
.b5 { --size: 104px; --dx: 9vw; --dy: -8vh; --s: 0.88; --dur: 25s; top: 68%; left: 14%; color: #f5c4a1; }
.b6 { --size: 132px; --dx: -7vw; --dy: -10vh; --s: 0.96; --dur: 31s; top: 77%; right: 18%; color: #f0a8c8; }
.b7 { --size: 52px; --dx: 8vw; --dy: -7vh; --s: 1.2; --dur: 16s; top: 32%; right: 18%; color: #7ecbc0; }
.b8 { --size: 38px; --dx: -7vw; --dy: 6vh; --s: 0.92; --dur: 18s; top: 63%; right: 38%; color: #f0a8c8; }
.b9 { --size: 58px; --dx: 6vw; --dy: 9vh; --s: 1.12; --dur: 15s; top: 12%; left: 62%; color: #f5c4a1; }
.b10 { --size: 28px; --dx: -5vw; --dy: -6vh; --s: 1.22; --dur: 20s; top: 82%; left: 70%; color: #7ecbc0; }

.flow-spine {
    position: fixed;
    inset: 0 auto 0 50%;
    width: 18vw;
    min-width: 170px;
    height: 100vh;
    z-index: 0;
    opacity: 0.24;
    pointer-events: none;
    transform: translateX(-44%) rotate(1deg);
}

.flow-spine path {
    fill: none;
    stroke: url(#none);
    stroke: #f0a8c8;
    stroke-width: 0.55;
    stroke-linecap: round;
    stroke-dasharray: 820;
    stroke-dashoffset: 820;
    filter: drop-shadow(0 0 8px #b86ea8);
    animation: writeSpine both cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation-timeline: scroll();
}

.narrative { position: relative; z-index: 1; }
.act {
    position: relative;
    min-height: 100vh;
    padding: clamp(4rem, 7vw, 8rem) clamp(1.2rem, 4vw, 4.5rem);
    overflow: hidden;
}

h1, h2 {
    font-family: 'Nunito', 'Inter', sans-serif;
    font-weight: 900;
    letter-spacing: 0.06em;
    color: #e8d5f5;
    line-height: 0.95;
}

h1 { font-size: clamp(3rem, 7vw, 6.5rem); text-transform: lowercase; }
h2 { font-size: clamp(3rem, 7vw, 6.5rem); max-width: 10ch; }

.act-label {
    font-family: 'Varela Round', 'Inter', sans-serif;
    font-size: clamp(0.7rem, 1.2vw, 0.85rem);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #f0a8c8;
    margin-bottom: 1.1rem;
}

.act-hero { min-height: 112vh; }
.hero-copy {
    position: absolute;
    left: clamp(1.4rem, 5vw, 6rem);
    bottom: 12vh;
    z-index: 3;
    width: min(34rem, 84vw);
    transform: rotate(-2deg);
    opacity: 0;
    animation: rise 1.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.65s forwards;
}

.hero-line {
    width: min(31rem, 82vw);
    margin-top: 1.6rem;
    color: #c8b8d8;
    font-weight: 600;
}

.hero-character {
    position: sticky;
    top: 3vh;
    left: 28vw;
    width: 84vw;
    height: 84vw;
    max-height: 94vh;
    transform: translate(12vw, -2vh) rotate(1.5deg);
    opacity: 0;
    animation: characterReveal 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.hero-character .border-inner {
    background: transparent;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
}

.hero-character span {
    font-family: 'Jua', sans-serif;
    font-size: min(80vw, 92vh);
    color: transparent;
    -webkit-text-stroke: 2px #f0a8c8;
    text-stroke: 2px #f0a8c8;
    line-height: 0.75;
    text-shadow: 0 0 48px rgba(240, 168, 200, 0.38), 0 0 120px rgba(126, 203, 192, 0.15);
}

.border-animate {
    position: relative;
    border-radius: 2.2rem;
}

.border-animate::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 2px;
    border-radius: inherit;
    background: var(--pulse);
    opacity: 0;
    animation: rotate 4s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite, borderWake 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.5s forwards;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.border-inner { position: relative; z-index: 1; border-radius: inherit; }

.watermark {
    position: absolute;
    z-index: 0;
    font-family: 'Jua', sans-serif;
    font-size: clamp(12rem, 28vw, 28rem);
    color: transparent;
    -webkit-text-stroke: 1px #f0a8c8;
    text-stroke: 1px #f0a8c8;
    opacity: 0.07;
    pointer-events: none;
}
.mark-bieup { right: -4vw; bottom: -16vh; transform: rotate(7deg); }
.mark-mieum { left: -5vw; top: 4vh; transform: rotate(-9deg); }

.act-jamo {
    min-height: 124vh;
    padding-top: 12vh;
    background: linear-gradient(164deg, rgba(42, 31, 78, 0.38), rgba(26, 16, 51, 0.98) 68%);
}

.section-heading { margin-left: 7vw; transform: rotate(-1.6deg); }
.jamo-ribbon {
    width: min(86rem, 124vw);
    margin: 6vh 0 0 -5vw;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.15rem;
    clip-path: polygon(0 10%, 14% 2%, 32% 16%, 54% 5%, 79% 18%, 100% 8%, 98% 86%, 75% 98%, 48% 84%, 24% 97%, 0 84%);
    padding: 3.8rem 4vw 4.5rem;
    background: rgba(61, 43, 107, 0.2);
    transform: rotate(1.2deg);
}

.jamo-capsule {
    display: grid;
    place-items: center;
    min-width: 4.2rem;
    height: 4.8rem;
    padding: 0.35rem 1.05rem;
    border-radius: 999px;
    transform: translateY(var(--wave, 0)) rotate(var(--tilt, 0deg));
    cursor: pointer;
    transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.jamo-capsule::before { opacity: 0.86; animation-delay: calc(var(--order, 0) * -0.14s); }
.jamo-capsule b {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: rgba(42, 31, 78, 0.9);
    color: #e8d5f5;
    font-family: 'Jua', sans-serif;
    font-size: 2.05rem;
    font-weight: 400;
    box-shadow: inset 0 0 24px rgba(240, 168, 200, 0.08);
}
.jamo-capsule:hover, .jamo-capsule.is-touched { transform: translateY(calc(var(--wave, 0) - 0.55rem)) rotate(3deg) scale(1.08); filter: drop-shadow(0 0 24px rgba(240, 168, 200, 0.34)); }

.jamo-text {
    width: min(38rem, 86vw);
    margin: -4vh 6vw 0 auto;
    transform: rotate(1.8deg);
}
.text-pool {
    padding: clamp(1.4rem, 3vw, 2.8rem);
    border-radius: 3rem 6rem 4rem 2.4rem;
    background: rgba(42, 31, 78, 0.58);
    box-shadow: 0 22px 80px rgba(0, 0, 0, 0.18), inset 0 0 60px rgba(126, 203, 192, 0.04);
}
.text-pool p + p { margin-top: 1rem; }

.act-creation { min-height: 132vh; display: grid; place-items: center; }
.creation-shell {
    position: relative;
    width: min(74rem, 92vw);
    height: min(76vw, 46rem);
    min-height: 38rem;
    border-radius: 42% 58% 51% 49% / 48% 45% 55% 52%;
    background: rgba(61, 43, 107, 0.22);
    transform: rotate(-1deg);
}
.creation-shell::before { padding: 4px; opacity: 0.72; animation-delay: 0s; }
.spiral-core {
    position: absolute;
    inset: 50% auto auto 50%;
    width: clamp(8rem, 17vw, 13rem);
    height: clamp(8rem, 17vw, 13rem);
    border-radius: 50%;
    display: grid;
    place-items: center;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse at center, #f5c4a1 0%, #f0a8c8 40%, transparent 70%);
    box-shadow: 0 0 110px rgba(245, 196, 161, 0.38), 0 0 180px rgba(240, 168, 200, 0.16);
    animation: pulse 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
}
.spiral-core span { font-family: 'Jua', sans-serif; font-size: clamp(6rem, 13vw, 10rem); color: transparent; -webkit-text-stroke: 1px #f0a8c8; text-stroke: 1px #f0a8c8; }
.spiral-text {
    position: absolute;
    width: min(18rem, 32vw);
    color: #c8b8d8;
    font-weight: 600;
    text-shadow: 0 0 22px rgba(26, 16, 51, 0.9);
}
.s1 { left: 13%; top: 20%; transform: rotate(-12deg); }
.s2 { right: 11%; top: 18%; transform: rotate(10deg); }
.s3 { right: 4%; bottom: 25%; transform: rotate(34deg); }
.s4 { left: 40%; bottom: 8%; transform: rotate(-6deg); }
.s5 { left: 7%; bottom: 31%; transform: rotate(-34deg); }

.act-sound { min-height: 120vh; background: #1a1033; display: grid; place-items: center; }
.sound-stage {
    position: relative;
    width: min(68rem, 92vw);
    height: min(48rem, 84vh);
    border-radius: 8rem 3rem 7rem 4rem;
    background: radial-gradient(circle at 52% 50%, rgba(61, 30, 109, 0.28), transparent 34%), rgba(26, 16, 51, 0.72);
}
.sound-stage .act-label { position: absolute; left: 7%; top: 9%; transform: rotate(-2deg); }
.sound-floater {
    position: absolute;
    left: 50%;
    top: 50%;
    font-family: 'Jua', sans-serif;
    font-size: clamp(3.2rem, 8vw, 7rem);
    color: #f0a8c8;
    text-shadow: 0 0 34px rgba(240, 168, 200, 0.42), 0 0 80px rgba(126, 203, 192, 0.14);
    transition: transform 2s cubic-bezier(0.34, 1.56, 0.64, 1), color 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation: floatGlyph var(--float-speed) cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite alternate;
}
.f1 { --float-speed: 9s; transform: translate(-28rem, -9rem) rotate(-16deg); color: #7ecbc0; }
.f2 { --float-speed: 11s; transform: translate(19rem, -12rem) rotate(13deg); color: #f5c4a1; }
.f3 { --float-speed: 10s; transform: translate(-10rem, 13rem) rotate(27deg); }
.f4 { --float-speed: 12s; transform: translate(27rem, 10rem) rotate(-24deg); color: #b86ea8; }
.f5 { --float-speed: 9.5s; transform: translate(1rem, -18rem) rotate(8deg); color: #e8d5f5; }
.act-sound.settled .sound-floater { transform: translate(calc(var(--tx) * 4.2rem), calc(var(--ty) * 4.2rem)) rotate(0deg); opacity: 0.24; }
.assembled-word {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.7);
    opacity: 0;
    border-radius: 2rem;
    transition: opacity 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 1.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.assembled-word .border-inner {
    padding: 0.45rem 2rem 0.8rem;
    background: #1a1033;
    color: #e8d5f5;
    font-family: 'Jua', sans-serif;
    font-size: clamp(5rem, 14vw, 12rem);
    line-height: 1;
    text-shadow: 0 0 50px rgba(240, 168, 200, 0.4);
}
.act-sound.settled .assembled-word { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.act-sound.settled .assembled-word::before { opacity: 0.95; animation-delay: 0s; }

.act-coda {
    min-height: 140vh;
    display: grid;
    place-items: center;
    text-align: center;
    background: linear-gradient(180deg, rgba(26, 16, 51, 0.92), #1a1033 42%);
}
.coda-text {
    font-family: 'Quicksand', sans-serif;
    font-size: clamp(1.6rem, 3vw, 2rem);
    color: #e8d5f5;
    font-weight: 400;
    letter-spacing: 0.02em;
    transform: translateY(8vh);
}
.coda-mark {
    position: absolute;
    top: 57%;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Jua', sans-serif;
    font-size: clamp(4rem, 5vw, 6rem);
    color: #f0a8c8;
    opacity: 0.7;
    text-shadow: 0 0 28px #f5c4a1, 0 0 95px rgba(240, 168, 200, 0.34);
}
.coda-mark::before {
    content: '';
    position: absolute;
    inset: -3rem;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(245, 196, 161, 0.3), rgba(240, 168, 200, 0.1), transparent 70%);
    z-index: -1;
    animation: pulse 4s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
}
.breath { position: absolute; bottom: 0; height: 40vh; width: 100%; }

@keyframes rotate { to { --angle: 360deg; } }
@keyframes borderWake { to { opacity: 1; } }
@keyframes drift { to { transform: translate(var(--dx), var(--dy)) scale(var(--s)); } }
@keyframes aurora {
    0% { background-position: 0% 50%; opacity: 0.12; }
    50% { background-position: 100% 50%; opacity: 0.25; }
    100% { background-position: 0% 50%; opacity: 0.12; }
}
@keyframes writeSpine { to { stroke-dashoffset: 0; } }
@keyframes pulse { 50% { transform: translate(-50%, -50%) scale(1.07); opacity: 0.82; } }
@keyframes rise { to { transform: rotate(-2deg) translateY(-1rem); opacity: 1; } }
@keyframes characterReveal { to { opacity: 1; } }
@keyframes floatGlyph { to { margin-top: 1.1rem; margin-left: -0.8rem; filter: hue-rotate(18deg); } }

@media (max-width: 900px) {
    .hero-character { width: 96vw; height: 96vw; transform: translate(7vw, 6vh) rotate(1.5deg); }
    .hero-copy { bottom: 9vh; }
    .jamo-text { margin: 2rem auto 0; transform: rotate(-1deg); }
    .creation-shell { min-height: 50rem; }
    .spiral-text { width: 15rem; font-size: 0.95rem; }
    .s1 { left: 7%; top: 12%; }
    .s2 { right: 5%; top: 26%; }
    .s3 { right: 5%; bottom: 26%; }
    .s4 { left: 34%; bottom: 8%; }
    .s5 { left: 4%; bottom: 36%; }
}

@media (max-width: 620px) {
    .act { padding-inline: 1rem; }
    .flow-spine { opacity: 0.14; }
    .jamo-ribbon { width: 110vw; margin-left: -10vw; padding-inline: 1rem; gap: 0.7rem; }
    .jamo-capsule { min-width: 3.2rem; height: 3.7rem; }
    .jamo-capsule b { font-size: 1.55rem; }
    .creation-shell { min-height: 46rem; width: 96vw; }
    .spiral-text { width: 12rem; font-size: 0.86rem; }
    .sound-stage { height: 72vh; }
    .f1 { transform: translate(-12rem, -11rem) rotate(-16deg); }
    .f2 { transform: translate(7rem, -15rem) rotate(13deg); }
    .f3 { transform: translate(-9rem, 11rem) rotate(27deg); }
    .f4 { transform: translate(9rem, 9rem) rotate(-24deg); }
    .f5 { transform: translate(-1rem, -19rem) rotate(8deg); }
}