/* Helix — Mobile-first Stylesheet
   Dark + Gold system · PWA-optimised · WCAG-AA-minded
   v2 — adds motion system, theming toggle, and richer components. */

/* Smooth native cross-page transitions in supporting browsers.
   Pure progressive enhancement — ignored elsewhere, zero risk. */
@view-transition {
  navigation: auto;
}

:root{
  --bg:#0B0B0F; --bg-alt:#141419; --card:#1A1A22; --card-2:#20202A;
  --text:#F4F1EA; --text-dim:#A9A6B5; --text-ghost:#6B6878;
  --gold:#E6B85C; --gold-2:#F5D28C; --gold-rgb:230,184,92;
  --line:#2A2A35;
  --ok:#3FA65B; --err:#E0555A; --err-rgb:224,85,90;
  --radius:16px; --radius-sm:10px; --radius-lg:22px;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  --shadow-sm:0 2px 10px rgba(0,0,0,.18);
  --shadow-md:0 8px 28px rgba(0,0,0,.28);
  --shadow-gold:0 6px 22px rgba(var(--gold-rgb),.22);
  --dur-fast:.15s; --dur-med:.32s; --dur-slow:.6s;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  color-scheme: dark;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#FAF8F3; --bg-alt:#F1EEE5; --card:#FFFFFF; --card-2:#F5F2EA;
    --text:#1B1A17; --text-dim:#5B5748; --text-ghost:#948F7E; --line:#E5E1D5;
    --shadow-sm:0 2px 10px rgba(27,26,23,.06);
    --shadow-md:0 8px 28px rgba(27,26,23,.10);
  }
}
:root[data-theme="dark"]{ --bg:#0B0B0F; }
:root[data-theme="light"]{
  --bg:#FAF8F3; --bg-alt:#F1EEE5; --card:#FFFFFF; --card-2:#F5F2EA;
  --text:#1B1A17; --text-dim:#5B5748; --text-ghost:#948F7E; --line:#E5E1D5;
  --shadow-sm:0 2px 10px rgba(27,26,23,.06);
  --shadow-md:0 8px 28px rgba(27,26,23,.10);
  color-scheme: light;
}

*{box-sizing:border-box;}
html,body{height:100%;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:"Fraunces","Georgia",serif;
  -webkit-font-smoothing:antialiased;
  padding-top:var(--safe-t); padding-bottom:var(--safe-b);
  transition:background var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out);
}
h1,h2,h3{font-weight:600; line-height:1.15; margin:0 0 .5em;}
p{line-height:1.55; color:var(--text-dim);}
a{color:inherit; text-decoration:none;}
.mono{font-family:"JetBrains Mono",monospace; position:relative;}
::selection{background:rgba(var(--gold-rgb),.35); color:var(--text);}

/* ── Motion keyframes ──────────────────────────────────────────────── */
@keyframes fadeInUp{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }
@keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }
@keyframes scaleIn{ from{opacity:0; transform:scale(.94);} to{opacity:1; transform:scale(1);} }
@keyframes floatY{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-6px);} }
@keyframes pulseGlow{ 0%,100%{box-shadow:0 0 0 0 rgba(var(--gold-rgb),.28);} 50%{box-shadow:0 0 0 10px rgba(var(--gold-rgb),0);} }
@keyframes shake{ 10%,90%{transform:translateX(-1px);} 20%,80%{transform:translateX(2px);} 30%,50%,70%{transform:translateX(-4px);} 40%,60%{transform:translateX(4px);} }
@keyframes ripple{ to{transform:scale(2.6); opacity:0;} }
@keyframes spin{ to{transform:rotate(360deg);} }
@keyframes shimmer{ 0%{background-position:-200% 0;} 100%{background-position:200% 0;} }
@keyframes slideDownIn{ from{opacity:0; transform:translateY(-12px);} to{opacity:1; transform:translateY(0);} }
@keyframes popIn{ 0%{opacity:0; transform:translateY(14px) scale(.97);} 100%{opacity:1; transform:translateY(0) scale(1);} }
@keyframes checkPop{ 0%{transform:scale(0);} 70%{transform:scale(1.25);} 100%{transform:scale(1);} }

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

