/* foryou.reviews — Aurora Vaporbreath
   Frutiger-Aero re-romanced as a love letter.
   ----------------------------------------------------- */

:root {
    --sky-cyan: #A8E6FF;
    --lagoon-teal: #5CC8C2;
    --bubble-glass: #F8FBFF;
    --polaroid-white: #FBF8F2;
    --sun-apricot: #FFB87C;
    --coral-whisper: #FF7A9E;
    --aurora-lilac: #C8A8FF;
    --dusk-indigo: #1F2D5A;
    --phosphor-mint: #7DFFC0;
    --warm-peach: #FFC8B0;

    /* Time-of-day cycle — driven by JS each frame */
    --time-of-day: 0.25;
    --sky-top: var(--sky-cyan);
    --sky-bottom: var(--lagoon-teal);
    --flare-hue: var(--sun-apricot);

    --display-font: 'Fraunces', 'Lora', Georgia, serif;
    --body-font: 'Quicksand', 'Helvetica Neue', sans-serif;
    --label-font: 'Commissioner', 'Inter', sans-serif;
}

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

html, body {
    height: 100%;
    overflow-x: hidden;
}

body {
    font-family: var(--body-font);
    font-weight: 500;
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--dusk-indigo);
    background: var(--sky-cyan);
    overflow-y: auto;
    overflow-x: hidden;
    cursor: default;
}

/* ===========================================================
   Stratum 1 — Atmosphere
   =========================================================== */
.atmosphere {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.sky {
    position: absolute;
    inset: -10%;
    background: linear-gradient(
        180deg,
        var(--sky-top) 0%,
        var(--sky-bottom) 60%,
        var(--warm-peach) 100%
    );
    transition: background 0.8s linear;
    will-change: background;
}

.sky::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 80% 20%, rgba(255,184,124,0.25), transparent 55%),
        radial-gradient(ellipse at 15% 60%, rgba(200,168,255,0.20), transparent 60%),
        radial-gradient(ellipse at 50% 90%, rgba(125,255,192,0.10), transparent 70%);
    mix-blend-mode: screen;
    transition: opacity 0.8s linear;
}

.bokeh-field {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.bokeh-disc {
    position: absolute;
    border-radius: 50%;
    filter: blur(28px);
    opacity: 0.45;
    mix-blend-mode: screen;
    will-change: transform;
}

.horizon {
    position: absolute;
    bottom: 0;
    left: -10%;
    right: -10%;
    height: 28vh;
    background:
        radial-gradient(ellipse at 50% 100%,
            rgba(92,200,194,0.35) 0%,
            rgba(168,230,255,0.08) 60%,
            transparent 100%);
    filter: blur(20px);
    pointer-events: none;
    transition: transform 0.4s ease-out, opacity 0.6s ease-out;
}

.lens-flare-seam {
    position: absolute;
    left: -30%;
    width: 160%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255,184,124,0) 5%,
        rgba(255,184,124,0.45) 50%,
        rgba(255,184,124,0) 95%,
        transparent 100%);
    opacity: 0.32;
    box-shadow: 0 0 40px rgba(255,184,124,0.4);
    pointer-events: none;
    transform-origin: 50% 50%;
}
.seam-1 { top: 22%; transform: rotate(-1.5deg); animation: drift-flare 60s linear infinite; }
.seam-2 { top: 58%; transform: rotate(0.8deg);  animation: drift-flare 80s linear infinite reverse; }
.seam-3 { top: 84%; transform: rotate(-0.4deg); animation: drift-flare 100s linear infinite; }

@keyframes drift-flare {
    0%   { transform: translateX(-12%) rotate(var(--seam-tilt, 0deg)); opacity: 0.18; }
    50%  { transform: translateX(12%)  rotate(var(--seam-tilt, 0deg)); opacity: 0.45; }
    100% { transform: translateX(-12%) rotate(var(--seam-tilt, 0deg)); opacity: 0.18; }
}

/* Micro-bubble particle field */
.micro-bubbles {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.micro-bubble {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(248,251,255,0.85), rgba(168,230,255,0.25) 60%, transparent 75%);
    box-shadow: inset 0 0 4px rgba(248,251,255,0.6);
    will-change: transform;
}

