/* ============================================================================
   Step cards with self-running scenes.

   Loaded by /urunler/ and /urunler/madvise/ only. Both pages answer the same
   question - how does Madvise work - and until now both answered it with the
   same five-line list, so the two pages said the same thing twice in the same
   shape. This is that answer as four cards, each pairing one step with a small
   scene that plays it.

   THIS IS A DELIBERATE EXCEPTION TO home.css's STANDING RULE, ordered by the
   founder. home.css says the composed pages carry no imagery and no animated
   figure, and that rule still holds for the home page, /ne-yapiyoruz/,
   /arastirma/ and /politikalar/. It does not hold here: a product page has to
   show the product doing something, and these four scenes are the only place
   on pursula.com that does. Do not spread them to a fifth page without the
   same decision being made again.

   The scenes are ported from the madvise.ai landing page's how-it-works
   section (the reference build lives in the madvise-landing repo). Geometry
   and choreography are the reference's; two things are deliberately NOT:

     - Colour. Nothing is carried over. Every value below resolves through the
       surface tokens (--signal, --link, --trail, --card, --rule, --fg), so the
       scenes re-skin for light and dark AND cannot violate DESIGN.md 3.3 by
       being moved between an ink and a bone section.
     - Overshoot. The reference pops each element past its resting size and
       settles back. DESIGN.md 6 is explicit that nothing bounces and nothing
       springs: motion here means arrival along a path with deceleration. Every
       scale(1.14) / scaleY(1.08) step is gone and --pu-ease carries the
       arrival instead. The one scale-DOWN that stayed is the approve button's
       press in scene 3, which is touch feedback, not a bounce.

   Everything animates transform and opacity only, on one shared 7s loop.
   Container elements carry the dissolve so their children can simply hold
   their end pose, and THE BASE STYLES ARE THE COMPOSED END STATE: under
   prefers-reduced-motion the global reset in pursula.css collapses every
   duration to .01ms, which lands each scene finished rather than empty. The
   transient pieces - caret, sparks, confetti, ripple - are invisible at rest,
   so they simply never appear.

   No JavaScript. Nothing here observes scroll, and the cards' entrance is the
   site's existing .reveal, not a second mechanism.
   ========================================================================= */

/* ---------------------------------------------------------------- cards -- */

.steps {
  list-style: none;
  counter-reset: step;
  display: grid;
  gap: var(--pu-5);

  /* The scenes' palette, resolved ONCE from the surface tokens so no rule
     below reaches for a brand colour directly. On ink that is ember, pine
     bright and sand; on bone it is ember-deep, pine and pine again, which is
     exactly the substitution DESIGN.md 3.3 requires. */
  --sc-a: var(--signal);
  --sc-b: var(--link);
  --sc-c: var(--trail);
  --sc-panel: color-mix(in srgb, var(--fg) 6%, transparent);
  --sc-fill: color-mix(in srgb, var(--fg) 13%, transparent);
}
@media (min-width: 700px) {
  /* Two columns, not four. At four the scene inside each card is 230px wide on
     a 1200px container and every shape in it is too small to read as a shape. */
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pu-6); }
}

.step-card {
  counter-increment: step;
  display: grid;
  gap: var(--pu-5);
  align-content: start;
  padding: var(--pu-5);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--pu-r-lg);
  box-shadow: var(--shadow, none);
}
@media (min-width: 768px) { .step-card { padding: var(--pu-6); } }

/* The numeral, the title and the line are one block with its own rhythm, so
   the card's grid gap can stay the distance between the scene and the copy
   without also being the distance between a numeral and the word under it. */
.step-card__copy > * { margin: 0; }
.step-card__copy .step-card__title { margin-top: var(--pu-2); }
.step-card__copy p { margin-top: var(--pu-3); }

/* The number is the site's own numbering idiom (mono, tabular, link colour,
   leading zero), the same one .loop__list and .numbered already use - not the
   reference's "STEP 01 / 04" eyebrow, which would have put an untranslatable
   word inside a CSS content string. The <ol> carries the order for assistive
   technology, so the printed numeral is decorative and hidden from it. */
