/* Show Your Night — Propeller UGC capture
   Bright festival brand: full-bleed gradient + grain, Vanity-Condensed + DM Sans, airy. */

@font-face{
  font-family:'Vanity Condensed';
  src:url('assets/fonts/Vanity-Condensed.otf') format('opentype');
  font-weight:400;font-display:swap;
}
:root{
  --paper:#FBF6E9;--paper-2:#F3EBD6;--paper-3:#ECE1C5;
  --ink:#1c1c19;--ink-soft:#565049;--ink-faint:rgba(28,28,25,0.55);
  --line:rgba(28,28,25,0.14);--line-strong:rgba(28,28,25,0.9);
  --lime:#C7ED4B;--lime-deep:#AAD52C;--lime-ink:#2e3a06;
  --cyan:#79D8E6;--cyan-deep:#36BCD2;
  --coral:#FF4719;--coral-deep:#E03A11;
  --display:'Vanity Condensed','Arial Narrow','Helvetica Neue',sans-serif;
  --body:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,'Roboto Mono',monospace;
  --radius:18px;--radius-lg:24px;--pill:999px;
  --shadow:0 22px 60px -32px rgba(28,28,25,0.5);
  --shadow-sm:0 12px 34px -22px rgba(28,28,25,0.5);
  --ease:cubic-bezier(0.4,0.04,0.1,1);
  --spring:cubic-bezier(0.34,1.56,0.64,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--body);color:var(--ink);font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;min-height:100vh;
  background:
    radial-gradient(120% 70% at 90% 2%, rgba(54,188,210,0.30) 0%, rgba(54,188,210,0) 55%),
    linear-gradient(162deg,#FCF8EE 0%,#F6F0CE 22%,#DEEE93 46%,#A7E2B6 68%,#7FDCE3 100%) fixed;
}
/* paper grain over the gradient */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;opacity:0.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
}
.wrap{max-width:540px;margin:0 auto;padding:0 20px 72px;position:relative;z-index:1}

