/*
 * Anugerah Citra Ganesha — landing page styles.
 * No JavaScript: interactivity is links, GET forms, :checked/:has(),
 * and scroll-driven animations (progressive enhancement via @supports).
 * Palette + type follow the ACG brand guide in Figma (Sora + Borel accents).
 * Glass treatment adapted from kegiatan_kemahasiswaan (public/css/login.css).
 */

@font-face {
    font-family: "Sora";
    src: url("../fonts/sora-latin.woff2") format("woff2");
    font-weight: 100 800;
    font-display: swap;
}

@font-face {
    font-family: "Borel";
    src: url("../fonts/borel-latin.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}

:root {
    --night: #060a2a;
    --navy: #0b1446;
    --indigo: #17236e;
    --royal: #3552d6;
    --azure: #4a7fe0;
    --sky: #8ccaf7;
    --peri: #a3b4f5;
    --pink: #f1a2f0;
    --mint: #93e6d4;
    --sun: #fbe68c;
    --orange: #fda150;

    --text: #f4f6ff;
    --text-2: #c3cbef;
    --text-3: #93a0d6;

    --font: "Sora", "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-script: "Borel", "Sora", cursive;

    --radius: 24px;
    --radius-sm: 14px;
    --gutter: clamp(16px, 4vw, 48px);
    --max: 1200px;

    /* Dark glass: translucent navy + frosted edge + milky inner light. */
    --glass-tint: linear-gradient(160deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.05) 45%, rgba(140, 202, 247, 0.07) 100%);
    --glass-blur: blur(20px) saturate(1.4);
    --glass-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.14),
        0 0 24px rgba(140, 202, 247, 0.10),
        0 24px 64px rgba(2, 4, 24, 0.45);
    --milky-edge:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        inset 0 0 22px rgba(255, 255, 255, 0.06),
        inset 0 -14px 24px -14px rgba(241, 162, 240, 0.18);
    --glow-strong: 0 0 0 1px rgba(255, 255, 255, 0.4), 0 0 28px rgba(140, 202, 247, 0.55), 0 0 64px rgba(53, 82, 214, 0.45);

    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

    interpolate-size: allow-keywords;
}

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

html {
    overflow-x: clip;
    scroll-behavior: smooth;
    scroll-padding-top: 110px;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text);
    background:
        radial-gradient(ellipse 80% 50% at 85% 0%, rgba(74, 127, 224, 0.35), transparent 70%),
        radial-gradient(ellipse 60% 40% at 0% 45%, rgba(241, 162, 240, 0.12), transparent 70%),
        radial-gradient(ellipse 70% 40% at 100% 80%, rgba(147, 230, 212, 0.10), transparent 70%),
        linear-gradient(180deg, var(--navy) 0%, var(--night) 55%, #0a1240 100%);
    /* clip, not hidden: `hidden` makes <body> a scroll container, and scroll-driven (view()) animations
       would then track body's non-scrolling scrollport and never progress. */
    overflow-x: clip;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
}

h1, h2, h3 {
    line-height: 1.15;
    margin: 0;
}

p {
    margin: 0 0 1em;
}

:focus-visible {
    outline: 3px solid var(--sky);
    outline-offset: 3px;
    border-radius: 6px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: 16px;
    top: -60px;
    z-index: 100;
    padding: 10px 16px;
    border-radius: 999px;
    background: var(--text);
    color: var(--navy);
    font-weight: 700;
    transition: top 0.2s;
}

.skip-link:focus {
    top: 16px;
}

/* Film grain over everything, as in the IG posts. */
.acg-grain {
    position: fixed;
    inset: 0;
    z-index: 60;
    pointer-events: none;
    /* Plain alpha, no blend mode: a fixed full-viewport blend re-composites on every scroll frame. */
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Glass ---------- */

.glass {
    position: relative;
    background: var(--glass-tint);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border-radius: var(--radius);
    box-shadow: var(--glass-shadow), var(--milky-edge);
    isolation: isolate;
}

/* Frosted rim: a gradient border that catches light at the corners. */
.glass::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    padding: 1px;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.08) 35%, rgba(255, 255, 255, 0.04) 65%, rgba(241, 162, 240, 0.45));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    pointer-events: none;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass {
        background: rgba(22, 33, 100, 0.94);
    }
}

@media (prefers-reduced-transparency: reduce) {
    .glass {
        background: rgba(22, 33, 100, 0.96);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

/* ---------- Type helpers ---------- */

.accented .accent {
    font-family: var(--font-script);
    font-weight: 400;
    /* Borel's tall metrics would otherwise stretch the line box of wrapped headings. */
    line-height: 0;
    color: var(--pink);
    text-shadow: 0 0 18px rgba(241, 162, 240, 0.55);
}

.accented .accent:nth-of-type(3n + 2) {
    color: var(--sky);
    text-shadow: 0 0 18px rgba(140, 202, 247, 0.55);
}

.accented .accent:nth-of-type(3n) {
    color: var(--mint);
    text-shadow: 0 0 18px rgba(147, 230, 212, 0.5);
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--sky);
}

.eyebrow::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: var(--sky);
    box-shadow: 0 0 12px var(--sky);
}

.lead {
    font-size: clamp(17px, 1.6vw, 20px);
    color: var(--text);
}

.link {
    color: var(--sky);
    font-weight: 600;
    text-decoration: none;
    background: linear-gradient(currentColor 0 0) left bottom / 0 1.5px no-repeat;
    transition: background-size 0.3s var(--ease-out);
}