.step-card__num::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--pu-font-mono);
  font-size: .75rem;
  line-height: 1.2;
  color: var(--link);
  font-variant-numeric: tabular-nums;
}
.step-card__title { font-size: 1.25rem; font-stretch: 100%; }
.step-card p { margin: 0; color: var(--muted); max-width: 46ch; }

/* --------------------------------------------------------------- scenes -- */

.step-scene {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border-radius: var(--pu-r-md);
  background: var(--sc-panel);
  border: 1px solid var(--rule);
}

/* Every scene container fades in, holds, and fades out on the same 7s clock,
   which is what makes the whole set replay together instead of drifting. */
@keyframes scDissolve { 0% { opacity: 0; } 5%, 93% { opacity: 1; } 98%, 100% { opacity: 0; } }

.step-scene * { animation-timing-function: var(--pu-ease); }

/* --- scene 1: the brand is connected -------------------------------------
   A site address is entered and the page assembles under it. The address is a
   growing pill rather than typed characters: the reference types real text,
   which would need one steps() count per language and would set 12px Turkish
   glyphs inside a decorative graphic. Wordless survives both. */
.sc-browser {
  position: absolute;
  inset: 10% 9% 12%;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 11px 12px 12px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--pu-r-md);
  box-shadow: var(--shadow, none);
  animation: scDissolve 7s linear infinite;
}
.sc-chrome { display: flex; gap: 5px; flex: none; }
.sc-chrome i { width: 7px; height: 7px; border-radius: var(--pu-r-full); background: var(--sc-fill); }
.sc-url {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  border-radius: var(--pu-r-full);
  padding: 0 11px;
  border: 1px solid transparent;
  background: linear-gradient(var(--card), var(--card)) padding-box,
              linear-gradient(90deg, var(--sc-a), var(--sc-b)) border-box;
}
.sc-mag {
  position: relative;
  flex: none;
  width: 9px; height: 9px;
  border: 2px solid var(--muted);
  border-radius: var(--pu-r-full);
}
.sc-mag::after {
  content: '';
  position: absolute;
  right: -3px; bottom: -4px;
  width: 2px; height: 5px;
  border-radius: 1px;
  background: var(--muted);
  transform: rotate(-45deg);
}
.sc-typed {
  flex: none;
  width: 62%;
  height: 6px;
  border-radius: 3px;
  background: var(--sc-a);
  transform-origin: left center;
  animation: scType 7s infinite;
}
.sc-caret {
  flex: none;
  width: 2px; height: 13px;
  margin-left: 1px;
  border-radius: 1px;
  background: var(--sc-a);
  opacity: 0;
  animation: scCaret 7s infinite;
}
.sc-page { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 7px; }
.sc-ske { border-radius: var(--pu-r-sm); background: var(--sc-fill); }
.sc-ske--img {
  flex: 1;
  min-height: 0;
  background-image: linear-gradient(135deg,
    color-mix(in srgb, var(--sc-a) 34%, transparent),
    color-mix(in srgb, var(--sc-b) 28%, transparent));
  animation: scSkeA 7s infinite;
}
.sc-ske--l1 { height: 8px; width: 72%; flex: none; animation: scSkeB 7s infinite; }
.sc-ske--l2 { height: 8px; width: 48%; flex: none; animation: scSkeC 7s infinite; }

@keyframes scType { 0%, 8% { transform: scaleX(0); } 38%, 100% { transform: scaleX(1); } }
/* The caret shows only while the address is being entered, then leaves with
   the field. It does not blink: a blink is the one motion on the page that
   would run at a different tempo from everything else. */
