/* Matariki Stars — Scene chrome
   Lifted from Jay Upadhyay's matariki-quiz.html (2026-06-23) and generalised
   so every page in the site renders the same sky / mountains / waka / waterline
   / flax / koru-corner system. Per D9: Cinzel + Cormorant Garamond, gold + star-blue.
*/

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700;900&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&display=swap');

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

:root {
    --gold: #c9951e;
    --gold-bright: #e0b030;
    --star-blue: #a8ccff;
    --text-primary: #f4eedf;
    --text-secondary: #c8bfa8;
    --navy-deep: #000814;
    --navy-mid: #020e24;
    --coral: #d9694a;
    --pohutukawa-red: #8a2418;
}

html { scroll-behavior: smooth; }

body {
    font-family: 'Cormorant Garamond', Georgia, serif;
    background: var(--navy-deep);
    color: var(--text-primary);
    min-height: 100vh;
    overflow-x: hidden;
    font-size: 18px;
    line-height: 1.6;
}

/* ─── SKY ─── */
.sky {
    position: fixed; inset: 0; z-index: 0;
    background:
        radial-gradient(ellipse 120% 60% at 50% 100%, rgba(155,65,8,0.32) 0%, transparent 60%),
        radial-gradient(ellipse 80% 50% at 20% 30%, rgba(4,18,55,0.7) 0%, transparent 70%),
        radial-gradient(ellipse 60% 40% at 75% 15%, rgba(3,14,45,0.5) 0%, transparent 60%),
        linear-gradient(175deg,
            #000610 0%,
            #010c20 20%,
            #020f28 45%,
            #041635 70%,
            #071c3e 100%
        );
}

#starfield, #particles {
    position: fixed; inset: 0;
    pointer-events: none; z-index: 1;
}
#particles { z-index: 7; }

/* ─── MOUNTAINS ─── */
.mountain-back {
    position: fixed; bottom: 0; left: 0; width: 100%; height: 220px;
    background: linear-gradient(to top, #010810 0%, #01091c 55%, transparent 100%);
    clip-path: polygon(
        0% 72%, 3% 56%, 6% 64%, 10% 44%, 14% 55%, 18% 36%,
        22% 48%, 26% 28%, 30% 40%, 34% 22%, 38% 34%, 42% 18%,
        46% 30%, 50% 14%, 54% 24%, 58% 16%, 62% 26%, 66% 12%,
        70% 22%, 74% 15%, 78% 26%, 82% 16%, 86% 22%, 90% 14%,
        94% 20%, 97% 15%, 100% 18%,
        100% 100%, 0% 100%
    );
    z-index: 2;
}
.mountain-front {
    position: fixed; bottom: 0; left: 0; width: 100%; height: 180px;
    background: linear-gradient(to top, #000710 0%, #000b1c 60%, transparent 100%);
    clip-path: polygon(
        0% 82%, 4% 68%, 8% 76%, 13% 60%, 18% 70%, 23% 55%,
        28% 65%, 34% 50%, 40% 62%, 46% 46%, 52% 58%, 58% 44%,
        64% 55%, 70% 42%, 76% 52%, 82% 40%, 88% 50%, 93% 42%,
        97% 48%, 100% 44%,
        100% 100%, 0% 100%
    );
    z-index: 3;
}

/* ─── WATER ─── */
.water {
    position: fixed; bottom: 0; left: 0; width: 100%; height: 72px; z-index: 4;
    background: linear-gradient(to top,
        #000508 0%,
        rgba(3,10,26,0.97) 35%,
        rgba(5,14,34,0.7) 65%,
        transparent 100%
    );
}
.waterline {
    position: fixed; bottom: 66px; left: 0; width: 100%; height: 1px; z-index: 5;
    background: linear-gradient(to right,
        transparent 0%,
        rgba(200,80,15,0.5) 25%,
        rgba(220,100,20,0.65) 50%,
        rgba(200,80,15,0.5) 75%,
        transparent 100%
    );
}

/* ─── WAKA + FLAX ─── */
.waka-wrap {
    position: fixed; bottom: 52px; left: 50%; transform: translateX(-55%);
    z-index: 6; width: 420px; height: 72px;
    pointer-events: none;
}
.flax-left {
    position: fixed; bottom: 55px; left: -10px;
    z-index: 6; width: 160px; height: 200px;
    pointer-events: none;
}
.flax-right {
    position: fixed; bottom: 55px; right: -10px;
    z-index: 6; width: 160px; height: 200px;
    pointer-events: none; transform: scaleX(-1);
}

/* ─── KORU CORNERS ─── */
.koru {
    position: fixed; width: 130px; height: 130px;
    z-index: 8; opacity: 0.55; pointer-events: none;
}
.koru-tl { top: 0; left: 0; }
.koru-tr { top: 0; right: 0; transform: scaleX(-1); }
.koru-bl { bottom: 0; left: 0; transform: scaleY(-1); opacity: 0.3; }
.koru-br { bottom: 0; right: 0; transform: scale(-1,-1); opacity: 0.3; }

/* Restrained mode for Pōhutukawa pages — strip the coral horizon glow,
   reduce shimmer, dim the kōru. Cultural protocol — remembrance star. */
body.pohutukawa .sky {
    background:
        radial-gradient(ellipse 80% 50% at 20% 30%, rgba(4,18,55,0.7) 0%, transparent 70%),
        radial-gradient(ellipse 60% 40% at 75% 15%, rgba(3,14,45,0.5) 0%, transparent 60%),
        linear-gradient(175deg,
            #000610 0%,
            #010a1c 35%,
            #021028 70%,
            #051430 100%
        );
}
body.pohutukawa .waterline { opacity: 0.25; }
body.pohutukawa .koru { opacity: 0.25; }
body.pohutukawa .koru-bl, body.pohutukawa .koru-br { opacity: 0.15; }