/* ============================================================
   SLIDE 1: METRICS (whiteboard)
   ============================================================ */
.slide-metrics { background: #0c2a63; padding: 0; }

.board {
  position: absolute; inset: 22px;
  border-radius: 10px;
  /* oak frame */
  background:
    linear-gradient(135deg, #d4a86c 0%, #b88646 35%, #c99a5c 60%, #a8763a 100%);
  padding: 26px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55), inset 0 0 0 3px rgba(255, 255, 255, 0.18);
}
.board-face {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 4px;
  background:
    radial-gradient(ellipse 260px 380px at 34% 62%, rgba(255, 255, 255, 0.85), transparent 70%),
    radial-gradient(ellipse 170px 260px at 62% 38%, rgba(255, 255, 255, 0.55), transparent 70%),
    linear-gradient(180deg, #f6f7f5 0%, #eceeeb 100%);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.15), inset 0 2px 0 #fff;
  font-family: 'Marker', 'Segoe Print', cursive;
  color: var(--marker);
  display: grid;
  grid-template-columns: 1fr 760px;
  grid-template-rows: 396px 1fr 218px;
  padding: 30px 56px 22px 70px;
  overflow: hidden;
}

.m-headline {
  grid-column: 1; grid-row: 1;
  line-height: 1.18;
  max-width: 940px;
  transform: rotate(-1.2deg);
  text-wrap: balance;
  padding-top: 12px;
}

.m-stats { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 0; padding-left: 70px; }
.m-stat { display: flex; align-items: baseline; gap: 28px; line-height: 1.04; font-size: 118px; white-space: nowrap; transform: rotate(-0.8deg); }
.m-stat .k { font-size: 112px; }
.m-stat .v { min-width: 160px; }

/* current-month progress ring (the one thing added beyond the whiteboard) */
.m-center { grid-column: 1 / span 2; grid-row: 2; display: flex; align-items: center; justify-content: center; gap: 60px; min-height: 0; }
.m-ring { position: relative; width: 300px; height: 300px; flex: none; }
.m-ring svg { width: 100%; height: 100%; display: block; }
.ring-bg { stroke: rgba(75, 42, 150, 0.2); }
.ring-fg { stroke: var(--marker); transition: stroke-dashoffset 1.4s cubic-bezier(.2, .8, .2, 1); }
.m-center.reached .ring-fg { stroke: var(--good); }
.ring-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.ring-month { font-size: 34px; letter-spacing: 0.08em; opacity: 0.75; }
.ring-count { font-size: 104px; margin-top: 6px; }
.ring-of { font-size: 34px; opacity: 0.75; margin-top: 4px; }
.ring-note { font-size: 64px; color: var(--marker); max-width: 760px; line-height: 1.1; transform: rotate(-1deg); }
.m-center.reached .ring-note { color: var(--good); }

.m-months { grid-column: 1 / span 2; grid-row: 3; display: grid; grid-template-columns: repeat(12, 1fr); align-items: end; gap: 6px; padding-top: 6px; }
.m-month { position: relative; text-align: center; padding: 14px 0 12px; line-height: 1; }
.m-month .lbl { font-size: 50px; letter-spacing: 0.02em; }
.m-month .val { font-size: 78px; margin-top: 10px; min-height: 80px; }
.m-month.future .lbl { opacity: 0.55; }
.m-month.hit .val { color: var(--good); }
.m-month.hit .val::after { content: ''; display: block; height: 6px; margin: 8px 18% 0; border-radius: 6px; background: var(--good); opacity: 0.6; transform: rotate(-1.5deg); }
.m-month.current::before {
  content: ''; position: absolute; inset: -4px -2px -2px;
  border: 7px solid #d62839;
  border-radius: 52% 46% 54% 48% / 48% 54% 46% 52%;
  transform: rotate(-1.4deg);
  pointer-events: none;
}

.m-updated { position: absolute; right: 56px; bottom: 6px; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 22px; color: rgba(16, 24, 40, 0.5); }

.pop { animation: pop 1.3s ease; }
@keyframes pop {
  0% { transform: scale(1); }
  18% { transform: scale(1.22); color: #d62839; }
  100% { transform: scale(1); }
}

/* ============================================================
   SLIDE 2: WEATHER
   ============================================================ */
.slide-weather { color: #fff; font-family: 'Inter', sans-serif; background: #1d4f91; }
.slide-weather.wx-clear-day { background: linear-gradient(160deg, #1b6fd1 0%, #4aa3f0 55%, #8fc8f7 100%); }
.slide-weather.wx-clear-night { background: linear-gradient(160deg, #0b1440 0%, #1a2a6c 60%, #2b3f8f 100%); }
.slide-weather.wx-cloud { background: linear-gradient(160deg, #46586e 0%, #6c7f96 60%, #93a4b8 100%); }
.slide-weather.wx-rain { background: linear-gradient(160deg, #2b3c52 0%, #43607f 60%, #5b7a9a 100%); }
.slide-weather.wx-storm { background: linear-gradient(160deg, #1a1f33 0%, #3a3f5c 60%, #565a78 100%); }
.slide-weather.wx-snow { background: linear-gradient(160deg, #6f89a8 0%, #a5bad0 60%, #d4e0ec 100%); }
.slide-weather.wx-fog { background: linear-gradient(160deg, #56626f 0%, #80909f 60%, #aab6c1 100%); }

.wx-alerts { position: absolute; left: 0; right: 0; top: 0; z-index: 3; }
.wx-alert { display: flex; align-items: center; gap: 24px; padding: 16px 60px; background: #b71c1c; font-size: 38px; font-weight: 800; letter-spacing: 0.01em; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); }
.wx-alert.minor { background: #b26a00; }
.wx-alert .tag { background: #fff; color: #b71c1c; padding: 2px 14px; border-radius: 8px; font-size: 28px; }
.wx-alert.minor .tag { color: #b26a00; }
.wx-alert .what { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.wx-main { position: absolute; inset: 0; padding: 48px 64px 40px; display: grid; grid-template-columns: 1fr 640px; grid-template-rows: 1fr 260px; gap: 28px 56px; }
.wx-has-alert .wx-main { padding-top: 120px; }
.wx-now { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; justify-content: center; min-height: 0; }
.wx-place { font-size: 48px; font-weight: 800; letter-spacing: 0.02em; opacity: 0.95; }
.wx-sub { font-size: 30px; font-weight: 600; opacity: 0.75; margin-top: 4px; }
.wx-hero { display: flex; align-items: center; gap: 36px; margin-top: 6px; }
.wx-hero .wx-icon { width: 330px; height: 330px; flex: none; filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.3)); }
.wx-temp { font-size: 300px; font-weight: 800; line-height: 0.95; letter-spacing: -0.04em; }
.wx-temp sup { font-size: 140px; vertical-align: top; position: relative; top: 26px; letter-spacing: 0; font-weight: 600; }
.wx-cond { font-size: 66px; font-weight: 800; margin-top: 4px; }
.wx-facts { display: flex; gap: 22px; margin-top: 26px; }
.wx-fact { background: rgba(255, 255, 255, 0.16); border-radius: 18px; padding: 16px 28px; min-width: 200px; backdrop-filter: blur(4px); }
.wx-fact b { display: block; font-size: 28px; font-weight: 600; opacity: 0.8; }
.wx-fact span { font-size: 50px; font-weight: 800; }

.wx-days { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.wx-day { display: grid; grid-template-columns: 170px 96px 1fr 120px; align-items: center; gap: 12px; background: rgba(255, 255, 255, 0.15); border-radius: 20px; padding: 10px 26px; height: 112px; }
.wx-day .dn { font-size: 40px; font-weight: 800; }
.wx-day .wx-icon { width: 84px; height: 84px; }
.wx-day .tt { font-size: 46px; font-weight: 800; text-align: right; }
.wx-day .tt i { font-style: normal; font-weight: 600; opacity: 0.65; margin-left: 12px; }
.wx-day .pp { font-size: 30px; font-weight: 600; opacity: 0.85; text-align: right; }

.wx-hours { grid-column: 1 / span 2; grid-row: 2; display: grid; grid-template-columns: repeat(8, 1fr); gap: 14px; }
.wx-hour { background: rgba(255, 255, 255, 0.14); border-radius: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.wx-hour .ht { font-size: 30px; font-weight: 600; opacity: 0.85; }
.wx-hour .wx-icon { width: 84px; height: 84px; }
.wx-hour .hv { font-size: 54px; font-weight: 800; line-height: 1; }
.wx-hour .hp { font-size: 26px; font-weight: 600; opacity: 0.8; height: 30px; }
.wx-stale { position: absolute; right: 64px; top: 52px; font-size: 26px; font-weight: 600; opacity: 0.8; }
.wx-has-alert .wx-stale { top: 128px; }
.wx-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; font-size: 56px; font-weight: 800; }
.wx-empty small { font-size: 36px; font-weight: 600; opacity: 0.8; }

/* ============================================================
   SLIDE 3: PHOTOS
   ============================================================ */
.slide-photos { background: #05122e; }
.ph-layer { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; }
.ph-layer.on { opacity: 1; }
.ph-layer .bg { position: absolute; inset: -60px; width: calc(100% + 120px); height: calc(100% + 120px); object-fit: cover; filter: blur(46px) brightness(0.55) saturate(1.1); }
.ph-layer .fg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; animation: kenburns var(--dur, 9s) ease-in-out forwards; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.045); } }
.ph-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 70px 80px 34px; background: linear-gradient(to top, rgba(0, 0, 0, 0.72), transparent); color: #fff; font-size: 54px; font-weight: 800; text-align: center; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6); opacity: 0; transition: opacity 0.8s ease; }
.ph-caption.on { opacity: 1; }

.ph-welcome { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #fff; background: radial-gradient(ellipse at 50% 40%, #124db0 0%, #0a2a66 55%, #061d49 100%); gap: 34px; }
.ph-welcome img { width: 820px; border-radius: 16px; box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45); }
.ph-welcome h1 { font-size: 92px; font-weight: 800; letter-spacing: -0.01em; }
.ph-welcome p { font-size: 46px; font-weight: 600; opacity: 0.85; letter-spacing: 0.04em; }

/* ============================================================
   SLIDE 4: FLASHCARDS
   ============================================================ */
.slide-quiz {
  background: radial-gradient(ellipse at 50% 30%, #1253b8 0%, #0a2f73 55%, #061d49 100%);
  font-family: 'Inter', sans-serif; color: #fff;
}
.qz-title { position: absolute; top: 44px; left: 0; right: 0; text-align: center; font-size: 44px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.9; }
.qz-dots { position: absolute; top: 112px; left: 0; right: 0; display: flex; justify-content: center; gap: 14px; }
.qz-dots i { width: 16px; height: 16px; border-radius: 50%; background: rgba(255, 255, 255, 0.28); transition: background 0.4s, transform 0.4s; }
.qz-dots i.on { background: #fff; transform: scale(1.3); }

.qz-stage { position: absolute; left: 190px; top: 160px; width: 1540px; height: 690px; perspective: 2200px; }
.qz-card { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 0.9s cubic-bezier(.45, .05, .25, 1); }
.qz-card.flipped { transform: rotateY(180deg); }
.qz-card.enter { animation: cardIn 0.7s cubic-bezier(.2, .8, .2, 1); }
@keyframes cardIn { from { opacity: 0; transform: translateY(46px) scale(0.97); } to { opacity: 1; transform: none; } }
.qz-card.flipped.enter { animation: none; }

.qz-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 36px; padding: 46px 64px 40px; display: flex; flex-direction: column; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); }
.qz-front { background: #fff; color: var(--ink); }
.qz-back { background: linear-gradient(160deg, #fff7e0, #ffe9a8); color: #2b2100; transform: rotateY(180deg); }
.qz-top { display: flex; align-items: center; justify-content: space-between; height: 96px; flex: none; }
.qz-chip { font-size: 36px; font-weight: 800; letter-spacing: 0.1em; padding: 10px 28px; border-radius: 999px; color: #fff; background: #0a3f99; }
.qz-chip.AUTO { background: #0a3f99; }
.qz-chip.HOME { background: #15803d; }
.qz-chip.LIFE { background: #7a2cc4; }
.qz-chip.RETIREMENT { background: #c2570a; }
.qz-chip.GENERAL { background: #475467; }
.qz-label { font-size: 36px; font-weight: 800; letter-spacing: 0.14em; opacity: 0.5; }
.qz-text { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; font-weight: 800; line-height: 1.16; letter-spacing: -0.01em; padding: 0 10px; text-wrap: balance; }
.qz-back .qz-text { font-weight: 600; }

.qz-ring { position: relative; width: 96px; height: 96px; }
.qz-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.qz-ring circle { fill: none; stroke-width: 11; }
.qz-ring .bg { stroke: rgba(0, 0, 0, 0.12); }
.qz-ring .fg { stroke: #0a3f99; stroke-linecap: round; stroke-dasharray: 264; stroke-dashoffset: 0; }
.qz-back .qz-ring .fg { stroke: #b45309; }
.qz-ring .fg.run { animation: ringDown var(--secs, 10s) linear forwards; }
@keyframes ringDown { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 264; } }
.qz-ring b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 38px; font-weight: 800; }

.qz-foot { position: absolute; left: 0; right: 0; bottom: 38px; text-align: center; font-size: 26px; font-weight: 600; opacity: 0.6; letter-spacing: 0.02em; }