@keyframes scCaret { 0%, 6% { opacity: 0; } 10%, 40% { opacity: 1; } 44%, 100% { opacity: 0; } }
@keyframes scSkeA { 0%, 40% { opacity: 0; transform: translateY(10px); } 49%, 100% { opacity: 1; transform: none; } }
@keyframes scSkeB { 0%, 46% { opacity: 0; transform: translateY(10px); } 55%, 100% { opacity: 1; transform: none; } }
@keyframes scSkeC { 0%, 52% { opacity: 0; transform: translateY(10px); } 61%, 100% { opacity: 1; transform: none; } }

/* --- scene 2: the creative is generated ----------------------------------
   The image composes itself while the progress bar fills, brand swatches
   arrive and two sparks land the finish. */
.sc-canvas {
  position: absolute;
  left: 10%; top: 12%; width: 52%; bottom: 30%;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--pu-r-md);
  box-shadow: var(--shadow, none);
  overflow: hidden;
  animation: scDissolve 7s linear infinite;
}
.sc-sun {
  position: absolute;
  left: 16%; top: 15%;
  width: 24%;
  aspect-ratio: 1;
  border-radius: var(--pu-r-full);
  background: var(--sc-a);
  animation: scSun 7s infinite;
}
.sc-hill {
  position: absolute;
  bottom: -34%;
  width: 66%;
  aspect-ratio: 1;
  border-radius: 24%;
  background: var(--sc-b);
  transform: rotate(45deg);
  animation-duration: 7s;
  animation-iteration-count: infinite;
}
.sc-hill--a { left: -16%; animation-name: scHillA; }
.sc-hill--b { right: -20%; opacity: .62; animation-name: scHillB; }
.sc-swatches {
  position: absolute;
  right: 11%; top: 16%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: scDissolve 7s linear infinite;
}
.sc-swatches i {
  width: 22px; height: 22px;
  border-radius: var(--pu-r-sm);
  animation-duration: 7s;
  animation-iteration-count: infinite;
}
.sc-swatches i:nth-child(1) { background: var(--sc-a); animation-name: scSw1; }
.sc-swatches i:nth-child(2) { background: var(--sc-b); animation-name: scSw2; }
.sc-swatches i:nth-child(3) { background: var(--sc-c); animation-name: scSw3; }
.sc-spark { position: absolute; width: 18px; height: 18px; transform: scale(0); opacity: 0; }
.sc-spark::before, .sc-spark::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  border-radius: 2px;
  background: var(--sc-a);
}
.sc-spark::before { width: 3px; height: 18px; transform: translate(-50%, -50%); }
.sc-spark::after { width: 18px; height: 3px; transform: translate(-50%, -50%); }
.sc-spark--1 { right: 26%; bottom: 26%; animation: scSpark 7s infinite; }
.sc-spark--2 {
  right: 9%; top: 44%;
  width: 13px; height: 13px;
  animation: scSpark 7s infinite;
  animation-delay: .42s;
}
.sc-spark--2::before { height: 13px; }
.sc-spark--2::after { width: 13px; }
.sc-progress {
  position: absolute;
  left: 10%; right: 11%; bottom: 13%;
  height: 8px;
  border-radius: 4px;
  background: var(--sc-fill);
  overflow: hidden;
  animation: scDissolve 7s linear infinite;
}
.sc-progress i {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--sc-a), var(--sc-b));
  transform-origin: left center;
  animation: scProgress 7s infinite;
}

@keyframes scSun { 0%, 16% { transform: scale(0); } 26%, 100% { transform: scale(1); } }
@keyframes scHillA { 0%, 22% { transform: translateY(80%) rotate(45deg); } 34%, 100% { transform: rotate(45deg); } }
@keyframes scHillB { 0%, 28% { transform: translateY(84%) rotate(45deg); } 40%, 100% { transform: rotate(45deg); } }
@keyframes scSw1 { 0%, 44% { transform: scale(0); } 52%, 100% { transform: scale(1); } }
@keyframes scSw2 { 0%, 48% { transform: scale(0); } 56%, 100% { transform: scale(1); } }
@keyframes scSw3 { 0%, 52% { transform: scale(0); } 60%, 100% { transform: scale(1); } }
@keyframes scSpark {
  0%, 56% { transform: scale(0); opacity: 0; }
  63% { transform: scale(1); opacity: 1; }
  72%, 100% { transform: scale(0); opacity: 0; }
}
@keyframes scProgress { 0%, 6% { transform: scaleX(0); } 46%, 100% { transform: scaleX(1); } }

