/* =============================================================
   Partner application forms — Artist / Creator / Studio.

   Built entirely on the tokens defined in home.css (--acc, --grn, --blu,
   --red, --bg, --panel, --line, --tx, --head, --body, --mark). No new
   colors or fonts introduced — this is meant to feel like a page of the
   same site, not a bolted-on form tool.
   ============================================================= */

.apply-hero { padding: 148px 0 40px; border-bottom: 2px solid var(--line); }
.apply-hero .kick { margin-bottom: 10px; }
.apply-hero h1 { font-size: clamp(2.4rem, 5.5vw, 4.4rem); }
.apply-hero h1 em { font-style: normal; color: var(--acc); }
.apply-hero p { color: var(--tx2); max-width: 620px; margin-top: 14px; font-size: 1.05rem; line-height: 1.7; }

/* ---- wizard shell ---------------------------------------------- */
.wiz {
  max-width: 760px; margin: 0 auto; padding: 148px 0 140px;
  /* #7d7a71 clears 4.5:1 on the page's own background but not on the raised
     panels inside these forms, where it came out at 3.9–4.2:1 — the upload
     hints and the worked-example note. Lifted for the wizard only; the value
     measures 5.9:1 on those panels and still reads as the quiet one. */
  --tx3: #948f85;
}
.wiz-head { margin-bottom: 34px; }

.wiz-head .kick { margin-bottom: 8px; }
.wiz-head h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }

/* progress */
.wiz-progress { display: flex; align-items: center; gap: 0; margin-bottom: 40px; padding-top: 26px; }
.wiz-dot { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--line2);
           background: var(--bg); color: var(--tx3); font-family: var(--head); font-size: .85rem;
           display: flex; align-items: center; justify-content: center; flex: none;
           transition: all .25s; position: relative; z-index: 1; }
/* Anton's numeral metrics don't sit dead-center in a flex box on their own —
   the digit reads slightly high. line-height:1 plus a hair of translateY on
   the digit itself (not the circle) corrects it without touching layout. */
