/* TrueToValues product reel - a looping HTML/CSS walkthrough in place of a screenshot.
   Adapted from the how-it-works drawings on the TrueToValues homepage (four scenes: clarify, expose,
   take action, stay aligned). Driven by /js/product-reel.js; without JS the first scene shows finished.
   Every text line in the drawings is a neutral bar, as in the product's own explainer.
   No inline styles anywhere: the site CSP only allows style-src 'self'. */

.reel{
  --s:1.2;
  --reel-ink:#2d4242;
  --reel-soft:#bad5d1;
  --reel-tint:#ddeae7;
  --reel-line:#d3e1de;
  --reel-stage:#f3f8f6;
  --reel-brand:#256b63;
  --reel-brand-dark:#1f665e;
  --reel-mint:#90b8b3;
  width:100%;
  max-width:460px;
  margin:0;
}
@media (min-width:520px){ .reel{ --s:1.5 } }

.reel__window{
  position:relative;
  padding:42px 20px 20px;
  border-radius:var(--radius-lg);
  background:var(--surface-card);
  box-shadow:var(--shadow-modal);
}
/* The window bar: three dots, as on the guide's own cards. */
.reel__window::before{
  content:"";
  position:absolute;
  top:15px;left:18px;
  width:8px;height:8px;
  border-radius:50%;
  background:var(--line-dashed);
  box-shadow:14px 0 var(--line-dashed),28px 0 var(--line-dashed);
}

/* ---------- Captions ---------- */
.reel__caps{display:grid;margin-bottom:16px}
.reel__cap{
  grid-area:1/1;
  opacity:0;visibility:hidden;
  transform:translateY(6px);
  transition:opacity .4s ease,transform .4s ease,visibility 0s .4s;
}
.reel__cap.is-current{opacity:1;visibility:visible;transform:none;transition-delay:.1s,.1s,0s}
.reel__eyebrow{
  margin:0 0 6px;
  font-size:13px;line-height:1.3;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--reel-brand);
}
.reel__title{
  margin:0;
  font-family:var(--font-display);font-weight:600;
  font-size:20px;line-height:1.25;
  color:var(--ink);
  min-height:2.5em; /* two lines, so the stage never jumps */
}

/* ---------- Stage ---------- */
.reel__stage{
  position:relative;
  height:calc(160px * var(--s) + 24px);
  border-radius:var(--radius-md);
  background:var(--reel-stage);
  overflow:hidden;
}
.reel__frame{
  position:absolute;
  top:12px;left:50%;
  width:200px;height:160px;
  margin-left:-100px;
  transform:scale(var(--s));
  transform-origin:top center;
}
.reel .scene{
  position:absolute;inset:0;
  opacity:0;
  transition:opacity .45s ease;
  pointer-events:none;
}
.reel .scene.is-current{opacity:1}
.reel .in{
  position:absolute;inset:0;
  display:flex;flex-direction:column;justify-content:center;
  padding:0 8px;
}

/* Neutral bars stand in for text. */
.reel .b{display:block;flex:none;height:8px;border-radius:999px;background:var(--reel-ink)}
.reel .b.soft{background:var(--reel-soft)}
.reel .w22{width:22px}.reel .w30{width:30px}.reel .w46{width:46px}.reel .w48{width:48px}
.reel .w52{width:52px}.reel .w54{width:54px}.reel .w56{width:56px}.reel .w58{width:58px}
.reel .w62{width:62px}.reel .w66{width:66px}.reel .w68{width:68px}.reel .w76{width:76px}
.reel .w104{width:104px}.reel .w118{width:118px}

/* ---------- Scene 1: the values ring ---------- */
.reel .ring{position:absolute;inset:0;width:100%;height:100%;transform-origin:50% 50%}
.reel .vr-next{opacity:0}

/* ---------- Scene 2: a short form saving one entry after another ---------- */
.reel .panel{padding:7px;border-radius:8px;background:var(--reel-tint)}
.reel .field{
  display:flex;align-items:center;
  height:15px;padding:0 5px;
  border:1px solid var(--reel-line);border-radius:5px;background:#fff;
}
.reel .field + .field{margin-top:4px}
.reel .s2-btn{width:32px;height:12px;margin:5px 0 0 auto;border-radius:4px;background:var(--reel-brand)}
.reel .saved{
  display:flex;align-items:center;justify-content:space-between;
  height:17px;margin-top:6px;padding:0 7px;
  border-radius:6px;background:var(--reel-tint);
}
.reel .s2-fill{height:7px;opacity:0}
.reel .s2 .saved .b{height:7px}
.reel .marks{display:flex;align-items:center;gap:7px}
.reel .pen{width:2px;height:9px;border-radius:1px;background:rgba(45,66,66,.45);transform:rotate(45deg)}
.reel .bin{width:7px;height:8px;border:1.5px solid rgba(45,66,66,.45);border-radius:1px 1px 2px 2px}

