/* theme.css — shared Aurora design language for all workshop pages.
   Tokens, animated background, top nav, buttons, glass primitives. */

:root {
  --bg: #08080c; --bg2: #0d0c14;
  --ink: #f3f0ff; --muted: #a39dc9; --muted2: #cfc9ee;
  --line: rgba(255,255,255,.1); --line2: rgba(255,255,255,.16);
  --glass: rgba(255,255,255,.06); --glass2: rgba(255,255,255,.09);
  --violet: #ff2e3f; --pink: #ff5a4d; --cyan: #ff8a3d; --teal: #ff4455;
  --good: #6effb0; --bad: #ff7a9c; --gold: #ffd36e;
  --maxw: 1180px;
  --iri: linear-gradient(100deg,#ff2e3f,#ff5a4d 55%,#ff8a3d);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); color: var(--ink); font-family: 'Sora', sans-serif; -webkit-font-smoothing: antialiased; }
body { min-height: 100vh; overflow-x: hidden; }
::selection { background: rgba(255,46,63,.35); }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }
.iri { background: var(--iri); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- aurora bg ---------- */
.aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; background:
    radial-gradient(120% 80% at 50% -20%, #1a0810, transparent 60%), var(--bg); }
.aurora .blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; mix-blend-mode: screen; }
.aurora .b1 { width: 52vw; height: 52vw; left: -12vw; top: -14vw; background: radial-gradient(circle, #ff2e3f, transparent 70%); animation: float1 22s ease-in-out infinite; }
.aurora .b2 { width: 40vw; height: 40vw; right: -8vw; top: 2vw; background: radial-gradient(circle, #7a1020, transparent 70%); animation: float2 26s ease-in-out infinite; }
.aurora .b3 { width: 46vw; height: 46vw; left: 30vw; bottom: -24vw; background: radial-gradient(circle, #ff5a4d, transparent 70%); animation: float3 30s ease-in-out infinite; }
.aurora .b4 { width: 34vw; height: 34vw; right: 6vw; bottom: -10vw; background: radial-gradient(circle, #c0102a, transparent 70%); animation: float1 24s ease-in-out infinite reverse; }
.aurora .grain { position: absolute; inset: 0; opacity: .35; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E"); }
@keyframes float1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(4vw,3vw) scale(1.08)} }
@keyframes float2 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-3vw,4vw) scale(1.12)} }
@keyframes float3 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(3vw,-3vw) scale(1.06)} }
@media (prefers-reduced-motion: reduce){ .aurora .blob{animation:none!important} }

/* ---------- entrance anims ---------- */
.anim { opacity: 0; transform: translateY(16px); animation: rise .7s cubic-bezier(.2,.7,.2,1) forwards; }
.a1{animation-delay:.04s}.a2{animation-delay:.12s}.a3{animation-delay:.2s}
.a4{animation-delay:.28s}.a5{animation-delay:.36s}.a6{animation-delay:.44s}.a7{animation-delay:.52s}.a8{animation-delay:.6s}
@keyframes rise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce){ .anim{animation:none;opacity:1;transform:none} }
body.anim-fallback .anim { opacity: 1 !important; transform: none !important; }

/* ---------- top nav ---------- */
.site-nav { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 18px;
  padding: 13px clamp(16px,4vw,40px); backdrop-filter: blur(18px);
  background: linear-gradient(180deg, rgba(11,8,32,.84), rgba(11,8,32,.45)); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; flex: none; }
.brand-mark { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: linear-gradient(150deg, rgba(255,255,255,.14), rgba(255,255,255,.02)); border: 1px solid var(--line2); color: var(--violet); box-shadow: inset 0 1px 0 rgba(255,255,255,.2); }
.brand-name { font-weight: 700; letter-spacing: -.01em; font-size: 16px; }
.nav-links { display: flex; gap: 5px; margin-left: 8px; overflow-x: auto; scrollbar-width: none; }
.nav-links::-webkit-scrollbar { display: none; }
.nav-link { display: inline-flex; align-items: center; white-space: nowrap; padding: 8px 15px; border-radius: 999px; border: 1px solid transparent;
  font-size: 13.5px; font-weight: 500; color: var(--muted); transition: .22s; }
.nav-link:hover { color: var(--ink); background: var(--glass); }
.nav-link.active { color: var(--ink); background: var(--glass2); border-color: var(--line2); }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 14px; flex: none; }
.nav-score { display: flex; align-items: center; gap: 5px; font-weight: 600; font-size: 14px; color: var(--ink); }
.nav-score svg { color: var(--gold); } .nav-score small { color: var(--muted); font-weight: 500; }

/* ---------- page shell ---------- */
.page { position: relative; z-index: 1; max-width: var(--maxw); margin: 0 auto; padding: clamp(28px,5vw,60px) clamp(16px,4vw,40px) 80px; }
.page-head { max-width: 760px; margin-bottom: clamp(28px,4vw,44px); }
.page-kicker { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--cyan); }
.page-title { font-size: clamp(32px,6vw,56px); font-weight: 800; letter-spacing: -.03em; line-height: 1.02; margin: 14px 0 0; }
.page-sub { margin-top: 16px; color: var(--muted); font-size: clamp(15px,2.2vw,18px); line-height: 1.6; text-wrap: pretty; }
.pill { display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(8px); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted2); }
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(90deg,#ff2e3f,#ff8a3d); box-shadow: 0 0 10px rgba(255,46,63,.8); }

/* ---------- buttons ---------- */
.btn-primary { display: inline-flex; align-items: center; gap: 9px; padding: 13px 26px; border-radius: 999px; font-weight: 700; font-size: 15px; color: #fff;
  background: var(--iri); box-shadow: 0 10px 30px rgba(255,46,63,.4); transition: transform .25s, box-shadow .25s, opacity .25s; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(255,46,63,.55); }
.btn-primary i { transition: transform .25s; } .btn-primary:hover i { transform: translateX(4px); }
.btn-primary.disabled { opacity: .4; pointer-events: none; box-shadow: none; }
.btn-ghost { display: inline-flex; align-items: center; gap: 9px; padding: 13px 24px; border-radius: 999px; font-weight: 600; font-size: 15px; color: var(--ink); background: var(--glass2); border: 1px solid var(--line2); transition: .25s; }
.btn-ghost:hover { background: rgba(255,255,255,.14); }

/* ---------- generic glass surface ---------- */
.glass { background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); border: 1px solid var(--line); backdrop-filter: blur(14px); box-shadow: 0 14px 44px rgba(30,8,60,.35); border-radius: 22px; }

.back-link { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; color: var(--muted); padding: 8px 0; transition: .2s; }
.back-link i { transition: transform .25s; }
.back-link:hover { color: var(--ink); } .back-link:hover i { transform: translateX(-4px); }

.site-foot { position: relative; z-index: 1; max-width: var(--maxw); margin: 0 auto; padding: 30px clamp(16px,4vw,40px) 60px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; color: var(--muted); font-size: 13px; }
.site-foot a { color: var(--muted2); border-bottom: 1px solid transparent; padding-bottom: 1px; transition: .2s; }
.site-foot a:hover { color: var(--ink); border-color: var(--cyan); }

@media (max-width: 720px) {
  .brand-name { display: none; }
  .nav-links { margin-left: 2px; }
}