.link:hover {
    background-size: 100% 1.5px;
}

.tag {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    background: rgba(140, 202, 247, 0.14);
    box-shadow: inset 0 0 0 1px rgba(140, 202, 247, 0.35);
}

/* ---------- Buttons ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 26px;
    border: 0;
    border-radius: 999px;
    font: 700 15px/1 var(--font);
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.35s var(--ease-spring), box-shadow 0.3s, background 0.3s;
}

.btn--primary {
    color: #fff;
    background: linear-gradient(180deg, #5a86ee 0%, var(--royal) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 10px 14px -10px rgba(255, 255, 255, 0.5),
        inset 0 -8px 12px -8px rgba(6, 10, 42, 0.4),
        0 8px 24px rgba(53, 82, 214, 0.55),
        0 0 32px rgba(140, 202, 247, 0.25);
}

.btn--primary:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 10px 14px -10px rgba(255, 255, 255, 0.5),
        0 14px 32px rgba(53, 82, 214, 0.65),
        0 0 48px rgba(241, 162, 240, 0.35);
}

.btn--ghost {
    color: var(--text);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.btn--ghost:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.14);
}

.btn--sm {
    min-height: 40px;
    padding: 0 18px;
    font-size: 14px;
}

/* ---------- Decorative layers ---------- */

.float {
    position: absolute;
    pointer-events: none;
    user-select: none;
}

.squares {
    position: absolute;
    width: calc(var(--cell) * 6);
    height: calc(var(--cell) * 6);
    --cell: clamp(22px, 3.4vw, 46px);
    pointer-events: none;
}

.squares i {
    position: absolute;
    left: calc(var(--x) * var(--cell));
    top: calc(var(--y) * var(--cell));
    width: calc(var(--s) * var(--cell));
    height: calc(var(--s) * var(--cell));
    border-radius: 4px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.28), rgba(140, 202, 247, 0.06));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45), 0 0 18px rgba(140, 202, 247, 0.25);
    /* No backdrop-filter here: these animate, and a blurred backdrop per square is costly to repaint. */
}

.squares--b i {
    background: linear-gradient(135deg, rgba(241, 162, 240, 0.3), rgba(255, 255, 255, 0.05));
}

@keyframes twinkle {
    0%, 100% { opacity: 0.85; transform: translateY(0); }
    50% { opacity: 0.35; transform: translateY(-6px); }
}

@keyframes drift {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(18px, -22px) rotate(6deg); }
}

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

@keyframes pulse {
    0%, 100% { opacity: 0.75; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.08); }
}

/* ---------- Nav ---------- */

.nav {
    position: fixed;
    inset: 24px 0 auto;
    z-index: 50;
    padding: 0 var(--gutter);
}

.nav__bar {
    max-width: var(--max);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 8px 8px 16px;
    border-radius: 999px;
    background: linear-gradient(160deg, rgba(11, 20, 70, 0.72), rgba(11, 20, 70, 0.5));
}

.nav__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 0.04em;
}

.nav__brand img {
    filter: drop-shadow(0 0 8px rgba(241, 162, 240, 0.5));
}

.nav__brand b {
    font-family: var(--font-script);
    font-weight: 400;
    color: var(--pink);
}

.nav__menu {
    display: flex;
    align-items: center;
    gap: 4px;
}

.nav__menu a:not(.btn) {
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-2);
    text-decoration: none;
    transition: color 0.2s, background 0.2s;
}

.nav__menu a:not(.btn):hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.08);
}

.nav__back {
    color: var(--text-3) !important;
}

.nav__toggle,
.nav__burger {
    display: none;
}

@media (max-width: 900px) {
    .nav__burger {
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        cursor: pointer;
        background: rgba(255, 255, 255, 0.08);
    }

    .nav__burger span,
    .nav__burger span::before,
    .nav__burger span::after {
        display: block;
        width: 18px;
        height: 2px;
        border-radius: 2px;
        background: var(--text);
        transition: transform 0.3s var(--ease-out), opacity 0.2s;
    }

    .nav__burger span {
        position: relative;
    }

    .nav__burger span::before,
    .nav__burger span::after {
        content: "";
        position: absolute;
        left: 0;
    }

    .nav__burger span::before { top: -6px; }
    .nav__burger span::after { top: 6px; }

    .nav__toggle {
        display: block;
        position: absolute;
        right: 8px;
        width: 44px;
        height: 44px;
        margin: 0;
        opacity: 0;
        cursor: pointer;
        z-index: 2;
    }

    .nav__toggle:focus-visible + .nav__burger {
        outline: 3px solid var(--sky);
    }

    .nav__toggle:checked + .nav__burger span { background: transparent; }
    .nav__toggle:checked + .nav__burger span::before { transform: translateY(6px) rotate(45deg); }
    .nav__toggle:checked + .nav__burger span::after { transform: translateY(-6px) rotate(-45deg); }

    .nav__menu {
        position: absolute;
        top: calc(100% + 10px);
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        padding: 12px;
        border-radius: var(--radius);
        background: rgba(11, 20, 70, 0.94);
        box-shadow: var(--glass-shadow);
        visibility: hidden;
        opacity: 0;
        transform: translateY(-8px);
        transition: opacity 0.25s, transform 0.3s var(--ease-out), visibility 0.3s;
    }

    .nav__toggle:checked ~ .nav__menu {
        visibility: visible;
        opacity: 1;
        transform: none;
    }

    .nav__menu a:not(.btn) {
        padding: 12px 16px;
        font-size: 16px;
    }

    .nav__menu .btn {
        margin-top: 8px;
    }
}

