/* ============================================================================
   booklera-effects.css — Bewegung, Stufe 3
   Grundregel wie bei den Tokens: NICHTS ist im CSS unsichtbar. Verstecken darf
   nur JavaScript, nachdem es html.fx gesetzt hat. Faellt JS aus, ist alles da.
   ========================================================================== */

/* --- Feinschliff: Knoepfe bekommen Tiefe ---------------------------------- */
.btn{ transition: transform .16s var(--ease), background .2s, color .2s, border-color .2s, box-shadow .2s; }
.btn:active{ transform: translateY(1px) scale(.994); }
.btn-solid:hover{ box-shadow: 0 6px 18px -8px rgba(15,20,24,.45); }
.btn-accent:hover{ box-shadow: 0 6px 18px -8px rgba(223,78,23,.55); }

/* --- Feinschliff: Textlinks unterstreichen sich ---------------------------- */
.price-line a, .close-cta a.log, .ft-links a, .shot-foot a{
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .34s var(--ease);
}
.price-line a:hover, .close-cta a.log:hover, .ft-links a:hover, .shot-foot a:hover{
  background-size: 100% 1px;
}

/* --- Feinschliff: Karten reagieren auf den Zeiger -------------------------- */
.tier, .pillar, .feat > div, .badges > div{
  transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .3s var(--ease);
}
.tier:hover, .badges > div:hover{
  transform: translateY(-2px);
  box-shadow: 0 1px 1px rgba(15,20,24,.04), 0 10px 24px -12px rgba(15,20,24,.28);
}
.rule-item{ transition: padding-left .3s var(--ease), background .3s var(--ease); }
.rule-item:hover{ background: linear-gradient(90deg, rgba(223,78,23,.05), transparent 55%); }

/* --- Messrail: der Fortschrittsbalken -------------------------------------- */
.rail{ --fx-progress: 0; }
.rail::before{
  content:"";
  position:absolute; top:0; right:-1px; width:2px;
  height: calc(var(--fx-progress) * 100%);
  background: var(--accent);
  transition: height .12s linear;
}
.rail-tag b{ transition: color .3s var(--ease); }

/* --- Hero: das Fenster schwebt beim Scrollen ------------------------------- */
html.fx .shot-holder{ will-change: transform; }

/* --- Zahlen, die laufen ---------------------------------------------------- */
.fx-num{ font-variant-numeric: tabular-nums; }

