/* =========================================================
   COMMON SECTIONS
========================================================= */

.collective,
.timeline,
.people-section,
.join-bottom {
    padding: 110px 7vw;
}


/* =========================================================
   COLLECTIVE LIGHT
========================================================= */

.collective {
    background: var(--cream);

    display: grid;
    grid-template-columns: 35% 65%;
    align-items: center;
}

.collective-number {
    color: var(--orange);

    font-size: clamp(120px, 19vw, 290px);
    font-weight: 900;
    line-height: .75;
    letter-spacing: -.08em;
}

.collective h2,
.timeline h2,
.people-head h2,
.join-copy h2 {
    margin: 20px 0;

    font-size: clamp(45px, 5.5vw, 90px);
    line-height: .9;
    letter-spacing: -.06em;
}

.collective p,
.timeline p {
    max-width: 600px;

    color: #5f5a57;

    font-size: 18px;
    line-height: 1.6;
}


/* =========================================================
   16 YEARS
========================================================= */

.timeline {
    text-align: center;
}

.timeline h2 {
    font-size: clamp(64px, 9vw, 150px);
}

.year-line {
    max-width: 1200px;

    margin: 50px auto 24px;

    display: grid;
    grid-template-columns: repeat(17, 1fr);

    border-top: 1px solid var(--line);
}

.year-chip {
    position: relative;

    padding-top: 18px;

    color: #999;

    font: 700 8px monospace;
}

.year-chip::before {
    content: "";

    position: absolute;

    top: -4px;
    left: 50%;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--orange);

    transform: translateX(-50%);
}

.timeline p {
    margin: 30px auto;
}


/* =========================================================
   PEOPLE WALL
========================================================= */

.people-section {
    background: var(--black);
    color: var(--white);
}

.people-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.people-total {
    display: flex;
    align-items: center;
    gap: 15px;
}

.people-total strong {
    color: var(--orange);

    font-size: 70px;
    line-height: 1;
}

.people-total span {
    font: 700 8px/1.5 monospace;
    letter-spacing: 2px;
}

.people-wall {
    margin-top: 60px;

    display: grid;
    grid-template-columns: repeat(4, 1fr);

    border-top: 1px solid #2c2c2c;
}

.wall-person {
    min-height: 90px;

    padding: 24px 14px;

    display: grid;
    grid-template-columns: 45px 1fr 20px;
    align-items: center;

    border-bottom: 1px solid #2c2c2c;
}

.wall-index {
    color: #777;

    font: 700 7px monospace;
}

.wall-name {
    font-size: 14px;
}

.wall-spark {
    color: var(--orange);
}


/* =========================================================
   STATEMENT
========================================================= */

.statement {
    padding: 120px 4vw;

    text-align: center;

    overflow: hidden;
}

.statement-small {
    color: #999;

    font: 700 8px monospace;
    letter-spacing: 4px;
}

.statement-main {
    margin-top: 35px;

    display: flex;
    justify-content: center;
    gap: 3vw;

    font-size: clamp(60px, 10vw, 170px);
    font-weight: 900;
    letter-spacing: -.08em;
}

.statement-main span:nth-child(even) {
    color: var(--orange);
}

.statement-result {
    color: var(--orange);

    font-size: clamp(50px, 8vw, 130px);
    font-weight: 900;
    letter-spacing: -.07em;
}


/* =========================================================
   FINAL CTA
========================================================= */