.wiz-dot-num { display: block; line-height: 1; transform: translateY(1px); }
.wiz-track { flex: 1; height: 2px; background: var(--line2); transition: background .25s; }
.wiz-dot.done { background: var(--acc); border-color: var(--acc); color: #0A0A0A; }
.wiz-dot.current { border-color: var(--acc); color: var(--acc); box-shadow: 0 0 0 4px rgba(255,107,53,.16); }

/* the crown from the DRXP logo, floating over whichever step is current */
.wiz-crown {
  position: absolute; bottom: 100%; left: 50%; width: 22px; height: 20px;
  margin-bottom: 2px; opacity: 0; pointer-events: none; transition: opacity .3s ease;
  transform: translateX(-50%) translateY(4px) rotate(-4deg);
}
.wiz-dot.current .wiz-crown { opacity: 1; animation: wizCrownFloat 2.6s ease-in-out infinite; }
@keyframes wizCrownFloat {
  0%, 100% { transform: translateX(-50%) translateY(0) rotate(-4deg); }
  50%      { transform: translateX(-50%) translateY(-5px) rotate(4deg); }
}
@media (prefers-reduced-motion: reduce) {
  .wiz-crown { animation: none; }
}
.wiz-track.done { background: var(--acc); }
.wiz-progress-label { text-align: center; font-family: var(--body); font-weight: 800; font-size: .76rem;
                       letter-spacing: .16em; text-transform: uppercase; color: var(--tx3); margin: -22px 0 30px; }

/* step panels
   Each step is a real <fieldset> — disabling it is what excludes its fields
   from validation/submission while another step is showing (see apply.js).
   Browsers give <fieldset> a default border+padding+min-width on their own;
   left unreset, that's the stray white outline running around the form. */
.wiz-step {
  display: none; animation: wizIn .35s cubic-bezier(.16,.84,.28,1);
  border: none; margin: 0; padding: 0; min-width: 0;
}
.wiz-step.active { display: block; }
@keyframes wizIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.wiz-step h2 { font-size: 1.7rem; margin-bottom: 6px; }
.wiz-step .step-hint { color: var(--tx3); font-size: 1rem; margin-bottom: 26px; line-height: 1.6; }

/* fields */
.f-field { margin-bottom: 22px; }
.f-label { display: block; font-family: var(--body); font-weight: 800; font-size: .8rem;
           letter-spacing: .14em; text-transform: uppercase; color: var(--tx2); margin-bottom: 9px; }
.f-label .req { color: var(--acc); margin-left: 3px; }
/* Marks a field as skippable. Most of this form is optional now, and saying
   so on the label is what stops people abandoning it at the first thing they
   don't want to hand over. */
.f-optional { display: inline-block; margin-left: 9px; padding: 2px 7px;
              border: 1px solid var(--line2); color: var(--tx3);
              font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; }
/* A stated fact rather than a question — used where there's only one answer
   and a <select> with a single option would just be theatre. */
.f-static-note { background: var(--panel); border: 2px solid var(--line);
                 padding: 14px 16px; color: var(--tx2); font-size: .98rem; line-height: 1.6; }
.f-static-note strong { color: var(--tx); }
.f-hint { color: var(--tx3); font-size: .9rem; margin-top: 7px; line-height: 1.5; }
/* Hints are deliberately muted, which swallows any link inside one — and the
   help links in them (setting up a PayPal.me, etc.) are the whole point of
   the hint. Match the accent treatment used on the agreement checkbox. */
.f-hint a { color: var(--acc); border-bottom: 1px solid var(--line2); }
.f-hint a:hover { border-bottom-color: var(--acc); }
.f-field input[type=text], .f-field input[type=email], .f-field input[type=tel],
.f-field input[type=url], .f-field input[type=number], .f-field textarea, .f-field select {
  width: 100%; background: var(--panel); border: 2px solid var(--line2); color: var(--tx);
  font-family: var(--body); font-size: 1rem; padding: 14px 16px; transition: border-color .2s;
}
.f-field textarea { min-height: 110px; resize: vertical; line-height: 1.6; }
.f-field input:focus, .f-field textarea:focus, .f-field select:focus { outline: none; border-color: var(--acc); }
.f-field input.invalid, .f-field textarea.invalid, .f-field select.invalid { border-color: var(--red); }
.f-error { color: var(--red); font-size: .88rem; margin-top: 7px; display: none; font-weight: 700; }
.f-error.show { display: block; }
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* Side by side, a label that wraps to two lines would push its box below
   its neighbour's: the labels take up the slack, so the boxes line up. */
.f-row > .f-field { display: flex; flex-direction: column; }
.f-row > .f-field > .f-label { flex: 1 0 auto; }
/* The browser's grey file button, dressed like the rest of the form. */
.f-field input[type=file] { color: var(--tx2); font-family: var(--body); font-size: .92rem; }
.f-field input[type=file]::file-selector-button { margin-right: 12px; padding: 10px 16px; border: 2px solid var(--line2); background: var(--panel); color: var(--tx); font-family: var(--body); font-weight: 800; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: border-color .2s; }
.f-field input[type=file]::file-selector-button:hover { border-color: var(--acc); }
.f-multi { display: flex; flex-direction: column; gap: 10px; }
.f-multi-link { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.f-multi-link input { flex: 1; }
.f-multi-social { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.f-multi-social select { flex: 0 0 132px; }
.f-multi-social input { flex: 1; }
@media (max-width: 480px) {
  .f-multi-social { flex-wrap: wrap; }
  .f-multi-social select { flex: 1 1 100%; }
  .f-multi-social input { flex: 1 1 auto; }
}
.f-add-link { background: none; border: 2px dashed var(--line2); color: var(--tx2); padding: 10px 16px;
              font-family: var(--body); font-weight: 800; font-size: .8rem; letter-spacing: .1em;
              text-transform: uppercase; width: 100%; transition: all .2s; }
.f-add-link:hover { border-color: var(--acc); color: var(--acc); }
.f-remove-link { background: none; border: none; color: var(--tx3); font-size: 1.2rem; padding: 6px 10px; }
.f-remove-link:hover { color: var(--red); }

/* pill choices (radio / checkbox groups) */
.f-pills { display: flex; flex-wrap: wrap; gap: 9px; }
.f-pill { position: relative; }
.f-pill input { position: absolute; opacity: 0; width: 100%; height: 100%; cursor: pointer; margin: 0; }
.f-pill span { display: inline-block; padding: 11px 18px; border: 2px solid var(--line2); color: var(--tx2);
               font-family: var(--body); font-weight: 800; font-size: .86rem; letter-spacing: .04em;
               transition: all .15s; }
.f-pill input:checked + span { background: var(--acc); border-color: var(--acc); color: #0A0A0A; }
.f-pill input:focus-visible + span { outline: 2px solid var(--acc); outline-offset: 2px; }
.f-pill:hover span { border-color: var(--acc); }

/* yes/no toggle */
.f-yesno { display: flex; gap: 10px; }
.f-yesno .f-pill span { min-width: 90px; text-align: center; }

/* conditional reveal */
[data-show-if] { display: none; }
[data-show-if].revealed { display: block; animation: wizIn .3s ease; }

/* file dropzone */
.f-drop { border: 2px dashed var(--line2); background: var(--panel); padding: 30px 20px; text-align: center;
          transition: all .2s; cursor: pointer; }
.f-drop:hover, .f-drop.drag { border-color: var(--acc); background: rgba(255,107,53,.06); }
.f-drop input[type=file] { display: none; }
.f-drop .icon { font-size: 1.8rem; margin-bottom: 8px; }
.f-drop .label { font-family: var(--body); font-weight: 800; font-size: .9rem; color: var(--tx); }
.f-drop .sub { color: var(--tx3); font-size: .84rem; margin-top: 6px; }
.f-file-list { list-style: none; margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.f-file-list li { display: flex; justify-content: space-between; align-items: center; gap: 10px;
                   background: var(--panel); border: 1px solid var(--line); padding: 9px 12px; font-size: .9rem; }
.f-file-list .rm { background: none; border: none; color: var(--tx3); font-size: 1rem; }
.f-file-list .rm:hover { color: var(--red); }

/* agreement */
.f-agreement-box { background: var(--panel); border: 2px solid var(--line); padding: 22px; margin-bottom: 22px;
                    max-height: 220px; overflow-y: auto; color: var(--tx2); font-size: .95rem; line-height: 1.7; }
.f-agreement-box strong { color: var(--tx); }
.f-check-row { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 22px; }
.f-check-row input { width: 20px; height: 20px; flex: none; margin-top: 2px; accent-color: var(--acc); }
.f-check-row label { color: var(--tx2); font-size: .98rem; line-height: 1.6; }
.f-check-row a { color: var(--acc); border-bottom: 1px solid var(--line2); }

/* nav buttons */
.wiz-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 36px;
           padding-top: 26px; border-top: 2px solid var(--line); gap: 12px; }
.wiz-nav .spacer { flex: 1; }
.wiz-error-banner { background: var(--red); color: var(--tx); padding: 16px 20px; margin-bottom: 28px;
                    font-weight: 700; font-size: .95rem; }
.wiz-error-banner ul { margin: 8px 0 0 20px; }

/* honeypot — hidden from real users, present for bots to fill */
.f-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }


/* discord CTA — always shown at the end of a submission */
.discord-cta { background: var(--panel); border: 2px solid var(--line); padding: 30px 26px;
                margin-top: 28px; display: flex; align-items: center; gap: 24px; text-align: left; }
/* A plain custom property can't interpolate — the cascade only sees it as a
   token string, so animating it steps at the keyframe midpoint instead of
   easing (this is *the* reason a hand-rolled neon pulse often reads as a
   flicker or "nothing happening"). Registering it here as a typed <number>
   makes it a real animatable value. It drives the halo's breathing below.
   It used to drive the icon's drop-shadow alpha too, but a drop-shadow that
   changes every frame — on an element that is also floating — is recomputed
   on the CPU every frame without graphics acceleration (see site.css
   "SMOOTH WITHOUT GRAPHICS ACCELERATION"). The icon's glow is now fixed, and
   the float moved to the wrapper so the shadowed icon is drawn once. */
@property --dc-glow {
  syntax: '<number>';
  initial-value: 1;
  inherits: false;
}

.discord-badge-wrap {
  position: relative; flex: none; width: 84px; height: 85px;
  display: flex; align-items: center; justify-content: center;
  animation: discordFloat 3.8s ease-in-out infinite;
}
/* soft ambient bloom behind the icon — a radial gradient, already soft on
   its own, so it needs no blur; only its opacity (via --dc-glow) and a
   gentle scale animate. */
.discord-badge-wrap::before {
  content: ''; position: absolute; inset: -24px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,107,53,.6) 0%, rgba(255,107,53,.24) 45%, rgba(255,107,53,0) 74%);
  opacity: var(--dc-glow);
  animation: dcGlowPulse 2.8s ease-in-out infinite, discordHaloScale 2.8s ease-in-out infinite;
  pointer-events: none;
}
.discord-badge {
  position: relative; width: 100%; height: 100%;
  /* drop-shadow hugs the icon's own alpha silhouette (crown + face), not a
     bounding box — that's what reads as light coming off the shape itself
     rather than a glow behind a rectangle. Held at the pulse's midpoint; the
     halo behind it carries the breathing. */
  filter:
    drop-shadow(0 0 6px rgb(255 107 53 / .7))
    drop-shadow(0 0 16px rgb(255 107 53 / .42))
    drop-shadow(0 0 34px rgb(255 107 53 / .25));
}
@keyframes discordFloat {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-9px) rotate(2deg); }
}
/* the one dial: a shallow breath that never fully switches off, per-element
   (each of the two rules above runs its own copy) but identical timing on
   both keeps them visually locked together. */