/* Sun-flare masthead */
.sun-flare {
    position: fixed;
    top: -40px;
    left: -40px;
    width: 200px;
    height: 200px;
    z-index: 4;
    pointer-events: none;
    filter: blur(0.4px);
    animation: sun-pulse 6s ease-in-out infinite;
}

@keyframes sun-pulse {
    0%, 100% { opacity: 0.85; transform: scale(1); }
    50%      { opacity: 1; transform: scale(1.05); }
}

/* Cursor sparkle canvas */
.cursor-sparkle {
    position: fixed;
    inset: 0;
    z-index: 50;
    pointer-events: none;
    mix-blend-mode: screen;
}

/* ===========================================================
   Stratum 2 — Bubbles + breeze
   =========================================================== */
.breeze {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 12000px;
    max-width: 1440px;
    margin: 0 auto;
    pointer-events: none;
}

.breeze-path {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.5;
}

.bubble {
    position: absolute;
    pointer-events: auto;
    cursor: pointer;
    list-style: none;
    transform-origin: 50% 50%;
    transition: transform 0.6s cubic-bezier(0.22,1,0.36,1);
    will-change: transform;
}

/* Each bubble's anchor is set inline by JS via --x and --y custom properties */
.bubble[style*="--x"] {
    left: var(--x);
    top: var(--y);
    transform: translate(-50%, -50%);
}

.bubble-inner {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 0.96;
    border-radius: 50% / 46%;
    background:
        radial-gradient(circle at 30% 30%,
            rgba(248,251,255,0.34) 0%,
            rgba(248,251,255,0.18) 35%,
            rgba(168,230,255,0.10) 80%);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    box-shadow:
        inset 6px 8px 22px rgba(255,255,255,0.55),
        inset -8px -10px 28px rgba(31,45,90,0.18),
        0 40px 80px rgba(31,45,90,0.20),
        0 0 0 1px rgba(248,251,255,0.6);
    overflow: hidden;
    animation: breathe 1.5s ease-in-out infinite alternate;
    transition:
        transform 0.5s cubic-bezier(0.22,1,0.36,1),
        box-shadow 0.5s ease;
}

@keyframes breathe {
    0%   { transform: scale(1.000); }
    100% { transform: scale(1.012); }
}

/* Inner highlight — rotates on hover */
.bubble-inner::before {
    content: "";
    position: absolute;
    top: 8%;
    left: 12%;
    width: 30%;
    height: 22%;
    background: radial-gradient(ellipse at 30% 30%, rgba(255,255,255,0.55), rgba(255,255,255,0.05) 70%, transparent);
    border-radius: 50%;
    transform: rotate(-12deg);
    transition: transform 0.6s ease;
    pointer-events: none;
}

/* Meniscus rim */
.bubble-inner::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(248,251,255,0.6);
    pointer-events: none;
}

.bubble:hover .bubble-inner {
    transform: scale(1.06);
    box-shadow:
        inset 6px 8px 26px rgba(255,255,255,0.72),
        inset -8px -10px 32px rgba(31,45,90,0.22),
        0 50px 110px rgba(31,45,90,0.28),
        0 0 0 1px rgba(248,251,255,0.85),
        0 0 80px rgba(255,184,124,0.25);
}

.bubble:hover .bubble-inner::before {
    transform: rotate(6deg);
}

/* Fingerprint smudge on hover */
.bubble-inner > .smudge {
    position: absolute;
    bottom: 16%;
    right: 14%;
    width: 18%;
    height: 14%;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(255,255,255,0.18) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}
.bubble:hover .bubble-inner > .smudge {
    opacity: 1;
}

/* Sizes */
.bubble-hero { width: 70vw; max-width: 720px; }
.bubble-lg   { width: 38vw; max-width: 560px; }
.bubble-md   { width: 28vw; max-width: 420px; }
.bubble-sm   { width: 18vw; max-width: 260px; min-width: 200px; }