/* ---------- Hero ---------- */

.hero {
    position: relative;
    min-height: 100svh;
    display: grid;
    align-items: center;
    justify-items: start;
    /* Left edge lines up with the sections below (max 1200px column + gutter). */
    padding: clamp(84px, 11vh, 110px) var(--gutter) clamp(48px, 8vh, 80px) max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
    /* No overflow clipping here on purpose: in Safari, overflow-x: clip also sliced this section's static
       layers (loops, squares, background) off at its bottom edge, leaving a hard line above Tentang.
       Horizontal overflow is handled by the elephant's own box and by html/body. */
    isolation: isolate;
}

.hero__bg {
    /* Fades out into whatever the page background is, so there is no seam to colour-match. */
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 50%, rgba(0, 0, 0, 0.5) 72%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 50%, rgba(0, 0, 0, 0.5) 72%, transparent 100%);
    position: absolute;
    inset: 0;
    z-index: -1;
}

/* Background recreated from the "BG PPT" frame: deep navy, cool glow top-right, pink glow bottom-left. */
.hero__bg {
    bottom: -30%;
    overflow: hidden;
    background:
        /* Replace the Figma glow SVGs: same colours, but no filter region to leave hard edges. */
        radial-gradient(ellipse 60% 70% at -5% 78%, rgba(241, 162, 240, 0.3), transparent 68%),
        radial-gradient(ellipse 55% 60% at 105% 8%, rgba(140, 202, 247, 0.32), transparent 68%),
        radial-gradient(ellipse 50% 40% at 50% 50%, rgba(53, 82, 214, 0.28), transparent 70%),
        radial-gradient(ellipse 45% 55% at 100% 0%, rgba(140, 202, 247, 0.26), transparent 70%),
        radial-gradient(ellipse 45% 50% at 0% 100%, rgba(241, 162, 240, 0.24), transparent 70%),
        radial-gradient(ellipse 40% 40% at 100% 100%, rgba(163, 180, 245, 0.2), transparent 70%),
        linear-gradient(160deg, #14236e 0%, var(--navy) 45%, #0d1a5c 100%);
}

.hero__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    /* Darkens behind the text, and fades the field into the page background at the bottom (no seam). */
    background:
        radial-gradient(ellipse 55% 45% at 50% 42%, rgba(11, 20, 70, 0.55), transparent 75%);
}

.float--loop-a {
    width: min(60vw, 760px);
    top: -12%;
    left: -14%;
    opacity: 0.5;
}

.float--loop-c {
    z-index: -1;
    width: min(56vw, 720px);
    left: -12%;
    bottom: -22%;
    opacity: 0.32;
}

.float--blob-moon {
    width: min(22vw, 260px);
    right: 12%;
    top: 14%;
    opacity: 0.45;
}

.float--blob-violet {
    width: min(20vw, 240px);
    left: 8%;
    bottom: 10%;
    opacity: 0.4;
}

.float--ring {
    width: min(36vw, 420px);
    left: 50%;
    top: 50%;
    translate: -50% -62%;
    opacity: 0.22;
}

.hero__squares-tr,
.hero__squares-bl {
    opacity: 0.5;
}

.hero__squares-tr {
    top: 70px;
    right: 3%;
}

.hero__squares-bl {
    bottom: 40px;
    left: 2%;
    transform: rotate(180deg);
}

.hero__inner {
    position: relative;
    z-index: 1;
    /* Sized to its one-line title; the elephant takes the right-hand side. */
    width: max-content;
    max-width: 100%;
    text-align: left;
}

/* ITB elephant (docs/gemini-prompts.md #1). Stands at the hero's bottom-right, overlapping into the next section. */
.hero__mascot {
    position: absolute;
    /* Anchored by its top edge to a fraction of the hero's height, so it always starts below the title
       (which sits in the top third) at any window size. Most of him hangs past the hero's bottom,
       where the mask on the image fades him into Tentang. */
    top: 45%;
    right: -6vw;
    z-index: 0;
    width: clamp(300px, min(50vw, 92vh), 860px);
    margin: 0;
    pointer-events: none;
    transform-origin: 50% 100%;
    animation: mascot 7s ease-in-out infinite;
}

/* The glow lives on the figure, not the masked image: a filter on the masked element is clipped to the
   image's box, which showed up as a straight vertical edge beside the trophy. */
.hero__mascot {
    filter: drop-shadow(0 0 18px rgba(140, 202, 247, 0.35));
}

.hero__mascot img {
    width: 100%;
    /* Static fade, strong at the bottom: as the page scrolls the elephant drifts down (see mascot-exit),
       and the stretch of him that passes over Tentang's heading (about 72-85% of his height) is already
       transparent. Nothing animates the mask, so he never looks like he is being erased. */
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 44%, rgba(0, 0, 0, 0.55) 58%, rgba(0, 0, 0, 0.2) 68%, transparent 78%);
    mask-image: linear-gradient(180deg, #000 0%, #000 44%, rgba(0, 0, 0, 0.55) 58%, rgba(0, 0, 0, 0.2) 68%, transparent 78%);
}

