@font-face {
    font-family: "HK Grotesk";
    src: url("./fonts/hkgrotesk-regular.24ff70bd.woff") format("woff");
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "HK Grotesk";
    src: url("./fonts/hkgrotesk-semibold.59387fcc.woff") format("woff");
    font-weight: 600;
    font-display: swap;
}

:root {
    --opening-bg: #f3f6ee;
    --opening-ink: #13251b;
    --opening-muted: #53665a;
    --opening-line: #d3ddcb;
    --opening-paper: #fffef8;
    --opening-accent: #49843c;
    --opening-glow: #b9f22730;
    color-scheme: light;
}

:root[data-theme="dark"] {
    --opening-bg: #0c1712;
    --opening-ink: #f0f4ea;
    --opening-muted: #a0b4a5;
    --opening-line: #304337;
    --opening-paper: #192a20;
    --opening-accent: #b9f227;
    --opening-glow: #74d89a19;
    color-scheme: dark;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "HK Grotesk", sans-serif;
    background: var(--opening-bg);
    color: var(--opening-ink);
}

.creator-opening {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
    background: radial-gradient(ellipse at 50% 35%, var(--opening-glow), transparent 65%);
}

.creator-opening__brand {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .13em;
    color: var(--opening-muted);
}

.creator-opening__graphic {
    position: relative;
    width: 172px;
    height: 172px;
    margin: 42px 0 32px;
    border: 1px solid var(--opening-line);
    border-radius: 50%;
    display: grid;
    place-items: center;
}

.creator-opening__canvas {
    width: 108px;
    height: 126px;
    padding: 20px 14px;
    border: 1px solid var(--opening-line);
    border-radius: 15px;
    background: var(--opening-paper);
    transform: rotate(-7deg);
    box-shadow: 9px 12px 0 -3px var(--opening-bg), 9px 12px 0 -2px var(--opening-line);
}

.creator-opening__artwork {
    position: relative;
    width: 100%;
    height: 100%;
    border: 1px dashed var(--opening-muted);
    border-radius: 4px;
    display: grid;
    place-items: center;
}

.creator-opening__orb {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(140deg, #b9f227, #74d89a);
}

.creator-opening__stroke {
    position: absolute;
    width: 42px;
    height: 7px;
    border-radius: 4px;
    background: var(--opening-ink);
    bottom: 13px;
    transform: rotate(-15deg);
}

.creator-opening__status { max-width: 440px; }
.creator-opening__title { margin: 0; font-size: clamp(26px, 5vw, 34px); font-weight: 600; line-height: 1.15; letter-spacing: -.035em; text-wrap: balance; }
.creator-opening__detail { margin: 16px 0 0; font-size: 16px; line-height: 1.5; color: var(--opening-muted); text-wrap: pretty; }
.creator-opening__progress { width: 112px; height: 3px; border-radius: 3px; background: var(--opening-line); margin-top: 28px; overflow: hidden; }
.creator-opening__progress-light { display: block; width: 44%; height: 100%; border-radius: inherit; background: var(--opening-accent); animation: creator-opening-progress 1.8s ease-in-out infinite; }

@keyframes creator-opening-progress {
    0% { transform: translateX(-110%); }
    100% { transform: translateX(330%); }
}

@media (prefers-reduced-motion: reduce) {
    .creator-opening__progress-light { animation: none; width: 60%; margin: auto; }
}

@media (max-height: 500px) {
    .creator-opening { padding-block: 24px; }
    .creator-opening__graphic { width: 132px; height: 132px; margin-block: 20px; }
    .creator-opening__canvas { width: 88px; height: 104px; padding: 12px; }
}