/* Bubble photo */
.bubble-photo {
    position: absolute;
    top: 6%;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    height: 38%;
    border-radius: 50% / 60%;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.photo-bokeh {
    position: absolute;
    inset: -10%;
    background:
        radial-gradient(circle at 30% 35%, rgba(255,184,124,0.55) 0%, transparent 28%),
        radial-gradient(circle at 70% 50%, rgba(255,122,158,0.5) 0%, transparent 30%),
        radial-gradient(circle at 50% 80%, rgba(168,230,255,0.55) 0%, transparent 36%),
        radial-gradient(circle at 20% 70%, rgba(200,168,255,0.45) 0%, transparent 30%);
    filter: blur(32px) saturate(1.3);
    opacity: 0.85;
}
.bokeh-warm   { background:
        radial-gradient(circle at 30% 35%, rgba(255,184,124,0.7) 0%, transparent 30%),
        radial-gradient(circle at 70% 60%, rgba(255,200,176,0.55) 0%, transparent 30%),
        radial-gradient(circle at 55% 85%, rgba(255,122,158,0.45) 0%, transparent 35%); }
.bokeh-cool   { background:
        radial-gradient(circle at 30% 35%, rgba(168,230,255,0.7) 0%, transparent 30%),
        radial-gradient(circle at 70% 50%, rgba(200,168,255,0.55) 0%, transparent 32%),
        radial-gradient(circle at 50% 85%, rgba(125,255,192,0.4) 0%, transparent 40%); }
.bokeh-coral  { background:
        radial-gradient(circle at 30% 35%, rgba(255,122,158,0.7) 0%, transparent 30%),
        radial-gradient(circle at 70% 55%, rgba(255,184,124,0.55) 0%, transparent 32%),
        radial-gradient(circle at 50% 80%, rgba(255,200,176,0.5) 0%, transparent 38%); }
.bokeh-mint   { background:
        radial-gradient(circle at 30% 35%, rgba(125,255,192,0.65) 0%, transparent 30%),
        radial-gradient(circle at 70% 55%, rgba(168,230,255,0.55) 0%, transparent 35%),
        radial-gradient(circle at 50% 85%, rgba(200,168,255,0.4) 0%, transparent 40%); }
.bokeh-lilac  { background:
        radial-gradient(circle at 30% 35%, rgba(200,168,255,0.7) 0%, transparent 32%),
        radial-gradient(circle at 70% 55%, rgba(255,122,158,0.5) 0%, transparent 30%),
        radial-gradient(circle at 50% 85%, rgba(168,230,255,0.45) 0%, transparent 38%); }

.photo-object {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* chromatic aberration */
    filter: drop-shadow(-1.5px 0 0 rgba(168,230,255,0.55))
            drop-shadow(1.5px 0 0 rgba(255,122,158,0.5));
}

.bubble-photo-hero {
    width: 50%;
    height: 26%;
    top: 8%;
}

.lens-flare-streak {
    position: absolute;
    top: 50%;
    left: -15%;
    right: -15%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,184,124,0.7) 50%, transparent);
    opacity: 0.55;
    transform-origin: 50% 50%;
    box-shadow: 0 0 14px rgba(255,184,124,0.6);
}

/* Bubble content text */
.bubble-content {
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: 10%;
    text-align: center;
    z-index: 2;
}

.bubble-no {
    font-family: var(--label-font);
    font-weight: 200;
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: lowercase;
    color: var(--dusk-indigo);
    opacity: 0.65;
    margin-bottom: 0.4rem;
}

.bubble-title {
    font-family: var(--display-font);
    font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
    font-style: italic;
    font-weight: 500;
    color: var(--dusk-indigo);
    line-height: 1.05;
    margin-bottom: 0.6rem;
    text-rendering: optimizeLegibility;
}

.bubble-hero .bubble-title {
    font-size: clamp(2.4rem, 5.6vw, 5.5rem);
    margin-bottom: 1rem;
}
.bubble-lg .bubble-title { font-size: clamp(1.8rem, 3.4vw, 2.8rem); }
.bubble-md .bubble-title { font-size: clamp(1.3rem, 2.4vw, 2rem); }
.bubble-sm .bubble-title { font-size: clamp(0.95rem, 1.4vw, 1.2rem); }

.bubble-letter {
    font-family: var(--body-font);
    font-weight: 500;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--dusk-indigo);
    opacity: 0.92;
    margin-bottom: 0.6rem;
    max-width: 32ch;
    margin-left: auto;
    margin-right: auto;
}

.bubble-hero .bubble-letter {
    font-family: var(--display-font);
    font-style: italic;
    font-size: clamp(1rem, 1.4vw, 1.4rem);
    line-height: 1.65;
    max-width: 36ch;
}

