/* ==========================================================================
   MFit — Onboarding, Auth, Transitions, Activity
   ========================================================================== */

:root { --orange: #FC4C02; }

/* ===== Onboarding ===== */
.splash {
  position: absolute; inset: 0; z-index: 95;
  background: var(--surface);
  color: var(--ink);
  display: flex; flex-direction: column;
  padding: calc(18px + var(--safe-top)) 20px calc(24px + var(--safe-bot));
  animation: splashIn .7s var(--ease-out);
}
@keyframes splashIn {
  from { opacity: 0; transform: scale(1.015); }
  to { opacity: 1; transform: none; }
}
.splash.leaving { animation: splashOut .5s var(--ease-out) forwards; }
@keyframes splashOut {
  to { opacity: 0; filter: blur(14px); transform: translateY(-16px) scale(.97); }
}

.onboard-card {
  flex: 1; min-height: 0;
  border-radius: 38px;
  background-color: #D7EEF6;
  background-image: none;
  background-size: cover;
  background-position: center 22%;
  position: relative; overflow: hidden;
  box-shadow: 0 24px 60px rgba(40,80,110,.18);
}
.onboard-card.has-photo {
  background-image:
    linear-gradient(185deg, rgba(215,238,246,.10) 35%, rgba(215,238,246,.88) 100%),
    var(--onboard-photo);
}
/* watermark */
.onboard-card::before {
  content: attr(data-watermark);
  position: absolute; top: 7%; left: 50%; transform: translateX(-50%);
  font-size: clamp(64px, 23vw, 116px); font-weight: 800; letter-spacing: -.07em;
  color: rgba(255,255,255,.5); white-space: nowrap; pointer-events: none;
  animation: markIn 1.1s var(--ease-out) both .15s;
}
.onboard-card[data-watermark=""]::before { content: none; }
@keyframes markIn {
  from { opacity: 0; transform: translateX(-50%) translateY(14px); letter-spacing: .06em; }
  to { opacity: 1; transform: translateX(-50%); }
}
/* bottom fade so copy reads cleanly */
.onboard-card::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 42%;
  background: linear-gradient(to top, #D7EEF6, transparent);
  pointer-events: none;
}
.onboard-logo {
  position: absolute; top: 18px; left: 18px; z-index: 3;
  height: 38px; width: auto; object-fit: contain;
  filter: drop-shadow(0 3px 10px rgba(0,0,0,.14));
  animation: riseIn .6s var(--ease-out) both .25s;
}

.onboard-copy { padding: 26px 6px 20px; }
.onboard-copy h2 {
  font-size: 31px; font-weight: 800; letter-spacing: -.045em; line-height: 1.12;
  animation: riseIn .6s var(--ease-out) both .3s;
}
.onboard-copy p {
  margin-top: 11px; color: var(--muted); font-size: 15px; line-height: 1.5; font-weight: 500;
  animation: riseIn .6s var(--ease-out) both .38s;
}

.slide-track {
  height: 66px; border-radius: 999px;
  background: linear-gradient(180deg, #E9F5FA, #DEEFF7);
  position: relative; overflow: hidden; user-select: none; touch-action: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 2px rgba(60,110,140,.06);
  animation: riseIn .6s var(--ease-out) both .46s;
}
.slide-track::before {
  content: var(--slide-hint, 'Kaydır');
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 13px; font-weight: 700; color: #93B6C8; letter-spacing: .02em;
  padding-left: 60px; pointer-events: none;
}
.slide-chevrons {
  position: absolute; right: 24px; top: 50%; transform: translateY(-50%);
  color: #A9C5D4; font-weight: 800; letter-spacing: 3px; font-size: 15px;
  animation: chevronPulse 1.5s ease-in-out infinite;
}
@keyframes chevronPulse {
  0%, 100% { opacity: .4; transform: translateY(-50%) translateX(0); }
  50% { opacity: 1; transform: translateY(-50%) translateX(5px); }
}
.slide-knob {
  position: absolute; left: 4px; top: 4px; height: 58px; min-width: 138px;
  padding: 0 20px; border-radius: 999px;
  background: linear-gradient(160deg, #24262E, var(--black));
  color: #fff; z-index: 2;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-weight: 700; font-size: 14px; cursor: grab; white-space: nowrap;
  box-shadow: 0 10px 26px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.12);
  transition: box-shadow .2s var(--ease);
}
.slide-knob:active { cursor: grabbing; box-shadow: 0 6px 18px rgba(0,0,0,.3); }
.slide-knob.done {
  background: linear-gradient(160deg, #2EDC86, var(--success));
  transition: left .4s var(--ease-out), background .3s var(--ease);
}

/* ===== Auth ===== */
.auth-box { padding: 30px 20px 48px; max-width: 400px; margin: 0 auto; }
.auth-logo {
  height: 60px; width: auto; object-fit: contain; margin: 0 auto 14px; display: block;
  animation: riseIn .55s var(--ease-out) both;
}

.social-row { display: grid; gap: 10px; margin: 16px 0 4px; }
.btn-social {
  width: 100%; border-radius: var(--r-sm); padding: 15px 16px;
  font-weight: 700; font-size: 14px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  cursor: pointer; border: 1.5px solid var(--line-strong);
  background: var(--surface); color: var(--ink);
  transition: transform .2s var(--spring), box-shadow .24s var(--ease), background .24s;
  box-shadow: var(--sh-1);
}
.btn-social:active { transform: scale(.975); box-shadow: none; }
.btn-social.facebook {
  background: #1877F2; border-color: #1877F2; color: #fff;
  box-shadow: 0 8px 20px rgba(24,119,242,.26);
}
.btn-social.facebook:active { background: #1568D8; }

.auth-divider {
  display: flex; align-items: center; gap: 12px;
  color: var(--muted-2); font-size: 11px; font-weight: 700;
  margin: 16px 0 4px; text-transform: lowercase;
}
.auth-divider::before, .auth-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--line-strong);
}

/* ===== Password strength meter ===== */
.pw-meter { margin: 4px 0 2px; }
.pw-bar {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px;
}
.pw-bar i {
  height: 6px; border-radius: 99px; background: var(--line-strong);
  position: relative; overflow: hidden;
  transition: background .4s var(--ease), box-shadow .4s var(--ease);
}
/* filled segments per level */
.pw-meter[data-lv="1"] .pw-bar i:nth-child(-n+1),
.pw-meter[data-lv="2"] .pw-bar i:nth-child(-n+2),
.pw-meter[data-lv="3"] .pw-bar i:nth-child(-n+3),
.pw-meter[data-lv="4"] .pw-bar i:nth-child(-n+4) {
  animation: segPop .38s var(--spring);
}
@keyframes segPop {
  0% { transform: scaleX(.4); opacity: .5; }
  60% { transform: scaleX(1.04); }
  100% { transform: scaleX(1); opacity: 1; }
}
.pw-meter[data-lv="1"] .pw-bar i:nth-child(-n+1) { background: linear-gradient(90deg,#FF6B85,var(--danger)); box-shadow: 0 2px 8px rgba(255,77,106,.34); }
.pw-meter[data-lv="2"] .pw-bar i:nth-child(-n+2) { background: linear-gradient(90deg,#FFC259,var(--amber)); box-shadow: 0 2px 8px rgba(245,165,36,.34); }
.pw-meter[data-lv="3"] .pw-bar i:nth-child(-n+3) { background: linear-gradient(90deg,#5DDCFF,#3BA9F5); box-shadow: 0 2px 8px rgba(59,169,245,.34); }
.pw-meter[data-lv="4"] .pw-bar i:nth-child(-n+4) { background: linear-gradient(90deg,#3BE59B,var(--success)); box-shadow: 0 2px 8px rgba(33,201,122,.34); }

.pw-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 8px; gap: 10px;
}
.pw-label { font-size: 11.5px; font-weight: 700; color: var(--muted); transition: color .3s var(--ease); }
.pw-meter[data-lv="1"] .pw-label { color: var(--danger); }
.pw-meter[data-lv="2"] .pw-label { color: var(--amber); }
.pw-meter[data-lv="3"] .pw-label { color: #3BA9F5; }
.pw-meter[data-lv="4"] .pw-label { color: var(--success); }
.pw-score {
  font-family: var(--font-num); font-size: 11px; font-weight: 700;
  color: var(--muted-2); letter-spacing: -.01em;
}

.pw-reqs {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px;
}
.pw-reqs span {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 700; padding: 5px 9px 5px 6px;
  border-radius: 999px; background: var(--surface-2);
  color: var(--muted-2); border: 1px solid var(--line);
  transition: all .3s var(--ease);
}
.pw-reqs span::before {
  content: ''; width: 13px; height: 13px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px solid var(--line-strong);
  background-repeat: no-repeat; background-position: center; background-size: 9px;
  transition: all .3s var(--spring);
}
.pw-reqs span.ok {
  color: var(--success); background: rgba(33,201,122,.10); border-color: rgba(33,201,122,.28);
}
.pw-reqs span.ok::before {
  border-color: var(--success); background-color: var(--success);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  transform: scale(1.1);
}

/* ===== Register progress ===== */
.reg-progress {
  height: 5px; border-radius: 99px; background: var(--bg-deep);
  overflow: hidden; margin-bottom: 18px;
}
.reg-progress i {
  display: block; height: 100%; width: 11%; border-radius: 99px;
  background: linear-gradient(90deg, var(--violet), var(--black));
  transition: width .5s var(--ease-out);
}

/* ===== Screen transitions — soft motion blur ===== */
.screen { will-change: opacity, transform, filter; }
.screen.active { animation: screenBlurIn .46s var(--ease-out); }
@keyframes screenBlurIn {
  from { opacity: 0; filter: blur(12px); transform: translateY(14px) scale(.988); }
  to { opacity: 1; filter: blur(0); transform: none; }
}
.screen.leaving {
  display: block !important;
  position: absolute; left: 18px; right: 18px; top: calc(14px + var(--safe-top));
  animation: screenBlurOut .34s var(--ease-out) forwards;
  pointer-events: none; z-index: 2;
}
@keyframes screenBlurOut {
  to { opacity: 0; filter: blur(10px); transform: translateY(-10px) scale(1.012); }
}
/* leaving screens must not re-run the child stagger */
.screen.leaving > * { animation: none !important; }

/* ===== Activity (premium map Walk) ===== */
.walk-stage {
  position: relative;
  height: min(72vh, 640px);
  min-height: 480px;
  border-radius: 28px;
  overflow: hidden;
  background: #0B0D12;
  box-shadow: 0 24px 60px rgba(0,0,0,.28);
  margin-bottom: 18px;
}
.walk-stage canvas#actCanvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%; display: block;
}
.walk-topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; align-items: center; gap: 10px;
  padding: 14px 14px 0;
}
.walk-brand {
  flex: 1; color: #fff; min-width: 0;
}
.walk-brand strong {
  display: block; font-size: 16px; font-weight: 800; letter-spacing: -.02em;
  text-shadow: 0 2px 12px rgba(0,0,0,.45);
}
.walk-brand span {
  display: block; font-size: 11px; font-weight: 600;
  color: rgba(255,255,255,.62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.walk-icon-btn {
  width: 42px; height: 42px; border-radius: 50%; border: 0;
  background: rgba(18,20,28,.55); color: #fff;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.walk-icon-btn .material-symbols-outlined { font-size: 22px; }
.walk-live-glass {
  position: absolute; left: 14px; right: 14px; top: 68px; z-index: 4;
  padding: 14px 16px; border-radius: 22px;
  background: rgba(12,14,20,.42);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  color: #fff;
  box-shadow: 0 16px 40px rgba(0,0,0,.22);
}
.walk-clock {
  font-family: var(--font-num);
  font-size: 48px; font-weight: 700; letter-spacing: -.05em;
  line-height: 1; text-align: center; margin-bottom: 10px;
  font-variant-numeric: tabular-nums;
}
.walk-metrics {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center;
}
.walk-metrics strong {
  display: block; font-family: var(--font-num); font-size: 20px; font-weight: 700;
  letter-spacing: -.03em;
}
.walk-metrics .accent { color: #FF8A3D; }
.walk-metrics span {
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: rgba(255,255,255,.55);
}
.walk-dock {
  position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 5;
  padding: 12px; border-radius: 24px;
  background: rgba(12,14,20,.58);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  transition: opacity .25s ease, transform .25s ease;
}
.walk-dock.dimmed { opacity: .25; pointer-events: none; transform: translateY(8px); }
.walk-round {
  display: flex; gap: 8px; align-items: center;
  color: rgba(255,255,255,.72); font-size: 12px; font-weight: 700;
  margin: 8px 0 10px;
}
.walk-ctrl-row { display: flex; gap: 10px; align-items: center; }
.walk-ctrl-row .btn-pause { flex: 1; margin: 0; height: 54px; }
.walk-stop {
  width: 54px; height: 54px; border-radius: 50%; border: 0;
  background: rgba(255,255,255,.12); color: #fff;
  display: grid; place-items: center; cursor: pointer;
}
.walk-history-wrap { padding: 0 2px 20px; }

/* Story panel ON map */
.walk-story-panel {
  position: absolute; inset: 0; z-index: 8;
  display: flex; flex-direction: column;
  background: rgba(6,8,12,.72);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding: 56px 16px 16px;
}
.walk-story-panel[hidden] { display: none !important; }
.walk-story-frame {
  position: relative; flex: 1; min-height: 0;
  border-radius: 28px; overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
  border: 1px solid rgba(255,255,255,.14);
  background: #0B0D12;
}
.walk-story-frame canvas {
  width: 100%; height: 100%; display: block; object-fit: cover;
}
.walk-story-shine {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(125deg, rgba(255,255,255,.12), transparent 34%, transparent 70%, rgba(252,76,2,.08));
}
.walk-story-actions {
  display: grid; gap: 8px; margin-top: 12px;
}
#walkZones.zone-pills button {
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.85);
  border-color: rgba(255,255,255,.12);
}
#walkZones.zone-pills button.on {
  background: #FC4C02; color: #fff; border-color: #FC4C02;
}

.strava-wrap { padding-bottom: 8px; }
.strava-map {
  height: 268px; border-radius: var(--r-xl); overflow: hidden;
  background: #1C1C1E; position: relative;
  box-shadow: 0 18px 44px rgba(0,0,0,.22);
}
.strava-map canvas { width: 100%; height: 100%; display: block; }
.strava-map .overlay-grad {
  position: absolute; inset: auto 0 0 0; height: 42%;
  background: linear-gradient(to top, rgba(0,0,0,.6), transparent);
  pointer-events: none;
}
.strava-timer {
  font-family: var(--font-num);
  font-size: 60px; font-weight: 700; letter-spacing: -.055em; text-align: center;
  font-variant-numeric: tabular-nums; margin: 20px 0 10px; line-height: 1;
}
.strava-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  text-align: center; margin-bottom: 16px;
}
.strava-stats > div {
  padding: 12px 6px; border-radius: var(--r-md); background: var(--surface);
  box-shadow: var(--sh-1); border: 1px solid rgba(255,255,255,.9);
}
.strava-stats strong {
  display: block; font-size: 22px; font-weight: 700; letter-spacing: -.035em;
  font-family: var(--font-num);
}
.strava-stats span { font-size: 10.5px; color: var(--muted); font-weight: 700; }
.strava-stats .accent { color: var(--orange); }

.btn-pause {
  width: 100%; height: 60px; border: 0; border-radius: 999px;
  background: var(--cta); color: var(--on-cta);
  font-size: 16px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; font-family: inherit;
  box-shadow: 0 14px 32px rgba(18,19,23,.26);
  transition: transform .22s var(--spring), background .3s var(--ease), box-shadow .3s var(--ease);
}
.btn-pause:active { transform: scale(.97); }
.btn-pause.running {
  background: linear-gradient(160deg, #FF6A24, var(--orange));
  color: #fff;
  box-shadow: 0 14px 32px rgba(252,76,2,.34);
}
.zone-pills button.on {
  background: var(--orange); color: #fff; border-color: var(--orange);
  box-shadow: 0 6px 16px rgba(252,76,2,.28);
}