@keyframes dcGlowPulse {
  0%, 100% { --dc-glow: .4; }
  50%      { --dc-glow: 1; }
}
@keyframes discordHaloScale {
  0%, 100% { transform: scale(.85); }
  50%      { transform: scale(1.2); }
}
@media (prefers-reduced-motion: reduce) {
  .discord-badge-wrap, .discord-badge-wrap::before { animation: none; }
  .discord-badge-wrap::before { opacity: .7; }
  .discord-badge { filter: drop-shadow(0 0 8px rgba(255,107,53,.5)); }
}
.discord-copy { flex: 1; }
.discord-copy h3 { font-size: 1.15rem; margin-bottom: 6px; }
.discord-copy p { color: var(--tx2); font-size: .98rem; line-height: 1.6; margin-bottom: 14px; }
@media (max-width: 560px) {
  .discord-cta { flex-direction: column; text-align: center; }
}

@media (max-width: 700px) {
  .wiz { padding: 120px 20px 100px; }
  .f-row { grid-template-columns: 1fr; }
  .wiz-dot { width: 24px; height: 24px; font-size: .74rem; }
  /* The nav buttons were being clipped, not overflowing visibly: .btn is
     white-space:nowrap, flex items refuse to shrink below their content
     width (min-width defaults to auto), and body is overflow-x:hidden — so
     a label too wide for its third of the row got silently cut off at the
     screen edge. The spacer was taking one of those thirds purely to push
     the primary button right, which it doesn't need to do once wrapped. */
  .wiz-nav { flex-wrap: wrap; gap: 10px; }
  .wiz-nav .spacer { display: none; }
  .wiz-nav .btn {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
    text-align: center;
    padding: 13px 14px;
  }
  /* Back is short — let it size to its label so the primary action, which
     has the longest text ("Submit application →"), gets the rest. */
  .wiz-nav [data-wiz-back] { flex: 0 1 auto; }
}

