/* ============================================================
   scire.dev — Glitched Meadow
   Palette:
     Hot Raspberry:     #FF2D6B
     Electric Violet:   #6B17E8
     Sunburst Coral:    #FF8A5C
     Meadow Gold:       #FFD166
     Deep Ink:          #1A1A2E
     Lavender Mist:     #F0E6F6
     Glitch Cyan:       #00F5D4
     Parchment Cream:   #FFF8F0
   Fonts: Caveat, Homemade Apple, Nunito
   ============================================================ */

/* --- Reset & Base --- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: 'Nunito', sans-serif;
    font-weight: 300;
    color: #1A1A2E;
    background: #FFF8F0;
    overflow-x: hidden;
    position: relative;
    min-height: 100vh;
}

/* --- Full-page background gradient (the dawn-to-dusk arc) --- */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    background: linear-gradient(
        to bottom,
        #FFF8F0 0%,
        #F0E6F6 14%,
        #F0E6F6 22%,
        #3a1a5e 38%,
        #1A1A2E 48%,
        #2a1050 56%,
        #6B17E8 64%,
        #FF8A5C 78%,
        #FFD166 92%,
        #FFD166 100%
    );
    background-attachment: fixed;
}

/* --- Scanline Overlay (CRT-monitor texture) --- */
#scanlines {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    pointer-events: none;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 2px,
        rgba(0, 0, 0, 0.03) 2px,
        rgba(0, 0, 0, 0.03) 3px
    );
    transition: background 0.6s ease;
}

body.dark-section #scanlines {
    background: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 2px,
        rgba(0, 245, 212, 0.08) 2px,
        rgba(0, 245, 212, 0.08) 3px
    );
}

/* --- Opening Section --- */
.opening {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.opening-inner {
    text-align: center;
    position: relative;
    padding: 0 1rem;
}

.scire-title {
    font-family: 'Caveat', cursive;
    font-size: clamp(4rem, 12vw, 10rem);
    font-weight: 700;
    color: #FF2D6B;
    letter-spacing: -0.01em;
    line-height: 1;
    margin-bottom: 1.5rem;
}

.scire-title .letter {
    display: inline-block;
    opacity: 0;
    transform: translate(0, 0) rotate(0deg);
}

.scire-title .letter.visible {
    opacity: 1;
    animation: letterJitter 0.4s ease-out forwards;
}

@keyframes letterJitter {
    0% {
        transform: translate(2px, -3px) rotate(-1deg);
        opacity: 0;
    }
    35% {
        transform: translate(-2px, 2px) rotate(1deg);
        opacity: 1;
    }
    65% {
        transform: translate(1px, -1px) rotate(-0.5deg);
    }
    100% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 1;
    }
}

.subtitle {
    font-family: 'Nunito', sans-serif;
    font-weight: 300;
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    color: rgba(26, 26, 46, 0.7);
    opacity: 0;
    transition: opacity 0.8s ease;
    margin-bottom: 3rem;
    letter-spacing: 0.02em;
}

.subtitle.visible {
    opacity: 1;
}

.scroll-chevron {
    opacity: 0;
    transition: opacity 0.6s ease;
    animation: chevronPulse 2s ease-in-out infinite;
    display: inline-block;
}

.scroll-chevron.visible {
    opacity: 1;
}

@keyframes chevronPulse {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(8px); }
}

/* --- Main Content River --- */
.content {
    position: relative;
    z-index: 2;
    max-width: 640px;
    margin: 0 auto;
    padding: 0 clamp(1.5rem, 8vw, 6rem);
}

/* --- Pulse Sections (irregular cadence) --- */
.pulse {
    position: relative;
    padding: 8vh 0;
}

.pulse-1 {
    padding-top: 12vh;
    padding-bottom: 10vh;
}

.pulse-2 {
    padding-top: 8vh;
    padding-bottom: 12vh;
}

.pulse-3 {
    padding-top: 16vh;
    padding-bottom: 18vh;
}

.pulse-4 {
    padding-top: 10vh;
    padding-bottom: 12vh;
}

.pulse-5 {
    padding-top: 8vh;
    padding-bottom: 22vh;
}

