/* concepts.news - Meditation Hall News Bulletin */
/* Colors: Rice Paper #F5EFE0, Ink Stone #3B3226, Faded Brush #8A7D6B,
   Aurora Green #7ECFB3, Aurora Violet #B8A9D4, Aurora Rose #E8B4B8,
   Signal Blue #4A6FA5, Warm Ash #D5CCBD */

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

html {
    font-size: 18px;
    scroll-behavior: smooth;
}

body {
    background-color: #F5EFE0;
    color: #3B3226;
    font-family: 'Lora', Georgia, serif;
    line-height: 1.7;
    letter-spacing: 0.005em;
    overflow-x: hidden;
}

/* ========================
   THE THRESHOLD
   ======================== */

.threshold {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
}

.threshold-title {
    position: relative;
    z-index: 2;
    margin-left: 48px;
}

.threshold-text {
    font-family: 'Cormorant Garamond', 'Georgia', serif;
    font-weight: 700;
    font-size: clamp(36px, 6vw, 72px);
    letter-spacing: -0.01em;
    line-height: 1.15;
    color: #3B3226;
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    display: block;
}

.threshold-blob {
    position: absolute;
    right: 15%;
    top: 50%;
    transform: translateY(-50%);
    width: clamp(180px, 30vw, 400px);
    height: clamp(180px, 30vw, 400px);
    z-index: 1;
    opacity: 0.8;
}

.threshold-blob .blob-1 {
    fill: #E8B4B8;
    fill-opacity: 0.2;
    stroke: #D5CCBD;
    stroke-width: 1;
    animation: blob-breathe-1 8s ease-in-out infinite;
}

.threshold-blob .blob-1-alt {
    fill: #7ECFB3;
    fill-opacity: 0.12;
    stroke: none;
    animation: blob-breathe-1 8s ease-in-out infinite reverse;
}

/* ========================
   THE STREAM
   ======================== */

.stream,
.stream-continued {
    max-width: 580px;
    margin-left: clamp(48px, 15vw, 280px);
    margin-right: auto;
    padding: 80px 24px;
}

.concept-block {
    margin-bottom: 120px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.concept-block.revealed {
    opacity: 1;
    transform: translateY(0);
}

.concept-block:nth-child(3n) {
    transform: translateX(16px) translateY(20px);
}

.concept-block:nth-child(3n).revealed {
    transform: translateX(16px) translateY(0);
}

.datestamp {
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
    font-weight: 300;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #8A7D6B;
    margin-bottom: 16px;
    position: relative;
    display: inline-block;
    cursor: default;
}

.datestamp::after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background-color: #4A6FA5;
    opacity: 0.3;
    margin-top: 4px;
}

.datestamp:hover {
    animation: glitch-flicker 0.2s steps(2) 1;
}

.concept-headline {
    font-family: 'Cormorant Garamond', 'Georgia', serif;
    font-weight: 600;
    font-size: clamp(28px, 5vw, 64px);
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: #3B3226;
    margin-bottom: 20px;
}

.concept-abstract {
    font-family: 'Lora', Georgia, serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.7;
    letter-spacing: 0.005em;
    color: #3B3226;
}

/* ========================
   BLOB DIVIDERS
   ======================== */

.blob-divider {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 120px;
    opacity: 0;
    transition: opacity 0.6s ease-out;
}

.blob-divider.revealed {
    opacity: 1;
}

.blob-divider svg {
    width: clamp(80px, 15vw, 200px);
    height: auto;
}

.blob-2 {
    fill: #7ECFB3;
    fill-opacity: 0.2;
    stroke: #D5CCBD;
    stroke-width: 1;
    animation: blob-breathe-2 15s ease-in-out infinite;
}

.blob-2-alt {
    fill: #B8A9D4;
    fill-opacity: 0.1;
    stroke: none;
    animation: blob-breathe-2 15s ease-in-out infinite reverse;
}

.blob-3 {
    fill: #B8A9D4;
    fill-opacity: 0.18;
    stroke: #D5CCBD;
    stroke-width: 1;
    animation: blob-breathe-3 18s ease-in-out infinite;
}

.blob-3-alt {
    fill: #E8B4B8;
    fill-opacity: 0.1;
    stroke: none;
    animation: blob-breathe-3 18s ease-in-out infinite reverse;
}

.blob-5 {
    fill: #E8B4B8;
    fill-opacity: 0.2;
    stroke: #D5CCBD;
    stroke-width: 1;
    animation: blob-breathe-5 12s ease-in-out infinite;
}

.blob-5-alt {
    fill: #7ECFB3;
    fill-opacity: 0.1;
    stroke: none;
    animation: blob-breathe-5 12s ease-in-out infinite reverse;
}

.blob-6 {
    fill: #7ECFB3;
    fill-opacity: 0.15;
    stroke: #D5CCBD;
    stroke-width: 1;
    animation: blob-breathe-6 20s ease-in-out infinite;
}

.blob-6-alt {
    fill: #B8A9D4;
    fill-opacity: 0.1;
    stroke: none;
    animation: blob-breathe-6 20s ease-in-out infinite reverse;
}

/* ========================
   THE INTERVAL
   ======================== */

.interval {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.8s ease-out;
}

.interval.revealed {
    opacity: 1;
}

.interval-word {
    font-family: 'Cormorant Garamond', 'Georgia', serif;
    font-weight: 700;
    font-size: clamp(80px, 15vw, 200px);
    line-height: 1;
    letter-spacing: -0.02em;
    position: relative;
    z-index: 2;
    text-align: center;
}