/* ---------- topbar ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:22px 2px 8px}
.logo{display:flex;align-items:center;gap:8px;font-family:var(--display);font-size:27px;letter-spacing:0.01em;text-transform:uppercase;color:var(--ink)}
.logo .dot{width:11px;height:11px;border-radius:50%;background:var(--coral)}
.topbar .tiny{font-family:var(--display);font-size:16px;letter-spacing:0.05em;text-transform:uppercase;color:var(--ink-soft)}

/* ---------- hero (airy, on the gradient) ---------- */
.hero{position:relative;padding:18px 2px 22px}
.doodle-sun{position:absolute;top:6px;right:0;width:74px;color:var(--cyan-deep);opacity:0.95;pointer-events:none}
.show-chip{
  display:inline-flex;align-items:center;gap:7px;background:var(--ink);color:var(--paper);
  padding:7px 14px;border-radius:var(--pill);font-size:12.5px;font-weight:600;letter-spacing:0.01em;
  margin-bottom:16px;max-width:100%;
}
.show-chip .star{color:var(--lime);font-size:13px;line-height:1}
.show-chip b{color:#fff;font-weight:700}
.hero h1{font-family:var(--display);font-size:64px;line-height:0.86;letter-spacing:0.005em;text-transform:uppercase;color:var(--ink)}
.swash{position:relative;display:inline-block}
.swash::after{
  content:'';position:absolute;left:-3%;right:-5%;bottom:0.05em;height:0.34em;z-index:-1;
  background:var(--lime);border-radius:40% 60% 55% 45% / 60% 50% 50% 40%;transform:rotate(-1.6deg);
}
.hero p{margin-top:16px;font-size:16px;font-weight:500;color:var(--ink-soft);max-width:40ch}
.hero p .at{color:var(--ink);font-weight:700}

/* ---------- cards (float on gradient) ---------- */
.card{
  background:#fff;border-radius:var(--radius);padding:24px 22px;margin-top:16px;position:relative;
  box-shadow:var(--shadow-sm);
}
.card.primary{box-shadow:0 20px 48px -26px rgba(255,71,25,0.45),0 0 0 1.5px var(--coral)}
.tag{
  position:absolute;top:-12px;left:20px;font-family:var(--display);font-size:14px;text-transform:uppercase;
  letter-spacing:0.06em;padding:4px 13px;border-radius:var(--pill);
}
.tag.req{background:var(--coral);color:#fff}
.tag.opt{background:#fff;color:var(--ink-faint);box-shadow:inset 0 0 0 1px var(--line)}

.step{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.step-num{width:26px;height:26px;border-radius:50%;background:var(--coral);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:16px;flex-shrink:0}
.card.opt .step-num{background:var(--ink-faint)}
.step-label{font-family:var(--display);font-size:15px;text-transform:uppercase;letter-spacing:0.05em;color:var(--coral)}
.card.opt .step-label{color:var(--ink-faint)}
.card h2{font-family:var(--display);font-size:31px;line-height:0.92;letter-spacing:0.01em;text-transform:uppercase;margin-bottom:6px}
.card .sub{font-size:14.5px;color:var(--ink-soft);margin-bottom:18px}

/* how-to */
.howto{background:var(--paper);border-radius:14px;padding:15px 17px;margin-bottom:18px}
.howto .ht{font-family:var(--display);font-size:15px;text-transform:uppercase;letter-spacing:0.04em;color:var(--ink);margin-bottom:10px}
.howto ol{margin:0;padding-left:18px}
.howto li{font-size:14.5px;color:var(--ink-soft);margin-bottom:7px}
.howto li:last-child{margin-bottom:0}
.tag-pill{display:inline-block;background:var(--lime);color:var(--lime-ink);font-weight:700;padding:1px 8px;border-radius:6px;font-size:13.5px}

/* fields */
label.fld{display:block;font-size:13.5px;font-weight:600;margin-bottom:7px;color:var(--ink)}
input[type=text],input[type=url],input[type=email]{
  width:100%;padding:14px 15px;border:1.5px solid var(--line);border-radius:12px;font-size:16px;
  font-family:var(--body);background:var(--paper);color:var(--ink);transition:border .15s,box-shadow .15s,background .15s;
}
input::placeholder{color:var(--ink-faint)}
input:focus{outline:none;border-color:var(--coral);background:#fff;box-shadow:0 0 0 4px rgba(255,71,25,0.10)}
.platforms{display:flex;gap:6px;margin-top:11px;flex-wrap:wrap}
.plat{font-size:12px;padding:5px 11px;border-radius:var(--pill);border:1px solid var(--line);color:var(--ink-soft);background:var(--paper);font-weight:500}

.linkstate{display:none;align-items:center;gap:8px;margin-top:11px;font-size:13.5px;font-weight:600;padding:10px 13px;border-radius:11px}
.linkstate .i{width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0}
.linkstate.ok{display:flex;background:rgba(199,237,75,0.28);color:var(--lime-ink)}
.linkstate.ok .i{background:var(--lime-deep);color:var(--ink)}
.linkstate.bad{display:flex;background:#fdeeee;color:var(--coral-deep)}
.linkstate.bad .i{background:var(--coral);color:#fff}

/* ephemeral */
.ephem{margin-top:18px;border-top:1px dashed var(--line);padding-top:16px}
.ephem-q{font-size:13.5px;color:var(--ink-soft)}
.ephem-q a{color:var(--coral-deep);font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.ephem-up{display:none;margin-top:13px}
.ephem-up.show{display:block;animation:slideIn .3s var(--ease)}

/* dropzone */
.drop{border:2px dashed var(--line-strong);border-radius:14px;padding:24px 20px;text-align:center;cursor:pointer;transition:all .18s var(--ease);background:var(--paper)}
.drop:hover{border-color:var(--coral);background:#fff}
.drop.has{border-style:solid;border-color:var(--cyan-deep);background:rgba(121,216,230,0.16)}
.drop .ic{font-size:26px;line-height:1}
.drop .big{font-weight:600;font-size:14.5px;margin-top:8px}
.drop .small{font-size:12.5px;color:var(--ink-faint);margin-top:3px}
.thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.thumb{position:relative;width:68px;height:68px;border-radius:11px;overflow:hidden;border:1px solid var(--line);background:var(--paper-3);animation:pop .3s var(--spring)}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb .vid{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--ink);color:var(--lime);font-size:20px}
.thumb .rm{position:absolute;top:3px;right:3px;width:19px;height:19px;border-radius:50%;background:rgba(28,28,25,0.7);color:#fff;border:none;cursor:pointer;font-size:11px;display:flex;align-items:center;justify-content:center;line-height:1}

/* consent */
.consent{display:flex;gap:11px;align-items:flex-start;margin-top:8px;background:var(--paper);border-radius:12px;padding:14px 15px}
.consent input{margin-top:2px;width:19px;height:19px;accent-color:var(--coral);flex-shrink:0}
.consent span{font-size:13.5px;color:var(--ink-soft);line-height:1.5}
.consent b{color:var(--ink)}
.consent a{color:var(--coral-deep);font-weight:600}

/* buttons — pill */
.btn,.redeem{
  width:100%;padding:15px 18px;border:none;border-radius:var(--pill);background:var(--coral);color:#fff;
  font-family:var(--display);font-size:24px;letter-spacing:0.02em;text-transform:uppercase;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:0.4em;
  transition:transform .12s var(--spring),background .15s,box-shadow .2s;box-shadow:0 12px 28px -14px rgba(255,71,25,0.7);
}
.btn{margin-top:18px}.redeem{margin-top:14px}
.btn:hover,.redeem:hover{transform:translateY(-2px);background:var(--ink)}
.btn:active,.redeem:active{transform:translateY(0)}
.btn:disabled{opacity:0.6;cursor:default;transform:none;box-shadow:none}
/* redeem stays locked until the code is copied */
.redeem:disabled{background:var(--paper-3);color:var(--ink-faint);box-shadow:none;cursor:not-allowed;border:1.5px dashed var(--line-strong)}
.redeem:disabled:hover{transform:none;background:var(--paper-3)}
.redeem.ready{animation:unlock .5s var(--spring)}
@keyframes unlock{0%{transform:scale(.97)}60%{transform:scale(1.04)}100%{transform:scale(1)}}
.btn .spin{display:none}
.btn.loading .lbl{display:none}
.btn.loading .spin{display:inline-block;animation:rot .8s linear infinite}

.tagline{text-align:center;font-size:13px;color:var(--ink-faint);margin-top:15px}
.tagline b{color:var(--ink);font-weight:700}
.err{color:var(--coral-deep);font-size:13.5px;margin-top:12px;display:none;background:#fdeeee;padding:11px 14px;border-radius:11px;font-weight:500}
.err.show{display:block;animation:shake .35s}

/* ---------- success ---------- */
#successState{display:none}
#successState.show{display:block;animation:fadeUp .45s var(--ease)}
.success-hero{position:relative;padding:8px 2px 6px}
.ring{width:78px;height:78px;border-radius:50%;background:#fff;border:2px solid var(--ink);display:flex;align-items:center;justify-content:center;font-size:38px;margin-bottom:14px;animation:pop .5s var(--spring);box-shadow:var(--shadow-sm)}
.success-hero h1{font-family:var(--display);font-size:42px;line-height:0.9;text-transform:uppercase;color:var(--ink)}
.success-hero p{margin-top:12px;font-size:15.5px;font-weight:500;color:var(--ink-soft);max-width:38ch}
.codebox{background:var(--ink);border-radius:18px;padding:24px;margin:20px 0 8px;color:var(--paper);box-shadow:var(--shadow)}
.codebox .cl{font-family:var(--display);font-size:15px;text-transform:uppercase;letter-spacing:0.08em;color:var(--lime)}
.codebox .code{font-family:var(--mono);font-size:30px;font-weight:700;letter-spacing:0.04em;margin:10px 0 5px;word-break:break-all;color:#fff}
.codebox .pts{font-size:13.5px;color:rgba(251,246,233,0.7)}
.copybtn{margin-top:16px;width:100%;padding:13px;border-radius:11px;border:1px solid rgba(251,246,233,0.25);background:rgba(251,246,233,0.08);color:var(--paper);font-size:14px;font-weight:600;cursor:pointer;font-family:var(--body);transition:background .15s}
.copybtn:hover{background:rgba(251,246,233,0.16)}

/* ---------- animations ---------- */
@keyframes pop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@keyframes rot{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}