/*
  CodeGryphon Hack Landing - Enhanced Motion + Visual Design
  - Accessible, responsive, performant
  - Subtle motion with prefers-reduced-motion support
*/
:root{
  --bg:#0a0813; --fg:#f5f3ff; --muted:#bdb6d9;
  --brand:#8b7dff; --brand-2:#c2b7ff; --ink:#0a0813;
  --glass:rgba(255,255,255,.06); --stroke:#2a1f47;
  --card:#0f0b1f; --card-stroke:#2b2150;
  --radius:18px; --shadow:0 12px 40px rgba(0,0,0,.45);
  --grad-1:#8b7dff; --grad-2:#6a4cff; --grad-3:#ff73d2;
  --gold-1:#fbd38d; --gold-2:#f6ad55; --gold-3:#f7c948;
  --silver-1:#e2e8f0; --silver-2:#cbd5e1;
  --bronze-1:#f3b38c; --bronze-2:#e88957;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; padding:0; color:var(--fg); font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  background:radial-gradient(1200px 800px at 14% -10%, #2b1e56 0%, #0a0813 60%), #0a0813;
  background-repeat:no-repeat; background-attachment:fixed; background-size:cover;
  overflow-x:hidden;
}
/* animated halo */
.halo{position:fixed; left:-5%; right:-5%; top:20vh; bottom:-30%; height:auto; filter:blur(70px); opacity:.45; pointer-events:none; z-index:-1;
  background:conic-gradient(from 140deg at 50% 50%, var(--grad-1), var(--grad-2), var(--grad-3), var(--grad-2), var(--grad-1));
  background-repeat:no-repeat; background-size:100% 100%;
  animation: spin 22s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* top vignette to soften corners (extended to avoid seam) */
body::before{content:""; position:fixed; left:0; right:0; top:-2px; height:170px; pointer-events:none; z-index:0;
  background:linear-gradient(180deg, rgba(10,8,19,0.95), rgba(10,8,19,0));
  background-repeat:no-repeat; background-size:100% 100%;
}

/* floating orbs behind hero */
.hero-orbs{position:absolute; inset:0; pointer-events:none; overflow:hidden}
.orb{position:absolute; width:260px; height:260px; border-radius:50%; filter:blur(24px); opacity:.22;
  background:radial-gradient(circle at 30% 30%, var(--grad-3), transparent 65%);
  background-repeat:no-repeat; background-size:100% 100%;
  animation: float 16s ease-in-out infinite;
}
.orb.o1{top:40px; left:220px}
.orb.o2{bottom:-10px; right:120px; animation-duration:18s}
@keyframes float { 0%,100%{ transform: translate3d(0,0,0) } 50%{ transform: translate3d(0,-10px,0) } }

a{color:var(--brand); text-decoration:none}
a:hover{color:var(--brand-2)}

.wrap{max-width:1140px; margin:0 auto; padding:28px}

/* Topbar */
.topbar{border-bottom:1px solid rgba(255,255,255,.04)}

/* HERO */
.hero{position:relative; display:grid; grid-template-columns:1.1fr 0.9fr; gap:28px; align-items:center; padding:52px 30px 64px}
.badge{display:inline-flex; gap:8px; align-items:center; font-weight:800; letter-spacing:.3px; color:var(--ink);
  background:linear-gradient(135deg, var(--brand), #a590ff); padding:8px 12px; border-radius:999px}
 h1{font-size:56px; line-height:1.02; margin:12px 0 10px; letter-spacing:-.02em}
.grad{background:linear-gradient(92deg, #ffffff 0%, #dcd6ff 48%, #a792ff 100%); -webkit-background-clip:text; background-clip:text; color:transparent; animation: shimmer 6s ease-in-out infinite;}
@keyframes shimmer{ 0%,100%{filter:brightness(1)} 50%{filter:brightness(1.15)} }
.lede{font-size:18px; color:var(--muted); max-width:64ch}
.cta{display:flex; gap:12px; margin-top:24px; flex-wrap:wrap}
.btn{appearance:none; border:0; border-radius:14px; background:var(--brand); color:var(--ink); padding:14px 18px; font-weight:900; box-shadow:var(--shadow); cursor:pointer; transform:translateZ(0); transition:background .2s ease, transform .2s ease, color .2s ease}
.btn:hover{background:var(--brand-2); color:var(--ink); transform:translateY(-1px)}
.btn:active{transform:translateY(0); background:#b3a7ff; color:var(--ink)}
.btn:focus-visible{outline:none; box-shadow:0 0 0 3px rgba(139,125,255,.4)}
.btn.ghost,.btn.link{background:transparent; border:1px solid var(--stroke); color:var(--fg)}
.btn.ghost:hover,.btn.link:hover{background:rgba(139,125,255,.08); color:var(--fg)}
.btn:disabled{opacity:.6; cursor:not-allowed}
.btn.magnet{transition:transform .2s ease}

.pills{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px}
.pill{background:#191338; border:1px solid #372a6a; border-radius:999px; padding:10px 12px; font-weight:800; color:#e9e4ff; transition:transform .2s ease, box-shadow .2s ease}
.pill:hover{transform:translateY(-2px); box-shadow:0 6px 18px rgba(139,125,255,.25)}

/* PANELS */
.panel{position:relative; background:var(--glass); backdrop-filter: blur(10px); border:1px solid rgba(42,31,71,.6); border-radius:var(--radius); box-shadow:var(--shadow)}
/* soften top edge on first panel under headings and create spacing below heading */
.section{padding:38px 0 34px}
.section > .panel.card:first-child{margin-top:10px}
.panel::before{content:""; position:absolute; inset:.5px .5px .5px .5px; border-radius:calc(var(--radius) - .5px); padding:1px; background:linear-gradient(135deg, rgba(139,125,255,.36), rgba(255,115,210,.16)); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none}
.card{padding:20px}
 h2{font-size:28px; margin:0 0 10px}

.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}

/* PRIZES — vibrant per place */
#prizes-top .panel{overflow:hidden}
#prizes-top .panel::after{content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background:linear-gradient(180deg, var(--grad-1), var(--grad-3)); box-shadow:0 0 24px rgba(255,115,210,.35); background-repeat:no-repeat}
#prizes-top .panel .card{position:relative}
#prizes-top .panel .card::after{content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(60% 140% at 80% 50%, rgba(139,125,255,.14), rgba(0,0,0,0) 60%); background-repeat:no-repeat; background-size:100% 100%}
.prize-list{display:grid;gap:12px}
.prize-item{display:flex; align-items:center; gap:14px; padding:14px 16px; border:1px solid var(--card-stroke); border-radius:14px; background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)); background-repeat:no-repeat; position:relative; overflow:hidden; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.prize-item:hover{transform:translateY(-2px); box-shadow:0 10px 28px rgba(0,0,0,.35); border-color:#3a2b6b}
.prize-rank{font-weight:900; color:#fff; background:linear-gradient(90deg, var(--gold-1), var(--gold-2)); -webkit-background-clip:text; background-clip:text; color:transparent}
.prize-medal{width:36px;height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-weight:900}
/* color themes per place */
.prize-1{border-color:rgba(247,201,72,.35)}
.prize-1 .prize-medal{background:linear-gradient(135deg, var(--gold-1), var(--gold-2)); color:#3d2b00; box-shadow:0 6px 18px rgba(246,173,85,.35)}
.prize-1 .prize-rank{background:linear-gradient(90deg, var(--gold-1), var(--gold-2)); -webkit-background-clip:text; color:transparent}

.prize-2{border-color:rgba(203,213,225,.28)}
.prize-2 .prize-medal{background:linear-gradient(135deg, var(--silver-1), var(--silver-2)); color:#1f2937; box-shadow:0 6px 18px rgba(226,232,240,.3)}
.prize-2 .prize-rank{background:linear-gradient(90deg, var(--silver-1), var(--silver-2)); -webkit-background-clip:text; color:transparent}

.prize-3{border-color:rgba(232,137,87,.28)}
.prize-3 .prize-medal{background:linear-gradient(135deg, var(--bronze-1), var(--bronze-2)); color:#3b1f12; box-shadow:0 6px 18px rgba(232,137,87,.32)}
.prize-3 .prize-rank{background:linear-gradient(90deg, var(--bronze-1), var(--bronze-2)); -webkit-background-clip:text; color:transparent}

/* subtle sheen on hover */
.prize-item::before{content:""; position:absolute; left:-120px; top:0; width:120px; height:100%; background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.08), rgba(255,255,255,0)); transform:skewX(-12deg); opacity:0; transition:opacity .2s ease, left .6s ease}
.prize-item:hover::before{opacity:1; left:110%}

.hero-media{display:flex; align-items:center; justify-content:center}
.hero-media img{max-width:100%; height:auto; border-radius:20px; border:1px solid var(--card-stroke); background:linear-gradient(145deg,#1c1434,#0d0a19)}

/* FORM */
.form{display:grid; gap:12px}
.row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
label{font-weight:800}
.input, textarea, select{width:100%; background:#0f0c1c; border:1px solid #2d2350; border-radius:12px; padding:12px; color:var(--fg); transition: box-shadow .2s ease, transform .1s ease}
.input:focus, textarea:focus, select:focus{outline:none; box-shadow:0 0 0 3px rgba(139,125,255,.25), 0 6px 20px rgba(139,125,255,.15); transform:translateY(-1px)}

.small{font-size:13px; color:var(--muted)}
.footer{padding:42px 0; color:var(--muted); font-size:14px; text-align:center}

/* Status */
.status{margin-top:8px;font-size:14px}
.status.error{color:#ff8aa1}
.status.success{color:#9ef0a6}
.loader{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin 1s linear infinite;vertical-align:middle;margin-left:8px}

/* QR image sizing on small screens */
.qr{display:flex; gap:16px; align-items:center}
.qr img{width:140px;height:140px;border-radius:12px;border:1px solid var(--card-stroke);background:#0f0b1f}

/* Mobile */
@media (max-width: 1000px){
  .hero{grid-template-columns:1fr}
  h1{font-size:44px}
  .grid-2{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .halo, .grad, .orb, .loader{animation: none !important}
}