/* =============================================
   ethica.dev v2 - Cottagecore Ethical Garden Portal
   Palette: #5B8C5A #F5ECD7 #6B4423 #9B7CB8 #D4836B #A8C4D4 #2A2118
   Fonts: Bebas Neue (display), Lora (body), Caveat (accent)
   ============================================= */

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

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

body {
    font-family: 'Lora', Georgia, 'Times New Roman', serif;
    font-weight: 400;
    font-size: clamp(16px, 1.8vw, 20px);
    line-height: 1.7;
    color: #2A2118;
    background-color: #F5ECD7;
    overflow-x: hidden;
    cursor: default;
    position: relative;
    min-height: 100vh;
}

/* Subtle parchment grain across the whole site */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(107, 68, 35, 0.04) 0, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(155, 124, 184, 0.03) 0, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(212, 131, 107, 0.02) 0, transparent 60%);
}

.caveat-font {
    font-family: 'Caveat', 'Brush Script MT', cursive;
    font-weight: 400;
    letter-spacing: 0.01em;
}

/* ---------- Fireflies layer ---------- */
#fireflies-container {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9000;
    overflow: hidden;
}

.firefly {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: radial-gradient(circle, #FFF3C4 0%, #F5ECD7 50%, rgba(245, 236, 215, 0) 100%);
    box-shadow:
        0 0 8px 2px rgba(255, 243, 196, 0.7),
        0 0 18px 6px rgba(212, 131, 107, 0.18);
    will-change: transform, opacity;
    opacity: 0;
    animation: firefly-pulse 3.4s ease-in-out infinite;
}

@keyframes firefly-pulse {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 0.95; }
}

/* ---------- Compass Rose Navigation ---------- */
.compass-nav {
    position: fixed;
    top: 22px;
    left: 22px;
    z-index: 100;
}

.compass-rose {
    width: 60px;
    height: 60px;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    transform: rotate(0deg);
    transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
    filter: drop-shadow(0 2px 4px rgba(42, 33, 24, 0.18));
}

.compass-nav:hover .compass-rose,
.compass-nav.open .compass-rose {
    transform: rotate(45deg) scale(1.05);
}

.compass-menu {
    position: absolute;
    top: 70px;
    left: 0;
    background: #F5ECD7;
    border: 1px dashed #6B4423;
    border-radius: 6px;
    padding: 14px 20px;
    min-width: 220px;
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition: opacity 320ms ease, transform 320ms ease;
    box-shadow: 4px 6px 18px rgba(42, 33, 24, 0.15);
    font-family: 'Caveat', cursive;
    font-size: 18px;
}

.compass-nav:hover .compass-menu,
.compass-nav:focus-within .compass-menu,
.compass-nav.open .compass-menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.compass-link {
    display: block;
    padding: 6px 0;
    color: #6B4423;
    text-decoration: none;
    border-bottom: 1px dotted rgba(107, 68, 35, 0.3);
    transition: color 200ms ease, transform 200ms ease;
}

.compass-link:last-child { border-bottom: none; }

.compass-link:hover {
    color: #5B8C5A;
    transform: translateX(4px);
}

/* ---------- Section base ---------- */
.viewport-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

/* ---------- Opening landscape ---------- */
.opening-section {
    overflow: hidden;
}

.landscape-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.sky-layer {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        #F5ECD7 0%,
        #FBE6CB 35%,
        #F5D5BE 65%,
        #E8C8AE 100%
    );
}

.sun-glow {
    position: absolute;
    top: 12%;
    right: 18%;
    width: 240px;
    height: 240px;
    background: radial-gradient(circle, rgba(255, 226, 180, 0.85) 0%, rgba(245, 213, 190, 0.4) 40%, rgba(245, 236, 215, 0) 70%);
    filter: blur(2px);
    animation: sun-drift 18s ease-in-out infinite alternate;
}

@keyframes sun-drift {
    from { transform: translate(0, 0); }
    to { transform: translate(-20px, 10px); }
}

