/* gabs.feedback — surreal dreamscape of overheard utterances */

:root {
    --vellum-fog: #EFE7DB;
    --mauve-shadow: #9C7B8D;
    --inkwell-night: #1B1530;
    --verdigris-whisper: #86A89B;
    --saffron-sigh: #E8B65A;
    --bruised-plum: #5B3A52;
    --moth-wing: #C9C2B5;
    --ember-cinnabar: #C24B33;
    --display-font: "Fraunces", "Cormorant Garamond", Georgia, serif;
    --italic-font: "Cormorant Garamond", Georgia, serif;
    --body-font: "Commissioner", "Inter", system-ui, sans-serif;
    --hand-font: "Caveat", "Cormorant Garamond", cursive;
}

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

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--vellum-fog);
    color: var(--inkwell-night);
    font-family: var(--body-font);
    font-weight: 350;
    font-size: 16.5px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    cursor: default;
    position: relative;
}

/* SVG defs container — visually hidden */
.defs-svg {
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* ---------- noise overlay ---------- */
.noise-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 50;
    opacity: 0.5;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.08 0 0 0 0 0.18 0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    mix-blend-mode: multiply;
}

/* ---------- dust motes canvas ---------- */
#dust-motes {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 40;
}

/* ---------- garden silhouette ---------- */
.garden-silhouette {
    position: fixed;
    bottom: 18px;
    left: 22px;
    width: 70px;
    height: 70px;
    z-index: 45;
    opacity: 0;
    transition: opacity 1.2s ease 0.4s;
    pointer-events: none;
}
.garden-silhouette.is-visible {
    opacity: 0.55;
}
.garden-silhouette svg {
    width: 100%;
    height: 100%;
}

/* ---------- dream-index (tilde menu) ---------- */
.dream-index {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-120%);
    z-index: 90;
    pointer-events: none;
    transition: transform 480ms cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding-top: 22px;
}
.dream-index.is-open {
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}
.medallion-chain {
    display: flex;
    flex-direction: row;
    gap: 14px;
    align-items: center;
}
.medallion-chain::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 14px;
    background: linear-gradient(to bottom, transparent, var(--mauve-shadow));
    transform: translateX(-50%);
}
.medallion {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, var(--vellum-fog), var(--moth-wing) 70%);
    border: 1px solid var(--bruised-plum);
    color: var(--bruised-plum);
    font-family: var(--display-font);
    font-style: italic;
    font-weight: 400;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(27, 21, 48, 0.18), inset 0 0 8px rgba(156, 123, 141, 0.3);
    transition: transform 220ms ease, box-shadow 220ms ease, background 220ms ease;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.medallion span {
    display: block;
    transform: translateY(-1px);
    letter-spacing: 0.02em;
}
.medallion::before {
    content: "";
    position: absolute;
    top: -16px;
    left: 50%;
    width: 1px;
    height: 16px;
    background: var(--mauve-shadow);
    opacity: 0.6;
    transform: translateX(-50%);
}
.medallion:hover {
    transform: translateY(2px) scale(1.06);
    background: radial-gradient(circle at 35% 30%, var(--saffron-sigh), var(--moth-wing) 75%);
    box-shadow: 0 8px 22px rgba(27, 21, 48, 0.25), inset 0 0 8px rgba(232, 182, 90, 0.5);
}
.medallion.is-current {
    background: radial-gradient(circle at 35% 30%, var(--ember-cinnabar), var(--bruised-plum) 80%);
    color: var(--vellum-fog);
}
.dream-index-hint {
    font-family: var(--italic-font);
    font-style: italic;
    font-weight: 300;
    font-size: 0.85rem;
    color: var(--bruised-plum);
    letter-spacing: 0.06em;
    opacity: 0.7;
}