.bubble-sm .bubble-letter { font-size: 0.78rem; line-height: 1.45; max-width: 26ch; }
.bubble-md .bubble-letter { font-size: 0.86rem; }

.bubble-sign {
    font-family: var(--display-font);
    font-style: italic;
    font-size: 0.92rem;
    color: var(--coral-whisper);
    opacity: 0.95;
}

.bubble-cue {
    font-family: var(--label-font);
    font-weight: 200;
    font-size: 0.85rem;
    letter-spacing: 0.22em;
    color: var(--dusk-indigo);
    opacity: 0.6;
    margin-top: 1.6rem;
    text-transform: lowercase;
    border-bottom: 1px solid var(--sun-apricot);
    display: inline-block;
    padding-bottom: 4px;
    animation: cue-pulse 2.4s ease-in-out infinite;
}

@keyframes cue-pulse {
    0%, 100% { opacity: 0.45; transform: translateY(0); }
    50%      { opacity: 0.85; transform: translateY(2px); }
}

/* Marginalia (pencil) SVG */
.marginalia {
    position: absolute;
    width: 18%;
    height: 18%;
    z-index: 3;
    pointer-events: none;
}
.bubble-hero .marginalia { top: 8%; right: 8%; width: 12%; height: 12%; }
.bubble-lg .marginalia,
.bubble-md .marginalia { top: 10%; right: 8%; }
.bubble-sm .marginalia { top: 8%; right: 6%; }

.pencil-mark {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    transition: stroke-dashoffset 1.2s cubic-bezier(0.22,1,0.36,1);
}

.bubble.in-view .pencil-mark { stroke-dashoffset: 0; }

/* Footer pebble */
.footer-pebble {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: auto;
    z-index: 3;
    padding: 14px 26px;
    border-radius: 60% / 60%;
    background:
        radial-gradient(circle at 30% 30%,
            rgba(248,251,255,0.45),
            rgba(168,230,255,0.18) 70%);
    backdrop-filter: blur(18px) saturate(1.3);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
    box-shadow:
        inset 0 0 0 1px rgba(248,251,255,0.6),
        inset 4px 4px 16px rgba(255,255,255,0.5),
        inset -4px -4px 16px rgba(31,45,90,0.15),
        0 16px 40px rgba(31,45,90,0.18);
    font-family: var(--label-font);
    font-weight: 200;
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    color: var(--dusk-indigo);
    opacity: 0.85;
    text-transform: lowercase;
}

/* ===========================================================
   Stratum 3 — Pebble compass + aurora ribbon
   =========================================================== */
.pebble-compass {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 20;
    width: 90px;
    height: 86px;
    border: none;
    cursor: pointer;
    border-radius: 50% / 46%;
    padding: 0;
    background:
        radial-gradient(circle at 30% 30%,
            rgba(248,251,255,0.55) 0%,
            rgba(168,230,255,0.22) 60%,
            rgba(31,45,90,0.05) 100%);
    backdrop-filter: blur(22px) saturate(1.5);
    -webkit-backdrop-filter: blur(22px) saturate(1.5);
    box-shadow:
        inset 4px 6px 18px rgba(255,255,255,0.55),
        inset -6px -8px 22px rgba(31,45,90,0.22),
        0 18px 40px rgba(31,45,90,0.22),
        0 0 0 1px rgba(248,251,255,0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: transform 0.5s cubic-bezier(0.22,1,0.36,1), box-shadow 0.4s ease;
    color: var(--dusk-indigo);
    font-family: var(--label-font);
    animation: pebble-float 4s ease-in-out infinite;
}

@keyframes pebble-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}

.pebble-compass:hover,
.pebble-compass.open {
    transform: scale(1.08) translateY(-6px);
    box-shadow:
        inset 4px 6px 18px rgba(255,255,255,0.7),
        inset -6px -8px 22px rgba(31,45,90,0.28),
        0 24px 60px rgba(31,45,90,0.28),
        0 0 0 1px rgba(248,251,255,0.8),
        0 0 60px rgba(255,184,124,0.3);
}

.pebble-rose {
    transition: transform 0.6s ease;
}
.pebble-compass:hover .pebble-rose,
.pebble-compass.open .pebble-rose {
    transform: rotate(45deg);
}

