@font-face { font-family: 'Megogo Normal'; src: url('./public/a72abb7e66d9398f/fonts/Megogo-InterfaceNormal.ttf') format('truetype'); font-weight: 400; font-display: block; }
@font-face { font-family: 'Megogo Regular'; src: url('./public/a72abb7e66d9398f/fonts/Megogo-InterfaceRegular.ttf') format('truetype'); font-weight: 400; font-display: block; }
@font-face { font-family: 'Megogo Medium'; src: url('./public/a72abb7e66d9398f/fonts/Megogo-InterfaceMedium.ttf') format('truetype'); font-weight: 500; font-display: block; }
@font-face { font-family: 'Megogo Demi'; src: url('./public/a72abb7e66d9398f/fonts/Megogo-InterfaceDemiBold.ttf') format('truetype'); font-weight: 600; font-display: block; }

:root { color-scheme: dark; --pink: #ff00b0; --card: #141414; --rule: #808080; --normal: 'Megogo Normal', sans-serif; --regular: 'Megogo Regular', sans-serif; --medium: 'Megogo Medium', sans-serif; --demi: 'Megogo Demi', sans-serif; }
* { box-sizing: border-box; }
html, body { margin: 0; min-width: 1200px; background: #000; }
body { color: #fff; font-family: var(--regular); -webkit-font-smoothing: antialiased; }
button, a { -webkit-tap-highlight-color: transparent; }
button { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-transform: inherit; cursor: pointer; }
button[aria-disabled='true'] { cursor: default; }
button:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }
h1, h2, h3, h4, p { margin: 0; font-weight: 400; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
img { display: block; max-width: none; }
.desktop-shell { width: 100%; min-width: 1200px; max-width: 1600px; margin: 0 auto; }
.design-canvas { position: relative; width: 1600px; background: #000; overflow: clip; padding-bottom: 0; }
.page-glow { pointer-events: none; position: absolute; left: 1058.3398px; top: 1255.0552px; width: 800px; height: 1200px; transform-origin: 0 0; transform: rotate(-15deg); }
.page-glow img { position: absolute; left: -500px; top: -500px; width: 1800px; height: 2200px; }
.page-glow-02 { pointer-events: none; position: absolute; left: 984px; top: 4923.0947px; width: 800px; height: 1200px; transform-origin: 0 0; transform: rotate(-25deg); }
.page-glow-02 img { position: absolute; left: -600px; top: -600px; width: 2000px; height: 2400px; }
.hero { position: relative; height: 900px; overflow: hidden; }
.hero-art { position: absolute; inset: 0; pointer-events: none; }
.hero-glow { position: absolute; left: 308.7422px; top: -343px; width: 600px; height: 800px; transform: rotate(75deg); transform-origin: 0 0; }
.hero-glow img { position: absolute; left: -600px; top: -600px; width: 1800px; height: 2000px; }
.hero-stripes-left { position: absolute; left: -635px; top: -479px; width: 1269.574px; height: 1057.442px; }
.hero-stripes-left img { width: 1410px; height: 1540.59px; }
.hero-stripes-right { position: absolute; left: 902px; top: 0; width: 668px; height: 792px; }
.hero-stripes-right img { width: 668px; height: 792px; }
.hero-award { position: absolute; left: 950px; top: 150px; width: 550px; height: 550px; z-index: 1; }
.hero-award-static { position: absolute; width: 100.06%; height: 104.37%; left: -.03%; top: -.66%; }
.hero-award-model { position: absolute; left: -125px; top: -50px; width: 800px; height: 850px; visibility: hidden; }
.hero-award-model canvas { display: block; width: 100%; height: 100%; pointer-events: none; }
.hero-award[data-model-state='ready'] .hero-award-static { visibility: hidden; }
.hero-award[data-model-state='ready'] .hero-award-model { visibility: visible; }
.floor-glow { position: absolute; left: 742px; top: 653px; width: 858px; height: 247px; }
.floor-glow img { width: 858px; height: 247px; }
.site-header { position: absolute; top: 0; left: 0; }
.anchor-nav { position: absolute; left: 100px; top: 120px; display: flex; gap: 42px; align-items: center; font-family: var(--medium); font-weight: 500; font-size: 20px; line-height: 23.992px; text-transform: uppercase; white-space: nowrap; }
.anchor-nav > button { width: 106px; }
.anchor-nav > span:first-of-type { width: 127px; text-align: center; }
.hero-copy { position: absolute; left: 100px; top: 324px; width: 750px; }
.campaign-lockup { display: flex; flex-direction: column; gap: 4px; }
.brand-line { display: flex; gap: 12px; font-size: 100px; line-height: 100px; letter-spacing: -2px; font-family: var(--regular); white-space: nowrap; }
.brand-line strong, .award-line strong { font-family: var(--demi); font-weight: 600; }
.brand-line strong { width: 436px; flex: none; }
.brand-line > span { width: 293px; flex: none; }
.award-line { display: flex; gap: 24px; align-items: center; height: 100px; font-size: 100px; line-height: 100px; letter-spacing: -2px; color: var(--pink); }
.award-line img { width: 395px; height: 99.321px; }
.hero-description { font-family: var(--normal); font-size: 24px; line-height: 28.8px; color: #f5f5f5; width: 543px; height: 58px; margin-top: 40px; transform: translateY(1px); }
.hero-actions { display: flex; gap: 20px; margin-top: 120px; }
.campaign-button { display: flex; align-items: center; justify-content: center; width: 300px; height: 64px; border: 2px solid; font-family: var(--demi); font-weight: 600; font-size: 24px; line-height: 20px; text-transform: uppercase; }
.campaign-button.primary { background: var(--pink); border-color: var(--pink); color: #000; }
.campaign-button.secondary { border-color: #fff; }
.campaign-stages { position: relative; width: 1400px; height: 320px; margin: 90px 100px 0; display: grid; grid-template-columns: repeat(4, 332px); gap: 24px; }
.stage { position: relative; height: 320px; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; outline: 1px solid var(--rule); outline-offset: 0; }
.stage.active { outline-color: var(--pink); }
.stage-background { position: absolute; inset: 0; overflow: hidden; background: #000; }
.stage-background img { position: absolute; left: .53px; top: -.29px; width: 331.47px; height: 769.408px; transform: scaleX(-1); }
.stage-vignette { position: absolute; width: 335px; height: 320px; left: 0; top: 0; background: url('./public/a72abb7e66d9398f/assets/stage-surface.svg') no-repeat; }
.stage-meta, .stage h2 { position: relative; }
.stage-meta > p:first-child { font-family: var(--normal); font-size: 32px; line-height: 38.4px; letter-spacing: -.64px; transform: translateY(1px); }
.stage-status { margin-top: 12px; font-family: var(--regular); font-size: 20px; line-height: 24px; color: #ccc; text-transform: uppercase; }
.stage.active .stage-status { color: var(--pink); }
.stage h2 { font-family: var(--normal); font-size: 32px; line-height: 32px; letter-spacing: -.64px; transform: translateY(1px); }

.nominations { position: relative; margin-top: 180px; }
.nominations-heading { padding: 0 100px; }
.nominations-heading h2 { font-family: var(--normal); font-size: 64px; line-height: 64px; text-transform: uppercase; }
.nominations-heading > p { width: 690px; height: 87px; margin-top: 20px; font-family: var(--regular); font-size: 24px; line-height: 28.8px; color: #ccc; transform: translateY(1px); }
.nominations-heading > p span { font-family: var(--normal); color: var(--pink); }
.nomination-list { margin: 80px 100px 0; width: 1400px; }
.nomination-row { position: relative; height: 140px; width: 100%; padding: 0 40px; border-top: 1px solid var(--rule); display: flex; align-items: center; justify-content: space-between; }
.nomination-summary { display: flex; align-items: center; gap: 24px; }
.nomination-label { display: flex; align-items: center; gap: 40px; font-family: var(--normal); font-size: 40px; line-height: 40px; white-space: nowrap; }
.nomination-summary .nomination-label { width: 885px; }
.nomination-label.two-lines { line-height: 36px; }
.nomination-number { color: var(--pink); line-height: 40px; flex: none; }
.nomination-list > .nomination-row:first-child .nomination-number { width: 42px; }
.nomination-list > .nomination-row:nth-child(2) .nomination-number, .nomination-toggle .nomination-number { width: 47px; }
.after-expanded .nomination-number { width: 48px; }
.disclosure { flex: none; transform: rotate(-90deg); }
.selected-nominee { display: flex; align-items: center; gap: 16px; font-family: var(--normal); font-size: 20px; line-height: 20px; text-transform: uppercase; white-space: nowrap; }
.selected-portrait { position: relative; width: 40px; height: 40px; overflow: hidden; flex: none; }
.selected-portrait img, .nominee-portrait > img { position: absolute; }
.portrait-01 img { width: 121.34%; height: 181.99%; left: -13.81%; top: -45.18%; }
.portrait-02 img { width: 256.66%; height: 171.13%; left: -87.75%; top: -3.77%; }
.portrait-03 img { width: 100%; height: 149.93%; left: 0; top: -14.5%; }
.portrait-04 img { width: 113.47%; height: 170.18%; left: -13.47%; top: -19.55%; }
.portrait-05 img { width: 100%; height: 149.97%; left: 0; top: -23.1%; }
.portrait-06 img { width: 100%; height: 149.98%; left: 0; top: -14.53%; }
.portrait-07 img { width: 100%; height: 124.99%; left: 0; top: -6.85%; }
.portrait-08 img { width: 100%; height: 100%; left: 0; top: 0; object-fit: cover; }
.portrait-09 img { width: 100%; height: 124.99%; left: 0; top: -.36%; }
.interactive-nomination { --panel-motion: 600ms; --header-motion: 240ms; --nomination-ease: ease-in-out; position: relative; isolation: isolate; }
/* The existing expanded glow follows the reveal, not the individual cards. */
.interactive-nomination::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; background: linear-gradient(90deg, rgb(255 0 176 / 0), rgb(255 0 176 / .08) 15%, rgb(255 0 176 / .4) 50.0841%, rgb(255 0 176 / .08) 85%, rgb(255 0 176 / 0)); transition: opacity var(--panel-motion) var(--nomination-ease); }
.interactive-nomination.is-expanded::before { opacity: 1; }
.nomination-toggle { text-align: left; transition: color var(--header-motion) var(--nomination-ease), border-color var(--header-motion) var(--nomination-ease); }
.nomination-toggle::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; background: linear-gradient(270deg, rgb(255 0 176 / 0), rgb(255 0 176 / .04) 15%, rgb(255 0 176 / .2) 50.084%, rgb(255 0 176 / .04) 85%, rgb(153 0 106 / 0)); transition: opacity var(--header-motion) var(--nomination-ease); }
.nomination-toggle:is(:hover, :focus-visible)::before { opacity: 1; }
.is-expanded .nomination-toggle::before { opacity: 0; }
.is-expanded .nomination-toggle, .nomination-toggle:is(:hover, :focus-visible) { color: var(--pink); border-color: var(--pink); }
.nomination-toggle:focus-visible { outline-offset: -6px; }
.nomination-disclosure { position: relative; flex: none; width: 44px; height: 44px; transform: rotate(-90deg); transition: transform var(--header-motion) var(--nomination-ease); }
.nomination-disclosure img { position: absolute; inset: 0; transition: opacity var(--header-motion) var(--nomination-ease); }
.disclosure-pink { transform: rotate(-90deg); opacity: 0; }
.is-expanded .nomination-disclosure { transform: rotate(0); }
.is-expanded .disclosure-pink, .nomination-toggle:is(:hover, :focus-visible) .disclosure-pink { opacity: 1; }
.is-expanded .disclosure-white, .nomination-toggle:is(:hover, :focus-visible) .disclosure-white { opacity: 0; }
/* Only this viewport changes height. The full-size grid sits still inside it. */
.nomination-panel { height: 0; overflow: clip; transition: height var(--panel-motion) var(--nomination-ease); }
.is-expanded .nomination-panel { height: var(--panel-height, auto); }
.nomination-panel-content { padding-top: 4px; padding-bottom: 81px; }
.nominee-grid { display: grid; grid-template-columns: repeat(3, 450px); column-gap: 25px; row-gap: 60px; }
.nominee-card { --vote-badge-top: 410px; --card-motion: 180ms; --card-ease: ease-out; position: relative; width: 450px; height: 594px; background: var(--card); }
.nominee-portrait { position: relative; width: 450px; height: 450px; overflow: hidden; }
.portrait-gradient { position: absolute; inset: 0; opacity: 0; background: linear-gradient(180deg, rgb(20 20 20 / 0) 0%, rgb(20 20 20 / 0) 25%, rgb(20 20 20 / .2) 49.828%, rgb(20 20 20 / .5) 70%, rgb(20 20 20 / .9) 90.176%, #141414); transition: opacity var(--card-motion) var(--card-ease); }
/* Cover photo bleed below the selected badge; share its edge and transition. */
.nominee-card.is-selected .nominee-portrait::after { content: ''; position: absolute; left: 0; right: 0; top: calc(var(--vote-badge-top) + 40px); bottom: 0; background: var(--card); pointer-events: none; transition: top var(--card-motion) var(--card-ease); }
.play-control, .info-control { position: absolute; top: 24px; width: 60px; height: 60px; border-radius: 50%; }
.play-control { left: 24px; }
.info-control { right: 24px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--card-motion) var(--card-ease), visibility 0s linear var(--card-motion); }
.info-control span { position: absolute; left: 0; right: 0; top: 14px; font-family: var(--demi); font-weight: 600; font-size: 32px; line-height: 32px; letter-spacing: -.64px; text-align: center; }
.nominee-copy { position: absolute; top: 474px; left: 24px; width: 402px; height: var(--copy-height); display: flex; flex-direction: column; gap: 8px; transition: top var(--card-motion) var(--card-ease); }
.nominee-name { font-family: var(--medium); font-weight: 500; font-size: 24px; line-height: 24px; text-transform: uppercase; }
.nominee-track { font-family: var(--regular); font-size: 20px; line-height: 20px; color: rgb(255 255 255 / .8); }
.nominee-actions { position: absolute; left: 24px; top: 506px; display: grid; grid-template-columns: 193px 197px; gap: 12px; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(12px); transition: opacity var(--card-motion) var(--card-ease), transform var(--card-motion) var(--card-ease), visibility 0s linear var(--card-motion); }
.nominee-actions button { height: 64px; display: flex; align-items: center; justify-content: center; font-family: var(--demi); font-weight: 600; font-size: 16px; line-height: 16px; text-transform: uppercase; white-space: nowrap; }
.vote-control { background: var(--pink); color: #000; gap: 8px; }
.donate-control { border: 2px solid #fff; }
.nominee-card:is(.is-interacting, .is-loading, .is-confirming) .portrait-gradient { opacity: 1; }
.nominee-card:is(.is-interacting, .is-loading, .is-confirming) .nominee-copy { top: calc(474px - var(--copy-height)); }
.nominee-card:is(.is-interacting, .is-loading, .is-confirming) :is(.info-control, .nominee-actions) { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.nominee-card:is(.is-interacting, .is-loading, .is-confirming) .nominee-actions { transform: translateY(0); }
.vote-badge { position: absolute; left: 0; top: var(--vote-badge-top); width: 450px; height: 40px; padding: 10px; display: flex; align-items: center; justify-content: center; background: var(--pink); font-family: var(--medium); font-weight: 500; font-size: 20px; line-height: 20px; text-transform: uppercase; transition: top var(--card-motion) var(--card-ease); }
/* Success adds the badge above the copy, without moving its hover anchor. */
.nominee-card.is-selected:is(.is-interacting, .is-confirming) { --vote-badge-top: calc(410px - var(--copy-height)); }
.nominee-card.is-donation-only .nominee-actions { width: 402px; grid-template-columns: 1fr; }
.vote-spinner { position: relative; flex: none; width: 32px; height: 32px; }
.vote-spinner > img, .vote-spinner-rotor > img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.vote-spinner-rotor { position: absolute; inset: 0; animation: vote-spin 800ms linear infinite; }
.vote-award { flex: none; width: 32px; height: 32px; object-fit: contain; }
@keyframes vote-spin { to { transform: rotate(360deg); } }
.after-expanded { transition: border-color 240ms ease-in-out; }
.is-expanded + .after-expanded, .interactive-nomination:has(.nomination-toggle:is(:hover, :focus-visible)) + .after-expanded { border-color: var(--pink); }
.special-label { display: flex; gap: 40px; align-items: center; }
.special-label > img { flex: none; }
.special-label p { font-family: var(--regular); font-size: 20px; line-height: 24px; color: var(--pink); text-transform: uppercase; }
.special-label h3 { font-family: var(--normal); font-size: 40px; line-height: 40px; white-space: nowrap; }
.voting-period { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; white-space: nowrap; }
.voting-period p:first-child { font-family: var(--regular); font-size: 24px; line-height: 24px; letter-spacing: -.48px; }
.voting-period p:last-child { font-family: var(--normal); font-size: 28px; line-height: 33.6px; letter-spacing: -.56px; }

/* A shared native modal outside the landing canvas keeps the page inert. */
html.donation-is-open, .donation-is-open body { overflow: hidden; }
.donation-dialog { position: fixed; inset: 1px 0 0; margin: auto; padding: 0; width: 1200px; height: 750px; max-width: none; max-height: none; border: 0; outline: 2px solid var(--rule); background: #000; color: #fff; overflow: visible; zoom: var(--dialog-scale, 1); opacity: 1; transform: translateY(0); transition: opacity 240ms ease-in-out, transform 240ms ease-in-out; }
.donation-dialog::backdrop { background: rgb(0 0 0 / .5); backdrop-filter: blur(10px); opacity: 1; transition: opacity 240ms ease-in-out; }
/* Reset every opening, even when a previous entrance was interrupted. */
.donation-dialog.is-entering { opacity: 0; transform: translateY(-16px); transition: none; }
.donation-dialog.is-entering::backdrop { opacity: 0; transition: none; }
.donation-nominee { position: absolute; left: 30px; top: 30px; width: 450px; height: 690px; overflow: hidden; background: var(--card); }
.donation-portrait-frame { position: absolute; left: -123.5px; top: -34px; width: 675px; height: 750px; overflow: hidden; }
.donation-portrait-frame > img { position: absolute; }
/* Reuse each card's focal crop in the taller modal frame, without raster edits. */
.donation-portrait-frame.portrait-01 img { height: 163.791%; top: -40.662%; }
.donation-portrait-frame.portrait-02 img { height: 154.02%; top: -3.39%; }
.donation-portrait-frame.portrait-03 img { height: 134.937%; top: -13.05%; }
.donation-portrait-frame.portrait-04 img { height: 153.162%; top: -17.595%; }
.donation-portrait-frame.portrait-05 img { height: 134.973%; top: -20.79%; }
.donation-portrait-frame.portrait-06 img { height: 134.982%; top: -13.077%; }
.donation-portrait-frame.portrait-07 img { height: 112.491%; top: -6.165%; }
.donation-portrait-frame.portrait-08 img { height: 90%; top: 0; object-fit: cover; }
.donation-portrait-frame.portrait-09 img { height: 112.491%; top: -.324%; }
.donation-portrait-gradient { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(20 20 20 / 0) 0%, rgb(20 20 20 / 0) 25%, rgb(20 20 20 / .2) 49.828%, rgb(20 20 20 / .5) 70%, rgb(20 20 20 / .9) 80%, #141414); }
.donation-nominee-copy { position: absolute; left: 0; bottom: 32px; width: 450px; padding: 0 32px; display: flex; flex-direction: column; gap: 12px; }
.donation-nominee-copy h3 { font-family: var(--medium); font-weight: 500; font-size: 32px; line-height: 32px; text-transform: uppercase; overflow-wrap: anywhere; transform: translateY(1px); }
.donation-nominee-copy p { font-family: var(--normal); font-size: 24px; line-height: 24px; color: var(--pink); white-space: nowrap; }
.donation-heading { position: absolute; left: 530px; top: 100px; width: 620px; display: flex; flex-direction: column; gap: 12px; font-family: var(--normal); }
.donation-heading > p { color: var(--pink); font-size: 20px; line-height: 20px; text-transform: uppercase; }
.donation-heading h2 { width: 627px; font-size: 48px; line-height: 48px; letter-spacing: -.96px; outline: none; }
.donation-description { position: absolute; left: 530px; top: 228px; width: 620px; font-family: var(--regular); font-size: 24px; line-height: 28.8px; color: #ccc; }
.donation-description p { white-space: pre-wrap; transform: translateY(1px); }
.donation-description p + p { margin-top: 28.8px; transform: translateY(2px); }
.donation-description span { font-family: var(--normal); color: #fff; text-decoration: underline; text-underline-position: from-font; text-decoration-skip-ink: none; }
.donation-amount-group { position: absolute; left: 530px; top: 446px; width: 620px; }
.donation-amount-group label { display: block; font-family: var(--regular); font-size: 20px; line-height: 20px; letter-spacing: -1px; }
.donation-input-frame { position: relative; width: 620px; height: 64px; margin-top: 12px; }
.donation-input-frame input { display: block; width: 100%; height: 100%; padding: 0 76px 0 31px; border: 1px solid var(--rule); border-radius: 0; background: #000; color: #fff; font-family: var(--normal); font-size: 32px; line-height: 32px; caret-color: var(--pink); }
.donation-input-frame input:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.donation-input-frame > span { position: absolute; right: 32px; top: 16px; width: 25px; font-family: var(--regular); font-size: 32px; line-height: 32px; color: #777; pointer-events: none; }
.donation-amount-group > p { margin-top: 8px; font-family: var(--regular); font-size: 20px; line-height: 24px; color: var(--rule); }
.donation-payment { position: absolute; left: 530px; top: 606px; width: 620px; height: 64px; display: flex; align-items: center; justify-content: center; background: var(--pink); color: #000; font-family: var(--demi); font-weight: 600; font-size: 20px; line-height: 20px; text-transform: uppercase; }
.donation-close { position: absolute; left: 1124px; top: 32px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after, .donation-dialog::backdrop { scroll-behavior: auto !important; transition-duration: 0s !important; transition-delay: 0s !important; } .vote-spinner-rotor { animation: none; } }