/* The pointer: a point at the arrow's tip, placed in frame pixels. */
.reel .ptr{position:absolute;z-index:2;width:0;height:0;top:66px;left:167px}
.reel .ptr svg{
  position:absolute;top:-1px;left:-1px;
  width:11px;height:16.5px;max-width:none;overflow:visible; /* the wrapper is 0 wide; site.css caps svg at 100% */
  fill:#fff;stroke:var(--reel-ink);stroke-width:1px;stroke-linejoin:round;
  transform-origin:1px 1px;
}
.reel .ptr::before{
  content:"";position:absolute;z-index:-1;
  top:-6px;left:-6px;width:12px;height:12px;
  border:1px solid var(--reel-mint);border-radius:50%;
  opacity:0;
}

/* ---------- Scene 3: four entries joining into one line ---------- */
.reel .s3{gap:10px}
.reel .s3 .form{display:flex;flex-direction:column;gap:4px}
.reel .s3-row{display:flex;align-items:center;gap:6px}
.reel .s3-row .b{height:6px}
.reel .s3-input{
  display:flex;flex:1;align-items:center;
  height:16px;padding:0 5px;overflow:hidden;
  border:1px solid var(--reel-line);border-radius:5px;background:#fff;
}
.reel .s3-fill{transform-origin:left center}
.reel .s3-result{display:flex;align-items:center;height:36px;padding:6px 8px;border-radius:9px;background:var(--reel-tint)}
.reel .s3-line{display:flex;align-items:center;gap:3px}
.reel .s3-seg{height:7px}