.pebble-label {
    font-family: var(--label-font);
    font-weight: 200;
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: lowercase;
    color: var(--dusk-indigo);
    opacity: 0.8;
    margin-top: 4px;
    max-width: 80px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Aurora ribbon menu */
.aurora-ribbon {
    position: fixed;
    bottom: 130px;
    right: 8px;
    width: 320px;
    height: 440px;
    z-index: 19;
    pointer-events: none;
    opacity: 0;
    transform: translateY(20px) scale(0.92);
    transform-origin: 90% 100%;
    transition:
        opacity 0.5s cubic-bezier(0.22,1,0.36,1),
        transform 0.5s cubic-bezier(0.22,1,0.36,1);
    border-radius: 28% / 22%;
    overflow: hidden;
    box-shadow:
        0 30px 80px rgba(31,45,90,0.28),
        inset 0 0 0 1px rgba(248,251,255,0.6);
}

.aurora-ribbon.open {
    pointer-events: auto;
    opacity: 1;
    transform: translateY(0) scale(1);
}

.aurora-soap {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.aurora-list {
    position: absolute;
    inset: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 30px 36px;
    gap: 14px;
    z-index: 2;
}

.aurora-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-family: var(--body-font);
    font-weight: 300;
    font-size: 1.18rem;
    color: var(--dusk-indigo);
    text-shadow: 0 1px 2px rgba(248,251,255,0.6);
    letter-spacing: 0.02em;
    text-transform: lowercase;
    padding: 4px 10px;
    border-radius: 12px;
    transition: transform 0.3s ease, background 0.3s ease;
    animation: ribbon-bob 3.5s ease-in-out infinite;
}

.aurora-list li:nth-child(1) { animation-delay: 0s; }
.aurora-list li:nth-child(2) { animation-delay: 0.4s; }
.aurora-list li:nth-child(3) { animation-delay: 0.8s; }
.aurora-list li:nth-child(4) { animation-delay: 1.2s; }
.aurora-list li:nth-child(5) { animation-delay: 1.6s; }
.aurora-list li:nth-child(6) { animation-delay: 2.0s; }

@keyframes ribbon-bob {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(8px); }
}

.aurora-list li:hover {
    background: rgba(248,251,255,0.32);
    transform: translateX(14px) scale(1.04);
}

.aurora-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%,
        rgba(255,255,255,0.95),
        rgba(255,184,124,0.6) 70%);
    box-shadow: 0 0 10px rgba(255,184,124,0.5);
}

/* ===========================================================
   Pop overlay (bubble expanded)
   =========================================================== */
.pop-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.pop-overlay.open {
    pointer-events: auto;
    opacity: 1;
}

.pop-frost {
    position: absolute;
    inset: 0;
    background: rgba(31,45,90,0.34);
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
}

.pop-bubble {
    position: relative;
    width: min(80vw, 880px);
    height: min(80vh, 720px);
    border-radius: 50% / 46%;
    background:
        radial-gradient(circle at 30% 30%,
            rgba(248,251,255,0.4) 0%,
            rgba(168,230,255,0.18) 60%);
    backdrop-filter: blur(28px) saturate(1.5);
    -webkit-backdrop-filter: blur(28px) saturate(1.5);
    box-shadow:
        inset 8px 10px 30px rgba(255,255,255,0.6),
        inset -10px -14px 36px rgba(31,45,90,0.25),
        0 60px 140px rgba(31,45,90,0.4),
        0 0 0 1px rgba(248,251,255,0.7);
    transform: scale(0.85);
    transition: transform 0.6s cubic-bezier(0.22,1,0.36,1);
    overflow: hidden;
    padding: 4vw;
}

.pop-overlay.open .pop-bubble {
    transform: scale(1);
}

.pop-close {
    position: absolute;
    top: 22px;
    right: 28px;
    width: 44px;
    height: 44px;
    border: none;
    cursor: pointer;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(248,251,255,0.5), rgba(168,230,255,0.2));
    box-shadow:
        inset 0 0 0 1px rgba(248,251,255,0.6),
        0 6px 18px rgba(31,45,90,0.18);
    color: var(--dusk-indigo);
    font-family: var(--display-font);
    font-size: 1.6rem;
    line-height: 1;
    z-index: 3;
    transition: transform 0.3s ease;
}
.pop-close:hover { transform: scale(1.12) rotate(90deg); }

