/* ============================================
   logic.day — Cottagecore Meditation on Reason
   ============================================ */

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

html {
    scroll-behavior: smooth;
}

body {
    background-color: #f5ead0;
    color: #4a3728;
    font-family: 'Lora', Georgia, serif;
    font-size: clamp(1rem, 1.8vw, 1.15rem);
    line-height: 1.72;
    letter-spacing: 0.005em;
    overflow-x: hidden;
}

/* --- Typography --- */
h1, h2, h3 {
    font-family: 'Cormorant Garamond', 'Georgia', serif;
    letter-spacing: 0.02em;
    line-height: 1.15;
}

.notation {
    font-family: 'Fira Code', monospace;
    font-weight: 400;
    font-size: 0.95em;
    color: #996633;
    background: rgba(245, 234, 208, 0.6);
    border-radius: 3px;
    padding: 0.15em 0.4em;
}

.term {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
}

/* --- Hero: The Morning Study --- */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
}

.hero-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        #2c1a0e 0%,
        #7a3e10 20%,
        #f5ead0 60%,
        #f0c27f 90%,
        #fdf6e8 100%
    );
    animation: hero-breathe 20s ease-in-out infinite;
    z-index: 0;
}

@keyframes hero-breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.005); }
}

/* Lens Flares */
.lens-flares {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.flare {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
}

.flare-1 {
    width: 50vw;
    height: 50vh;
    top: 0;
    left: 5%;
    background: radial-gradient(ellipse at center, rgba(240, 194, 127, 0.18) 0%, rgba(240, 194, 127, 0) 70%);
    animation: flare-drift-1 60s ease-in-out infinite;
}

.flare-2 {
    width: 30vw;
    height: 30vh;
    top: 15%;
    left: 55%;
    background: radial-gradient(ellipse at center, rgba(232, 168, 124, 0.12) 0%, rgba(232, 168, 124, 0) 70%);
    animation: flare-drift-2 75s ease-in-out infinite;
}

.flare-3 {
    width: 20vw;
    height: 20vh;
    top: 30%;
    left: 20%;
    background: radial-gradient(ellipse at center, rgba(240, 194, 127, 0.1) 0%, rgba(240, 194, 127, 0) 70%);
    animation: flare-drift-3 90s ease-in-out infinite;
}

.flare-4 {
    width: 15vw;
    height: 15vh;
    top: 10%;
    left: 75%;
    background: radial-gradient(ellipse at center, rgba(232, 168, 124, 0.08) 0%, rgba(232, 168, 124, 0) 70%);
    animation: flare-drift-4 45s ease-in-out infinite;
}

@keyframes flare-drift-1 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(5%, 8%); }
}

@keyframes flare-drift-2 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-6%, 5%); }
}

@keyframes flare-drift-3 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(8%, -6%); }
}

@keyframes flare-drift-4 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-4%, 7%); }
}

/* Hero Text */
.hero-text {
    position: relative;
    z-index: 2;
    text-align: center;
    padding-bottom: 15vh;
}

.domain-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    font-size: clamp(4rem, 12vw, 10rem);
    color: #3d2b1f;
    line-height: 1.15;
    letter-spacing: 0.02em;
}

.domain-subtitle {
    font-family: 'Lora', serif;
    font-style: italic;
    font-size: 1.1rem;
    color: #7a3e10;
    opacity: 0.7;
    margin-top: 0.5em;
}

/* --- Pressed-Flower Dividers --- */
.flower-divider {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 2rem;
    height: clamp(3rem, 6vh, 5rem);
    padding: 1rem 0;
    overflow: hidden;
}

.flower {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.flower.visible {
    opacity: 1;
}

.flower.tremble {
    animation: tremble 2s ease-in-out 2;
}

@keyframes tremble {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(1deg); }
    75% { transform: rotate(-1deg); }
}

.flower .stem {
    width: 1px;
    height: 40px;
    background: #c4956a;
    opacity: 0.7;
}

.flower.tall .stem { height: 55px; }
.flower.short .stem { height: 28px; }

/* Five-petal flower */
.flower-five .petals {
    position: relative;
    width: 20px;
    height: 20px;
}

.flower-five .petal {
    position: absolute;
    width: 12px;
    height: 12px;
    background: #c4956a;
    border-radius: 50% 0%;
    top: 50%;
    left: 50%;
    transform-origin: 0% 100%;
}

.flower-five .petal:nth-child(1) { transform: translate(-50%, -50%) rotate(0deg); opacity: 0.6; }
.flower-five .petal:nth-child(2) { transform: translate(-50%, -50%) rotate(72deg); opacity: 0.5; }
.flower-five .petal:nth-child(3) { transform: translate(-50%, -50%) rotate(144deg); opacity: 0.7; }
.flower-five .petal:nth-child(4) { transform: translate(-50%, -50%) rotate(216deg); opacity: 0.4; }
.flower-five .petal:nth-child(5) { transform: translate(-50%, -50%) rotate(288deg); opacity: 0.8; }