/* ---------- tilde hint ---------- */
.tilde-hint {
    position: fixed;
    top: 22px;
    right: 28px;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--bruised-plum);
    font-family: var(--italic-font);
    font-style: italic;
    font-weight: 300;
    font-size: 0.95rem;
    opacity: 0.65;
    transition: opacity 600ms ease;
    pointer-events: none;
}
.tilde-hint.is-faded {
    opacity: 0;
}
.tilde-hint-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--bruised-plum);
    border-radius: 6px;
    font-family: var(--display-font);
    font-style: normal;
    font-weight: 400;
    font-size: 1.1rem;
    box-shadow: inset 0 0 6px rgba(156, 123, 141, 0.25);
}
.tilde-hint-text {
    letter-spacing: 0.04em;
}

/* ---------- the stage ---------- */
.stage {
    position: fixed;
    inset: 0;
    overflow: hidden;
    z-index: 1;
}
.stage-pan {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    display: flex;
    will-change: transform;
}

.act {
    position: relative;
    width: 100vw;
    height: 100vh;
    flex-shrink: 0;
    overflow: hidden;
    isolation: isolate;
}

/* parallax layer system */
.parallax-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    will-change: transform;
}
.parallax-layer.layer-deep { z-index: 0; }
.parallax-layer.layer-mid { z-index: 1; }
.parallax-layer.layer-shallow { z-index: 6; }