/* ── Topbar ────────────────────────────────────────────────────────── */
.topbar{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between;
  padding:calc(.9rem + var(--safe-t)) 1.1rem .9rem; background:rgba(11,11,15,.85); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  transition:background var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
}
:root[data-theme="light"] .topbar{ background:rgba(250,248,243,.85); }
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]) .topbar{ background:rgba(250,248,243,.85); } }
.brand{display:flex; align-items:center; gap:.5rem; font-weight:700; font-size:1.1rem; color:var(--gold);}
.brand-mark{font-size:1.3rem; display:inline-block; transition:transform var(--dur-med) var(--ease-spring);}
.brand:hover .brand-mark{transform:rotate(35deg) scale(1.12);}
.topbar-actions{display:flex; align-items:center; gap:.5rem;}
.topbar-action{font-size:.85rem; color:var(--text-dim); border:1px solid var(--line); padding:.4rem .8rem; border-radius:99px; transition:all var(--dur-fast) var(--ease-out);}
.topbar-action:hover{border-color:var(--gold); color:var(--gold);}

.theme-toggle{
  display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px;
  border-radius:99px; border:1px solid var(--line); background:var(--card-2); cursor:pointer;
  position:relative; overflow:hidden; transition:border-color var(--dur-fast), transform var(--dur-fast) var(--ease-spring);
  padding:0;
}
.theme-toggle:hover{border-color:var(--gold); transform:scale(1.06);}
.theme-toggle:active{transform:scale(.92);}
.theme-icon{position:absolute; font-size:.95rem; transition:transform var(--dur-med) var(--ease-spring), opacity var(--dur-med) var(--ease-out);}
.theme-icon-sun{opacity:0; transform:translateY(8px) rotate(-40deg);}
.theme-icon-moon{opacity:1; transform:translateY(0) rotate(0);}
:root[data-theme="light"] .theme-icon-sun{opacity:1; transform:translateY(0) rotate(0);}
:root[data-theme="light"] .theme-icon-moon{opacity:0; transform:translateY(-8px) rotate(40deg);}

/* ── Main content + page-enter animation ──────────────────────────── */
.app-main{max-width:640px; margin:0 auto; padding:1rem 1rem 6rem; animation:fadeInUp var(--dur-slow) var(--ease-out) both;}

/* ── Bottom nav with sliding active indicator ─────────────────────── */
.bottom-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:30; display:flex;
  background:rgba(20,20,25,.92); backdrop-filter:blur(12px);
  border-top:1px solid var(--line); padding:.5rem .25rem calc(.5rem + var(--safe-b));
  transition:background var(--dur-med) var(--ease-out);
}
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]) .bottom-nav{ background:rgba(255,255,255,.92); } }
:root[data-theme="light"] .bottom-nav{ background:rgba(255,255,255,.92); }
.nav-indicator{
  position:absolute; top:.35rem; height:calc(100% - .7rem); border-radius:14px;
  background:rgba(var(--gold-rgb),.12); border:1px solid rgba(var(--gold-rgb),.28);
  transition:left var(--dur-med) var(--ease-spring), width var(--dur-med) var(--ease-spring), opacity var(--dur-fast);
  opacity:0; pointer-events:none;
}
.bottom-nav a{flex:1; position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:.15rem; font-size:.65rem; color:var(--text-ghost); padding:.35rem 0; transition:color var(--dur-fast) var(--ease-out);}
.bottom-nav a span{font-size:1.15rem; display:inline-block; transition:transform var(--dur-med) var(--ease-spring);}
.bottom-nav a.active{color:var(--gold); font-weight:600;}
.bottom-nav a.active span{transform:translateY(-2px) scale(1.08);}
.bottom-nav a:active span{transform:scale(.85);}

/* ── Cards ─────────────────────────────────────────────────────────── */
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1.1rem; margin-bottom:1rem;
  animation:fadeInUp var(--dur-med) var(--ease-out) both;
  transition:border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-med) var(--ease-out);
}
.card-title{font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-ghost); margin-bottom:.6rem;}
/* Gentle cascading entrance for the first several cards on a page */
.card:nth-of-type(1){animation-delay:.02s;}
.card:nth-of-type(2){animation-delay:.08s;}
.card:nth-of-type(3){animation-delay:.14s;}
.card:nth-of-type(4){animation-delay:.20s;}
.card:nth-of-type(5){animation-delay:.26s;}
.card:nth-of-type(n+6){animation-delay:.30s;}