.hero__mascot-glow {
    position: absolute;
    inset: 8% 0 10%;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(140, 202, 247, 0.5), rgba(241, 162, 240, 0.2) 45%, transparent 70%);
    filter: blur(24px);
    animation: pulse 6s ease-in-out infinite;
}

@keyframes mascot {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(-14px) rotate(2deg); }
}

@media (prefers-reduced-motion: no-preference) {
    .hero__mascot img {
        transition: transform 1.2s var(--ease-spring) 0.7s, opacity 0.6s ease 0.7s;
    }

    @starting-style {
        .hero__mascot img {
            opacity: 0;
            transform: translateY(55%) rotate(10deg);
        }
    }
}

.hero__emblem {
    position: relative;
    width: clamp(56px, min(10vw, 13vh), 118px);
    margin: 0 auto clamp(8px, 1.6vh, 14px);
    animation: bob 6s ease-in-out infinite;
}

.hero__halo {
    position: absolute;
    inset: -40%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(241, 162, 240, 0.45), rgba(140, 202, 247, 0.18) 40%, transparent 68%);
    filter: blur(8px);
    animation: pulse 5s ease-in-out infinite;
}

.hero__logo {
    position: relative;
    width: 100%;
    filter: drop-shadow(0 0 22px rgba(140, 202, 247, 0.55));
}

.hero__eyebrow {
    margin-bottom: 14px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-2);
}

.hero__title {
    /* One line at every width: ~22 glyphs, so the size tracks the viewport. */
    font-size: clamp(25px, min(4.9vw, 9.5vh), 72px);
    font-weight: 600;
    letter-spacing: -0.025em;
    white-space: nowrap;
    text-shadow: 0 0 40px rgba(140, 202, 247, 0.35);
}

.hero__title .accented {
    display: block;
}

/* "2026" as a background motif: a huge outlined numeral, barely there, behind the text. Same treatment as the
   watermark in the timeline. */
.hero__motif {
    position: absolute;
    /* Bottom-left corner of the hero, sitting in the part of the hero that fades into Tentang. */
    left: max(1vw, calc((100vw - var(--max)) / 2 - 60px));
    bottom: 0;
    translate: 0 4%;
    rotate: -4deg;
    font-family: var(--font-script);
    font-size: clamp(150px, 26vw, 400px);
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(140, 202, 247, 0.16);
    background: linear-gradient(180deg, rgba(140, 202, 247, 0.07), rgba(241, 162, 240, 0.03) 70%, transparent);
    -webkit-background-clip: text;
    background-clip: text;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
}

.hero__lead {
    max-width: 500px;
    margin: clamp(22px, 4vh, 38px) 0 clamp(14px, 2.6vh, 24px);
    font-size: clamp(15px, 1.5vw, 18px);
    color: var(--text-2);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 14px;
}

.hero__stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: clamp(14px, 3vh, 26px) 0 0;
    max-width: 600px;
    padding: 14px 8px;
    /* Darker tint than other glass: it sits over the pink glow, and the labels need contrast there. */
    background: linear-gradient(160deg, rgba(11, 20, 70, 0.62), rgba(11, 20, 70, 0.4));
}

.hero__stats div {
    padding: 0 12px;
}

.hero__stats div + div {
    border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.hero__stats dt {
    white-space: nowrap;
    font-size: 12px;
    color: var(--text-3);
}

.hero__stats dd {
    margin: 2px 0 0;
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 700;
}

.hero__scroll {
    position: absolute;
    bottom: 24px;
    left: 50%;
    translate: -50% 0;
    width: 28px;
    height: 46px;
    border-radius: 999px;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5);
}

.hero__scroll span {
    position: absolute;
    left: 50%;
    top: 9px;
    width: 4px;
    height: 9px;
    margin-left: -2px;
    border-radius: 2px;
    background: var(--text);
    animation: scrollcue 1.8s ease-in-out infinite;
}

@keyframes scrollcue {
    0% { opacity: 0; transform: translateY(0); }
    40% { opacity: 1; }
    100% { opacity: 0; transform: translateY(14px); }
}

/* Page-load entrance (no JS): elements start hidden and transition in. */
@media (prefers-reduced-motion: no-preference) {
    .hero__inner > * {
        transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
    }

    @starting-style {
        .hero__inner > * {
            opacity: 0;
            transform: translateY(28px);
        }
    }

    .hero__inner > :nth-child(2) { transition-delay: 0.1s; }
    .hero__inner > :nth-child(3) { transition-delay: 0.2s; }
    .hero__inner > :nth-child(4) { transition-delay: 0.3s; }
    .hero__inner > :nth-child(5) { transition-delay: 0.4s; }
    .hero__inner > :nth-child(6) { transition-delay: 0.5s; }
}

/* ---------- Sections ---------- */

.section {
    position: relative;
    max-width: var(--max);
    margin: 0 auto;
    padding: clamp(72px, 10vw, 128px) var(--gutter);
}

.section__head {
    max-width: 720px;
    margin-bottom: clamp(32px, 5vw, 56px);
}

.section__title {
    font-size: clamp(30px, 4.6vw, 54px);
    font-weight: 600;
    letter-spacing: -0.015em;
}

.section__sub {
    margin-top: 14px;
    color: var(--text-2);
}

/* ---------- About ---------- */

.float--blob-teal {
    width: min(30vw, 340px);
    right: -6%;
    top: 4%;
    opacity: 0.55;
    z-index: -1;
}

.about {
    padding-top: clamp(32px, 5vw, 64px);
}