/* --- Headings --- */
.heading {
    font-family: 'Caveat', cursive;
    font-size: clamp(2.2rem, 6vw, 5rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.1;
    margin-bottom: 2rem;
    position: relative;
    transition: text-shadow 0.2s ease;
    cursor: default;
    display: inline-block;
}

.heading-raspberry {
    color: #FF2D6B;
}

.heading-violet {
    color: #6B17E8;
}

/* Chromatic aberration hover */
.heading:hover {
    text-shadow:
        -2px 0 #FF2D6B,
        2px 0 #00F5D4;
}

.pulse-3 .heading:hover {
    text-shadow:
        -2px 0 #FF2D6B,
        2px 0 #00F5D4,
        0 0 18px rgba(0, 245, 212, 0.35);
}

/* --- Body Text --- */
.body-text {
    font-family: 'Nunito', sans-serif;
    font-weight: 300;
    font-size: clamp(1rem, 2.5vw, 1.15rem);
    line-height: 1.75;
    color: #1A1A2E;
    margin-bottom: 1.8rem;
}

.body-text em {
    font-style: italic;
    color: #6B17E8;
    font-weight: 400;
}

.body-text.text-light {
    color: #F0E6F6;
}

.body-text.text-light em {
    color: #FFD166;
}

.body-text.sparse-text {
    margin-top: 6vh;
    margin-bottom: 6vh;
    font-size: clamp(1.1rem, 3vw, 1.3rem);
    font-weight: 400;
    text-align: center;
}

.body-text.last-line {
    margin-bottom: 10vh;
    font-weight: 600;
    font-family: 'Caveat', cursive;
    font-size: clamp(1.6rem, 4vw, 2.2rem);
    color: #FF2D6B;
}

/* --- Pull Quotes --- */
.pull-quote {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 5vh 0;
    padding: 2rem 1rem;
    background: rgba(255, 209, 102, 0.18);
    position: relative;
}

.pull-quote::before,
.pull-quote::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
}

.pull-quote::before {
    top: 0;
    left: 0;
    border-style: solid;
    border-width: 14px 14px 0 0;
    border-color: #FF2D6B transparent transparent transparent;
}

.pull-quote::after {
    bottom: 0;
    right: 0;
    border-style: solid;
    border-width: 0 0 14px 14px;
    border-color: transparent transparent #6B17E8 transparent;
}

.pull-quote p {
    font-family: 'Caveat', cursive;
    font-size: clamp(1.3rem, 3.5vw, 1.8rem);
    font-weight: 500;
    color: #6B17E8;
    line-height: 1.4;
    flex: 1;
    text-align: center;
}

.pull-quote-warm {
    background: rgba(255, 138, 92, 0.14);
}

.pull-quote-warm::before {
    border-color: #FF8A5C transparent transparent transparent;
}

.pull-quote-warm::after {
    border-color: transparent transparent #FFD166 transparent;
}

.pull-quote-warm p {
    color: #FF8A5C;
}

.angle-decoration {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
}

/* --- Diagonal Tear Lines --- */
.diagonal-tear {
    position: relative;
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    height: 60px;
    margin: 4vh 0;
    overflow: hidden;
    pointer-events: none;
}

.diagonal-tear::before,
.diagonal-tear::after {
    content: '';
    position: absolute;
    top: 0;
    left: -10%;
    width: 120%;
    height: 100%;
}

.tear-1::before {
    background: linear-gradient(
        18deg,
        transparent 30%,
        rgba(107, 23, 232, 0.18) 30%,
        rgba(107, 23, 232, 0.18) 35%,
        transparent 35%,
        transparent 60%,
        rgba(255, 45, 107, 0.12) 60%,
        rgba(255, 45, 107, 0.12) 65%,
        transparent 65%
    );
}

.tear-1::after {
    background: linear-gradient(
        -22deg,
        transparent 40%,
        rgba(0, 245, 212, 0.12) 40%,
        rgba(0, 245, 212, 0.12) 44%,
        transparent 44%
    );
}

.tear-2::before {
    background: linear-gradient(
        22deg,
        transparent 25%,
        rgba(255, 45, 107, 0.18) 25%,
        rgba(255, 45, 107, 0.18) 30%,
        transparent 30%,
        transparent 55%,
        rgba(0, 245, 212, 0.14) 55%,
        rgba(0, 245, 212, 0.14) 60%,
        transparent 60%
    );
}

.tear-2::after {
    background: linear-gradient(
        -16deg,
        transparent 50%,
        rgba(107, 23, 232, 0.12) 50%,
        rgba(107, 23, 232, 0.12) 55%,
        transparent 55%
    );
}