/* ── Buttons ───────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem; width:100%;
  padding:.85rem 1.1rem; border-radius:99px; font-weight:600; font-size:.95rem;
  border:1px solid var(--gold); background:var(--gold); color:#1B1A17; cursor:pointer;
  font-family:inherit; position:relative; overflow:hidden;
  transition:transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out), opacity var(--dur-fast);
}
.btn:hover{box-shadow:var(--shadow-gold); filter:brightness(1.04);}
.btn:active{transform:scale(.97);}
.btn:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}
.btn:disabled,.btn.is-loading{opacity:.75; cursor:default; pointer-events:none;}
.btn-outline{background:transparent; color:var(--text);}
.btn-outline:hover{box-shadow:none; background:rgba(var(--gold-rgb),.08);}
.btn-ghost{background:transparent; border-color:var(--line); color:var(--text-dim);}
.btn-ghost:hover{box-shadow:none; border-color:var(--gold); color:var(--gold); background:rgba(var(--gold-rgb),.06);}
.btn-google{background:#fff; color:#1B1A17; border-color:#fff;}
.btn-google:hover{box-shadow:0 6px 18px rgba(0,0,0,.18);}
.btn-sm{width:auto; padding:.5rem .9rem; font-size:.8rem;}

/* Ripple element injected by app.js on pointerdown */
.btn .btn-ripple{
  position:absolute; border-radius:50%; background:rgba(255,255,255,.45); pointer-events:none;
  transform:scale(0); animation:ripple .55s ease-out forwards;
}
.btn-outline .btn-ripple,.btn-ghost .btn-ripple{background:rgba(var(--gold-rgb),.35);}

/* Inline spinner shown on submit via .is-loading */
.btn-spinner{width:16px; height:16px; border-radius:50%; border:2px solid rgba(0,0,0,.25); border-top-color:#1B1A17; animation:spin .7s linear infinite; display:none;}
.btn-outline .btn-spinner,.btn-ghost .btn-spinner{border:2px solid rgba(var(--gold-rgb),.25); border-top-color:var(--gold);}
.btn.is-loading .btn-spinner{display:inline-block;}
.btn.is-loading .btn-label{opacity:.6;}

/* ── Forms ─────────────────────────────────────────────────────────── */
.form-group{margin-bottom:1rem;}
label{display:block; font-size:.78rem; color:var(--text-dim); margin-bottom:.35rem;}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=time],
input[type=number],select,textarea{
  width:100%; padding:.75rem .9rem; border-radius:var(--radius-sm); border:1px solid var(--line);
  background:var(--card-2); color:var(--text); font-family:inherit; font-size:.95rem;
  transition:border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-med);
}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(var(--gold-rgb),.16);
}
input.field-invalid,textarea.field-invalid,select.field-invalid{
  border-color:var(--err); box-shadow:0 0 0 3px rgba(var(--err-rgb),.14);
  animation:shake .35s var(--ease-out);
}
textarea{min-height:90px; resize:vertical;}
.help{font-size:.72rem; color:var(--text-ghost); margin-top:.3rem;}

/* File upload dropzone */
.dropzone{
  border:1.5px dashed var(--line); border-radius:var(--radius-sm); padding:1.1rem .9rem; text-align:center;
  cursor:pointer; transition:border-color var(--dur-fast), background var(--dur-fast); background:var(--card-2);
  position:relative;
}
.dropzone:hover,.dropzone.is-dragover{border-color:var(--gold); background:rgba(var(--gold-rgb),.06);}
.dropzone input[type=file]{position:absolute; inset:0; opacity:0; cursor:pointer;}
.dropzone-icon{font-size:1.4rem; margin-bottom:.2rem; display:block;}
.dropzone-text{font-size:.8rem; color:var(--text-dim);}
.dropzone-filename{font-size:.78rem; color:var(--gold); margin-top:.4rem; font-weight:600; word-break:break-all;}