/* Bell-shaped flower */
.flower-bell .petals {
    position: relative;
    width: 16px;
    height: 14px;
}

.flower-bell .petal {
    position: absolute;
    width: 10px;
    height: 14px;
    background: #c4956a;
    border-radius: 50%;
    top: 0;
}

.flower-bell .petal:nth-child(1) { left: 0; opacity: 0.5; }
.flower-bell .petal:nth-child(2) { left: 3px; opacity: 0.7; }
.flower-bell .petal:nth-child(3) { left: 6px; opacity: 0.5; }

/* Umbel flower */
.flower-umbel .petals {
    position: relative;
    width: 24px;
    height: 10px;
    display: flex;
    justify-content: center;
    gap: 2px;
}

.flower-umbel .petal {
    width: 4px;
    height: 4px;
    background: #c4956a;
    border-radius: 50%;
    opacity: 0.6;
}

/* Compound flower */
.flower-compound .petals {
    position: relative;
    width: 20px;
    height: 20px;
}

.flower-compound .petal {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #c4956a;
    border-radius: 50% 0%;
    top: 50%;
    left: 50%;
    transform-origin: 0% 100%;
}

.flower-compound .petal:nth-child(1) { transform: translate(-50%, -50%) rotate(0deg); opacity: 0.5; }
.flower-compound .petal:nth-child(2) { transform: translate(-50%, -50%) rotate(60deg); opacity: 0.7; }
.flower-compound .petal:nth-child(3) { transform: translate(-50%, -50%) rotate(120deg); opacity: 0.4; }
.flower-compound .petal:nth-child(4) { transform: translate(-50%, -50%) rotate(180deg); opacity: 0.6; }
.flower-compound .petal:nth-child(5) { transform: translate(-50%, -50%) rotate(240deg); opacity: 0.8; }
.flower-compound .petal:nth-child(6) { transform: translate(-50%, -50%) rotate(300deg); opacity: 0.5; }

.flower-compound .leaves {
    position: relative;
    width: 20px;
    height: 10px;
}

.flower-compound .leaf {
    position: absolute;
    width: 8px;
    height: 16px;
    background: #c4956a;
    border-radius: 50%;
    opacity: 0.5;
    top: -3px;
}

.leaf-left { left: -2px; transform: rotate(-30deg); }
.leaf-right { right: -2px; transform: rotate(30deg); }

/* --- Content Panels --- */
.content-panel {
    max-width: 38rem;
    margin: 0 auto;
    padding: 8vh 1.5rem;
    min-height: 80vh;
}

.content-panel.wide {
    max-width: 48rem;
}

.section-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    font-size: clamp(1.8rem, 4vw, 3.5rem);
    color: #3d2b1f;
    margin-bottom: 1.5em;
    letter-spacing: 0.02em;
}

.section-intro {
    margin-bottom: 2em;
}

.text-block p {
    margin-bottom: 1.5em;
    color: #4a3728;
}

.text-block p.first-paragraph {
    text-indent: 0;
}

.text-block p:not(.first-paragraph) {
    text-indent: 1.5em;
}

/* --- Crystalline AND Motif (inline) --- */
.crystal-and {
    float: right;
    width: 5rem;
    height: 5rem;
    margin: 0 0 1rem 1.5rem;
    position: relative;
}