/* --- scene 3: it is approved and published -------------------------------
   A tap lands on the approve control, the control turns and the check arrives.
   The confetti is six pieces, not the reference's eight, and carries only the
   surface's own three accents. */
.sc-phone {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  height: 84%;
  aspect-ratio: 10 / 19;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px 9px 12px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--pu-r-lg);
  box-shadow: var(--shadow, none);
  animation: scDissolve 7s linear infinite;
}
.sc-notch { align-self: center; flex: none; width: 34%; height: 5px; border-radius: 3px; background: var(--sc-fill); }
.sc-shot {
  flex: 1;
  min-height: 0;
  border-radius: var(--pu-r-sm);
  background-color: var(--sc-fill);
  background-image: linear-gradient(135deg,
    color-mix(in srgb, var(--sc-a) 34%, transparent),
    color-mix(in srgb, var(--sc-b) 30%, transparent));
}
.sc-row { flex: none; height: 6px; border-radius: 3px; background: var(--sc-fill); }
.sc-row--a { width: 82%; }
.sc-row--b { width: 56%; }
.sc-ok {
  flex: none;
  height: 26px;
  border-radius: var(--pu-r-full);
  background: var(--sc-b);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: scPress 7s infinite;
}
.sc-tick {
  width: 10px; height: 6px;
  border-left: 2px solid var(--card);
  border-bottom: 2px solid var(--card);
  border-radius: 1px;
  transform: rotate(-45deg) translateY(-1px);
  animation: scTick 7s infinite;
}
.sc-ripple {
  position: absolute;
  left: 50%; bottom: 8px;
  width: 34px; height: 34px;
  border-radius: var(--pu-r-full);
  border: 2px solid var(--sc-a);
  transform: translateX(-50%) scale(1.7);
  opacity: 0;
  animation: scRipple 7s infinite;
}
.sc-conf {
  position: absolute;
  left: 50%; top: 66%;
  width: 7px; height: 11px;
  border-radius: 3px;
  opacity: 0;
  animation: scConf 7s infinite;
}
.sc-conf--1 { --tx: -74px; --ty: -92px; background: var(--sc-a); }
.sc-conf--2 { --tx: -42px; --ty: -116px; background: var(--sc-b); animation-delay: .06s; width: 6px; height: 6px; border-radius: var(--pu-r-full); }
.sc-conf--3 { --tx: -12px; --ty: -126px; background: var(--sc-c); animation-delay: .10s; }
.sc-conf--4 { --tx: 20px; --ty: -120px; background: var(--sc-b); animation-delay: .04s; }
.sc-conf--5 { --tx: 52px; --ty: -106px; background: var(--sc-a); animation-delay: .12s; width: 6px; height: 6px; border-radius: var(--pu-r-full); }
.sc-conf--6 { --tx: 78px; --ty: -84px; background: var(--sc-c); animation-delay: .02s; }

/* The press is a scale DOWN and back - touch feedback, not a bounce - and the
   control changes colour to say the state changed, so the meaning does not
   ride on the animation alone. */
@keyframes scPress {
  0%, 24% { transform: scale(1); background-color: var(--sc-a); }
  29% { transform: scale(.93); background-color: var(--sc-a); }
  34% { transform: scale(1); }
  38%, 100% { transform: scale(1); background-color: var(--sc-b); }
}
@keyframes scTick {
  0%, 32% { transform: rotate(-45deg) translateY(-1px) scale(0); }
  42%, 100% { transform: rotate(-45deg) translateY(-1px) scale(1); }
}
@keyframes scRipple {
  0%, 20% { transform: translateX(-50%) scale(.35); opacity: 0; }
  25% { opacity: .5; }
  34%, 100% { transform: translateX(-50%) scale(1.7); opacity: 0; }
}
@keyframes scConf {
  0%, 35% { transform: none; opacity: 0; }
  39% { opacity: 1; }
  57% { transform: translate(var(--tx), var(--ty)); opacity: 1; }
  72%, 100% { transform: translate(calc(var(--tx) * 1.3), calc(var(--ty) * .45)); opacity: 0; }
}

