/* ============================================================
   churrrn — scene.css
   The sticky illustration: the churning juggle, tidied by scroll.

   HOW IT WORKS
   ------------
   Each .scene carries data-scene="chaos|track|plan|remind|calm".
   On desktop there's one sticky scene and script.js updates its
   state as story steps cross mid-viewport. On mobile the rail is
   hidden and each step instead gets its own inline clone, frozen
   in that step's state (script.js builds the clones).

   Every element (.el) sits at the scene's center and is placed
   with five custom properties — so hand-tweaking a state means
   editing numbers in ONE block below:

     --tx  horizontal offset (px)     --r  rotation
     --ty  vertical offset (px)       --s  scale     --o  opacity

   The scene's internal coordinate space is 560 × 640; script.js
   scales the whole thing to fit its column.
   ============================================================ */

.scene {
  /* centered in the sticky viewport by transform (grid `center`
     falls back to start-alignment in Chromium once the box
     overflows); script.js sets the scale */
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: 560px;
  height: 640px;
}

/* every scene element */
.el {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%)
             translate(var(--tx, 0px), var(--ty, 0px))
             rotate(var(--r, 0deg))
             scale(var(--s, 1));
  opacity: var(--o, 1);
  transition: transform 1.15s var(--ease-butter), opacity .7s ease;
  will-change: transform, opacity;
}

/* idle drift — separate wrapper so it never fights state moves */
.bob {
  display: block;
  font-style: normal;
  animation: bob 6s ease-in-out infinite alternate;
}
@keyframes bob {
  from { transform: translateY(-5px) rotate(-.6deg); }
  to   { transform: translateY(5px)  rotate(.6deg); }
}

/* de-sync the drift */
.card-a .bob { animation-duration: 5.6s; }
.card-b .bob { animation-duration: 6.8s; animation-delay: -2s; }
.card-c .bob { animation-duration: 5s;   animation-delay: -1s; }
.form   .bob { animation-duration: 7.4s; animation-delay: -3s; }
.bar    .bob { animation-duration: 6.2s; animation-delay: -1.5s; }
.bell   .bob { animation-duration: 5.4s; animation-delay: -2.4s; }
.points .bob { animation-duration: 6s;   animation-delay: -.7s; }
.fee    .bob { animation-duration: 7s;   animation-delay: -3.4s; }

/* ------------------------------------------------------------
   ELEMENT LOOKS
   (surfaces live on .bob — the drifting wrapper — so each chip
   floats as a whole, shadow and all)
   ------------------------------------------------------------ */

/* shared glass panel */
.form .bob, .bar .bob, .bell .bob, .points .bob, .fee .bob {
  background: var(--panel);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--hairline);
  border-radius: var(--chip-radius);
  box-shadow: var(--shadow-soft);
}

/* credit cards */
.card {
  width: 168px;
  height: 104px;
}
.card .bob {
  position: relative;
  height: 100%;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 16px;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
/* diagonal sheen */
.card .bob::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,
              transparent 32%,
              rgba(255, 255, 255, .16) 46%,
              transparent 62%);
  pointer-events: none;
}