.tear-3::before {
    background: linear-gradient(
        -20deg,
        transparent 20%,
        rgba(0, 245, 212, 0.25) 20%,
        rgba(0, 245, 212, 0.25) 28%,
        transparent 28%,
        transparent 50%,
        rgba(255, 45, 107, 0.22) 50%,
        rgba(255, 45, 107, 0.22) 58%,
        transparent 58%
    );
}

.tear-3::after {
    background: linear-gradient(
        15deg,
        transparent 35%,
        rgba(107, 23, 232, 0.2) 35%,
        rgba(107, 23, 232, 0.2) 42%,
        transparent 42%
    );
}

.tear-4::before {
    background: linear-gradient(
        20deg,
        transparent 30%,
        rgba(255, 138, 92, 0.16) 30%,
        rgba(255, 138, 92, 0.16) 36%,
        transparent 36%,
        transparent 65%,
        rgba(255, 209, 102, 0.14) 65%,
        rgba(255, 209, 102, 0.14) 70%,
        transparent 70%
    );
}

.tear-4::after {
    background: linear-gradient(
        -18deg,
        transparent 45%,
        rgba(0, 245, 212, 0.08) 45%,
        rgba(0, 245, 212, 0.08) 49%,
        transparent 49%
    );
}

.tear-5::before {
    background: linear-gradient(
        -15deg,
        transparent 40%,
        rgba(255, 209, 102, 0.18) 40%,
        rgba(255, 209, 102, 0.18) 45%,
        transparent 45%,
        transparent 70%,
        rgba(255, 138, 92, 0.14) 70%,
        rgba(255, 138, 92, 0.14) 74%,
        transparent 74%
    );
}

.tear-5::after {
    background: linear-gradient(
        25deg,
        transparent 30%,
        rgba(255, 45, 107, 0.08) 30%,
        rgba(255, 45, 107, 0.08) 33%,
        transparent 33%
    );
}

/* --- Glitch-Botanical Dividers --- */
.glitch-botanical {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin: 6vh 0;
    text-align: center;
    pointer-events: none;
}

.botanical-svg {
    width: min(90vw, 600px);
    height: auto;
    opacity: 0.85;
}

.botanical-3 .botanical-svg {
    opacity: 0.95;
}

.botanical-5 .botanical-svg {
    opacity: 0.65;
}

.glitch-botanical.in-view .botanical-svg {
    animation: botanicalShimmer 4s ease-in-out infinite;
}

@keyframes botanicalShimmer {
    0%, 100% { filter: none; }
    48% { filter: none; }
    50% { filter: hue-rotate(8deg); }
    52% { filter: none; }
}