.pop-inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    overflow: hidden;
    padding: 0 6%;
}

.pop-inner .pop-no {
    font-family: var(--label-font);
    font-weight: 200;
    font-size: 0.85rem;
    letter-spacing: 0.22em;
    text-transform: lowercase;
    color: var(--dusk-indigo);
    opacity: 0.6;
    margin-bottom: 0.5rem;
}
.pop-inner .pop-title {
    font-family: var(--display-font);
    font-style: italic;
    font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
    font-size: clamp(2rem, 4.4vw, 4rem);
    line-height: 1.05;
    color: var(--dusk-indigo);
    margin-bottom: 1.4rem;
}
.pop-inner .pop-letter {
    font-family: var(--display-font);
    font-style: italic;
    font-size: clamp(1rem, 1.4vw, 1.3rem);
    line-height: 1.7;
    max-width: 48ch;
    color: var(--dusk-indigo);
    opacity: 0.92;
    margin-bottom: 1rem;
}
.pop-inner .pop-letter + .pop-letter {
    font-family: var(--body-font);
    font-style: normal;
    font-weight: 500;
    font-size: 1rem;
}
.pop-inner .pop-sign {
    font-family: var(--display-font);
    font-style: italic;
    color: var(--coral-whisper);
    margin-top: 1rem;
}

/* Child bubbles emitted on hover/click */
.child-bubble {
    position: fixed;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%,
        rgba(248,251,255,0.85),
        rgba(168,230,255,0.4) 60%,
        transparent 80%);
    box-shadow:
        inset 0 0 4px rgba(248,251,255,0.7),
        0 0 8px rgba(255,184,124,0.3);
    pointer-events: none;
    z-index: 80;
    will-change: transform, opacity;
}

/* ===========================================================
   Pulse / bounce / border animations (rare patterns)
   =========================================================== */
@keyframes pulse-attention {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,122,158,0); }
    50%      { box-shadow: 0 0 0 14px rgba(255,122,158,0.18); }
}

@keyframes border-animate {
    0%   { box-shadow: 0 0 0 1px rgba(168,230,255,0.6); }
    50%  { box-shadow: 0 0 0 1px rgba(255,184,124,0.6); }
    100% { box-shadow: 0 0 0 1px rgba(168,230,255,0.6); }
}

@keyframes bounce-enter {
    0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }
    65%  { transform: translate(-50%, -50%) scale(1.06); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

.bubble.in-view {
    animation: bounce-enter 0.9s cubic-bezier(0.22,1.4,0.36,1) both;
}

.bubble.in-view.is-active .bubble-inner {
    animation: pulse-attention 2.4s ease-in-out infinite, breathe 1.5s ease-in-out infinite alternate;
}

/* Flame flicker for the candle SVG */
.flame-flicker {
    animation: flame 0.9s ease-in-out infinite alternate;
    transform-origin: 60px 38px;
}
@keyframes flame {
    0%   { transform: scaleY(1) translateY(0); opacity: 1; }
    100% { transform: scaleY(0.9) translateY(1px); opacity: 0.8; }
}

/* ===========================================================
   Mobile — collapse breeze to a vertical lazy river
   =========================================================== */
@media (max-width: 800px) {
    .breeze {
        height: auto;
        padding: 60px 0 220px;
        display: flex;
        flex-direction: column;
        gap: 40px;
        align-items: center;
    }
    .breeze-path { display: none; }
    .bubble {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: translate(0,0) !important;
        width: 86vw !important;
        max-width: 86vw !important;
    }
    .bubble.in-view { animation: bounce-enter 0.7s cubic-bezier(0.22,1.4,0.36,1) both; }
    .pebble-compass { width: 76px; height: 72px; }
    .aurora-ribbon { width: 280px; height: 380px; right: 8px; }
    .footer-pebble { position: relative; bottom: 20px; }
}

/* Reduce motion — quiet mercy */
@media (prefers-reduced-motion: reduce) {
    .cursor-sparkle { display: none; }
    .bubble-inner { animation: none; }
    .lens-flare-seam { animation: none; opacity: 0.18; }
    .sun-flare { animation: none; }
    .pebble-compass { animation: none; }
    .aurora-list li { animation: none; }
}