input[type=range]{
  width:100%; -webkit-appearance:none; appearance:none; height:8px; border-radius:99px; outline:none;
  background:linear-gradient(90deg, var(--gold) 0%, var(--gold) var(--val,50%), var(--card-2) var(--val,50%), var(--card-2) 100%);
  transition:box-shadow var(--dur-fast);
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:#fff; border:3px solid var(--gold);
  cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,.3); transition:transform var(--dur-fast) var(--ease-spring);
}
input[type=range]::-webkit-slider-thumb:active{transform:scale(1.2);}
input[type=range]::-moz-range-thumb{
  width:18px; height:18px; border-radius:50%; background:#fff; border:3px solid var(--gold); cursor:pointer;
}
input[type=range]::-moz-range-track{ background:transparent; }

/* ── Alerts / toasts (existing .alert markup, now animated) ──────────── */
.alert{
  padding:.75rem 1rem; border-radius:var(--radius-sm); margin-bottom:1rem; font-size:.85rem;
  animation:slideDownIn var(--dur-med) var(--ease-spring) both;
  transition:opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out), max-height var(--dur-med) var(--ease-out), margin var(--dur-med), padding var(--dur-med);
}
.alert.alert-out{ opacity:0; transform:translateY(-10px); max-height:0; margin:0; padding-top:0; padding-bottom:0; overflow:hidden; }
.alert-ok{background:rgba(63,166,91,.15); color:var(--ok); border:1px solid rgba(63,166,91,.35);}
.alert-error{background:rgba(224,85,90,.15); color:var(--err); border:1px solid rgba(224,85,90,.35);}

/* ── Layout helpers ────────────────────────────────────────────────── */
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:.7rem;}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem;}

.chip{display:inline-flex; align-items:center; gap:.3rem; padding:.3rem .7rem; border-radius:99px; background:var(--card-2); border:1px solid var(--line); font-size:.75rem; color:var(--text-dim); transition:all var(--dur-fast) var(--ease-out);}
.badge-gold{background:rgba(var(--gold-rgb),.15); color:var(--gold); border-color:rgba(var(--gold-rgb),.4); animation:pulseGlow 2.4s ease-in-out infinite;}

/* ── Sign hero (elemental / star sign identity card) ──────────────── */
.sign-hero{
  text-align:center; padding:1.6rem 1rem; border-radius:var(--radius-lg); margin-bottom:1rem; border:1px solid var(--line);
  position:relative; overflow:hidden; animation:scaleIn var(--dur-slow) var(--ease-spring) both;
}
.sign-hero::before{
  content:""; position:absolute; inset:-40%; background:radial-gradient(circle at 50% 30%, rgba(var(--gold-rgb),.14), transparent 60%);
  pointer-events:none;
}
.sign-sigil{font-size:2.6rem; display:inline-block; animation:floatY 4.5s ease-in-out infinite; position:relative;}
.sign-name{font-size:1.4rem; font-weight:700; margin:.3rem 0 .1rem;}
.sign-archetype{color:var(--text-dim); font-size:.85rem;}
.sign-meta{display:flex; justify-content:center; flex-wrap:wrap; gap:1.2rem; margin-top:.8rem; font-size:.72rem; color:var(--text-ghost);}

/* ── Quotient sliders ──────────────────────────────────────────────── */
.quotient-row{display:flex; align-items:center; gap:.7rem; margin-bottom:.8rem;}
.quotient-label{flex:0 0 92px; font-size:.72rem; color:var(--text-dim);}
.quotient-bar{flex:1; height:8px; border-radius:99px; background:var(--card-2); overflow:hidden;}
.quotient-fill{height:100%; background:linear-gradient(90deg,var(--gold),var(--gold-2)); transition:width var(--dur-med) var(--ease-out);}
.quotient-val{flex:0 0 30px; text-align:right; font-size:.75rem; color:var(--text-ghost); font-variant-numeric:tabular-nums;}

/* ── Ring / progress stat block ───────────────────────────────────── */
.ring-progress{
  display:flex; align-items:center; justify-content:center; flex-direction:column; padding:1.4rem 0; position:relative;
}
.ring-progress::before{
  content:""; position:absolute; width:132px; height:132px; border-radius:50%;
  background:
    radial-gradient(circle, var(--card) 62%, transparent 63%),
    conic-gradient(var(--gold) calc(var(--progress,0) * 1%), var(--line) 0);
  transition:background var(--dur-slow) var(--ease-out);
}
.ring-num{font-size:2.4rem; font-weight:700; color:var(--gold); position:relative; font-variant-numeric:tabular-nums;}
.ring-sub{font-size:.75rem; color:var(--text-ghost); position:relative;}