.crystal-and .hex {
    position: absolute;
    width: 3.5rem;
    height: 3.5rem;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.crystal-and .hex-1 {
    background: rgba(240, 194, 127, 0.4);
    top: 0;
    left: 0;
}

.crystal-and .hex-2 {
    background: rgba(232, 168, 124, 0.4);
    top: 0.8rem;
    left: 0.8rem;
    mix-blend-mode: multiply;
}

/* --- Truth Table --- */
.truth-table {
    margin: 2rem auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 24rem;
    transition: transform 0.6s ease;
}

.truth-table:hover {
    transform: translateY(-2px);
}

.truth-row {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.truth-cell {
    width: 5rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    transition: transform 0.3s ease;
}

.header-cell {
    background: rgba(196, 149, 106, 0.3);
}

.cell-true {
    background: rgba(240, 194, 127, 0.5);
}

.cell-false {
    background: rgba(196, 149, 106, 0.25);
}

.cell-false .notation {
    opacity: 0.5;
}

/* --- Syllogisms / Manuscript Frames --- */
.syllogism {
    max-width: 38rem;
    margin: 2.5rem auto;
    padding: 2rem 2.5rem;
    border: 1px solid #c4956a;
    position: relative;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.2rem;
    line-height: 1.6;
    color: #4a3728;
}

/* Corner diamonds */
.syllogism::before,
.syllogism::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background: #c4956a;
    transform: rotate(45deg);
}

.syllogism::before {
    top: -4px;
    left: -4px;
}

.syllogism::after {
    top: -4px;
    right: -4px;
}

/* Additional corner diamonds via child pseudo-elements not possible on blockquote itself,
   so we use box-shadow trick for bottom corners */
.manuscript-frame {
    box-shadow:
        inset 0 0 0 0 transparent;
}

.premise {
    margin-bottom: 0.5em;
}

.conclusion {
    font-weight: 600;
    margin-top: 0.75em;
    background-image: linear-gradient(#c4956a, #c4956a);
    background-size: 0% 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    display: inline-block;
    transition: background-size 0.8s ease;
}

.conclusion.revealed {
    background-size: 100% 1px;
}

.syllogism-name {
    display: block;
    margin-top: 1em;
    font-style: italic;
    color: #7a3e10;
    font-size: 0.95rem;
    opacity: 0.7;
}

/* Bottom corner diamonds */
.syllogism .premise:first-child::before,
.syllogism .premise:first-child::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background: #c4956a;
    transform: rotate(45deg);
}

.syllogism .premise:first-child::before {
    bottom: -4px;
    left: -4px;
}

.syllogism .premise:first-child::after {
    bottom: -4px;
    right: -4px;
}

/* --- Crystal Operators Grid --- */
.operators-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    margin-top: 2rem;
}

.operator-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.crystal-showcase {
    width: clamp(3rem, 8vw, 6rem);
    height: clamp(3rem, 8vw, 6rem);
    position: relative;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* AND crystal large */
.crystal-and-large .hex {
    position: absolute;
    width: 70%;
    height: 70%;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    animation: facet-turn 120s linear infinite;
}

.crystal-and-large .hex-1 {
    background: rgba(240, 194, 127, 0.5);
    top: 5%;
    left: 5%;
}

.crystal-and-large .hex-2 {
    background: rgba(232, 168, 124, 0.5);
    bottom: 5%;
    right: 5%;
    mix-blend-mode: multiply;
}

/* OR crystal large */
.crystal-or-large .starburst {
    width: 80%;
    height: 80%;
    background: #c4956a;
    opacity: 0.7;
    clip-path: polygon(
        50% 0%, 63% 28%, 100% 25%,
        72% 50%, 100% 75%, 63% 72%,
        50% 100%, 37% 72%, 0% 75%,
        28% 50%, 0% 25%, 37% 28%
    );
    animation: facet-turn 120s linear infinite;
    box-shadow: 0 4px 20px rgba(122, 62, 16, 0.15);
}

/* NOT crystal large */
.crystal-not-large .inverted-triangle {
    width: 70%;
    height: 70%;
    background: #7a3e10;
    opacity: 0.7;
    clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
    transform: rotate(180deg);
    animation: facet-turn 120s linear infinite reverse;
    box-shadow: 0 4px 20px rgba(122, 62, 16, 0.15);
}

/* IF-THEN crystal large */
.crystal-ifthen-large .crystal-arrow {
    width: 80%;
    height: 60%;
    background: linear-gradient(to right, #e8a87c, #f0c27f);
    clip-path: polygon(0% 20%, 70% 20%, 70% 0%, 100% 50%, 70% 100%, 70% 80%, 0% 80%);
    animation: facet-turn 120s linear infinite;
    box-shadow: 0 4px 20px rgba(122, 62, 16, 0.15);
}

@keyframes facet-turn {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.operator-name {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    font-size: 1.3rem;
    color: #3d2b1f;
    margin-bottom: 0.5rem;
}

.operator-desc {
    font-size: 0.95rem;
    color: #4a3728;
    max-width: 18rem;
}

/* --- Ending: Q.E.D. --- */
.ending {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5ead0;
    position: relative;
    overflow: hidden;
}

.ending-flare {
    position: absolute;
    width: 40vw;
    height: 40vh;
    top: 30%;
    left: 30%;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(240, 194, 127, 0.12) 0%, rgba(240, 194, 127, 0) 70%);
    filter: blur(60px);
    opacity: 0;
    transition: opacity 10s ease;
}

.ending-flare.visible {
    opacity: 1;
}

.qed-text {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    font-size: clamp(2rem, 6vw, 5rem);
    color: #c4956a;
    opacity: 0.4;
    position: relative;
    z-index: 1;
}

/* --- Mobile Responsive --- */
@media (max-width: 700px) {
    .operators-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .content-panel {
        padding: 6vh 1.25rem;
    }

    .flower-divider {
        gap: 1rem;
    }

    .syllogism {
        padding: 1.5rem;
    }
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0s !important;
        transition-duration: 0s !important;
    }
}