/* --- scene 4: the outcome comes back -------------------------------------
   Four bars arrive, one of them leads, and the reading stays live. */
.sc-chart {
  position: absolute;
  inset: 12% 11%;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--pu-r-md);
  box-shadow: var(--shadow, none);
  animation: scDissolve 7s linear infinite;
}
.sc-bars {
  position: absolute;
  left: 14px; right: 14px; bottom: 12px; top: 38%;
  display: flex;
  align-items: flex-end;
  gap: 9%;
  padding: 0 4%;
  border-bottom: 2px solid var(--sc-fill);
}
.sc-bar {
  flex: 1;
  border-radius: 5px 5px 2px 2px;
  background: var(--sc-fill);
  transform-origin: bottom center;
  animation-duration: 7s;
  animation-iteration-count: infinite;
}
.sc-bar--1 { height: 38%; animation-name: scBar1; }
.sc-bar--2 { height: 58%; animation-name: scBar2; }
.sc-bar--3 { height: 46%; animation-name: scBar3; }
/* The winner is the one the loop is about, so it is the only bar that carries
   an accent. Height AND colour say it, never colour alone. */
.sc-bar--4 { height: 92%; background: var(--sc-b); animation-name: scBar4; }
.sc-up {
  position: absolute;
  right: 13%; top: 14%;
  width: 26px; height: 26px;
  border-radius: var(--pu-r-full);
  background: color-mix(in srgb, var(--sc-a) 18%, transparent);
  animation: scUp 7s infinite;
}
.sc-up::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 8px; height: 8px;
  border-top: 2px solid var(--sc-a);
  border-right: 2px solid var(--sc-a);
  border-radius: 1px;
  transform: translate(-50%, -32%) rotate(-45deg);
}
.sc-coin {
  position: absolute;
  left: 16%; top: 13%;
  width: 22px; height: 22px;
  border-radius: var(--pu-r-full);
  background: var(--sc-a);
  animation: scCoin 7s infinite;
}
.sc-coin::after {
  content: '';
  position: absolute;
  inset: 4px;
  border: 2px solid color-mix(in srgb, var(--card) 70%, transparent);
  border-radius: var(--pu-r-full);
}
.sc-pulse {
  position: absolute;
  right: 13px; top: 13px;
  width: 8px; height: 8px;
  border-radius: var(--pu-r-full);
  background: var(--sc-c);
}
.sc-pulse::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: var(--pu-r-full);
  border: 2px solid var(--sc-c);
  animation: scPulse 2.4s ease-out infinite;
}

@keyframes scBar1 { 0%, 10% { transform: scaleY(0); } 20%, 100% { transform: scaleY(1); } }
@keyframes scBar2 { 0%, 16% { transform: scaleY(0); } 26%, 100% { transform: scaleY(1); } }
@keyframes scBar3 { 0%, 22% { transform: scaleY(0); } 32%, 100% { transform: scaleY(1); } }
@keyframes scBar4 { 0%, 28% { transform: scaleY(0); } 40%, 100% { transform: scaleY(1); } }
@keyframes scUp { 0%, 48% { transform: scale(0); } 58%, 100% { transform: scale(1); } }
@keyframes scCoin {
  0%, 44% { transform: translateY(-30px) scale(0); opacity: 0; }
  54%, 100% { transform: none; opacity: 1; }
}
@keyframes scPulse { 0% { transform: scale(.6); opacity: .55; } 70%, 100% { transform: scale(2.4); opacity: 0; } }