.about__grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(28px, 5vw, 64px);
    align-items: start;
}

.about__copy p:not(.lead) {
    color: var(--text-2);
}

.cta-card {
    margin-top: 32px;
    padding: 26px;
}

.cta-card h3 {
    font-size: 20px;
    margin-bottom: 6px;
}

.cta-card p {
    color: var(--text-2);
}

.cta-card__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    margin-top: 8px;
}

.timeline {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
    --line-x: 50%;
}

/* Rail + fill that grows as the timeline scrolls past. */
.timeline::before,
.timeline::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--line-x);
    width: 3px;
    margin-left: -1.5px;
    border-radius: 3px;
}

.timeline::before {
    background: rgba(255, 255, 255, 0.12);
}

.timeline::after {
    background: linear-gradient(180deg, var(--sky), var(--pink) 50%, var(--mint));
    box-shadow: 0 0 16px rgba(140, 202, 247, 0.7);
    transform-origin: top;
    transform: scaleY(var(--progress, 1));
}

.tl {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "info media";
    column-gap: 88px;
    align-items: center;
    padding: 28px 0;
}

.tl:nth-child(even) {
    grid-template-areas: "media info";
}

.tl__info { grid-area: info; }
.tl__media { grid-area: media; }

.tl:nth-child(odd) .tl__info {
    text-align: right;
}

.tl:nth-child(odd) .tl__card {
    margin-left: auto;
}

.tl__node {
    position: absolute;
    left: var(--line-x);
    top: 50%;
    z-index: 1;
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    border-radius: 6px;
    rotate: 45deg;
    background: var(--navy);
    box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.35);
}

.tl--selesai .tl__node {
    background: var(--peri);
    box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.6), 0 0 14px rgba(163, 180, 245, 0.7);
}

.tl--berlangsung .tl__node {
    background: var(--pink);
    box-shadow: var(--glow-strong);
}

.tl__date {
    margin: 0 0 10px;
    font-family: var(--font-script);
    font-size: clamp(18px, 2vw, 24px);
    color: var(--sky);
}

.tl--berlangsung .tl__date {
    color: var(--pink);
}

.tl__card {
    max-width: 460px;
    padding: 22px 24px;
    text-align: left;
}

.tl--berlangsung .tl__card {
    box-shadow: var(--glass-shadow), var(--milky-edge), 0 0 0 1px rgba(241, 162, 240, 0.5), 0 0 42px rgba(241, 162, 240, 0.3);
}

.tl__card h3 {
    margin: 10px 0 6px;
    font-size: 20px;
}

.tl__card p {
    color: var(--text-2);
    font-size: 15px;
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.pill::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.pill--selesai { color: var(--peri); background: rgba(163, 180, 245, 0.14); }
.pill--berlangsung { color: var(--pink); background: rgba(241, 162, 240, 0.16); box-shadow: 0 0 16px rgba(241, 162, 240, 0.3); }
.pill--mendatang { color: var(--mint); background: rgba(147, 230, 212, 0.12); }

.tl__media {
    margin: 0;
}

.tl__media img{
    width: 100%;
    max-width: 380px;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--radius);
    box-shadow: var(--glass-shadow);
    transition: transform 0.5s var(--ease-spring);
}

.tl:nth-child(even) .tl__media img,
.tl:nth-child(even) .tl__media figcaption {
    margin-left: auto;
}

.tl__media:hover img{
    transform: rotate(-2deg) scale(1.03);
}

.tl--selesai .tl__media img {
    filter: saturate(0.7);
}

.tl__media figcaption {
    max-width: 380px;
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-3);
}

/* ---------- Leaderboard ---------- */

.float--blob-indigo {
    width: min(28vw, 320px);
    left: -8%;
    top: 10%;
    opacity: 0.45;
    z-index: -1;
}

.tabs {
    display: inline-flex;
    gap: 4px;
    padding: 5px;
    margin-bottom: 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.tabs a {
    padding: 9px 20px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-2);
    text-decoration: none;
    transition: background 0.25s, color 0.25s;
}

.tabs a[aria-current] {
    color: var(--navy);
    background: linear-gradient(180deg, #fff, #dfe6ff);
    box-shadow: 0 0 20px rgba(140, 202, 247, 0.45);
}

.filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
    padding: 18px;
    margin-bottom: 28px;
    border-radius: var(--radius-sm);
}

.field {
    display: grid;
    gap: 6px;
    flex: 1 1 170px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-3);
}

.field select {
    width: 100%;
    min-height: 44px;
    padding: 0 38px 0 14px;
    border: 0;
    border-radius: 12px;
    font: 500 14px var(--font);
    color: var(--text);
    appearance: none;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%238ccaf7' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E") right 14px center no-repeat,
        rgba(6, 10, 42, 0.55);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    cursor: pointer;
}

.field select:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(140, 202, 247, 0.5);
}

.field option {
    color: #10163d;
}

.filters__actions {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 44px;
}

.board {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 24px;
    align-items: start;
}

.podium {
    display: grid;
    grid-template-columns: 1fr 1.1fr 1fr;
    align-items: end;
    gap: 14px;
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
}

.podium__step {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 26px 14px 20px;
    text-align: center;
    transition: transform 0.45s var(--ease-spring);
}

.podium__step:hover {
    transform: translateY(-8px);
}

.podium__step--1 {
    padding-top: 40px;
    padding-bottom: 32px;
    box-shadow: var(--glass-shadow), var(--milky-edge), 0 0 0 1px rgba(251, 230, 140, 0.5), 0 0 48px rgba(251, 230, 140, 0.25);
}