/* curtain backdrops */
.curtain-backdrop {
    position: absolute;
    inset: 0;
    background: var(--vellum-fog);
}
.curtain-vellum {
    background: radial-gradient(ellipse at 50% 50%, #F4ECDF 0%, var(--vellum-fog) 60%, #DCD2C4 100%);
}
.curtain-vellum-warm {
    background: linear-gradient(120deg, #F4ECDF 0%, var(--vellum-fog) 50%, #E8DBC8 100%);
}
.curtain-mauve-fade {
    background: linear-gradient(110deg, var(--vellum-fog) 0%, #D7C3CC 50%, var(--mauve-shadow) 110%);
}
.curtain-mauve {
    background: linear-gradient(135deg, var(--mauve-shadow) 0%, var(--bruised-plum) 60%, #2D1B33 110%);
}
.curtain-deep {
    background: linear-gradient(120deg, var(--bruised-plum) 0%, var(--inkwell-night) 80%, #0E0820 100%);
}
.curtain-moth {
    background: linear-gradient(120deg, var(--moth-wing) 0%, var(--vellum-fog) 50%, var(--mauve-shadow) 110%);
}
.curtain-darkening {
    background: radial-gradient(ellipse at 50% 50%, #2A1B3E 0%, var(--inkwell-night) 50%, #07040E 100%);
}

/* proscenium arch (act 1) */
.proscenium-arch {
    position: absolute;
    top: 8%;
    left: 12%;
    right: 12%;
    bottom: 8%;
    border: 1px solid var(--bruised-plum);
    border-radius: 50% 50% 12px 12px / 40% 40% 12px 12px;
    opacity: 0.18;
    box-shadow: inset 0 0 80px rgba(91, 58, 82, 0.15);
}

/* act titles */
.act-title-block {
    position: absolute;
    z-index: 4;
    max-width: 60vw;
    pointer-events: none;
}
.act-numeral {
    display: block;
    font-family: var(--display-font);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.3rem, 2vw, 1.9rem);
    color: var(--bruised-plum);
    letter-spacing: 0.05em;
    margin-bottom: 0.4em;
    opacity: 0.85;
}
.act-title {
    font-family: var(--display-font);
    font-weight: 300;
    font-size: clamp(4rem, 11vw, 11rem);
    line-height: 0.9;
    letter-spacing: -0.03em;
    color: var(--inkwell-night);
    font-variation-settings: "opsz" 144, "SOFT" 100;
    text-transform: lowercase;
    margin: 0;
}
.act-title::first-letter {
    text-transform: uppercase;
}
.act-subtitle {
    font-family: var(--italic-font);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.05rem, 1.5vw, 1.45rem);
    line-height: 1.55;
    color: var(--bruised-plum);
    margin-top: 0.7rem;
    max-width: 28ch;
}
.floating-subtitle {
    position: absolute;
    z-index: 5;
    max-width: 30ch;
    pointer-events: none;
    color: var(--bruised-plum);
    font-family: var(--italic-font);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1rem, 1.4vw, 1.35rem);
    opacity: 0.85;
}

/* darker acts use lighter text */
.act-mirror .act-title,
.act-mirror .act-numeral,
.act-mirror .floating-subtitle,
.act-eavesdrop .act-title,
.act-eavesdrop .act-numeral,
.act-eavesdrop .floating-subtitle,
.act-dispersal .act-title,
.act-dispersal .act-numeral,
.act-dispersal .floating-subtitle {
    color: var(--vellum-fog);
}
.act-mirror .act-title,
.act-eavesdrop .act-title,
.act-dispersal .act-title {
    color: #F4ECDF;
}

/* mouth icon (act 1) */
.mouth-icon {
    position: absolute;
    width: 120px;
    height: 60px;
    z-index: 3;
    animation: mouth-blink 4s ease-in-out infinite;
}
.mouth-icon svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}
.mouth-path {
    transition: d 0.5s ease;
}
@keyframes mouth-blink {
    0%, 88%, 100% { transform: scaleY(1); }
    92% { transform: scaleY(0.05); }
    96% { transform: scaleY(1); }
}

/* whisper line floating prop */
.whisper-line {
    position: absolute;
    z-index: 4;
    font-family: var(--italic-font);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(0.95rem, 1.2vw, 1.2rem);
    color: var(--mauve-shadow);
    transform: rotate(-3deg);
    max-width: 22ch;
    opacity: 0.85;
}

/* ember cinnabar marks — used once per act */
.ember-mark {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--ember-cinnabar);
    box-shadow: 0 0 22px rgba(194, 75, 51, 0.6), 0 0 44px rgba(194, 75, 51, 0.25);
    z-index: 5;
    animation: ember-pulse 3.4s ease-in-out infinite;
}
@keyframes ember-pulse {
    0%, 100% { transform: scale(1); opacity: 0.85; }
    50% { transform: scale(1.4); opacity: 1; }
}

/* ---------- bubble field (act 2) ---------- */
.bubble-field {
    position: absolute;
    inset: 0;
    z-index: 3;
}
.bubble {
    position: absolute;
    width: var(--bubble-w, 220px);
    height: var(--bubble-h, 140px);
    will-change: transform;
    pointer-events: none;
}
.bubble svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}
.bubble-shadow-svg {
    transform: translate(40px, 60px);
    opacity: 0.32;
    filter: blur(10px);
}
.bubble-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14% 18%;
    font-family: var(--italic-font);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(0.95rem, 1.05vw, 1.15rem);
    line-height: 1.45;
    color: var(--inkwell-night);
    text-align: center;
    font-variation-settings: "slnt" -10;
    animation: slant-oscillate 7s ease-in-out infinite;
}
@keyframes slant-oscillate {
    0%, 100% { font-variation-settings: "slnt" -8; }
    50% { font-variation-settings: "slnt" -12; }
}

