/* ===========================================================
   VEDIT — design tokens
   Signature: the horizontal "timeline scrubber" — a video
   editor's playhead bar — used as section dividers and as the
   process-step marker (00:01 / 00:02...) instead of generic 01/02/03.
   =========================================================== */
:root{
  --void:        #08060f;
  --deep:        #120a20;
  --panel:       #170e29;
  --panel-2:     #1d1230;
  --purple:      #7c3aed;
  --purple-2:    #9333ea;
  --bright:      #a855f7;
  --magenta:     #e879f9;
  --lavender:    #ede9fe;
  --muted:       #a99cc7;
  --muted-2:     #6f6390;
  --line:        rgba(168,85,247,0.16);
  --glass:       rgba(255,255,255,0.03);
  --glass-strong:rgba(255,255,255,0.06);
  --shadow-glow: 0 0 60px rgba(124,58,237,0.25);
  --ff-display:  'Sora', sans-serif;
  --ff-body:     'Inter', sans-serif;
  --ff-mono:     'JetBrains Mono', monospace;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(124,58,237,0.25), transparent),
    radial-gradient(ellipse 60% 40% at 100% 20%, rgba(232,121,249,0.08), transparent),
    var(--void);
  color: var(--lavender);
  font-family: var(--ff-body);
  min-height:100vh;
  overflow-x:hidden;
}
h1,h2,h3,h4,.display{ font-family: var(--ff-display); letter-spacing:-0.02em; }
.mono{ font-family: var(--ff-mono); letter-spacing:0.02em; }
a{ color:inherit; text-decoration:none; }
::selection{ background: var(--purple); color:#fff; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--bright);
  outline-offset:2px;
  border-radius:6px;
}

/* ---------- glass ---------- */
.glass{
  background: linear-gradient(180deg, var(--glass-strong), var(--glass));
  border:1px solid var(--line);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-radius:20px;
}
.glass-nav{
  background: rgba(10,6,20,0.55);
  border-bottom:1px solid var(--line);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family: var(--ff-display); font-weight:600; font-size:.92rem;
  padding:.85rem 1.6rem; border-radius:12px; cursor:pointer; border:1px solid transparent;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  white-space:nowrap;
}
.btn:active{ transform: scale(.97); }
.btn-primary{
  background: linear-gradient(135deg, var(--purple), var(--magenta));
  color:#fff; box-shadow: 0 8px 24px rgba(124,58,237,.35);
}
.btn-primary:hover{ box-shadow: 0 10px 32px rgba(232,121,249,.4); transform: translateY(-2px); }
.btn-ghost{
  background: var(--glass); color: var(--lavender); border-color: var(--line);
}
.btn-ghost:hover{ border-color: var(--bright); background: var(--glass-strong); }
.btn-sm{ padding:.55rem 1rem; font-size:.8rem; border-radius:10px; }

/* ---------- timeline scrubber (signature element) ---------- */
.scrubber{
  position:relative; height:3px; width:100%;
  background: linear-gradient(90deg, transparent, var(--line) 15%, var(--line) 85%, transparent);
  margin: 3rem 0;
}
.scrubber::before{
  content:''; position:absolute; top:50%; left:0; transform:translateY(-50%);
  width:22%; height:3px; border-radius:3px;
  background: linear-gradient(90deg, var(--purple), var(--magenta));
  animation: scrub 7s ease-in-out infinite;
}
.scrubber::after{
  content:''; position:absolute; top:50%; width:10px; height:10px; border-radius:50%;
  background: var(--magenta); box-shadow:0 0 14px var(--magenta);
  transform:translate(-50%,-50%); left:22%;
  animation: scrubdot 7s ease-in-out infinite;
}
@keyframes scrub{
  0%{ left:0%; width:8%; } 45%{ left:70%; width:26%; } 55%{ left:70%; width:26%; } 100%{ left:0%; width:8%; }
}
@keyframes scrubdot{
  0%{ left:0%; } 45%{ left:70%; } 55%{ left:70%; } 100%{ left:0%; }
}

.waveform{ display:flex; align-items:flex-end; gap:3px; height:40px; }
.waveform span{
  width:3px; border-radius:2px; background: linear-gradient(180deg, var(--bright), var(--purple));
  opacity:.55; animation: wf 2.4s ease-in-out infinite;
}
@keyframes wf{ 0%,100%{ transform:scaleY(.3);} 50%{ transform:scaleY(1);} }

/* timecode step marker */
.timecode{
  font-family: var(--ff-mono); font-size:.78rem; color: var(--magenta);
  letter-spacing:.08em; display:block; margin-bottom:.6rem;
}

/* ---------- cards ---------- */
.card{
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border:1px solid var(--line); border-radius:18px; padding:1.75rem;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.card:hover{ transform: translateY(-6px); border-color: var(--bright); box-shadow: var(--shadow-glow); }

/* ---------- form elements ---------- */
.field{
  width:100%; background: rgba(255,255,255,0.04); border:1px solid var(--line);
  color: var(--lavender); border-radius:10px; padding:.75rem .9rem; font-family:var(--ff-body); font-size:.92rem;
  transition:border-color .15s ease, background .15s ease;
}
.field::placeholder{ color: var(--muted-2); }
.field:focus{ border-color: var(--bright); background: rgba(255,255,255,0.06); outline:none; }
label.flabel{ font-size:.8rem; color: var(--muted); margin-bottom:.4rem; display:block; font-weight:600; }

/* ---------- badges / status ---------- */
.badge{ font-family:var(--ff-mono); font-size:.72rem; padding:.3rem .7rem; border-radius:999px; border:1px solid var(--line); }
.badge-pending{ color:#facc15; border-color:rgba(250,204,21,.4); background:rgba(250,204,21,.08); }
.badge-review{ color:#38bdf8; border-color:rgba(56,189,248,.4); background:rgba(56,189,248,.08); }
.badge-accepted{ color:#4ade80; border-color:rgba(74,222,128,.4); background:rgba(74,222,128,.08); }
.badge-rejected{ color:#f87171; border-color:rgba(248,113,113,.4); background:rgba(248,113,113,.08); }
.badge-completed{ color:var(--magenta); border-color:rgba(232,121,249,.4); background:rgba(232,121,249,.08); }

/* ---------- reveal on scroll ---------- */
.reveal{ opacity:0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ---------- loader ---------- */
.spinner{
  width:18px; height:18px; border-radius:50%;
  border:2px solid rgba(255,255,255,.25); border-top-color:#fff;
  animation: spin .7s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }

/* scrollbar */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background: var(--void); }
::-webkit-scrollbar-thumb{ background: var(--panel-2); border-radius:8px; border:2px solid var(--void); }

/* Plain fallbacks for the handful of Tailwind CSS-variable arbitrary-value
   utilities used in the markup (e.g. text-[--muted]). These mirror what the
   Tailwind CDN's shorthand should already generate, but are defined here too
   so the design never depends on that JIT feature resolving correctly. */
.text-\[--muted\]{ color: var(--muted); }
.text-\[--muted-2\]{ color: var(--muted-2); }
.text-\[--bright\]{ color: var(--bright); }
.text-\[--magenta\]{ color: var(--magenta); }
.border-\[--line\]{ border-color: var(--line); }
.bg-\[--void\]{ background-color: var(--void); }

.gradient-text{
  background: linear-gradient(135deg, var(--bright), var(--magenta));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.section{ padding: 6rem 0; }
@media (max-width:768px){ .section{ padding: 3.5rem 0; } }