/* ---------- Scene 4: a reminder date and the rhythm it repeats on ---------- */
.reel .s4{flex-direction:row;align-items:center;justify-content:center;gap:10px}
.reel .cal{flex:none;width:128px;padding:8px;border:1px solid var(--reel-line);border-radius:10px;background:#fff}
.reel .cal-head{display:flex;justify-content:center;margin-bottom:8px}
.reel .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:12px;row-gap:4px;place-items:center}
.reel .day{width:5px;height:5px;border-radius:50%;background:var(--reel-soft)}
.reel .day-sel{display:flex;align-items:center;justify-content:center;width:12px;height:12px;border-radius:4px;background:var(--reel-brand)}
.reel .day-sel span{width:5px;height:5px;border-radius:50%;background:#fff}
.reel .repeat{flex:none;color:var(--reel-brand);line-height:0}

/* ---------- Progress and controls ---------- */
.reel__nav{display:none;align-items:center;gap:8px;margin-top:6px}
.reel--js .reel__nav{display:flex}
.reel__step{
  flex:1;
  display:flex;align-items:center;
  height:44px;padding:0;
  border:0;background:none;cursor:pointer;
}
.reel__track{display:block;position:relative;width:100%;height:4px;border-radius:999px;background:rgba(30,42,74,.14);overflow:hidden}
.reel__fill{position:absolute;inset:0;border-radius:inherit;background:var(--reel-brand);transform:scaleX(0);transform-origin:left center}
.reel__step.is-done .reel__fill{transform:scaleX(1)}
.reel--static .reel__step.is-current .reel__fill{transform:scaleX(1)}
.reel__step:focus-visible,.reel__pause:focus-visible{outline:3px solid var(--primary);outline-offset:2px;border-radius:8px}
.reel__pause{
  flex:none;
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;padding:0;
  border:0;border-radius:var(--radius-pill);
  background:rgba(255,255,255,.7);color:var(--ink);cursor:pointer;
}
.reel__pause:hover{background:#fff}
.reel__pause svg{width:18px;height:18px}
.reel__pause .i-play{display:none}
.reel.is-paused .reel__pause .i-play{display:block}
.reel.is-paused .reel__pause .i-pause{display:none}
.reel--static .reel__pause{display:none}

/* ---------- Motion: starting states and runs ----------
   Only a scene that is playing (.is-play) leaves its finished state. Dropping .is-play resets it. */
.reel .scene.is-play .vr-next{opacity:0}
.reel .scene.is-play .ring{animation:reel-pop .7s ease-out both}
.reel .scene.is-play .slot .vr-cur{animation:reel-out .7s ease-in-out both}
.reel .scene.is-play .slot .vr-next{animation:reel-in .7s ease-in-out both}
.reel .scene.is-play .slot:nth-of-type(1) :is(.vr-cur,.vr-next){animation-delay:.6s}
.reel .scene.is-play .slot:nth-of-type(3) :is(.vr-cur,.vr-next){animation-delay:1.2s}
.reel .scene.is-play .slot:nth-of-type(5) :is(.vr-cur,.vr-next){animation-delay:1.8s}
.reel .scene.is-play .slot:nth-of-type(2) :is(.vr-cur,.vr-next){animation-delay:2.4s}
.reel .scene.is-play .slot:nth-of-type(4) :is(.vr-cur,.vr-next){animation-delay:3s}

.reel .scene.is-play .saved{opacity:0;animation:reel-fade 1.4s ease-out both}
.reel .scene.is-play .saved:nth-child(2){animation-delay:.96s}
.reel .scene.is-play .saved:nth-child(3){animation-delay:2.16s}
.reel .scene.is-play .saved:nth-child(4){animation-delay:3.36s}
.reel .scene.is-play .s2-fill{animation:reel-type 1.2s ease-out 3 both}
.reel .scene.is-play .field:nth-child(2) .s2-fill{animation-delay:.09s}
.reel .scene.is-play .ptr{transform:translate(12px,10px);animation:reel-ptr-in .46s ease-in-out .08s both}
.reel .scene.is-play .ptr svg{animation:reel-tap 1.2s ease-out .64s 3 both}
.reel .scene.is-play .ptr::before{animation:reel-ring 1.2s ease-out .64s 3 both}
.reel .scene.is-play .s2-btn{animation:reel-btn 1.2s ease-out .64s 3 both}

.reel .scene.is-play .s3-fill{transform:scaleX(0);animation:reel-grow .9s ease-out both}
.reel .scene.is-play .s3-row:nth-child(2) .s3-fill{animation-delay:1.1s}
.reel .scene.is-play .s3-row:nth-child(3) .s3-fill{animation-delay:2.2s}
.reel .scene.is-play .s3-row:nth-child(4) .s3-fill{animation-delay:3.3s}
.reel .scene.is-play .s3-seg{opacity:0;animation:reel-fade 1.4s ease-out both}
.reel .scene.is-play .s3-seg:nth-child(1){animation-delay:.9s}
.reel .scene.is-play .s3-seg:nth-child(2){animation-delay:2s}
.reel .scene.is-play .s3-seg:nth-child(3){animation-delay:3.1s}
.reel .scene.is-play .s3-seg:nth-child(4){animation-delay:4.2s}

.reel .scene.is-play .day-sel{opacity:0;animation:reel-pop-in 1.6s ease-out .3s both}
.reel .scene.is-play .repeat{animation:reel-spin 2s ease-out 1.5s both}

/* Each progress bar fills over the length of its scene. */
.reel:not(.reel--static) .reel__step.is-current .reel__fill{animation:reel-grow var(--dur,6s) linear both}
.reel__step:nth-child(1){--dur:5.5s}
.reel__step:nth-child(2){--dur:6.5s}
.reel__step:nth-child(3){--dur:7s}
.reel__step:nth-child(4){--dur:5.5s}
.reel.is-halted,.reel.is-halted *,.reel.is-halted *::before,.reel.is-halted *::after{animation-play-state:paused!important}

@keyframes reel-fade{from{opacity:0}to{opacity:1}}
@keyframes reel-pop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
@keyframes reel-pop-in{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
@keyframes reel-out{from{opacity:1}to{opacity:0}}
@keyframes reel-in{from{opacity:0}to{opacity:1}}
@keyframes reel-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes reel-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes reel-type{0%{opacity:0}18%,62%{opacity:1}76%,100%{opacity:0}}
@keyframes reel-ptr-in{from{transform:translate(12px,10px)}to{transform:none}}
@keyframes reel-tap{0%{transform:none}7%,10%{transform:scale(.85)}21%,100%{transform:none}}
@keyframes reel-ring{0%,6%{opacity:0;transform:scale(.3)}9%{opacity:.8;transform:scale(.5)}36%,100%{opacity:0;transform:scale(1)}}
@keyframes reel-btn{0%,5%{background:var(--reel-brand)}8%,13%{background:var(--reel-brand-dark)}21%,100%{background:var(--reel-brand)}}

@media (prefers-reduced-motion:reduce){
  .reel *,.reel *::before,.reel *::after{animation:none!important}
}