/* thanks page copy — the <em>s are voice, not citation, so they read as
   spoken stress rather than italic asides */
.result p em { font-style: normal; font-weight: 800; color: var(--tx); }
.thanks-signoff { color: var(--tx) !important; font-size: 1.05rem; margin-top: 36px !important; }
.thanks-kao { color: var(--acc); font-weight: 800; letter-spacing: .08em; margin-left: 4px; white-space: nowrap; }
.discord-copy p em { font-style: normal; font-weight: 800; color: var(--tx); }

/* ---------------- The one form (views/apply/index.php) --------------------
   Step one's choices are big tick cards in each role's colour; step two's
   parts appear for what was ticked, each framed in that colour, so a
   creator who is also an artist sees two clearly separate parts. */
.apply-hero--form { padding-bottom: 28px; }
.wiz--one { padding-top: 0; margin-top: 34px; }
.ap-roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 18px 0 26px; }
.ap-role { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 16px 18px; border: 2px solid var(--line2); background: var(--panel); cursor: pointer;
  transition: border-color .2s, background-color .2s, transform .2s cubic-bezier(.3, 1.5, .5, 1), box-shadow .2s; }
.ap-role:hover { border-color: var(--card-acc); transform: translateY(-2px); }
.ap-role input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ap-role-ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--bg); font-size: 1.5rem; }
.ap-role-text b { display: block; font-family: var(--head); font-weight: 400; font-size: 1.25rem; letter-spacing: .02em; text-transform: uppercase; color: var(--tx); }
.ap-role-text small { display: block; margin-top: 3px; color: var(--tx2); font-size: .9rem; line-height: 1.45; }
.ap-role-tick { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line2); transition: background-color .2s, border-color .2s; }
.ap-role:has(input:checked) { border-color: var(--card-acc); background: color-mix(in srgb, var(--card-acc) 12%, var(--panel)); box-shadow: 0 10px 30px -18px var(--card-acc); }
.ap-role:has(input:checked) .ap-role-tick { border-color: var(--card-acc); background: var(--card-acc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12l5 5 9-10' fill='none' stroke='%230a0a0a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.ap-role:has(input:focus-visible) { outline: 3px solid var(--card-acc); outline-offset: 3px; }

.ap-part { margin: 0 0 22px; padding: 22px 22px 6px; border: 2px solid color-mix(in srgb, var(--card-acc) 45%, var(--line)); border-left-width: 5px; border-left-color: var(--card-acc); background: color-mix(in srgb, var(--card-acc) 5%, transparent); }
.ap-part h3 { margin: 0 0 16px; font-size: 1.35rem; letter-spacing: .02em; }
.ap-part .f-pill input:checked + span { background: var(--card-acc); border-color: var(--card-acc); }
.ap-none { color: var(--tx2); padding: 18px; border: 2px dashed var(--line2); }
.f-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 640px) {
  .ap-roles { grid-template-columns: 1fr; }
  .f-row--3 { grid-template-columns: 1fr; }
  .ap-part { padding: 18px 14px 4px; }
}

/* A pasted account link, with the platform it was recognised as. */
.f-social-link { position: relative; }
.f-social-net { position: absolute; right: 52px; top: 50%; transform: translateY(-50%); padding: 3px 9px; border-radius: 999px; background: var(--grn); color: #0a0a0a; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; opacity: 0; pointer-events: none; transition: opacity .2s; }
.f-social-net.is-on { opacity: 1; }
.f-social-link input { padding-right: 120px; }

/* =================== The one form, dressed up (.ap1) ======================
   Colour does the work: soft glows of the site's four colours drift
   behind the page, and the form is a glass card whose glowing border takes
   the colour of whoever is applying (--ap, --ap2, set by apply.js from the
   roles ticked — orange creator, green artist, gold merch, blue studio). */
@property --ap1-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.ap1 { --ap: var(--acc); --ap2: #E8C15A; position: relative; isolation: isolate; overflow-x: clip; }
.ap1-glows { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.ap1-glows i { position: absolute; width: 46vmax; aspect-ratio: 1; border-radius: 50%; filter: blur(90px); opacity: .22; animation: ap1Drift 22s ease-in-out infinite alternate; }
.ap1-glows i:nth-child(1) { left: -14vmax; top: -10vmax; background: var(--acc); }
.ap1-glows i:nth-child(2) { right: -16vmax; top: 10vh; background: var(--grn); opacity: .14; animation-duration: 27s; }
.ap1-glows i:nth-child(3) { left: 10vw; bottom: -22vmax; background: var(--blu); opacity: .16; animation-duration: 31s; }
.ap1-glows i:nth-child(4) { right: 6vw; bottom: -10vmax; background: #E8C15A; opacity: .12; animation-duration: 25s; }
@keyframes ap1Drift { to { transform: translate(6vmax, 5vmax) scale(1.12); } }

/* Hero */
.ap1 .apply-hero { border-bottom: 0; padding-bottom: 10px; }
.ap1 .apply-hero h1 em { color: transparent; padding-block: .18em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: linear-gradient(100deg, var(--acc) 0%, #FFB27A 25%, #E8C15A 45%, var(--grn) 65%, var(--acc) 90%) 0 0 / 260% 100%; -webkit-background-clip: text; background-clip: text; animation: ap1Shimmer 7s ease-in-out infinite; }
@keyframes ap1Shimmer { 50% { background-position: 100% 0; } }
.ap1-facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
.ap1-facts li { padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .05); backdrop-filter: blur(8px); color: var(--tx2); font-weight: 700; font-size: .9rem; }
.ap1-facts b { font-family: var(--head); font-weight: 400; font-size: 1.25rem; margin-right: 4px; color: var(--tx); }
.ap1-facts li:nth-child(1) b { color: var(--acc); }
.ap1-facts li:nth-child(2) b { color: var(--grn); }
.ap1-facts li:nth-child(3) b { color: #E8C15A; }
.ap1-crew { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 22px; color: var(--tx2); font-size: .95rem; }
.ap1-crew b { color: var(--tx); }
.ap1-faces { display: flex; }
.ap1-faces img { width: 44px; height: 44px; margin-left: -12px; border-radius: 50%; object-fit: cover; border: 3px solid var(--bg); box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .8); animation: ap1Pop .5s calc(.3s + var(--i) * .07s) cubic-bezier(.3, 1.6, .5, 1) both; }
.ap1-faces img:first-child { margin-left: 0; }
@keyframes ap1Pop { from { opacity: 0; transform: translateY(10px) scale(.6); } }

/* The card, with its role-coloured border turning slowly round it. */
.ap1 .wiz--one { max-width: 860px; padding: 0 20px 120px; }
.ap1-card { position: relative; isolation: isolate; padding: clamp(24px, 4.5vw, 46px); border-radius: 28px;
  background: linear-gradient(160deg, rgba(30, 28, 26, .9), rgba(14, 14, 14, .94)); backdrop-filter: blur(16px);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .9), 0 0 60px -30px var(--ap), inset 0 1px 0 rgba(255, 255, 255, .06); transition: box-shadow .5s; }
.ap1-card::before { content: ""; position: absolute; inset: 0; z-index: -1; padding: 2px; border-radius: inherit;
  background: conic-gradient(from var(--ap1-a), var(--ap), var(--ap2), rgba(255, 255, 255, .06) 35%, rgba(255, 255, 255, .06) 65%, var(--ap));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: ap1Spin 8s linear infinite; }
@keyframes ap1Spin { to { --ap1-a: 360deg; } }

/* Progress: role-coloured dots and track. */
.ap1 .wiz-progress { padding-top: 22px; }
.ap1 .wiz-dot { width: 36px; height: 36px; background: #141414; border-color: rgba(255, 255, 255, .16); }
.ap1 .wiz-dot.done { background: var(--ap); border-color: var(--ap); }
.ap1 .wiz-dot.current { border-color: var(--ap); color: var(--ap); box-shadow: 0 0 0 5px color-mix(in srgb, var(--ap) 22%, transparent), 0 0 24px -4px var(--ap); }
.ap1 .wiz-crown { color: var(--ap); }
.ap1 .wiz-track { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .1); }
.ap1 .wiz-track.done { background: linear-gradient(90deg, var(--ap), var(--ap2)); }
.ap1 .wiz-step h2 { font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1; }

/* Role cards: bigger, bouncier, glowing once picked. */
.ap1 .ap-roles { gap: 14px; }
.ap1 .ap-role { min-height: 112px; padding: 18px 20px; border-radius: 20px; border: 2px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .03); overflow: hidden; }
.ap1 .ap-role::after { content: ""; position: absolute; right: -30%; top: -60%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: var(--card-acc); filter: blur(40px); opacity: 0; transition: opacity .35s; pointer-events: none; }
.ap1 .ap-role:hover { transform: translateY(-3px) rotate(-.4deg); border-color: var(--card-acc); }
.ap1 .ap-role:hover::after { opacity: .18; }
.ap1 .ap-role-ico { width: 58px; height: 58px; border-radius: 18px; font-size: 1.8rem; background: color-mix(in srgb, var(--card-acc) 18%, #111); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--card-acc) 40%, transparent); transition: transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.ap1 .ap-role:hover .ap-role-ico { transform: rotate(-8deg) scale(1.08); }
.ap1 .ap-role:has(input:checked) { background: linear-gradient(135deg, color-mix(in srgb, var(--card-acc) 26%, #121212), #121212 75%); border-color: var(--card-acc); box-shadow: 0 16px 40px -18px var(--card-acc), inset 0 0 0 1px color-mix(in srgb, var(--card-acc) 50%, transparent); animation: ap1Bounce .45s cubic-bezier(.3, 1.6, .5, 1); }
.ap1 .ap-role:has(input:checked)::after { opacity: .3; }
.ap1 .ap-role:has(input:checked) .ap-role-ico { background: var(--card-acc); transform: rotate(-6deg) scale(1.06); }
@keyframes ap1Bounce { 40% { transform: scale(1.03); } }

/* Fields: lighter boxes, rounded, glowing in the applicant's colour. */
.ap1 .f-field input[type=text], .ap1 .f-field input[type=email], .ap1 .f-field input[type=url], .ap1 .f-field input[type=number], .ap1 .f-field textarea, .ap1 .f-field select {
  border-radius: 12px; border: 2px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .055); transition: border-color .2s, box-shadow .2s, background-color .2s; }
.ap1 .f-field input:hover, .ap1 .f-field textarea:hover, .ap1 .f-field select:hover { border-color: rgba(255, 255, 255, .2); }
.ap1 .f-field input:focus, .ap1 .f-field textarea:focus, .ap1 .f-field select:focus { border-color: var(--ap); background: rgba(255, 255, 255, .08); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ap) 20%, transparent); }
.ap1 .f-field select option { background: #161616; }
.ap1 .f-label .req { color: var(--ap); }
.ap1 .f-optional { border-radius: 999px; padding: 2px 9px; }
.ap1 .f-pill span { border-radius: 999px; border-color: rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); transition: background-color .2s, border-color .2s, color .2s, transform .2s cubic-bezier(.3, 1.6, .5, 1); }
.ap1 .f-pill:hover span { transform: translateY(-1px); }
.ap1 .f-pill input:checked + span { box-shadow: 0 6px 18px -8px currentColor; transform: scale(1.04); }
.ap1 .f-add-link { border-radius: 12px; }
.ap1 .f-drop { border-radius: 16px; background: rgba(255, 255, 255, .03); }
.ap1 .ap-part { border-radius: 18px; border-width: 1px; border-left-width: 5px; background: linear-gradient(135deg, color-mix(in srgb, var(--card-acc) 9%, transparent), transparent 70%); animation: ap1In .45s cubic-bezier(.2, .8, .2, 1) both; }
.ap1 .ap-part h3 { display: flex; align-items: center; gap: 10px; }
.ap1 .ap-part h3 span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--card-acc); font-size: 1.15rem; }
@keyframes ap1In { from { opacity: 0; transform: translateY(14px); } }
.ap1 .f-agreement-box { border-radius: 16px; }
.ap1 .wiz-nav .btn { border-radius: 999px; }
.ap1 .wiz-nav .btn-acc { background: linear-gradient(110deg, var(--ap), var(--ap2)); border-color: transparent; color: #0a0a0a; box-shadow: 0 10px 26px -10px var(--ap); }
.ap1 .wiz-nav .btn-acc:hover { filter: brightness(1.08); transform: translateY(-2px); }

/* A burst of confetti when they reach the last step (apply.js). */
.ap1-confetti { position: fixed; inset: 0; z-index: 400; pointer-events: none; overflow: hidden; }
.ap1-confetti i { position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px; animation: ap1Fall var(--t, 1.6s) var(--d, 0s) cubic-bezier(.25, .6, .4, 1) forwards; }
@keyframes ap1Fall { to { transform: translate(var(--x, 0), 105vh) rotate(var(--r, 540deg)); opacity: .9; } }

@media (max-width: 640px) {
  .ap1 .wiz--one { padding: 0 12px 90px; }
  .ap1-card { border-radius: 22px; padding: 22px 16px; }
  .ap1 .ap-role { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ap1-glows i, .ap1-card::before, .ap1 .apply-hero h1 em, .ap1-faces img, .ap1 .ap-role:has(input:checked), .ap1 .ap-part { animation: none; }
  .ap1-confetti { display: none; }
}
.perf-lite .ap1-glows i, .perf-lite .ap1-card::before { animation: none; }
.perf-lite .ap1-card { backdrop-filter: none; }