/* =====================================================================
   Treeni — sivu-layout ja näkymäsiirtymät
   Rakenne:  #app.app > main#view.view-host > section.screen[data-view]
   ===================================================================== */
.app {
  position: relative;
  max-width: var(--app-max-w);
  margin: 0 auto;
  min-height: 100dvh;
}
.view-host { position: relative; min-height: 100dvh; }

.screen {
  position: relative;
  min-height: 100dvh;
  padding:
    calc(var(--safe-top) + var(--sp-4))
    calc(var(--gutter) + var(--safe-right))
    calc(var(--nav-h) + var(--safe-bottom) + var(--sp-8))
    calc(var(--gutter) + var(--safe-left));
  display: flex; flex-direction: column; gap: var(--sp-4);
}
.screen--no-nav { padding-bottom: calc(var(--safe-bottom) + var(--sp-5)); }
.screen--has-header { padding-top: 0; }
/* Näkymän pääotsikko */
.screen__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-3); padding-top: var(--sp-3); margin-bottom: var(--sp-1); }
.screen__eyebrow { margin-bottom: 6px; }
.screen__title { font-size: var(--fs-2xl); font-weight: var(--fw-heavy); letter-spacing: -.03em; line-height: 1.05; }
.screen__lead { color: var(--text-muted); font-size: var(--fs-md); margin-top: var(--sp-2); }

/* Kiinteä alapalkki (esim. onboardingin "Jatka", treenin "Valmis") */
.screen__footer {
  position: sticky; bottom: 0; z-index: var(--z-sticky);
  margin: auto calc(-1 * var(--gutter)) 0;
  padding: var(--sp-5) var(--gutter) calc(var(--safe-bottom) + var(--sp-4));
  background: linear-gradient(180deg, rgba(10,11,16,0), rgba(10,11,16,.94) 32%);
  display: flex; gap: var(--sp-3);
}
.screen__footer > .btn { flex: 1; }
.screen--no-nav .screen__footer { margin-bottom: calc(-1 * (var(--safe-bottom) + var(--sp-5))); }

/* Onboarding-kehys */
.onb { gap: var(--sp-5); }
.onb__top { display: flex; align-items: center; gap: var(--sp-3); padding-top: var(--sp-2); }
.onb__top .progress-steps { flex: 1; }
.onb__step { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text-muted); letter-spacing: .1em; }
.onb__q { font-size: var(--fs-3xl); font-weight: var(--fw-heavy); letter-spacing: -.035em; line-height: 1.04; }
.onb__q em { font-style: normal; color: var(--lime); text-shadow: var(--text-glow-lime); }

/* Latausnäkymä (ohjelman luonti) */
.loader-screen { align-items: center; justify-content: center; text-align: center; }
.loader-orb {
  width: 140px; height: 140px; border-radius: 50%; position: relative;
  background: conic-gradient(from 0deg, var(--lime), var(--cyan), var(--magenta), var(--lime));
  animation: spin 2.4s linear infinite; filter: blur(.3px);
  -webkit-mask: radial-gradient(circle, transparent 58%, #000 60%); mask: radial-gradient(circle, transparent 58%, #000 60%);
  box-shadow: 0 0 60px rgba(182,255,59,.35);
}

/* Boot-tila ennen ensimmäistä renderöintiä */
.boot { min-height: 100dvh; display: grid; place-items: center; }
.boot__mark { width: 64px; height: 64px; filter: var(--dropglow-lime); animation: pulse 1.6s var(--ease-in-out) infinite; }
@keyframes pulse { 50% { opacity: .5; transform: scale(.94); } }

/* ---------------------------------------------------------------
   NÄKYMÄSIIRTYMÄT
   app.js asettaa uudelle näkymälle .view-enter + suunnan
   (data-dir="fwd"|"back"|"tab") ja vanhalle .view-leave.
   --------------------------------------------------------------- */
.view-host > .screen { will-change: transform, opacity; }
.view-leave { position: absolute !important; inset: 0 0 auto 0; pointer-events: none; }

.view-enter[data-dir="tab"]  { animation: view-fade-in var(--dur-base) var(--ease-out) both; }
.view-leave[data-dir="tab"]  { animation: view-fade-out var(--dur-fast) var(--ease-out) both; }
.view-enter[data-dir="fwd"]  { animation: view-slide-in var(--dur-slow) var(--ease-out) both; }
.view-leave[data-dir="fwd"]  { animation: view-slide-out var(--dur-slow) var(--ease-out) both; }
.view-enter[data-dir="back"] { animation: view-slide-in-back var(--dur-slow) var(--ease-out) both; }
.view-leave[data-dir="back"] { animation: view-slide-out-back var(--dur-slow) var(--ease-out) both; }

@keyframes view-fade-in  { from { opacity: 0; transform: translateY(10px) scale(.995); } }
@keyframes view-fade-out { to   { opacity: 0; } }
@keyframes view-slide-in       { from { opacity: 0; transform: translateX(28%); } }
@keyframes view-slide-out      { to   { opacity: 0; transform: translateX(-12%); } }
@keyframes view-slide-in-back  { from { opacity: 0; transform: translateX(-20%); } }
@keyframes view-slide-out-back { to   { opacity: 0; transform: translateX(20%); } }

/* Sisällön porrastettu sisääntulo: lisää .stagger konttiin */
.stagger > * { animation: rise var(--dur-slow) var(--ease-out) both; }
.stagger > *:nth-child(1) { animation-delay: 20ms; }
.stagger > *:nth-child(2) { animation-delay: 60ms; }
.stagger > *:nth-child(3) { animation-delay: 100ms; }
.stagger > *:nth-child(4) { animation-delay: 140ms; }
.stagger > *:nth-child(5) { animation-delay: 180ms; }
.stagger > *:nth-child(6) { animation-delay: 220ms; }
.stagger > *:nth-child(n+7) { animation-delay: 260ms; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

@media (prefers-reduced-motion: reduce) {
  .view-enter, .view-leave, .stagger > * { animation: none !important; }
  .loader-orb, .boot__mark { animation: none; }
}

/* Leveämmät näytöt: keskitetty "puhelin"-sarake hienolla reunalla */
@media (min-width: 560px) {
  .app { border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
}