/* --- Margin Garden --- */
.margin-garden {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.margin-botanical {
    position: absolute;
    opacity: 0.12;
    width: 60px;
}

.margin-botanical-1 {
    top: 20%;
    left: 4%;
    transform: rotate(-5deg);
}

.margin-botanical-2 {
    top: 45%;
    right: 5%;
    transform: rotate(3deg);
    width: 70px;
}

.margin-botanical-3 {
    top: 70%;
    left: 3%;
    transform: rotate(-8deg);
    width: 50px;
}

/* --- Margin Notes (handwritten Latin asides) --- */
.margin-note {
    position: absolute;
    font-family: 'Homemade Apple', cursive;
    font-size: clamp(0.85rem, 2vw, 1.1rem);
    color: rgba(26, 26, 46, 0.18);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.margin-note.visible {
    opacity: 1;
}

.margin-note-1 {
    top: 25%;
    right: 3%;
    color: rgba(26, 26, 46, 0.18);
}

.margin-note-2 {
    top: 38%;
    left: 3%;
    color: rgba(26, 26, 46, 0.16);
}

.margin-note-3 {
    top: 55%;
    right: 4%;
    color: rgba(240, 230, 246, 0.32);
}

.margin-note-4 {
    top: 72%;
    left: 4%;
    color: rgba(240, 230, 246, 0.28);
}

.margin-note-5 {
    top: 88%;
    right: 3%;
    color: rgba(26, 26, 46, 0.18);
}

/* --- Angular Fragments (sharp-angle decoration only) --- */
.angular-fragments {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.fragment {
    position: absolute;
    opacity: 0;
    transition: opacity 0.6s ease, transform 1.2s ease;
}

.fragment.visible {
    opacity: 1;
}

.fragment-1 { top: 15%; left: 8%; }
.fragment-2 { top: 28%; right: 6%; }
.fragment-3 { top: 40%; left: 5%; }
.fragment-4 { top: 52%; right: 8%; }
.fragment-5 { top: 65%; left: 7%; }
.fragment-6 { top: 75%; right: 5%; }
.fragment-7 { top: 85%; left: 6%; }
.fragment-8 { top: 92%; right: 7%; }

/* --- Closing --- */
.closing {
    text-align: center;
    padding: 10vh 0 15vh;
}

.closing-word {
    font-family: 'Caveat', cursive;
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 400;
    color: #1A1A2E;
    opacity: 0.45;
    letter-spacing: 0.1em;
}

/* --- Anchor / Link styling (just in case) --- */
a {
    color: #6B17E8;
    text-decoration: none;
    border-bottom: 1px solid rgba(107, 23, 232, 0.3);
    transition: text-shadow 0.2s ease, border-color 0.2s ease;
}

a:hover {
    text-shadow:
        -2px 0 #FF2D6B,
        2px 0 #00F5D4;
    border-color: #FF2D6B;
}

/* --- Scroll-triggered fade-in for content pulses --- */
.pulse {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.9s ease, transform 0.9s ease;
}

.pulse.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* --- Pixel Dissolve Effect (used 3-4 times max) --- */
.pixel-dissolve-target {
    position: relative;
}

.pixel-dissolve-target.dissolving {
    animation: pixelDissolve 600ms ease forwards;
}

@keyframes pixelDissolve {
    0% {
        clip-path: inset(0 0 0 0);
        filter: none;
    }
    20% {
        clip-path: polygon(
            0% 0%, 10% 0%, 10% 10%, 20% 10%, 20% 0%, 30% 0%, 30% 15%, 40% 15%, 40% 0%, 50% 0%,
            50% 5%, 60% 5%, 60% 0%, 70% 0%, 70% 10%, 80% 10%, 80% 0%, 90% 0%, 90% 5%, 100% 5%,
            100% 100%, 0% 100%
        );
        filter: hue-rotate(15deg);
    }
    50% {
        clip-path: polygon(
            0% 0%, 5% 0%, 5% 20%, 15% 20%, 15% 5%, 25% 5%, 25% 15%, 35% 15%, 35% 0%, 45% 0%,
            45% 10%, 55% 10%, 55% 0%, 65% 0%, 65% 20%, 75% 20%, 75% 5%, 85% 5%, 85% 15%, 100% 15%,
            100% 100%, 90% 100%, 90% 85%, 80% 85%, 80% 100%, 70% 100%, 70% 90%, 60% 90%, 60% 100%,
            50% 100%, 50% 85%, 40% 85%, 40% 100%, 30% 100%, 30% 90%, 20% 90%, 20% 100%, 10% 100%, 10% 90%,
            0% 90%
        );
        filter: hue-rotate(-10deg);
    }
    80% {
        clip-path: polygon(
            0% 0%, 8% 0%, 8% 8%, 18% 8%, 18% 0%, 28% 0%, 28% 12%, 38% 12%, 38% 0%, 48% 0%,
            48% 6%, 58% 6%, 58% 0%, 68% 0%, 68% 10%, 78% 10%, 78% 0%, 88% 0%, 88% 4%, 100% 4%,
            100% 100%, 0% 100%
        );
        filter: none;
    }
    100% {
        clip-path: inset(0 0 0 0);
        filter: none;
    }
}

/* --- prefers-reduced-motion --- */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    .scire-title .letter {
        opacity: 1;
        transform: none;
        animation: none;
    }
    .subtitle,
    .scroll-chevron,
    .margin-note,
    .fragment {
        opacity: 1;
        transition: none;
    }
    .scroll-chevron {
        animation: none;
    }
    .pulse {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .pixel-dissolve-target.dissolving {
        animation: none;
    }
    .heading:hover,
    a:hover {
        text-shadow: none;
    }
    .glitch-botanical.in-view .botanical-svg {
        animation: none;
    }
}

/* --- Mobile Adjustments --- */
@media (max-width: 768px) {
    .margin-garden {
        display: none;
    }
    .angular-fragments {
        display: none;
    }
    .content {
        padding: 0 1.5rem;
    }
    .glitch-botanical {
        margin: 4vh 0;
    }
    .botanical-svg {
        width: 95vw;
    }
    .pull-quote {
        padding: 1.5rem 0.5rem;
        gap: 0.5rem;
    }
    .diagonal-tear {
        height: 40px;
    }
}

@media (max-width: 480px) {
    .scire-title {
        font-size: clamp(3rem, 15vw, 5rem);
    }
    .heading {
        font-size: clamp(2rem, 8vw, 3rem);
    }
}