.join-bottom {
    background: var(--cream);

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.final-counter {
    display: flex;
    align-items: center;
    gap: 16px;
}

.final-counter strong {
    color: var(--orange);

    font-size: 50px;
}

.final-counter span {
    max-width: 190px;

    font: 700 8px/1.5 monospace;
    letter-spacing: 2px;
}

.circle-button {
    width: 210px;
    height: 210px;

    border: 0;
    border-radius: 50%;

    background: var(--orange);
    color: var(--white);

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;

    font-size: 20px;
    font-weight: 900;

    transition:
        transform .25s ease,
        background .25s ease;
}

.circle-button:hover {
    background: var(--red);

    transform:
        rotate(4deg)
        scale(1.04);
}

.circle-button b {
    font-size: 25px;
}


/* =========================================================
   JOIN / SUCCESS OVERLAYS
========================================================= */

.overlay,
.success,
.welcome,
.milestone {
    position: fixed;
    inset: 0;

    z-index: 100;

    display: grid;
    place-items: center;

    background: var(--black);
    color: var(--white);
}

.overlay-close,
.success-close {
    position: absolute;

    top: 25px;
    right: 35px;

    border: 0;

    background: transparent;
    color: var(--white);

    font-size: 42px;
}

.join-content,
.success-content {
    width: min(620px, 88vw);

    text-align: center;
}

.join-step {
    margin-top: 20px;

    color: #777;

    font: 700 8px monospace;
    letter-spacing: 2px;
}

.join-content h2,
.success-content h2 {
    margin: 24px 0;

    font-size: clamp(55px, 8vw, 110px);
    line-height: .85;
    letter-spacing: -.07em;
}

.join-content p,
.success-content p {
    color: #bdb7b3;

    font-size: 17px;
    line-height: 1.5;
}

.join-content input {
    width: 100%;

    margin-top: 25px;
    padding: 20px 5px;

    border: 0;
    border-bottom: 2px solid #555;

    outline: 0;

    background: transparent;
    color: var(--white);

    text-align: center;
    font-size: 28px;

    transition: border-color .2s ease;
}

.join-content input:focus {
    border-color: var(--orange);
}

.join-content input::placeholder {
    color: #555;
}

#formError {
    min-height: 38px;

    padding-top: 12px;

    color: #ff9b83;
}


/* =========================================================
   BUTTONS
========================================================= */

.submit,
.success-actions button {
    margin-top: 20px;
    padding: 18px 28px;

    border: 0;

    background: var(--orange);
    color: var(--white);

    font-weight: 900;
    letter-spacing: 1px;
}

.submit:disabled {
    opacity: .55;
    cursor: wait;
}

.success-actions {
    display: flex;
    justify-content: center;
    gap: 12px;

    flex-wrap: wrap;
}

.success-actions .secondary {
    background: transparent;

    border: 1px solid #555;
}


/* =========================================================
   SUCCESS
========================================================= */

.spark {
    color: var(--orange);

    font-size: 42px;
}

.success-small,
.welcome-small {
    color: #bbb;

    font: 700 8px monospace;
    letter-spacing: 3px;
}

.success-number {
    font: 700 9px monospace;
    letter-spacing: 2px;
}

.success-number strong {
    color: var(--orange);
}


/* =========================================================
   PERSONAL WELCOME
========================================================= */

.welcome {
    z-index: 110;

    overflow: hidden;

    background: rgba(10, 10, 10, .97);
}

.welcome-rays {
    position: absolute;

    width: 110vmax;
    height: 110vmax;

    background:
        repeating-conic-gradient(
            from 0deg,
            rgba(240, 129, 67, .18) 0deg,
            rgba(240, 129, 67, 0) 2deg,
            transparent 20deg
        );

    animation:
        rotateWelcomeRays
        10s linear
        infinite;
}

.welcome-content {
    position: relative;

    z-index: 2;

    padding: 30px;

    text-align: center;
}

.welcome-name {
    margin: 22px 0;

    color: var(--orange);

    font-size: clamp(55px, 9vw, 135px);
    font-weight: 900;
    line-height: .9;
    letter-spacing: -.07em;
}

.welcome-message {
    font-size: clamp(22px, 3vw, 42px);
    font-weight: 900;
}

.welcome-sub {
    margin-top: 14px;

    color: #aaa;

    font: 700 8px monospace;
    letter-spacing: 3px;
}


/* =========================================================
   COLLECTIVE MILESTONES
========================================================= */

.milestone {
    z-index: 120;

    background: rgba(240, 129, 67, .97);

    text-align: center;
}

.milestone > div {
    padding: 30px;

    display: grid;
    gap: 10px;
}

.milestone small {
    font: 700 9px monospace;
    letter-spacing: 4px;
}

.milestone strong {
    font-size: clamp(120px, 25vw, 360px);
    line-height: .8;
    letter-spacing: -.08em;
}