/* ---------- garden (act 3) ---------- */
.garden-stage {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 0 0 18vh;
}
.garden-soil {
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: 0;
    height: 70%;
    pointer-events: none;
}
.garden-soil svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}
.garden-glyph {
    font-family: var(--italic-font);
    font-style: italic;
    font-weight: 300;
    font-size: 22px;
    fill: var(--inkwell-night);
    opacity: 0;
    animation: glyph-bloom 1200ms ease-out forwards;
}
.garden-glyph.is-vowel {
    fill: var(--ember-cinnabar);
    font-weight: 400;
}
.garden-glyph.is-punct {
    fill: var(--bruised-plum);
}
.garden-stem {
    fill: none;
    stroke: var(--bruised-plum);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    animation: stem-draw 1100ms ease-out forwards;
    opacity: 0.85;
}
@keyframes stem-draw {
    to { stroke-dashoffset: 0; }
}
@keyframes glyph-bloom {
    0% { opacity: 0; transform: translateY(8px) scale(0.6); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

.garden-input-wrap {
    position: absolute;
    bottom: 13%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    align-items: baseline;
    gap: 6px;
    width: min(620px, 70vw);
}
.caret-blink {
    width: 1px;
    height: 1.5em;
    background: var(--bruised-plum);
    animation: caret-pulse 1.05s steps(2) infinite;
    align-self: center;
}
@keyframes caret-pulse {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}
#garden-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-family: var(--italic-font);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.2rem, 2vw, 1.7rem);
    color: var(--inkwell-night);
    padding: 4px 0;
    border-bottom: 1px solid rgba(91, 58, 82, 0.35);
    caret-color: var(--bruised-plum);
}
#garden-input::placeholder {
    color: var(--mauve-shadow);
    font-style: italic;
}
.garden-instructions {
    position: absolute;
    bottom: 8%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    font-family: var(--italic-font);
    font-style: italic;
    font-weight: 300;
    font-size: 0.95rem;
    color: var(--mauve-shadow);
    letter-spacing: 0.05em;
    opacity: 0.75;
}

/* ---------- ribbons (act 4) ---------- */
.ribbons-stack {
    position: absolute;
    top: 22%;
    left: 0;
    right: 0;
    bottom: 22%;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: 8px;
}
.ribbon {
    width: 100%;
    height: 56px;
    overflow: visible;
    transition: transform 520ms ease;
}
.ribbon path {
    transition: stroke-width 400ms ease, opacity 400ms ease;
}
.ribbon:hover path {
    stroke-width: 4;
    opacity: 1;
}
.ribbon:hover {
    transform: scaleY(1.3);
}

/* ---------- mirror booth (act 5) ---------- */
.curtain-left, .curtain-right {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 16%;
    z-index: 4;
    pointer-events: none;
}
.curtain-left { left: 0; }
.curtain-right { right: 0; transform: scaleX(-1); }
.curtain-left svg, .curtain-right svg {
    width: 100%;
    height: 100%;
}
.mirror-stage {
    position: absolute;
    inset: 18% 18%;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.6rem;
}
.mirror-empty {
    font-family: var(--italic-font);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1rem, 1.4vw, 1.4rem);
    color: var(--vellum-fog);
    opacity: 0.7;
    letter-spacing: 0.04em;
}
.mirror-variants {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    align-items: center;
    width: 100%;
}
.mirror-variants[hidden] {
    display: none;
}
.mirror-variant {
    font-family: var(--hand-font);
    font-weight: 600;
    font-size: clamp(1.6rem, 3vw, 2.6rem);
    color: var(--vellum-fog);
    mix-blend-mode: screen;
    filter: blur(0.5px);
    text-align: center;
    letter-spacing: 0.02em;
}
.variant-inverted {
    transform: scaleY(-1);
    color: var(--saffron-sigh);
}
.variant-mirrored {
    transform: scaleX(-1);
    color: var(--moth-wing);
}
.variant-jumbled {
    color: var(--vellum-fog);
}
.variant-jumbled .jumbled-char {
    display: inline-block;
}

/* ---------- murmuring wall (act 6) ---------- */
.murmur-lanes {
    position: absolute;
    top: 12%;
    bottom: 12%;
    left: 0;
    right: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}
.murmur-lane {
    position: relative;
    height: 7%;
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    align-items: center;
}
.murmur-lane-track {
    display: inline-flex;
    gap: 4rem;
    white-space: nowrap;
    animation: lane-scroll linear infinite;
    will-change: transform;
}
.murmur-fragment {
    font-family: var(--italic-font);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(0.95rem, 1.2vw, 1.3rem);
    color: var(--bruised-plum);
    opacity: 0.78;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}