.hills-layer {
    position: absolute;
    left: -5%;
    right: -5%;
    bottom: 0;
    height: 60%;
    transform: translateY(100%);
    animation: hills-rise 1200ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.hills-far {
    background:
        radial-gradient(ellipse 60% 80% at 25% 100%, #A8C4D4 0%, rgba(168, 196, 212, 0) 70%),
        radial-gradient(ellipse 70% 100% at 75% 100%, #A8C4D4 0%, rgba(168, 196, 212, 0) 70%);
    opacity: 0.55;
    height: 50%;
    animation-delay: 0ms;
}

.hills-mid {
    background:
        radial-gradient(ellipse 80% 80% at 30% 100%, #5B8C5A 0%, rgba(91, 140, 90, 0) 70%),
        radial-gradient(ellipse 90% 100% at 80% 100%, #5B8C5A 0%, rgba(91, 140, 90, 0) 70%);
    opacity: 0.55;
    height: 45%;
    animation-delay: 150ms;
}

.hills-near {
    background:
        radial-gradient(ellipse 100% 80% at 50% 100%, #5B8C5A 0%, rgba(91, 140, 90, 0) 70%),
        radial-gradient(ellipse 70% 90% at 20% 100%, #6B4423 0%, rgba(107, 68, 35, 0) 70%);
    opacity: 0.85;
    height: 40%;
    animation-delay: 300ms;
}

.meadow-layer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 16%;
    background: linear-gradient(to bottom, rgba(91, 140, 90, 0.25), rgba(91, 140, 90, 0.55));
    transform: translateY(100%);
    animation: hills-rise 1200ms cubic-bezier(0.4, 0, 0.2, 1) 450ms forwards;
}

@keyframes hills-rise {
    to { transform: translateY(0); }
}

.opening-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 30px;
    max-width: 1100px;
    margin: 0 auto;
}

.opening-eyebrow {
    color: #6B4423;
    font-size: clamp(18px, 2.2vw, 24px);
    margin-bottom: 24px;
    opacity: 0;
    animation: fade-in 800ms ease 200ms forwards;
}

.ethical-question {
    font-family: 'Bebas Neue', 'Arial Narrow', sans-serif;
    font-weight: 400;
    color: #2A2118;
    font-size: clamp(32px, 6vw, 72px);
    line-height: 1.05;
    letter-spacing: 0.04em;
    min-height: 2.4em;
    max-width: 18ch;
    margin: 0 auto 28px;
    text-shadow: 0 1px 0 rgba(245, 236, 215, 0.6);
}

.cursor-blink {
    display: inline-block;
    width: 2px;
    height: 0.95em;
    background: #6B4423;
    margin-left: 4px;
    vertical-align: -0.05em;
    animation: caret 800ms steps(1) infinite;
}

@keyframes caret {
    50% { opacity: 0; }
}

.opening-subtitle {
    color: #6B4423;
    font-size: clamp(20px, 2.6vw, 28px);
    margin-bottom: 30px;
    opacity: 0;
    animation: fade-in 700ms ease 1500ms forwards;
}

.forking-paths-intro {
    width: clamp(280px, 38vw, 420px);
    margin: 0 auto 24px;
    opacity: 0;
    animation: fade-in 800ms ease 1700ms forwards;
}

#intro-paths {
    width: 100%;
    height: auto;
    display: block;
}

#intro-paths .garden-path {
    stroke-dasharray: 320;
    stroke-dashoffset: 320;
    animation: draw-path 1400ms cubic-bezier(0.4, 0, 0.2, 1) 1700ms forwards;
}

#intro-paths .path-right {
    animation-delay: 1850ms;
}

#intro-paths .path-leaf {
    opacity: 0;
    animation: leaf-pop 600ms ease forwards;
}

#intro-paths .path-leaf:nth-child(3) { animation-delay: 2400ms; }
#intro-paths .path-leaf:nth-child(4) { animation-delay: 2500ms; }
#intro-paths .path-leaf:nth-child(5) { animation-delay: 2700ms; }
#intro-paths .path-leaf:nth-child(6) { animation-delay: 2800ms; }
#intro-paths .path-leaf:nth-child(7) { animation-delay: 3000ms; }
#intro-paths .path-leaf:nth-child(8) { animation-delay: 3100ms; }

@keyframes draw-path {
    to { stroke-dashoffset: 0; }
}

@keyframes leaf-pop {
    from { opacity: 0; transform: scale(0); }
    to   { opacity: 0.7; transform: scale(1); }
}

.scroll-hint {
    color: #6B4423;
    font-size: 18px;
    opacity: 0;
    animation: fade-in 700ms ease 3200ms forwards, hint-bounce 1800ms ease-in-out 3200ms infinite;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.scroll-hint svg { display: block; }

@keyframes fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

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

/* ---------- Embroidered borders ---------- */
.embroidered-border {
    position: relative;
    width: 100%;
    height: 36px;
    background: #F5ECD7;
    z-index: 2;
    overflow: hidden;
}

.stitch-pattern {
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left center;
    transition: opacity 700ms ease, transform 1100ms cubic-bezier(0.4, 0, 0.2, 1);
}

.embroidered-border.is-visible .stitch-pattern {
    opacity: 0.85;
    transform: scaleX(1);
}

/* ---------- Dilemma sections ---------- */
.dilemma-section {
    position: relative;
    padding: 80px 24px 60px;
    background: #F5ECD7;
    z-index: 2;
}

.dilemma-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    max-width: 1200px;
    margin: 0 auto;
    align-items: center;
}

.dilemma-split.reverse {
    direction: rtl;
}

.dilemma-split.reverse > * {
    direction: ltr;
}

.parchment-bg {
    background:
        linear-gradient(135deg, rgba(212, 131, 107, 0.04), rgba(155, 124, 184, 0.04)),
        #F5ECD7;
    border: 1px dashed rgba(107, 68, 35, 0.4);
    border-radius: 4px;
    padding: 40px 36px;
    box-shadow:
        2px 4px 14px rgba(42, 33, 24, 0.08),
        inset 0 0 60px rgba(212, 131, 107, 0.05);
    position: relative;
}

.parchment-bg::before,
.parchment-bg::after {
    content: "";
    position: absolute;
    width: 24px;
    height: 24px;
    border: 1px dashed rgba(107, 68, 35, 0.5);
}

.parchment-bg::before {
    top: 8px;
    left: 8px;
    border-right: none;
    border-bottom: none;
}

.parchment-bg::after {
    bottom: 8px;
    right: 8px;
    border-left: none;
    border-top: none;
}

.section-label {
    display: inline-block;
    color: #9B7CB8;
    font-size: 22px;
    margin-bottom: 8px;
    transform: rotate(-2deg);
    transform-origin: left center;
}

.dilemma-title {
    font-family: 'Bebas Neue', sans-serif;
    color: #2A2118;
    font-size: clamp(28px, 4.2vw, 50px);
    line-height: 1.05;
    letter-spacing: 0.04em;
    margin-bottom: 22px;
}

.dilemma-body {
    color: #2A2118;
    margin-bottom: 18px;
    text-align: justify;
    hyphens: auto;
}

.dilemma-question {
    color: #6B4423;
    font-size: clamp(22px, 2.6vw, 30px);
    line-height: 1.3;
    margin-bottom: 14px;
    font-style: italic;
}

.margin-note {
    color: #9B7CB8;
    font-size: 18px;
    margin-top: 12px;
    padding-left: 20px;
    border-left: 2px dotted #9B7CB8;
}

.dilemma-garden {
    position: relative;
    min-height: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.consequence-garden {
    width: 100%;
    max-width: 480px;
    height: auto;
    display: block;
    filter: drop-shadow(0 4px 8px rgba(42, 33, 24, 0.1));
}

.consequence-garden .plot-group {
    opacity: 0;
    transform: translateY(20px) scale(0.92);
    transform-origin: center bottom;
    transition: opacity 800ms ease, transform 900ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dilemma-section.is-visible .consequence-garden .plot-group {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.dilemma-section.is-visible .consequence-garden .plot-group:nth-child(2) { transition-delay: 120ms; }
.dilemma-section.is-visible .consequence-garden .plot-group:nth-child(3) { transition-delay: 220ms; }

.scene-path {
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    transition: stroke-dashoffset 1400ms cubic-bezier(0.4, 0, 0.2, 1);
}

.dilemma-section.is-visible .scene-path {
    stroke-dashoffset: 0;
}

.garden-cart {
    transform-origin: 17px 10px;
    animation: cart-tremble 2.4s ease-in-out infinite;
}

@keyframes cart-tremble {
    0%, 100% { transform: translate(40px, 320px) rotate(-1deg); }
    50%      { transform: translate(44px, 320px) rotate(1deg); }
}

/* ---------- Choice nodes (wax seals) ---------- */
.choice-node-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 36px;
    margin: 56px auto 0;
    flex-wrap: wrap;
    max-width: 720px;
}

.choice-node {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.choice-node:hover { transform: translateY(-4px); }

.wax-seal {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: url(#wax-grad) #D4836B;
    background:
        radial-gradient(circle at 35% 30%, #E8A38A 0%, #D4836B 55%, #A85A45 100%);
    border: 2px dashed rgba(245, 236, 215, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #F5ECD7;
    font-family: 'Caveat', cursive;
    font-size: 24px;
    font-weight: 700;
    box-shadow:
        inset -6px -8px 14px rgba(107, 68, 35, 0.45),
        inset 6px 8px 14px rgba(245, 236, 215, 0.18),
        0 6px 16px rgba(42, 33, 24, 0.22);
    position: relative;
    transition: border-radius 600ms cubic-bezier(0.34, 1.56, 0.64, 1),
                transform 400ms ease,
                box-shadow 400ms ease;
    text-align: center;
    line-height: 1;
}

.wax-seal::after {
    content: "";
    position: absolute;
    top: 18%;
    left: 22%;
    width: 28%;
    height: 18%;
    border-radius: 50%;
    background: rgba(255, 243, 220, 0.4);
    filter: blur(2px);
}

.choice-node:hover .wax-seal {
    border-radius: 58% 42% 55% 45% / 50% 60% 40% 50%;
    transform: rotate(-4deg);
    box-shadow:
        inset -8px -10px 16px rgba(107, 68, 35, 0.5),
        inset 8px 10px 16px rgba(245, 236, 215, 0.22),
        0 10px 22px rgba(42, 33, 24, 0.3);
}

.seal-text {
    z-index: 1;
    text-shadow: 0 1px 2px rgba(42, 33, 24, 0.4);
}

/* Variant seals tinted by choice meaning */
.seal-truth   { background: radial-gradient(circle at 35% 30%, #B89DD0 0%, #9B7CB8 55%, #6E5491 100%); }
.seal-silence { background: radial-gradient(circle at 35% 30%, #B6CFD9 0%, #A8C4D4 55%, #7AA0B2 100%); }
.seal-release { background: radial-gradient(circle at 35% 30%, #E8A38A 0%, #D4836B 55%, #A85A45 100%); }
.seal-preserve { background: radial-gradient(circle at 35% 30%, #7FAB7E 0%, #5B8C5A 55%, #3F6B3E 100%); }

.choice-label {
    color: #6B4423;
    font-size: 20px;
    font-style: italic;
    text-align: center;
}

.choice-node.chosen .wax-seal {
    border-radius: 58% 42% 55% 45% / 50% 60% 40% 50%;
    transform: rotate(2deg) scale(0.96);
    box-shadow:
        inset -10px -12px 18px rgba(107, 68, 35, 0.55),
        inset 10px 12px 18px rgba(245, 236, 215, 0.25),
        0 4px 10px rgba(42, 33, 24, 0.3),
        0 0 0 6px rgba(91, 140, 90, 0.25);
}

.choice-node.chosen::after {
    content: "✓ chosen";
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Caveat', cursive;
    font-size: 18px;
    color: #5B8C5A;
}

.choice-divider {
    color: #9B7CB8;
    align-self: center;
}

/* ---------- Reflection garden ---------- */
.reflection-section {
    padding: 90px 24px 70px;
    overflow: hidden;
}

.reflection-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 90% 60% at 50% 100%, rgba(91, 140, 90, 0.18) 0%, rgba(91, 140, 90, 0) 70%),
        radial-gradient(ellipse 60% 50% at 20% 30%, rgba(155, 124, 184, 0.1) 0%, rgba(155, 124, 184, 0) 70%),
        radial-gradient(ellipse 60% 50% at 80% 35%, rgba(212, 131, 107, 0.1) 0%, rgba(212, 131, 107, 0) 70%),
        #F5ECD7;
    z-index: 0;
}

.reflection-content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 1000px;
    margin: 0 auto;
}

.reflection-title {
    font-family: 'Bebas Neue', sans-serif;
    color: #2A2118;
    font-size: clamp(36px, 5.5vw, 64px);
    line-height: 1.05;
    letter-spacing: 0.04em;
    margin-bottom: 12px;
}

.reflection-subtitle {
    color: #6B4423;
    font-size: clamp(20px, 2.4vw, 26px);
    margin-bottom: 36px;
}

.moral-garden {
    width: 100%;
    margin: 0 auto 28px;
    max-width: 900px;
}

#garden-canvas {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 6px 14px rgba(42, 33, 24, 0.12));
}

.garden-plot {
    transform-origin: center bottom;
}

.garden-plot .plot-flower {
    transform-origin: center bottom;
    opacity: 0;
    transform: translateY(0) scale(0);
    transition: opacity 700ms ease, transform 900ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.garden-plot.planted .plot-flower {
    opacity: 1;
    transform: scale(1);
}

.garden-message {
    color: #6B4423;
    font-size: clamp(20px, 2.4vw, 26px);
    margin-top: 4px;
    margin-bottom: 36px;
    min-height: 2em;
}

.reflection-footer {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px dotted rgba(107, 68, 35, 0.4);
}

.footer-text {
    color: #2A2118;
    margin-bottom: 6px;
    font-style: italic;
}

.footer-credit {
    color: #9B7CB8;
    font-size: 22px;
}

/* ---------- Section reveal animation ---------- */
.dilemma-section,
.reflection-section {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 900ms ease, transform 900ms cubic-bezier(0.4, 0, 0.2, 1);
}

.dilemma-section.is-visible,
.reflection-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.opening-section {
    opacity: 1;
    transform: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .dilemma-split,
    .dilemma-split.reverse {
        grid-template-columns: 1fr;
        gap: 32px;
        direction: ltr;
    }
    .dilemma-section { padding: 64px 20px 40px; }
    .parchment-bg    { padding: 32px 26px; }
    .wax-seal        { width: 104px; height: 104px; font-size: 21px; }
    .compass-rose    { width: 50px; height: 50px; }
    .compass-menu    { font-size: 16px; min-width: 200px; }
}

@media (max-width: 540px) {
    .ethical-question { font-size: clamp(28px, 9vw, 44px); }
    .dilemma-title    { font-size: clamp(24px, 7vw, 34px); }
    .reflection-title { font-size: clamp(30px, 8vw, 44px); }
    .choice-node-container { gap: 18px; }
    .choice-divider svg { width: 60px; height: 28px; }
    .compass-menu { font-size: 15px; }
    .opening-content { padding: 0 16px; }
    .reflection-section { padding: 60px 18px 44px; }
}