/* --- Lebendiges Produktfenster --------------------------------------------- */
html.fx .shot-live tbody tr{ opacity: 0; transform: translateY(6px); }
html.fx .shot-live tbody tr.fx-in{
  opacity: 1; transform: none;
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.shot-sum{ transition: background .5s var(--ease); }
.shot-sum.fx-done{ background: var(--accent-tint); }
.shot-foot .arrow{ transition: transform .4s var(--ease), color .4s var(--ease); }
.shot-foot.fx-done .arrow{ color: var(--ok, #1F6B44); transform: scale(1.25); }
.pill{ transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease); }
.pill.fx-done{ background: var(--ok, #1F6B44); border-color: var(--ok, #1F6B44); color: #fff; }
.fx-replay{
  position: absolute; right: 12px; bottom: -30px;
  font-family: var(--mono, "IBM Plex Mono", monospace);
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); background: none; border: 0; cursor: pointer; padding: 6px 2px;
  opacity: 0; transition: opacity .3s var(--ease), color .2s;
}
.shot-holder:hover .fx-replay{ opacity: 1; }
.fx-replay:hover{ color: var(--accent); }

/* --- Seitenaufbau: die Kopfzeile kommt zuerst ------------------------------ */
html.fx .nav{ transform: translateY(-100%); }
html.fx.fx-ready .nav{ transform: none; transition: transform .6s var(--ease); }

/* --- Abschnitte staffeln --------------------------------------------------- */
html.fx [data-reveal]{ opacity: 0; transform: translateY(18px); }
html.fx [data-reveal].is-in{
  opacity: 1; transform: none;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  transition-delay: calc(var(--i,0) * 48ms);
}

/* --- Wer weniger Bewegung will, bekommt weniger ---------------------------- */
@media (prefers-reduced-motion: reduce){
  html.fx [data-reveal],
  html.fx [data-reveal].is-in,
  html.fx .shot-live tbody tr,
  html.fx .nav{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .rail::before{ display: none; }
  .btn:active{ transform: none; }
  .tier:hover, .badges > div:hover{ transform: none; }
}

/* ============================ Stufe 3b ==================================== */

/* --- Kopfzeile verdichtet sich beim Scrollen ------------------------------ */
.nav{ transition: box-shadow .3s var(--ease), background .3s var(--ease); }
.nav-in{ transition: height .3s var(--ease); }
html.fx .nav.is-condensed{ box-shadow: 0 1px 0 var(--line), 0 8px 24px -18px rgba(15,20,24,.5); }
html.fx .nav.is-condensed .nav-in{ height: 54px; }
html.fx .nav.is-condensed .logo-img{ height: 26px; transition: height .3s var(--ease); }

/* --- Ueberschriften kommen Wort fuer Wort --------------------------------- */
.fx-word{ display:inline-block; }
html.fx .fx-split .fx-word{ opacity:0; transform: translateY(.32em); }
html.fx .fx-split.is-in .fx-word{
  opacity:1; transform:none;
  transition: opacity .9s var(--ease), transform 1.15s var(--ease);
  transition-delay: calc(var(--w,0) * 30ms);
}

/* --- Messrail: durchlaufene Teilstriche leuchten -------------------------- */
.rail::before{
  content:""; position:absolute; top:0; right:-1px; width:10px;
  height: calc(var(--fx-progress) * 100%);
  background-image:
    linear-gradient(var(--accent), var(--accent)),
    repeating-linear-gradient(to bottom, var(--accent) 0 1px, transparent 1px 24px);
  background-size: 2px 100%, 9px 100%;
  background-position: right 0 top 0, left 0 top 0;
  background-repeat: no-repeat, repeat-y;
  transition: height .12s linear;
}

/* --- Workflow: der aktive Schritt bekommt einen Taktgeber ----------------- */
.step[aria-current="true"]{ position: relative; }
.step[aria-current="true"]::after{
  content:""; position:absolute; left:0; bottom:-1px; height:2px; width:0;
  background: var(--accent); opacity:.5;
}
html.fx .steps.fx-auto .step[aria-current="true"]::after{
  animation: fxTakt 2600ms linear forwards;
}
@keyframes fxTakt{ from{ width:0 } to{ width:100% } }

/* --- Angebotszeilen reagieren auf den Zeiger ------------------------------ */
table.pos tbody tr{ transition: background .2s var(--ease); }
table.pos tbody tr:hover{ background: var(--accent-tint); }

@media (prefers-reduced-motion: reduce){
  html.fx .fx-split .fx-word{ opacity:1 !important; transform:none !important; }
  html.fx .steps.fx-auto .step[aria-current="true"]::after{ animation:none; }
  html.fx .nav.is-condensed .nav-in{ height:66px; }
}

/* ============================ Stufe 3c ====================================
   Ein eigener Auftritt pro Abschnitt. Alle Effekte laufen ausschliesslich
   ueber transform und opacity — keine Layout-Eigenschaft wird animiert,
   damit auch schwaechere Geraete bei 60 fps bleiben.
   Sichtbar bleibt alles ohne JS: versteckt wird nur unter html.fx.
   ========================================================================= */

html.fx .fx-e{
  opacity: 0;
  transition:
    opacity 1.05s var(--ease),
    transform 1.65s var(--ease);
  transition-delay: calc(var(--n, 0) * var(--fx-step, 90ms));
}
html.fx .fx-go .fx-e{ opacity: 1; transform: none; }

/* 1 · von links hereinfahren */
html.fx .fx-e-links{ transform: translateX(-42px); }

/* 2 · von rechts hereinfahren */
html.fx .fx-e-rechts{ transform: translateX(42px); }

/* 3 · abwechselnd von beiden Seiten */
html.fx .fx-e-wechsel:nth-child(odd){ transform: translateX(-46px); }
html.fx .fx-e-wechsel:nth-child(even){ transform: translateX(46px); }
/* Der Ruhezustand oben hat wegen :nth-child dieselbe Staerke wie die
   Aufloesung — deshalb hier noch einmal ausdruecklich zuruecksetzen,
   sonst bleibt die Karte um 46px versetzt stehen. */
html.fx .fx-go .fx-e-wechsel:nth-child(odd),
html.fx .fx-go .fx-e-wechsel:nth-child(even){ transform: none; }

/* 4 · aufklappen wie ein Buch */
.fx-buch{ perspective: 1400px; }
html.fx .fx-e-buch{ transform-style: preserve-3d; backface-visibility: hidden; }
html.fx .fx-e-buch{
  transform: rotateY(calc(var(--dir, 1) * 54deg)) translateZ(-30px);
  transform-origin: var(--org, right) center;
}

/* 5 · wie Karten ausgegeben */
html.fx .fx-e-karte{ transform: translateY(46px) rotate(var(--rot, -2deg)); }

/* 6 · von oben fallen lassen */
html.fx .fx-e-fall{ transform: translateY(-38px) scale(.97); }

/* 7 · aus Teilen zusammensetzen */
html.fx .fx-e-montage{
  transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--dr, 0deg)) scale(.88);
  transition-duration: 1.65s, 2s;
}

/* 8 · Welle durch ein Raster */
html.fx .fx-e-welle{ transform: translateY(14px) scale(.94); }

/* 9 · aufklappen um die Waagerechte */
.fx-kipp{ perspective: 1200px; }
html.fx .fx-e-kipp{ transform: rotateX(-72deg); transform-origin: top center; }

/* 10 · aus der Mitte aufziehen */
html.fx .fx-e-zoom{ transform: scale(.93); }

/* Der Rail-Tacho markiert den Abschnitt, sobald er auftritt */
.rail-tag b{ transition: color .55s var(--ease), transform 1s var(--ease); }
html.fx .fx-go .rail-tag b{ transform: scale(1.12); }

@media (prefers-reduced-motion: reduce){
  html.fx .fx-e{ opacity:1 !important; transform:none !important; transition:none !important; }
}