.podium__step a {
    text-decoration: none;
}

.podium__step strong {
    font-size: 15px;
    line-height: 1.3;
}

.podium__step small {
    color: var(--text-3);
}

.podium__rank {
    position: absolute;
    top: -16px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-weight: 800;
    color: var(--navy);
    background: var(--peri);
}

.podium__step--1 .podium__rank { background: var(--sun); box-shadow: 0 0 22px rgba(251, 230, 140, 0.7); }
.podium__step--2 .podium__rank { background: #dfe6ff; }
.podium__step--3 .podium__rank { background: var(--orange); }

.avatar {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    font-weight: 700;
    font-size: 20px;
    background: linear-gradient(135deg, var(--azure), #8f5fd6);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.4), 0 0 24px rgba(140, 202, 247, 0.4);
}

.podium__step--1 .avatar {
    width: 78px;
    height: 78px;
}

.avatar--faculty {
    font-size: 14px;
}

.podium__points {
    margin-top: 4px;
    padding: 3px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.1);
}

.table-wrap {
    overflow-x: auto;
    border-radius: var(--radius-sm);
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.table th,
.table td {
    padding: 13px 16px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.table thead th {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-3);
    white-space: nowrap;
}

.table thead a {
    text-decoration: none;
}

.table thead a::after {
    content: "↕";
    margin-left: 6px;
    opacity: 0.4;
}

.table th[aria-sort="ascending"] a::after { content: "↑"; opacity: 1; color: var(--sky); }
.table th[aria-sort="descending"] a::after { content: "↓"; opacity: 1; color: var(--sky); }

.table tbody th {
    font-weight: 500;
}

.table tbody th a {
    font-weight: 600;
    text-decoration: none;
}

.table tbody th a:hover {
    color: var(--sky);
}

.table tbody small {
    display: block;
    font-size: 12px;
    color: var(--text-3);
}

.table tbody tr {
    transition: background 0.2s;
}

.table tbody tr:hover {
    background: rgba(140, 202, 247, 0.07);
}

.table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.table tbody tr:last-child > * {
    border-bottom: 0;
}

.rank {
    display: inline-grid;
    place-items: center;
    min-width: 28px;
    height: 28px;
    border-radius: 8px;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.06);
}

.rank--1 { color: var(--navy); background: var(--sun); box-shadow: 0 0 14px rgba(251, 230, 140, 0.6); }
.rank--2 { color: var(--navy); background: #dfe6ff; }
.rank--3 { color: var(--navy); background: var(--orange); }

.table__empty {
    padding: 32px !important;
    text-align: center !important;
    color: var(--text-3);
}

.pager {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 18px;
}

.pager__item {
    display: grid;
    place-items: center;
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    border-radius: 12px;
    font-weight: 600;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
    transition: background 0.2s, transform 0.3s var(--ease-spring);
}

a.pager__item:hover {
    background: rgba(255, 255, 255, 0.14);
    transform: translateY(-2px);
}

.pager__item.is-current {
    color: var(--navy);
    background: var(--sky);
    box-shadow: 0 0 18px rgba(140, 202, 247, 0.6);
}

.pager__item.is-disabled {
    opacity: 0.35;
}

.board__side {
    display: grid;
    gap: 20px;
    position: sticky;
    top: 96px;
}

.chart {
    margin: 0;
    padding: 22px;
}

.chart figcaption {
    margin-bottom: 16px;
}

.chart h3 {
    font-size: 17px;
}

.chart figcaption p {
    margin: 2px 0 0;
    font-size: 13px;
    color: var(--text-3);
}

.bars {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bars a {
    display: grid;
    grid-template-columns: 52px 1fr 40px;
    align-items: center;
    gap: 10px;
    padding: 3px 6px;
    margin: 0 -6px;
    border-radius: 8px;
    font-size: 12px;
    text-decoration: none;
    transition: background 0.2s;
}

.bars a:hover {
    background: rgba(255, 255, 255, 0.07);
}

.bars__label {
    font-weight: 600;
    color: var(--text-2);
}

.bars__track {
    height: 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    overflow: hidden;
}

.bars__fill {
    display: block;
    width: var(--v);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--azure), var(--sky));
    box-shadow: 0 0 12px rgba(140, 202, 247, 0.6);
}

.bars li:nth-child(-n + 3) .bars__fill {
    background: linear-gradient(90deg, #a46bea, var(--pink));
    box-shadow: 0 0 12px rgba(241, 162, 240, 0.6);
}

.bars .is-active a {
    background: rgba(241, 162, 240, 0.14);
    box-shadow: inset 0 0 0 1px rgba(241, 162, 240, 0.4);
}

.bars__value {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--text-2);
}

.donut {
    position: relative;
    width: 180px;
    margin: 0 auto 18px;
}

.donut svg {
    width: 100%;
    rotate: 0deg;
}

.donut circle {
    fill: none;
    stroke-width: 5;
}

.donut__track {
    stroke: rgba(255, 255, 255, 0.07);
}

.donut__seg {
    stroke-linecap: butt;
    filter: drop-shadow(0 0 3px currentColor);
    transition: stroke-width 0.3s;
}

.donut__seg--karsa { stroke: var(--sky); color: var(--sky); }
.donut__seg--karya { stroke: var(--pink); color: var(--pink); }
.donut__seg--rasa { stroke: var(--mint); color: var(--mint); }
.donut__seg--perkasa { stroke: var(--orange); color: var(--orange); }

.donut__center {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    text-align: center;
}

.donut__center strong {
    font-size: 30px;
    line-height: 1;
}

.donut__center span {
    font-size: 12px;
    color: var(--text-3);
}

.legend {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.legend a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 8px;
    font-size: 13px;
    text-decoration: none;
    transition: background 0.2s;
}

.legend a:hover,
.legend a[aria-current] {
    background: rgba(255, 255, 255, 0.08);
}

.legend b {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}

.legend__dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

.legend__dot--karsa { background: var(--sky); box-shadow: 0 0 8px var(--sky); }
.legend__dot--karya { background: var(--pink); box-shadow: 0 0 8px var(--pink); }
.legend__dot--rasa { background: var(--mint); box-shadow: 0 0 8px var(--mint); }
.legend__dot--perkasa { background: var(--orange); box-shadow: 0 0 8px var(--orange); }

/* ---------- Gallery ---------- */

.gallery__squares {
    left: 1%;
    top: 40px;
    opacity: 0.6;
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 28px;
    padding: 0;
    border: 0;
}

.chips input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.chips label {
    padding: 9px 18px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-2);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
    cursor: pointer;
    transition: background 0.25s, color 0.25s, transform 0.3s var(--ease-spring);
}