.card-a .bob { background: linear-gradient(135deg, #38321E, #1D1910); color: #F5EBCE; }
.card-b .bob { background: linear-gradient(135deg, #FFFEF8, #EFE5C9); color: #26200F;
               border: 1px solid var(--hairline); }
.card-c .bob { background: linear-gradient(135deg, #FFCB40, #F3A800); color: #26200F; }

.cc-chip {
  display: block;
  width: 27px;
  height: 20px;
  border-radius: 5px;
  background: linear-gradient(135deg, #F0D48A, #C99F45);
  border: 1px solid rgba(0, 0, 0, .18);
}
.cc-number {
  font-size: 12.5px;
  font-weight: 550;
  letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
  opacity: .85;
}

/* application panel */
.form { width: 152px; }
.form .bob { padding: 14px 16px; }
.form-title {
  display: block;
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: -.01em;
  margin-bottom: 10px;
}
.form-line {
  display: block;
  height: 5px;
  border-radius: 3px;
  background: rgba(128, 112, 64, .18);
  margin-top: 7px;
}
.w60 { width: 60%; } .w70 { width: 70%; } .w80 { width: 80%; }
.form-stamp {
  display: inline-block;
  margin-top: 12px;
  padding: 3px 9px;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .02em;
  color: var(--text-yellow);
  background: rgba(217, 148, 0, .12);
  border-radius: 999px;
}

/* spend progress widget */
.bar { width: 208px; }
.bar .bob { padding: 13px 16px; }
.bar-label {
  display: block;
  font-size: 10px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
}
.bar-amount {
  display: block;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -.01em;
  margin: 3px 0 9px;
  font-variant-numeric: tabular-nums;
}
.bar-amount em { font-style: normal; font-weight: 500; color: var(--muted); font-size: 12px; }
.bar-track {
  display: block;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(128, 112, 64, .15);
}
.bar-fill {
  display: block;
  height: 100%;
  width: var(--fill, 44%);
  border-radius: 999px;
  background: linear-gradient(90deg, #FFC93C, #FFB811);
  transition: width 1.2s var(--ease-butter);
}

/* deadline notification */
.bell { width: 236px; }
.bell .bob {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 14px;
}
.notif-icon {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: radial-gradient(120% 120% at 25% 20%, #FFD86B, #FFB811 60%, #EC9E00);
}
.notif-text {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.35;
}
.notif-text strong {
  display: block;
  font-size: 12.5px;
  font-weight: 650;
  color: var(--ink);
}

/* small pills (solid — they end up layered over cards) */
.points .bob, .fee .bob {
  padding: .55em 1.05em;
  border-radius: 999px;
  background: var(--panel-solid);
}
.points, .fee {
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}
.points { color: var(--text-yellow); }
.fee { color: var(--muted); }

/* butter churn — the story's engine. Pump depth/speed come from
   --pump-d / --pump-t, set per scene state in the choreography. */
.churn { width: 140px; }
.churn svg { display: block; width: 100%; height: auto; overflow: visible; }

.churn .dasher {
  animation: churn-pump var(--pump-t, 3.5s) ease-in-out infinite;
}
@keyframes churn-pump {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(var(--pump-d, 8px)); }
}

/* chaos: caught up in the swirl like everything else */
.scene[data-scene="chaos"] .churn .bob {
  animation: churn-swirl 6.5s ease-in-out infinite alternate;
}
@keyframes churn-swirl {
  from { transform: translateY(-9px) rotate(-6deg); }
  to   { transform: translateY(9px)  rotate(6deg); }
}

/* calm: churning hard and glowing — butter imminent */
.scene[data-scene="calm"] .churn svg {
  animation: churn-glow 1s ease-in-out infinite alternate;
}
@keyframes churn-glow {
  from { filter: drop-shadow(0 0 12px rgba(255, 184, 17, .4)); }
  to   { filter: drop-shadow(0 0 32px rgba(255, 184, 17, .85)); }
}
.scene[data-scene="calm"] .churn .bob {
  animation: churn-jiggle .36s linear infinite;
}
@keyframes churn-jiggle {
  0%, 100% { transform: rotate(-1.1deg); }
  50%      { transform: rotate(1.1deg); }
}

/* phone frame (the app, approximately) */
.phone {
  width: 292px;
  height: 540px;
  background: var(--panel-solid);
  border: 8px solid #26200F;
  border-radius: 46px;
  box-shadow: var(--shadow-lift);
  --o: 0;
  --s: .88;
  --ty: 26px;
}
.phone-notch {
  width: 76px;
  height: 19px;
  margin: 12px auto 0;
  background: #26200F;
  border-radius: 999px;
}
.phone-title {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 12px 24px 0;
}

/* a soft glow settles in when everything is under control */
.scene[data-scene="calm"] .phone {
  box-shadow: var(--shadow-lift), 0 0 90px rgba(255, 184, 17, .28);
}

/* the notification rings while reminding — gently */
.scene[data-scene="remind"] .bell .bob {
  animation: ring 1.4s ease-in-out infinite;
}
@keyframes ring {
  0%, 100% { transform: rotate(-1.2deg); }
  50%      { transform: rotate(1.2deg); }
}

/* ============================================================
   CHOREOGRAPHY — one block per scene state.
   These numbers are the whole show; tweak away.
   ============================================================ */

/* ---------- chaos: the churning juggle ---------- */
.scene[data-scene="chaos"] .card-a { --tx: -15px;  --ty: -15px;  --r: -7deg; --s: 1.12; }
.scene[data-scene="chaos"] .card-b { --tx: -195px; --ty: -175px; --r: 6deg; }
.scene[data-scene="chaos"] .card-c { --tx: 185px;  --ty: -135px; --r: -9deg; }
.scene[data-scene="chaos"] .form   { --tx: 185px;  --ty: 125px;  --r: 5deg; }
.scene[data-scene="chaos"] .bar    { --tx: -15px;  --ty: -245px; --r: -2deg; }
.scene[data-scene="chaos"] .bell   { --tx: -200px; --ty: 80px;   --r: -4deg; }
.scene[data-scene="chaos"] .points { --tx: 155px;  --ty: 20px;   --r: 3deg; }
.scene[data-scene="chaos"] .fee    { --tx: 45px;   --ty: 232px;  --r: -2deg; }
.scene[data-scene="chaos"] .churn  { --tx: -150px; --ty: 195px;  --r: -5deg;
                                     --pump-d: 6px;  --pump-t: 4.2s; }

/* ---------- track: cards fall into a tidy list ---------- */
.scene[data-scene="track"] .card-a { --tx: -70px;  --ty: -160px; --s: 1.05; }
.scene[data-scene="track"] .card-b { --tx: -70px;  --ty: -40px;  --s: 1.05; }
.scene[data-scene="track"] .card-c { --tx: -70px;  --ty: 80px;   --s: 1.05; }
.scene[data-scene="track"] .points { --tx: 100px;  --ty: -160px; --s: .9; }
.scene[data-scene="track"] .form   { --tx: 245px;  --ty: -200px; --r: -10deg; --o: .15; }
.scene[data-scene="track"] .bar    { --tx: -245px; --ty: 235px;  --o: .15; }
.scene[data-scene="track"] .bell   { --tx: 255px;  --ty: -20px;  --o: .15; }
.scene[data-scene="track"] .fee    { --tx: -245px; --ty: -245px; --o: .12; }
.scene[data-scene="track"] .churn  { --tx: 150px;  --ty: 140px;
                                     --pump-d: 10px; --pump-t: 2.6s; }

/* ---------- plan: the spend widget takes the stage ---------- */
.scene[data-scene="plan"] .bar    { --tx: 0px;    --ty: -100px; --s: 1.35; --fill: 88%; }
.scene[data-scene="plan"] .card-a { --tx: -75px;  --ty: 95px;   --r: -4deg; --o: .3; }
.scene[data-scene="plan"] .card-b { --tx: 150px;  --ty: 40px;   --r: 5deg;  --o: .22; }
.scene[data-scene="plan"] .card-c { --tx: -240px; --ty: -245px; --o: .12; }
.scene[data-scene="plan"] .points { --tx: 105px;  --ty: -215px; --r: 3deg; --s: 1.05; }
.scene[data-scene="plan"] .form   { --tx: 240px;  --ty: -240px; --o: .12; }
.scene[data-scene="plan"] .bell   { --tx: 245px;  --ty: 130px;  --o: .15; }
.scene[data-scene="plan"] .fee    { --tx: -250px; --ty: -20px;  --o: .15; }
.scene[data-scene="plan"] .churn  { --tx: -205px; --ty: 180px;
                                    --pump-d: 13px; --pump-t: 1.7s; }

/* ---------- remind: the notification, front and center ---------- */
.scene[data-scene="remind"] .bell   { --tx: 0px;    --ty: -120px; --s: 1.35; }
.scene[data-scene="remind"] .form   { --tx: -145px; --ty: 45px;   --r: -4deg; --o: .35; }
.scene[data-scene="remind"] .card-a { --tx: -240px; --ty: -240px; --o: .12; }
.scene[data-scene="remind"] .card-b { --tx: 245px;  --ty: -200px; --r: 7deg; --o: .14; }
.scene[data-scene="remind"] .card-c { --tx: -250px; --ty: 190px;  --o: .12; }
.scene[data-scene="remind"] .bar    { --tx: 250px;  --ty: 265px;  --o: .15; }
.scene[data-scene="remind"] .points { --tx: -240px; --ty: -170px; --o: .15; }
.scene[data-scene="remind"] .fee    { --tx: 245px;  --ty: 230px;  --o: 0; }
.scene[data-scene="remind"] .churn  { --tx: 185px;  --ty: 105px;
                                      --pump-d: 16px; --pump-t: 1.1s; }

/* ---------- calm: everything inside the app ---------- */
.scene[data-scene="calm"] .phone  { --tx: 25px;  --ty: 0px;    --s: 1; --o: 1; }
.scene[data-scene="calm"] .bell   { --tx: 25px;  --ty: -166px; --s: .95; }
.scene[data-scene="calm"] .card-a { --tx: 25px;  --ty: -80px;  --s: 1.18; --r: 0deg; }
.scene[data-scene="calm"] .card-b { --tx: 25px;  --ty: 52px;   --s: 1.18; --r: 0deg; }
.scene[data-scene="calm"] .card-c { --tx: 25px;  --ty: 184px;  --s: 1.18; --r: 0deg; }
.scene[data-scene="calm"] .points { --tx: 98px; --ty: -108px; --s: .85; }
.scene[data-scene="calm"] .bar    { --tx: 25px;  --ty: 52px;   --s: .6; --o: 0; }
.scene[data-scene="calm"] .form   { --tx: 25px;  --ty: 0px;    --s: .5; --o: 0; }
.scene[data-scene="calm"] .fee    { --tx: 25px;  --ty: 120px;  --s: .5; --o: 0; }
.scene[data-scene="calm"] .churn  { --tx: -200px; --ty: 130px; --s: 1.08;
                                    --pump-d: 22px; --pump-t: .55s; }

/* chips flatten a little once they're inside the phone */
.scene[data-scene="calm"] .card .bob,
.scene[data-scene="calm"] .bell .bob,
.scene[data-scene="calm"] .points .bob {
  box-shadow: 0 1px 2px rgba(38, 32, 15, .06), 0 6px 16px -8px rgba(38, 32, 15, .18);
}

/* ---------- mobile: inline per-step scenes ---------- */
/* Hidden on desktop (the sticky rail does the work); shown on
   narrow screens where each step gets its own frozen scene. */
.scene-inline {
  display: none;
  position: relative;
  aspect-ratio: 560 / 640;
  width: 100%;
}

@media (max-width: 880px) {
  .scene-inline { display: block; margin-top: .5rem; }

  /* the ambient float carries the visual interest here — turn it up */
  @keyframes bob {
    from { transform: translateY(-10px) rotate(-1.6deg); }
    to   { transform: translateY(10px)  rotate(1.6deg); }
  }
}

/* ---------- reduced motion: no idle drift ---------- */
@media (prefers-reduced-motion: reduce) {
  .bob,
  .scene[data-scene] .bell .bob { animation: none !important; }
}