.aurora-text {
    background: linear-gradient(90deg, #7ECFB3, #B8A9D4, #E8B4B8, #7ECFB3);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: aurora-shift 15s ease-in-out infinite;
}

.interval-blob {
    position: absolute;
    width: clamp(250px, 50vw, 500px);
    height: clamp(250px, 50vw, 500px);
    z-index: 1;
    opacity: 0.5;
}

.blob-4 {
    animation: blob-breathe-4 16s ease-in-out infinite;
}

.blob-4-alt {
    animation: blob-breathe-4 16s ease-in-out infinite reverse;
    opacity: 0.5;
}

.interval-word.glitching {
    animation: interval-glitch 0.2s steps(2) 1;
}

/* ========================
   THE RESIDUE
   ======================== */

.residue {
    max-width: 580px;
    margin-left: clamp(48px, 15vw, 280px);
    margin-right: auto;
    padding: 80px 24px 200px;
    background: linear-gradient(to bottom, #F5EFE0 0%, #F0E8D6 100%);
}

.residue-block {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.residue-block.revealed {
    opacity: 0.6;
    transform: translateY(0);
}

.residue-closing {
    margin-top: 120px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.residue-closing.revealed {
    opacity: 0.6;
    transform: translateY(0);
}

.residue-text {
    font-family: 'Cormorant Garamond', 'Georgia', serif;
    font-weight: 400;
    font-style: italic;
    font-size: clamp(24px, 4vw, 48px);
    color: #8A7D6B;
    line-height: 1.3;
}

/* ========================
   KEYFRAME ANIMATIONS
   ======================== */

@keyframes blob-breathe-1 {
    0%, 100% {
        d: path('M150,50 C200,30 260,80 270,140 C280,200 240,260 180,270 C120,280 60,240 40,180 C20,120 80,70 150,50');
    }
    50% {
        d: path('M155,45 C205,35 255,85 265,145 C275,205 235,255 175,268 C115,278 55,235 45,175 C35,115 85,65 155,45');
    }
}

@keyframes blob-breathe-2 {
    0%, 100% {
        d: path('M100,10 C140,5 180,30 185,60 C190,90 160,110 120,108 C80,106 30,95 20,65 C10,35 60,15 100,10');
    }
    50% {
        d: path('M105,12 C142,8 175,35 182,62 C189,89 155,108 118,105 C81,102 35,90 25,62 C15,34 65,18 105,12');
    }
}

@keyframes blob-breathe-3 {
    0%, 100% {
        d: path('M90,15 C130,5 175,25 188,55 C200,85 170,110 130,112 C90,114 40,100 18,72 C-4,44 50,25 90,15');
    }
    50% {
        d: path('M95,18 C132,10 170,28 184,58 C198,88 165,108 128,110 C91,112 45,96 22,68 C-1,40 55,28 95,18');
    }
}

@keyframes blob-breathe-4 {
    0%, 100% {
        d: path('M200,40 C270,30 340,90 350,170 C360,250 310,340 230,350 C150,360 70,310 50,230 C30,150 110,50 200,40');
    }
    50% {
        d: path('M205,45 C268,38 335,95 345,175 C355,255 305,335 225,348 C145,358 75,305 55,225 C35,145 115,55 205,45');
    }
}

@keyframes blob-breathe-5 {
    0%, 100% {
        d: path('M95,10 C135,0 180,20 190,55 C200,90 175,115 135,115 C95,115 45,105 25,75 C5,45 55,20 95,10');
    }
    50% {
        d: path('M100,14 C138,5 176,24 186,58 C196,92 170,112 132,113 C94,114 48,100 30,72 C12,44 60,24 100,14');
    }
}

@keyframes blob-breathe-6 {
    0%, 100% {
        d: path('M85,18 C125,5 170,20 185,52 C200,84 178,112 140,115 C102,118 48,108 22,78 C-4,48 45,31 85,18');
    }
    50% {
        d: path('M90,20 C128,8 168,24 182,56 C196,88 172,110 138,113 C104,116 52,104 28,74 C4,44 50,34 90,20');
    }
}

@keyframes aurora-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes glitch-flicker {
    0% {
        text-shadow: -1px 0 #4A6FA5, 1px 0 #E8B4B8;
        clip-path: inset(20% 0 40% 0);
    }
    50% {
        text-shadow: 1px 0 #4A6FA5, -1px 0 #E8B4B8;
        clip-path: inset(60% 0 10% 0);
    }
    100% {
        text-shadow: none;
        clip-path: none;
    }
}

@keyframes interval-glitch {
    0% {
        text-shadow: -2px 0 #4A6FA5, 2px 0 #E8B4B8;
        filter: none;
    }
    25% {
        text-shadow: 2px 0 #4A6FA5, -2px 0 #E8B4B8;
        filter: hue-rotate(5deg);
    }
    50% {
        text-shadow: -1px 1px #B8A9D4, 1px -1px #7ECFB3;
        filter: none;
    }
    75% {
        text-shadow: 1px 0 #4A6FA5, -1px 0 #E8B4B8;
        filter: hue-rotate(-3deg);
    }
    100% {
        text-shadow: none;
        filter: none;
    }
}

/* ========================
   RESPONSIVE / MOBILE
   ======================== */

@media (max-width: 768px) {
    .stream,
    .stream-continued,
    .residue {
        margin-left: auto;
        margin-right: auto;
        padding-left: 24px;
        padding-right: 24px;
    }

    .threshold-title {
        margin-left: 24px;
    }

    .threshold-blob {
        right: 5%;
        width: 40vw;
        height: 40vw;
    }

    .concept-block:nth-child(3n) {
        transform: translateX(8px) translateY(20px);
    }

    .concept-block:nth-child(3n).revealed {
        transform: translateX(8px) translateY(0);
    }

    .concept-block {
        margin-bottom: 80px;
    }

    .blob-divider {
        margin-bottom: 80px;
    }
}