.chips label:hover {
    transform: translateY(-2px);
    color: var(--text);
}

.chips input:checked + label {
    color: var(--navy);
    background: linear-gradient(180deg, #fff, #dfe6ff);
    box-shadow: 0 0 22px rgba(140, 202, 247, 0.5);
}

.chips input:focus-visible + label {
    outline: 3px solid var(--sky);
    outline-offset: 2px;
}

.card__cat {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sky);
}

/* ---------- Profile ---------- */

.profile {
    position: relative;
    max-width: 960px;
    margin: 0 auto;
    padding: 130px var(--gutter) 96px;
}

.profile__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
}

.profile__back {
    display: inline-block;
    margin-bottom: 20px;
}

.profile__head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 28px;
    align-items: center;
    padding: 28px;
    margin-bottom: 48px;
}

.profile__photo {
    display: grid;
    place-items: center;
    width: 128px;
    height: 128px;
    border-radius: 50%;
    overflow: hidden;
    font-family: var(--font-script);
    font-size: 44px;
    background: linear-gradient(135deg, var(--azure), #8f5fd6);
    box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.4), var(--glow-strong);
}

.profile__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile__id h1 {
    font-size: clamp(26px, 4vw, 40px);
    margin-bottom: 6px;
}

.profile__id p {
    color: var(--text-2);
    margin-bottom: 6px;
}

.profile__bio {
    font-size: 13px;
    color: var(--text-3) !important;
}

.profile__stats {
    display: grid;
    gap: 12px;
    margin: 0;
    text-align: center;
}

.profile__stats dt {
    font-size: 12px;
    color: var(--text-3);
}

.profile__stats dd {
    margin: 0;
    font-size: 30px;
    font-weight: 700;
}

.profile__title {
    margin-bottom: 24px;
    font-size: clamp(26px, 3.6vw, 40px);
}

.achievements {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.achievement {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 20px;
    align-items: center;
    padding: 18px 22px;
}

.achievement h3 {
    font-size: 17px;
    margin-bottom: 4px;
}

.achievement p:last-child {
    margin: 0;
    color: var(--text-2);
    font-size: 14px;
}

.achievement__points {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 18px;
    font-weight: 800;
    color: var(--navy);
    background: linear-gradient(135deg, var(--sun), var(--orange));
    box-shadow: 0 0 22px rgba(251, 230, 140, 0.45);
}

/* ---------- Footer ---------- */

.footer {
    position: relative;
    padding: 40px var(--gutter) 28px;
    overflow: hidden;
}

.float--loop-b {
    width: min(70vw, 900px);
    right: -20%;
    bottom: -30%;
    opacity: 0.5;
    z-index: -1;
}

.footer__inner {
    max-width: var(--max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: 28px;
    padding: 30px;
}

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

.footer__brand p {
    margin: 0;
    font-size: 13px;
    color: var(--text-3);
}

.footer__brand .footer__name {
    font-size: 20px;
    font-weight: 600;
    color: var(--text);
}

.footer__links,
.footer__social {
    display: grid;
    gap: 8px;
    align-content: start;
}

.footer__links a,
.footer__social a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--text-2);
    text-decoration: none;
}

.footer__links a:hover,
.footer__social a:hover {
    color: var(--sky);
}

.footer__social svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
}

.footer__social svg .fill {
    fill: currentColor;
    stroke: none;
}

.footer__legal {
    margin: 20px 0 0;
    text-align: center;
    font-size: 12px;
    color: var(--text-3);
}

/* ---------- Scroll-driven motion (progressive enhancement) ---------- */