.hero{padding:2.2rem 1rem 1.4rem; text-align:center; animation:fadeInUp var(--dur-slow) var(--ease-out) both;}
.hero h1{font-size:1.9rem;}
.hero p{max-width:34rem; margin:0 auto 1.2rem;}
.track-grid{display:grid; grid-template-columns:1fr 1fr; gap:.8rem; margin:1.2rem 0;}
.track-card{
  border:1px solid var(--line); border-radius:var(--radius); padding:1rem; text-align:left;
  animation:fadeInUp var(--dur-med) var(--ease-out) both; transition:border-color var(--dur-fast), transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast);
}
.track-card:nth-child(1){animation-delay:.05s;} .track-card:nth-child(2){animation-delay:.11s;}
.track-card:nth-child(3){animation-delay:.17s;} .track-card:nth-child(4){animation-delay:.23s;}
.track-card:hover{border-color:var(--gold); transform:translateY(-3px); box-shadow:var(--shadow-sm);}
.track-card h3{font-size:.95rem; margin-bottom:.2rem;}
.track-card p{font-size:.78rem; margin:0;}

.divider{border:none; border-top:1px solid var(--line); margin:1.4rem 0;}
.text-center{text-align:center;}
.small{font-size:.78rem; color:var(--text-ghost);}
.mt-1{margin-top:.6rem;} .mb-1{margin-bottom:.6rem;}

.step-dots{display:flex; gap:.35rem; justify-content:center; margin-bottom:1rem;}
.step-dots span{width:7px; height:7px; border-radius:99px; background:var(--line); transition:all var(--dur-med) var(--ease-spring);}
.step-dots span.active{background:var(--gold); width:18px;}

/* ── Copy-to-clipboard affordance (injected by app.js around .mono spans) ── */
.copy-wrap{display:inline-flex; align-items:center; gap:.4rem;}
.copy-btn{
  display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:6px;
  border:1px solid var(--line); background:var(--card-2); color:var(--text-dim); cursor:pointer; font-size:.7rem; padding:0;
  transition:all var(--dur-fast) var(--ease-out);
}
.copy-btn:hover{border-color:var(--gold); color:var(--gold);}
.copy-btn.copied{border-color:var(--ok); color:var(--ok); animation:checkPop var(--dur-fast) var(--ease-spring);}

/* ── Confirm modal (replaces native confirm()) ────────────────────── */
.modal-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(2px);
  display:flex; align-items:flex-end; justify-content:center; z-index:100;
  opacity:0; pointer-events:none; transition:opacity var(--dur-med) var(--ease-out);
}
.modal-overlay.is-open{opacity:1; pointer-events:auto;}
.modal{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  padding:1.4rem 1.2rem calc(1.2rem + var(--safe-b)); width:100%; max-width:480px;
  transform:translateY(100%); transition:transform var(--dur-med) var(--ease-spring);
}
.modal-overlay.is-open .modal{transform:translateY(0);}
.modal h3{font-size:1.1rem; margin-bottom:.4rem;}
.modal p{font-size:.85rem; margin-bottom:1.2rem;}
.modal-actions{display:flex; gap:.6rem;}
@media (min-width:560px){
  .modal-overlay{align-items:center;}
  .modal{border-radius:var(--radius-lg); animation:popIn var(--dur-med) var(--ease-spring) both;}
}

/* ── Skeleton loading shimmer (utility, for future async bits) ───── */
.skeleton{
  border-radius:var(--radius-sm); background:linear-gradient(90deg, var(--card-2) 25%, var(--line) 37%, var(--card-2) 63%);
  background-size:400% 100%; animation:shimmer 1.4s ease-in-out infinite;
}

@media(min-width:720px){
  .app-main{padding-top:1.5rem;}
  .track-card:hover, .card.is-hoverable:hover{transform:translateY(-2px);}
}