/* Tor's garden. Light mode is a sunny morning; dark mode is the same garden at night. */

:root {
    color-scheme: light dark;

    --sky-top: #fdf6e3;
    --sky-bottom: #e6f1dc;
    --meadow: #d4e6bf;
    --meadow-deep: #b9d49f;
    --card: #fbf8ee;
    --text: #1f3320;
    --muted: #3d5539;
    --accent: #2f6b3a;
    --bloom: #b4416b;

    --pond-light: #a9dcd6;
    --pond-deep: #4b8fa0;
    --pond-rim: #9cbf7c;
    --shine: rgba(255, 255, 255, 0.55);
    --ripple: rgba(255, 255, 255, 0.7);
    --pad: #4f8f3f;
    --pad-light: #75ad55;
    --petal: #fbd3e0;
    --petal-back: #f3a6c1;
    --lily-centre: #f5c84c;
    --reed: #6b8f3a;
    --bulrush: #7a4e2d;
    --stem: #5b8a3e;
    --sun: #f7cf5a;
    --sun-glow: rgba(247, 207, 90, 0.35);
    --goose: #fdfcf6;
    --goose-wing: #e3dfd2;
    --goose-beak: #ee9431;
    --goose-eye: #1d1d1b;
    --wing: rgba(220, 242, 248, 0.85);
    --dragonfly: #2b7a8c;
    --cloud: rgba(255, 255, 255, 0.85);
}

@media (prefers-color-scheme: dark) {
    :root {
        --sky-top: #0b1526;
        --sky-bottom: #12302d;
        --meadow: #183829;
        --meadow-deep: #122d20;
        --card: #1f4233;
        --text: #eef2e6;
        --muted: #c2d0bb;
        --accent: #a6dc8c;
        --bloom: #f2a3c0;

        --pond-light: #2f7480;
        --pond-deep: #0f3442;
        --pond-rim: #1f4a2e;
        --shine: rgba(220, 235, 255, 0.25);
        --ripple: rgba(220, 235, 255, 0.4);
        --pad: #2d6a37;
        --pad-light: #3d8246;
        --petal: #f3c4d5;
        --petal-back: #d98aa8;
        --reed: #4f7a35;
        --bulrush: #5c3a22;
        --stem: #3f6e34;
        --goose: #e6e4db;
        --goose-wing: #c6c2b6;
        --wing: rgba(170, 210, 230, 0.55);
        --dragonfly: #6fc0cf;
        --cloud: rgba(180, 200, 230, 0.12);
    }
}

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

body {
    margin: 0;
    background: var(--meadow);
    color: var(--text);
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 1.125rem;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

h1,
h2,
h3 {
    font-family: ui-serif, "Iowan Old Style", Georgia, "Times New Roman", serif;
    font-weight: 600;
    line-height: 1.15;
}

a {
    color: var(--accent);
    text-underline-offset: 0.15em;
}

/* Hero: the sky, the welcome, and the pond scene sitting on the meadow. */

.hero {
    background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bottom) 70%, var(--meadow) 100%);
    /* The scene's meadow reaches past its edges; don't let it widen the page. */
    overflow-x: clip;
    padding-top: clamp(2.5rem, 7vw, 5rem);
    text-align: center;
}

.hero-text {
    max-width: 40rem;
    margin: 0 auto;
    padding: 0 1.25rem;
}

