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

:root {
    --bg:      #0d0f14;
    --surface: #151820;
    --violet:  #b57bee;
    --teal:    #4dd9c0;
    --rose:    #f06292;
    --fg:      #e8e2f0;
    --muted:   #6b6880;
}

html {
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    height: 100%;
}

body {
    font-family: Georgia, 'Times New Roman', serif;
    background: var(--bg);
    color: var(--fg);
    overflow-x: hidden;
    height: 100%;
    -webkit-overflow-scrolling: touch;
}

html, body {
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    overflow-y: scroll;
    height: 100%;
}

#hero, #content {
    scroll-snap-align: start;
    scroll-snap-stop: always; /* Ensures the user doesn't accidentally skip sections */
    height: 100vh;            /* Make sure sections are full viewport height */
}

/* ── Hero ── */
#hero {
    position: relative;
    height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

/* Background aurora canvas — deepest layer */
#bg-canvas {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    /* JS will transition opacity from 1 → dim after ornaments draw */
    transition: opacity 2s ease;
}

/* Confetti canvas — above bg, below text */
#confetti-canvas {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

/* Hero text wrapper */
.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    width: 100%;
    padding: 0 clamp(1rem, 5vw, 2.5rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

/* ── Ornament SVGs ── */
.ornament {
    display: block;
    width: clamp(180px, 55vw, 420px);
    height: auto;
    overflow: visible;
}

.ornament path {
    fill: none;
    stroke: var(--teal);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.7;
    /* dashoffset trick: set by JS to path length, then animated to 0 */
    stroke-dasharray: var(--path-len, 1000);
    stroke-dashoffset: var(--path-len, 1000);
    transition: stroke-dashoffset 1.6s cubic-bezier(.4, 0, .2, 1);
}

.ornament path.drawn {
    stroke-dashoffset: 0;
}

/* ── Heading ── */
h1 {
    font-size: clamp(1.8rem, 9vw, 5.5rem);
    letter-spacing: 0.03em;
    line-height: 1.15;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    margin: 0.3rem 0;
}

h1 .word {
    display: inline-block;
}

h1 .char {
    display: inline-block;
    opacity: 0;
    transform: translateY(50px) rotate(8deg) scale(0.7);
    transition:
        opacity   0.55s cubic-bezier(.22, 1, .36, 1),
        transform 0.55s cubic-bezier(.22, 1, .36, 1);
}

h1 .char.visible {
    opacity: 1;
    transform: none;
    animation: shimmer 12s ease-in-out infinite;
    animation-delay: var(--shimmer-delay, 0s);
}

@keyframes shimmer {
    0%   { color: #b57bee; }
    20%  { color: #4dd9c0; }
    40%  { color: #7ec8f5; }
    60%  { color: #f06292; }
    80%  { color: #f5c842; }
    100% { color: #b57bee; }
}

/* ── Bouncing scroll arrow ── */
.scroll-arrow {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    color: var(--muted);
    font-size: 0.68rem;
    font-family: system-ui, sans-serif;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: none;
    background: none;
    padding: 12px 20px;
    animation: bob 2.2s ease-in-out infinite;
    transition: color 0.2s;
    user-select: none;
    -webkit-user-select: none;
}

.scroll-arrow:hover,
.scroll-arrow:focus-visible {
    color: var(--teal);
    outline: none;
}

.scroll-arrow svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

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

/* ── Content section ── */
#content {
    position: relative;
    height: 100svh;              /* exact viewport height for snap */
    display: flex;
    flex-direction: column;
    justify-content: center;     /* vertical centre */
    align-items: center;
    padding: 0 clamp(1.25rem, 6vw, 3rem);
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

/* Inner wrapper constrains reading width */
.content-inner {
    position: relative;
    z-index: 1;
    max-width: 580px;
    width: 100%;
}

/* Star field canvas — behind text */
#content-canvas {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    width: 100%;
    height: 100%;
}

#content h2 {
    font-size: clamp(1.4rem, 4.5vw, 2.2rem);
    color: var(--violet);
    margin-bottom: 1.3rem;
    line-height: 1.25;
}

#content p {
    font-size: clamp(0.95rem, 2.5vw, 1.1rem);
    line-height: 1.85;
    color: var(--fg);
    margin-bottom: 1.4rem;
}

* #content p + p { */
/*     color: var(--muted); */
/* } */

/* ── Mobile tweaks (≤ 480 px) ── */
@media (max-width: 480px) {
    .scroll-arrow span {
        display: none;
    }
}

/* ── Reduced-motion override ── */
@media (prefers-reduced-motion: reduce) {
    h1 .char {
        transition: none;
    }
    h1 .char.visible {
        animation: none;
        color: #b57bee;
    }
    .scroll-arrow {
        animation: none;
    }
    .ornament path {
        transition: none;
        stroke-dashoffset: 0;
    }
    #bg-canvas {
        transition: none;
    }
}