@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        /* Pop in: rise, overshoot slightly, settle. --i staggers siblings. */
        .reveal {
            animation: reveal linear both;
            animation-timeline: view();
            /* Plain range first; the staggered one only wins where calc() inside animation-range parses. */
            animation-range: entry 0% cover 30%;
            animation-range: entry calc(var(--i, 0) * 7%) cover calc(28% + var(--i, 0) * 7%);
        }

        @keyframes reveal {
            0% { opacity: 0; transform: translateY(56px) scale(0.9); }
            65% { opacity: 1; transform: translateY(-6px) scale(1.02); }
            100% { opacity: 1; transform: none; }
        }

        /* Headings flow in left to right. */
        .section__head.reveal .section__title {
            animation: wipe linear both;
            animation-timeline: view();
            animation-range: entry 10% cover 30%;
        }

        @keyframes wipe {
            /* Flows in from the left. Transform + opacity only, so it stays on the compositor. */
            from { opacity: 0; transform: translateX(-48px); }
            to { opacity: 1; transform: none; }
        }

        .tl:nth-child(odd) .tl__media.reveal,
        .tl:nth-child(even) .tl__info.reveal {
            animation-name: reveal-right;
        }

        .tl:nth-child(even) .tl__media.reveal,
        .tl:nth-child(odd) .tl__info.reveal {
            animation-name: reveal-left;
        }

        @keyframes reveal-left {
            from { opacity: 0; transform: translateX(-60px) rotate(-2deg); }
            to { opacity: 1; transform: none; }
        }

        @keyframes reveal-right {
            from { opacity: 0; transform: translateX(60px) rotate(2deg); }
            to { opacity: 1; transform: none; }
        }

        /* Timeline rail fills as the list scrolls through the viewport. */
        .timeline {
            view-timeline-name: --rail;
        }

        .timeline::after {
            animation: rail linear both;
            animation-timeline: --rail;
            animation-range: entry 40% exit 60%;
        }

        @keyframes rail {
            from { transform: scaleY(0); }
            to { transform: scaleY(1); }
        }

        .bars__fill {
            animation: grow linear both;
            animation-timeline: view();
            animation-range: entry 10% cover 30%;
        }

        .bars__fill {
            transform-origin: left center;
        }

        @keyframes grow {
            from { transform: scaleX(0); }
        }

        /* Parallax: the elephant drifts down with you as you leave the hero, so he trails the page. */
        .hero__mascot img {
            animation: mascot-exit linear both;
            animation-timeline: scroll(root);
            animation-range: 0 90vh;
        }

        @keyframes mascot-exit {
            to { translate: 0 18%; }
        }
    }
}

/* No scroll-driven animations (e.g. Firefox, older Safari): pop in once on load, staggered by --i,
   instead of leaving everything static. */
@supports not (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .reveal {
            animation: pop-in 0.7s var(--ease-spring) both;
            animation-delay: calc(var(--i, 0) * 90ms);
        }

        @keyframes pop-in {
            from { opacity: 0; transform: translateY(40px) scale(0.94); }
            to { opacity: 1; transform: none; }
        }
    }
}

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

    html {
        scroll-behavior: auto;
    }
}

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
    .board {
        grid-template-columns: minmax(0, 1fr);
    }

    .board__side {
        position: static;
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 860px) {
    .about__grid {
        grid-template-columns: 1fr;
    }

    .timeline {
        --line-x: 11px;
    }

    .tl,
    .tl:nth-child(even) {
        grid-template-columns: 1fr;
        grid-template-areas: "info" "media";
        row-gap: 16px;
        padding-left: 44px;
    }

    .tl:nth-child(odd) .tl__info {
        text-align: left;
    }

    .tl:nth-child(odd) .tl__card {
        margin-left: 0;
    }

    .tl__node {
        top: 40px;
    }

    .tl__media img{
        max-width: 100%;
        aspect-ratio: 16 / 10;
    }

    .tl:nth-child(even) .tl__media img,
    .tl:nth-child(even) .tl__media figcaption {
        margin-left: 0;
    }

    .footer__inner {
        grid-template-columns: 1fr;
    }

    .profile__head {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .profile__stats {
        grid-auto-flow: column;
        gap: 40px;
    }
}

@media (max-width: 640px) {
    .hero__stats {
        grid-template-columns: 1fr 1fr;
        row-gap: 16px;
    }

    .hero__stats div:nth-child(3) {
        border-left: 0;
    }

    .board__side {
        grid-template-columns: 1fr;
    }

    .podium {
        gap: 8px;
    }

    .podium__step {
        padding: 24px 6px 14px;
    }

    .podium__step strong {
        font-size: 12px;
    }

    .avatar {
        width: 48px;
        height: 48px;
        font-size: 16px;
    }

    .podium__step--1 .avatar {
        width: 58px;
        height: 58px;
    }

    .table th,
    .table td {
        padding: 11px 10px;
    }

    .table tbody small {
        display: none;
    }

    .achievement {
        grid-template-columns: auto 1fr;
    }

    .achievement .tag {
        grid-column: 2;
        justify-self: start;
    }

    /* Phone: the content sits in the middle, the elephant peeks up from the bottom right. */
    .hero {
        padding-bottom: clamp(150px, 26vh, 220px);
    }

    .hero__inner {
        width: 100%;
    }

    .hero__title {
        font-size: clamp(25px, 7.4vw, 34px);
    }

    .hero__actions .btn {
        min-height: 44px;
        padding: 0 20px;
    }

    .hero__mascot {
        top: auto;
        right: -14vw;
        bottom: -3%;
        width: clamp(230px, 74vw, 400px);
    }


    .hero__squares-tr,
    .gallery__squares {
        display: none;
    }
}

/* The elephant hangs below the hero into Tentang. Stacking Tentang above the hero keeps anything from the
   hero (elephant, glow) behind its text and cards, never over them. */
.about {
    z-index: 1;
}