.eyebrow {
    margin: 0 0 0.75rem;
    color: var(--muted);
    font-size: 0.875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

h1 {
    margin: 0 0 1rem;
    font-size: clamp(2.4rem, 8vw, 4rem);
}

.lead {
    margin: 0 auto;
    max-width: 34rem;
    color: var(--muted);
    font-size: clamp(1.1rem, 2.6vw, 1.3rem);
}

.scene {
    display: block;
    width: 100%;
    max-width: 72rem;
    height: auto;
    margin: clamp(0.5rem, 3vw, 1.5rem) auto 0;
    overflow: visible;
}

/* The scene's colours come from the variables above, so it follows light and dark mode. */

.stop-pond-light { stop-color: var(--pond-light); }
.stop-pond-deep { stop-color: var(--pond-deep); }

.meadow { fill: var(--meadow); }
.pond-rim { fill: var(--pond-rim); }
.shine { fill: var(--shine); }
.ripple { fill: none; stroke: var(--ripple); stroke-width: 2; }
.pad { fill: var(--pad); }
.pad-light { fill: var(--pad-light); }
.petal { fill: var(--petal); }
.petal-back { fill: var(--petal-back); }
.lily-centre { fill: var(--lily-centre); }
.reed path { fill: none; stroke: var(--reed); stroke-width: 4; stroke-linecap: round; }
.bulrush { fill: var(--bulrush); }
.stem { fill: none; stroke: var(--stem); stroke-width: 3; stroke-linecap: round; }
.flower-pink { fill: #f29bbb; }
.flower-yellow { fill: #f5c84c; }
.flower-purple { fill: #a98bdc; }
.flower-white { fill: #fbf8f0; }
.blossom-centre { fill: #f2b233; }
.flower-yellow .blossom-centre { fill: #c9862a; }
.sun-glow { fill: var(--sun-glow); }
.sun-disc { fill: var(--sun); }
.moon-disc { fill: #f4efd8; }
.goose-body,
.goose-tail { fill: var(--goose); }
.goose-wing { fill: var(--goose-wing); }
.goose-neck { fill: none; stroke: var(--goose); stroke-width: 10; stroke-linecap: round; }
.goose-beak,
.goose-knob { fill: var(--goose-beak); }
.goose-eye { fill: var(--goose-eye); }
.waterline { fill: var(--pond-light); opacity: 0.8; }
.wing { fill: var(--wing); stroke: var(--dragonfly); stroke-width: 0.6; stroke-opacity: 0.5; }
.cloud { fill: var(--cloud); }
.dragonfly-body { fill: none; stroke: var(--dragonfly); stroke-width: 2.4; stroke-linecap: round; }
.dragonfly-head { fill: var(--dragonfly); }
.firefly { fill: #f8f1a0; filter: drop-shadow(0 0 4px #f5e35a); }

.moon,
.fireflies {
    display: none;
}

@media (prefers-color-scheme: dark) {
    .sun { display: none; }
    .moon,
    .fireflies { display: inline; }
}

/* Gentle movement: ripples spread, reeds sway, the goose bobs, the dragonfly hovers. */

.ripple,
.reed,
.goose,
.dragonfly-hover,
.firefly {
    transform-box: fill-box;
}

.ripple {
    transform-origin: center;
    animation: ripple 6s ease-out infinite;
}

.ripple-late { animation-delay: 3s; }
.ripple-slow { animation-duration: 9s; animation-delay: 1.5s; }

.reed {
    transform-origin: 50% 100%;
    animation: sway 5s ease-in-out infinite alternate;
}

.reed-alt {
    animation-duration: 6.5s;
    animation-delay: -2s;
}

.goose-swim {
    animation: bob 3.5s ease-in-out infinite;
}

.cloud-drift {
    animation: drift 40s ease-in-out infinite alternate;
}

.cloud-drift-slow {
    animation: drift 55s ease-in-out infinite alternate-reverse;
}

.dragonfly-hover {
    animation: hover 7s ease-in-out infinite;
}

.firefly {
    animation: glow 4s ease-in-out infinite;
}

.firefly-2 { animation-delay: -1.3s; animation-duration: 5s; }
.firefly-3 { animation-delay: -2.6s; animation-duration: 3.5s; }

@keyframes ripple {
    from { transform: scale(0.5); opacity: 0.9; }
    to { transform: scale(1.5); opacity: 0; }
}

@keyframes sway {
    from { transform: rotate(-2.5deg); }
    to { transform: rotate(2.5deg); }
}

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

@keyframes hover {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(14px, -6px); }
    50% { transform: translate(26px, 4px); }
    75% { transform: translate(8px, 8px); }
}

@keyframes drift {
    from { transform: translateX(-30px); }
    to { transform: translateX(40px); }
}

@keyframes glow {
    0%, 100% { opacity: 0.15; }
    50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
    }
}

/* The garden beds below the pond. */

.garden {
    flex: 1;
    width: 100%;
    max-width: 64rem;
    margin: 0 auto;
    padding: clamp(1.5rem, 5vw, 3rem) 1.25rem 3rem;
}

.beds h2 {
    margin: 0 0 1.5rem;
    font-size: clamp(1.6rem, 4vw, 2.1rem);
    text-align: center;
}

.bed-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bed {
    background: var(--card);
    /* Leaf-shaped corners. */
    border-radius: 2.25rem 0.5rem 2.25rem 0.5rem;
    padding: 1.5rem 1.5rem 1.6rem;
    box-shadow: 0 1px 0 var(--meadow-deep), 0 10px 24px -16px rgba(20, 50, 20, 0.45);
}

.bed h3 {
    margin: 0.75rem 0 0.4rem;
    font-size: 1.35rem;
}

.bed p {
    margin: 0;
    color: var(--muted);
}

.bed-icon {
    width: 3rem;
    height: 3rem;
}

.icon-stem { fill: none; stroke: var(--stem); stroke-width: 2.5; stroke-linecap: round; }
.icon-leaf { fill: var(--pad-light); }
.icon-water { fill: var(--pond-light); }
.icon-lily { fill: var(--petal-back); }
.icon-soil { fill: var(--bulrush); }

.planted {
    max-width: 34rem;
    margin: 2.5rem auto 0;
    text-align: center;
    color: var(--muted);
    font-family: ui-serif, "Iowan Old Style", Georgia, "Times New Roman", serif;
    font-size: 1.2rem;
    font-style: italic;
}

.planted p {
    margin: 0;
}

/* A strip of deeper grass along the bottom. */

.site-footer {
    width: 100%;
    background: var(--meadow-deep);
    padding: 1.25rem;
    color: var(--muted);
    font-size: 0.875rem;
    text-align: center;
}

.site-footer p {
    margin: 0;
}

/* The page-not-found page. */

.lost {
    flex: 1;
    max-width: 36rem;
    margin: 0 auto;
    padding: clamp(3rem, 10vw, 6rem) 1.25rem 3rem;
    text-align: center;
}

.lost .lead {
    margin-bottom: 1.5rem;
}

.lost-icon {
    width: 6rem;
    height: 6rem;
    margin-bottom: 1rem;
}