.milestone span {
    font-size: 22px;
    font-weight: 900;
}


/* =========================================================
   FULLSCREEN WALL MODE
   https://.../wall
========================================================= */

.wall-mode {
    overflow: hidden;
}

.wall-mode .topbar,
.wall-mode main > section:not(.experience),
.wall-mode footer,
.wall-mode .intro {
    display: none !important;
}

.wall-mode .experience {
    width: 100vw;
    height: 100vh;
    min-height: 0;

    display: block;

    padding: 0;
}

.wall-mode .universe {
    width: 100vw;
    height: 100vh;
}

.wall-mode #stage {
    width: 100vw;
    height: 100vh;
    min-height: 0;
}

.wall-mode .universe-label {
    position: absolute;

    z-index: 20;

    top: 3vh;
    left: 4vw;
    right: 4vw;

    margin: 0;
}

.wall-mode .stage-note {
    right: 4vw;
    bottom: 4vh;
}

.wall-mode::after {
    content:
        "CREATE YOUR SUNSHINE · UNITED WE SHINE";

    position: fixed;

    z-index: 20;

    left: 4vw;
    bottom: 4vh;

    color: #888;

    font: 700 8px monospace;
    letter-spacing: 3px;
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes rotateWelcomeRays {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


/* =========================================================
   16 YEARS — ANIMATED LIGHT JOURNEY
========================================================= */

.timeline {
    position: relative;
    overflow: hidden;
}

.year-line {
    position: relative;
    isolation: isolate;
}


/* ---------------------------------------------------------
   LIGHT TRAIL — 2010 -> 2026
--------------------------------------------------------- */

.timeline-progress {
    position: absolute;

    left: 0;
    top: -2px;

    width: 100%;
    height: 3px;

    z-index: 2;

    border-radius: 20px;

    transform: scaleX(0);
    transform-origin: left center;

    background:
        linear-gradient(
            90deg,
            #D0332B 0%,
            #F08143 35%,
            #FFB44F 65%,
            #FFE58A 88%,
            #FFFFFF 100%
        );

    box-shadow:
        0 0 6px rgba(255,255,255,.85),
        0 0 14px rgba(255,193,73,.9),
        0 0 28px rgba(240,129,67,.65);
}

.timeline-running .timeline-progress {
    animation:
        sunshineTimelineProgress
        2s
        cubic-bezier(.22,.7,.25,1)
        forwards;
}


@keyframes sunshineTimelineProgress {

    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}


/* ---------------------------------------------------------
   TRAVELLING SUN PARTICLE
--------------------------------------------------------- */

.timeline-traveller {
    position: absolute;

    left: 0;
    top: 0;

    width: 1px;
    height: 1px;

    z-index: 10;

    opacity: 0;

    pointer-events: none;
}

.timeline-traveller span {
    position: absolute;

    left: -8px;
    top: -8px;

    width: 16px;
    height: 16px;

    border-radius: 50%;

    background: #FFFFFF;

    box-shadow:
        0 0 5px #FFFFFF,
        0 0 12px #FFE179,
        0 0 25px #F08143,
        0 0 50px rgba(240,129,67,.9),
        0 0 85px rgba(208,51,43,.4);

    animation:
        sunshineTravellerBurn
        .22s
        ease-in-out
        infinite alternate;
}

.timeline-running .timeline-traveller {
    animation:
        sunshineTimelineTraveller
        2s
        cubic-bezier(.22,.7,.25,1)
        forwards;
}


@keyframes sunshineTimelineTraveller {

    0% {
        left: 0;
        opacity: 0;
        transform: scale(.3);
    }

    3% {
        opacity: 1;
        transform: scale(1);
    }

    20% {
        transform: scale(.8);
    }

    40% {
        transform: scale(1.25);
    }

    60% {
        transform: scale(.85);
    }

    80% {
        transform: scale(1.35);
    }

    96% {
        opacity: 1;
        transform: scale(1.7);
    }

    100% {
        left: 100%;
        opacity: 0;
        transform: scale(3);
    }
}


@keyframes sunshineTravellerBurn {

    from {
        transform: scale(.8);
    }

    to {
        transform: scale(1.35);
    }
}


/* ---------------------------------------------------------
   INDIVIDUAL YEARS
--------------------------------------------------------- */

.year-chip {
    z-index: 4;

    transition:
        color .18s ease,
        transform .18s ease,
        text-shadow .18s ease;
}

.year-chip::before {
    z-index: 4;

    transition:
        width .18s ease,
        height .18s ease,
        background .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}


/*
 * A year remains illuminated after
 * the travelling light reaches it.
 */

.year-chip.year-lit {
    color: #D0332B;

    font-weight: 900;

    transform:
        translateY(-3px)
        scale(1.08);

    text-shadow:
        0 0 10px rgba(240,129,67,.35);
}

.year-chip.year-lit::before {
    width: 11px;
    height: 11px;

    background: #FF9B43;

    transform:
        translateX(-50%)
        scale(1.1);

    box-shadow:
        0 0 0 4px rgba(240,129,67,.10),
        0 0 9px #FFCB68,
        0 0 20px rgba(240,129,67,.85),
        0 0 38px rgba(240,129,67,.4);

    animation:
        sunshineYearIgnite
        .32s
        ease-out;
}


@keyframes sunshineYearIgnite {

    0% {
        transform:
            translateX(-50%)
            scale(.25);
    }

    45% {
        transform:
            translateX(-50%)
            scale(2.7);
    }

    100% {
        transform:
            translateX(-50%)
            scale(1.1);
    }
}


/* ---------------------------------------------------------
   2026 — FINAL SUNSHINE IMPACT
--------------------------------------------------------- */

.timeline-complete
.year-chip:last-of-type {

    color: #D0332B;

    animation:
        sunshine2026
        .8s
        cubic-bezier(.17,.84,.3,1)
        forwards;
}


.timeline-complete
.year-chip:last-of-type::before {

    animation:
        sunshine2026Dot
        .85s
        ease-out
        forwards;
}


@keyframes sunshine2026 {

    0% {
        transform: scale(1);
    }

    22% {
        transform: scale(2.3);

        text-shadow:
            0 0 8px #FFFFFF,
            0 0 22px #FFCB68,
            0 0 45px rgba(240,129,67,.95);
    }

    48% {
        transform: scale(.9);
    }

    70% {
        transform: scale(1.35);
    }

    100% {
        transform: scale(1.15);

        text-shadow:
            0 0 14px rgba(240,129,67,.4);
    }
}


@keyframes sunshine2026Dot {

    0% {
        transform:
            translateX(-50%)
            scale(1);
    }

    25% {
        transform:
            translateX(-50%)
            scale(5);

        background: #FFFFFF;

        box-shadow:
            0 0 15px #FFFFFF,
            0 0 35px #FFD66D,
            0 0 70px #F08143,
            0 0 120px rgba(208,51,43,.6);
    }

    100% {
        transform:
            translateX(-50%)
            scale(1.4);

        background: #F08143;

        box-shadow:
            0 0 15px rgba(240,129,67,.8);
    }
}


/* ---------------------------------------------------------
   BIG TITLE REACTION
--------------------------------------------------------- */

.timeline-complete h2 {
    animation:
        sunshineTimelineTitle
        .85s
        cubic-bezier(.17,.84,.3,1);
}


.timeline-complete h2 em {
    display: inline-block;

    animation:
        sunshineTimelineArrow
        .75s
        cubic-bezier(.17,.84,.3,1);
}


@keyframes sunshineTimelineTitle {

    0% {
        transform: scale(1);
    }

    30% {
        transform: scale(1.025);

        filter:
            brightness(1.3)
            drop-shadow(
                0 0 25px
                rgba(240,129,67,.25)
            );
    }

    100% {
        transform: scale(1);
        filter: none;
    }
}


@keyframes sunshineTimelineArrow {

    0% {
        transform:
            translateX(-12px)
            scale(.7);
    }

    35% {
        transform:
            translateX(18px)
            scale(1.5);
    }

    65% {
        transform:
            translateX(-3px)
            scale(.95);
    }

    100% {
        transform:
            translateX(0)
            scale(1);
    }
}


/* ---------------------------------------------------------
   AFTER ANIMATION
--------------------------------------------------------- */

.timeline-settled .timeline-progress {
    opacity: .65;

    box-shadow:
        0 0 8px rgba(240,129,67,.4),
        0 0 18px rgba(240,129,67,.18);
}



/* =========================================================
   SUNSHINE ENERGY — COLLECTIVE PROGRESS v117
========================================================= */
.sunshine-energy { margin-top: 38px; width: min(720px, 100%); padding: 28px 30px 24px; border: 1px solid rgba(10,10,10,.12); background: rgba(255,255,255,.68); backdrop-filter: blur(12px); }
.energy-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
.energy-head > div:first-child { display:flex; flex-direction:column; gap:6px; }
.energy-label { font-size:9px; font-weight:900; letter-spacing:2.3px; color:#716c68; }
.energy-head strong { font-size:clamp(22px,3vw,34px); line-height:1; letter-spacing:-.04em; color:#0A0A0A; }
.energy-score { font-size:11px; font-weight:900; letter-spacing:1.2px; white-space:nowrap; color:#D0332B; }
.energy-track { position:relative; height:9px; margin-top:22px; overflow:visible; background:rgba(10,10,10,.08); }
.energy-fill { position:absolute; inset:0 auto 0 0; width:0; background:linear-gradient(90deg,#D0332B,#F08143); box-shadow:0 0 18px rgba(240,129,67,.28); transition:width .9s cubic-bezier(.2,.8,.2,1); }
.energy-spark { position:absolute; top:50%; left:calc(var(--energy-progress,0) * 100%); transform:translate(-50%,-50%); font-size:20px; color:#F08143; text-shadow:0 0 14px rgba(240,129,67,.65); transition:left .9s cubic-bezier(.2,.8,.2,1); animation:energySparkPulse 1.6s ease-in-out infinite; }
.energy-next { margin-top:13px; font-size:10px; font-weight:900; letter-spacing:1.35px; color:#4d4743; }
.energy-milestones { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; margin-top:25px; }
.energy-milestone { position:relative; padding-top:16px; opacity:.34; transition:opacity .35s ease, transform .35s ease; }
.energy-milestone::before { content:""; position:absolute; left:0; right:-8px; top:4px; height:1px; background:rgba(10,10,10,.15); }
.energy-milestone:last-child::before { right:50%; }
.energy-milestone i { position:absolute; left:0; top:0; width:9px; height:9px; border-radius:50%; background:#bdb8b4; box-shadow:0 0 0 4px #fff; }
.energy-milestone strong,.energy-milestone span { display:block; }
.energy-milestone strong { font-size:12px; color:#0A0A0A; }
.energy-milestone span { margin-top:4px; font-size:7px; line-height:1.2; font-weight:900; letter-spacing:.65px; color:#716c68; }
.energy-milestone.is-unlocked { opacity:1; }
.energy-milestone.is-unlocked i { background:#F08143; box-shadow:0 0 0 4px #fff,0 0 14px rgba(240,129,67,.55); }
.energy-milestone.is-next { opacity:.78; transform:translateY(-2px); }
.energy-milestone.is-next i { background:#D0332B; animation:energyNextPulse 1.35s ease-in-out infinite; }
.collective-unlock-active .sunshine-energy { animation:energyUnlockCard .8s ease both; }
@keyframes energySparkPulse { 50% { transform:translate(-50%,-50%) scale(1.28); } }
@keyframes energyNextPulse { 50% { box-shadow:0 0 0 5px rgba(208,51,43,.12),0 0 18px rgba(208,51,43,.45); } }
@keyframes energyUnlockCard { 50% { box-shadow:0 0 60px rgba(240,129,67,.18); } }
@media (max-width:700px) { .sunshine-energy{padding:22px 18px 20px;margin-top:28px}.energy-head{align-items:flex-start;flex-direction:column;gap:10px}.energy-milestones{grid-template-columns:repeat(3,1fr);row-gap:18px}.energy-milestone:nth-child(3)::before,.energy-milestone:nth-child(6)::before{right:50%} }