/* =================================================================
   fx.css — site-wide interaction & motion layer (loads last)
   3D tilt · magnetic buttons · kinetic type · animated gradients
   ================================================================= */

/* ---- heading colour/animation is owned solely by enhancements.css §30
   (the animated --head-grad). Legacy static gradients removed so EVERY
   page-level heading — in-app views AND subpages — matches Karte/Archiv. ---- */
.kicker::before{background:linear-gradient(90deg,var(--amber),var(--blau));background-size:200% 100%;animation:gradShift 6s ease infinite;}
@keyframes gradShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* ---- kinetic word reveal (scroll-driven) ---- */
.kx{display:inline-block;}
.kx .kw{display:inline-block;opacity:0;transform:translateY(.5em) rotate(2deg);
  transition:opacity .55s var(--ease),transform .6s var(--ease);}
.kx.lit .kw{opacity:1;transform:none;}

/* ---- 3D tilt cards ---- */
[data-tilt3d]{transform-style:preserve-3d;transition:transform .25s var(--ease),box-shadow .25s;will-change:transform;}
[data-tilt3d] .t3-lift{transform:translateZ(26px);transition:transform .25s var(--ease);}
[data-tilt3d]:hover{box-shadow:0 40px 70px -40px rgba(20,15,8,.55);}

/* ---- magnetic / press micro-interactions ---- */
.btn,.gtab,.fbtn,.rail-nav button,.mi-nav button{will-change:transform;}
.btn:active,.gtab:active,.fbtn:active,.q-opt:active,.dopt:active{transform:scale(.96)!important;}

/* ---- ambient gradient glow on dark sections ---- */
.sec.dark::after,.chap-hd::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(60% 50% at 80% 10%, rgba(224,123,46,.12), transparent 70%),
             radial-gradient(50% 50% at 10% 90%, rgba(27,124,140,.14), transparent 70%);
  opacity:.9;animation:glowDrift 18s ease-in-out infinite;}
@keyframes glowDrift{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(2%,-2%,0)}}
.sec.dark>*,.chap-hd>*{position:relative;z-index:1;}

/* ---- scroll-driven section progress underline on kickers ---- */
.rv.on .kicker{position:relative;}

@media(prefers-reduced-motion:reduce){
  .d-xl,.d-lg,.d-md,.display,.chap-hd h2,.kicker::before,.sec.dark::after,.chap-hd::after{animation:none!important;}
  .kx .kw{opacity:1;transform:none;}
  [data-tilt3d]{transform:none!important;}
}

/* ---- TRUE/FALSE game ---- */
.tf-wrap{max-width:600px;margin:0 auto;}
.tf-card{position:relative;background:var(--pergament-2);border:1px solid var(--line);border-radius:20px;
  padding:34px 30px;min-height:200px;display:flex;flex-direction:column;justify-content:center;text-align:center;
  box-shadow:0 30px 60px -44px rgba(20,15,8,.5);transition:transform .4s var(--ease),opacity .4s;}
html[data-theme="dark"] .tf-card{background:#1C1812;}
.tf-card .tf-q{font-family:var(--f-quote);font-size:clamp(18px,2.2vw,24px);line-height:1.4;color:var(--ink);}
.tf-card.flyL{transform:translateX(-120%) rotate(-12deg);opacity:0;}
.tf-card.flyR{transform:translateX(120%) rotate(12deg);opacity:0;}
.tf-stamp{position:absolute;top:18px;font-family:var(--f-display);font-weight:900;font-size:30px;letter-spacing:.04em;
  padding:4px 16px;border-radius:10px;opacity:0;transform:scale(1.4) rotate(-8deg);transition:.25s;}
.tf-stamp.t{left:20px;color:#1f8a5b;border:3px solid #1f8a5b;}
.tf-stamp.f{right:20px;color:var(--feldrot);border:3px solid var(--feldrot);}
.tf-card.show-t .tf-stamp.t,.tf-card.show-f .tf-stamp.f{opacity:1;transform:scale(1) rotate(-8deg);}
.tf-expl{font-size:14.5px;line-height:1.6;color:var(--ink-soft);margin-top:16px;min-height:1.5em;}
html[data-theme="dark"] .tf-expl{color:#c2b9a7;}
.tf-controls{display:flex;gap:14px;margin-top:22px;justify-content:center;}
.tf-btn{flex:1;max-width:200px;font-family:var(--f-ui);font-weight:800;font-size:15px;letter-spacing:.04em;
  padding:16px;border-radius:40px;border:2px solid;cursor:pointer;transition:transform .2s var(--ease),background .2s,color .2s;background:transparent;}
.tf-btn.yes{border-color:#1f8a5b;color:#1f8a5b;}
.tf-btn.yes:hover{background:#1f8a5b;color:#fff;transform:translateY(-3px);}
.tf-btn.no{border-color:var(--feldrot);color:var(--feldrot);}
.tf-btn.no:hover{background:var(--feldrot);color:#fff;transform:translateY(-3px);}
.tf-meta{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:12px;color:var(--ink-soft);margin-bottom:16px;}
.tf-meta b{color:var(--amber);}
.tf-done{text-align:center;padding:30px;display:none;}
.tf-done.on{display:block;animation:fadeup .5s var(--ease);}
.tf-done .sc{font-family:var(--f-display);font-weight:900;font-size:54px;color:var(--amber);line-height:1;}
.tf-src{font-family:var(--f-mono);font-size:11px;color:#2f7a52;margin-top:8px;}
html[data-theme="dark"] .tf-src{color:#7ad0a0;}