@keyframes lane-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* ---------- dispersal (act 7) ---------- */
.deflating-field {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}
.deflating-bubble {
    position: absolute;
    width: 70px;
    height: 50px;
    border-radius: 50%;
    background: radial-gradient(ellipse at 35% 30%, rgba(239, 231, 219, 0.3), rgba(156, 123, 141, 0.15));
    border: 1px solid rgba(239, 231, 219, 0.18);
    animation: bubble-deflate 6s ease-in-out infinite;
}
@keyframes bubble-deflate {
    0% { transform: scale(1); opacity: 0.6; }
    70% { transform: scale(0.4) translateY(40px); opacity: 0.2; }
    100% { transform: scale(0.05) translateY(80px); opacity: 0; }
}

.final-ellipsis {
    position: absolute;
    top: 50%;
    left: 70%;
    transform: translate(-50%, -50%);
    z-index: 5;
    font-family: var(--display-font);
    font-weight: 300;
    font-size: clamp(5rem, 9vw, 9rem);
    color: var(--saffron-sigh);
    line-height: 0.5;
    letter-spacing: 0.1em;
    text-shadow: 0 0 28px rgba(232, 182, 90, 0.5);
}
.final-ellipsis .dot {
    display: inline-block;
    animation: dot-pulse 2.6s ease-in-out infinite;
}
.final-ellipsis .dot-2 { animation-delay: 0.4s; }
.final-ellipsis .dot-3 { animation-delay: 0.8s; }
@keyframes dot-pulse {
    0%, 100% { opacity: 0.4; transform: translateY(0); }
    50% { opacity: 1; transform: translateY(-6px); }
}

/* ---------- scroll progress ---------- */
.scroll-progress {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    width: 30vw;
    max-width: 360px;
    height: 1px;
    background: rgba(91, 58, 82, 0.25);
    z-index: 70;
    overflow: hidden;
}
#scroll-progress-bar {
    display: block;
    height: 100%;
    width: 0%;
    background: var(--bruised-plum);
    transition: width 80ms linear;
}

/* ---------- entry choreography ---------- */
.act .act-title-block,
.act .floating-subtitle,
.act .mouth-icon,
.act .whisper-line,
.act .ember-mark,
.act .ribbons-stack .ribbon,
.act .murmur-lane,
.act .bubble,
.act .garden-stage,
.act .mirror-stage,
.act .final-ellipsis,
.act .deflating-bubble {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 1.1s ease, transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.act.is-entered .act-title-block { opacity: 1; transform: translateY(0); transition-delay: 80ms; }
.act.is-entered .floating-subtitle { opacity: 0.85; transform: translateY(0); transition-delay: 240ms; }
.act.is-entered .mouth-icon { opacity: 1; transform: translateY(0); transition-delay: 320ms; }
.act.is-entered .whisper-line { opacity: 0.85; transform: translateY(0); transition-delay: 480ms; }
.act.is-entered .ember-mark { opacity: 0.95; transform: translateY(0); transition-delay: 560ms; }
.act.is-entered .ribbons-stack .ribbon { opacity: 1; transform: translateY(0); }
.act.is-entered .ribbons-stack .ribbon:nth-child(1) { transition-delay: 80ms; }
.act.is-entered .ribbons-stack .ribbon:nth-child(2) { transition-delay: 200ms; }
.act.is-entered .ribbons-stack .ribbon:nth-child(3) { transition-delay: 320ms; }
.act.is-entered .ribbons-stack .ribbon:nth-child(4) { transition-delay: 440ms; }
.act.is-entered .ribbons-stack .ribbon:nth-child(5) { transition-delay: 560ms; }
.act.is-entered .ribbons-stack .ribbon:nth-child(6) { transition-delay: 680ms; }
.act.is-entered .murmur-lane { opacity: 1; transform: translateY(0); }
.act.is-entered .bubble { opacity: 1; transform: translateY(0); }
.act.is-entered .garden-stage { opacity: 1; transform: translateY(0); transition-delay: 200ms; }
.act.is-entered .mirror-stage { opacity: 1; transform: translateY(0); transition-delay: 200ms; }
.act.is-entered .final-ellipsis { opacity: 1; transform: translate(-50%, -50%); transition-delay: 600ms; }
.act.is-entered .deflating-bubble { opacity: 0.6; transform: translateY(0); }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}