/* V7 effects layer: small cards, pills, counters, word reveals and bursts.
   Calm at the start, richer toward badges and offers. transform/opacity only. */
:root{--fx-spring:cubic-bezier(.34,1.56,.64,1);--fx-out:cubic-bezier(.16,1,.3,1);--fx-gold:#e8d39a;--fx-gold-d:#c9a24b;--fx-mint:#cfe7dc;--fx-copper:#c9825a}
.fx-canvas{position:fixed;inset:0;z-index:70;width:100vw;height:100vh;pointer-events:none}

/* ---------- headings: words rise; each chapter a little more than the one before ---------- */
.fx-words .fx-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.fx-words .fx-wi{display:inline-block;will-change:transform,opacity}
.fx-l1 .fx-wi{opacity:0;transform:translateY(.35em);transition:opacity .5s ease calc(var(--i) * 30ms),transform .7s var(--fx-out) calc(var(--i) * 30ms)}
.fx-l2 .fx-wi{opacity:0;transform:translateY(.9em) rotate(4deg);transform-origin:0 100%;transition:opacity .45s ease calc(var(--i) * 45ms),transform .8s var(--fx-out) calc(var(--i) * 45ms)}
.fx-l3 .fx-wi,.fx-l4 .fx-wi{opacity:0;transform:translateY(1em) rotate(6deg) scale(.96);filter:blur(6px);transform-origin:0 100%;transition:opacity .45s ease calc(var(--i) * 55ms),transform .85s var(--fx-spring) calc(var(--i) * 55ms),filter .6s ease calc(var(--i) * 55ms)}
.fx-words.fx-shown .fx-wi{opacity:1;transform:none;filter:none}
/* the last word of the later chapters is painted in its meaning colour, left to right */
.fx-l3 .fx-accent,.fx-l4 .fx-accent{background:linear-gradient(90deg,var(--fx-gold) 0 50%,currentColor 50% 100%);background-size:200% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.fx-l3.fx-shown .fx-accent,.fx-l4.fx-shown .fx-accent{background-position:0 0;transition:opacity .45s ease calc(var(--i) * 55ms),transform .85s var(--fx-spring) calc(var(--i) * 55ms),filter .6s ease calc(var(--i) * 55ms),background-position 1s var(--fx-out) calc(var(--i) * 55ms + .35s)}
#possibility-title .fx-accent{background-image:linear-gradient(90deg,var(--fx-gold) 0 50%,currentColor 50% 100%)}

/* ---------- pills shared by all chapters ---------- */
.fx-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;background:#ffffff14;color:#fff;font-size:11.5px;font-weight:600;letter-spacing:.01em;white-space:nowrap}
.fx-pill svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fx-pill-gold{background:var(--fx-gold);color:#17130a}

/* ---------- S2: icon buttons grow into labelled pills, a preview drops out of each ---------- */
.diary-feature-trigger{transition:background .35s ease,color .35s ease,box-shadow .35s ease,padding .45s var(--fx-out),width .45s var(--fx-out),gap .45s var(--fx-out)}
.diary-feature-trigger.is-hinting{box-shadow:none;background:transparent}
.diary-feature-trigger.fx-on{display:inline-flex;align-items:center;gap:7px;width:auto;padding:8px 14px 8px 11px;border-radius:999px;background:var(--fx-gold);color:#17130a;box-shadow:0 10px 26px #e8d39a40}
.diary-map-trigger.fx-on{flex-direction:row-reverse;padding:8px 11px 8px 14px}
.fx-ico-label{display:inline-block;max-width:0;overflow:hidden;opacity:0;font-size:13px;font-weight:700;white-space:nowrap;transition:max-width .45s var(--fx-out),opacity .3s ease}
.fx-on .fx-ico-label{max-width:110px;opacity:1}
.diary-feature-trigger.fx-on svg{animation:fx-wiggle .7s var(--fx-spring)}
@keyframes fx-wiggle{0%{transform:scale(.6) rotate(-14deg)}60%{transform:scale(1.15) rotate(6deg)}100%{transform:none}}

.fx-tease{position:absolute;z-index:30;top:76px;width:min(56%,250px);padding:12px;border-radius:20px;background:#f7f4ec;color:#17130a;box-shadow:0 24px 50px #000000a0,0 0 0 1px #ffffff20;opacity:0;pointer-events:none;transform:translateY(-14px) scale(.86);transition:opacity .25s ease,transform .5s var(--fx-spring)}
.fx-tease-cal{left:14px;transform-origin:22px 0}
.fx-tease-map{right:14px;transform-origin:calc(100% - 22px) 0;padding:8px}
.fx-tease.fx-show{opacity:1;transform:none}
.fx-tease::before{content:"";position:absolute;top:-6px;width:14px;height:14px;border-radius:3px;background:inherit;transform:rotate(45deg)}
.fx-tease-cal::before{left:22px}.fx-tease-map::before{right:22px}
.fx-tease-head{display:flex;align-items:center;gap:7px;margin:0 2px 8px;font-size:13px}
.fx-tease-head svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}
.fx-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.fx-cal i{position:relative;display:grid;place-items:center;aspect-ratio:1;border-radius:7px;font-style:normal;font-size:9px;color:#8b8678}
.fx-cal i b{position:relative;z-index:1;font-weight:600}
.fx-cal .now{background:#17130a;color:#fff}
.fx-cal .has{overflow:hidden;color:#fff;opacity:0;transform:scale(.3)}
.fx-cal .has img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fx-cal .has b{text-shadow:0 1px 3px #000a}
.fx-show .fx-cal .has{opacity:1;transform:none;transition:opacity .2s ease calc(.18s + var(--d) * 90ms),transform .55s var(--fx-spring) calc(.18s + var(--d) * 90ms)}
.fx-tease .fx-pill{margin-top:10px;opacity:0;transform:translateY(6px);transition:opacity .3s ease .55s,transform .5s var(--fx-spring) .55s}
.fx-tease.fx-show .fx-pill{opacity:1;transform:none}
.fx-map{position:relative;overflow:hidden;height:150px;border-radius:14px}
.fx-map svg{position:absolute;inset:0;width:100%;height:100%}
.fx-pinm{position:absolute;width:38px;height:46px;margin:-46px 0 0 -19px;overflow:hidden;border:2px solid #fff;border-radius:11px 11px 11px 3px;background:#ddd;box-shadow:0 8px 16px #0005;opacity:0;transform:translateY(-40px) rotate(-8deg)}
.fx-pinm img{width:100%;height:100%;object-fit:cover}
.fx-show .fx-pinm{opacity:1;transform:rotate(-8deg);transition:opacity .15s ease calc(.15s + var(--p) * 120ms),transform .6s var(--fx-spring) calc(.15s + var(--p) * 120ms)}
.fx-tease-map .fx-pill{margin:8px 4px 2px}

.fx-saved{position:absolute;z-index:30;left:50%;bottom:240px;display:flex;align-items:center;gap:10px;padding:9px 16px 9px 9px;border-radius:999px;background:#ffffffeb;color:#121212;box-shadow:0 16px 36px #0008;opacity:0;pointer-events:none;transform:translate(-50%,20px) scale(.9);transition:opacity .25s ease,transform .55s var(--fx-spring)}
.fx-saved.fx-show{opacity:1;transform:translate(-50%,0)}
.fx-saved i{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#121212;color:var(--fx-gold)}
.fx-saved svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.fx-saved b{display:block;font-size:13px;white-space:nowrap}
.fx-saved small{display:block;font-size:11px;color:#6b6b6b;white-space:nowrap}

/* ---------- S3: four small cards around the circle card ---------- */
.fx-cpills{position:absolute;inset:0;z-index:5;pointer-events:none}
.fx-cp{position:absolute;display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:999px;background:#fff;color:#17241d;font-size:12.5px;white-space:nowrap;box-shadow:0 16px 34px #17241d2e,0 1px 0 #ffffff inset;opacity:0;transform:translateY(16px) scale(.7)}
.fx-cp svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fx-cp b{font-weight:700}
.fx-cp small{color:#5e6b64;font-size:11px}
.fx-show .fx-cp{opacity:1;transform:none;transition:opacity .2s ease,transform .6s var(--fx-spring)}
.fx-cp-a{left:-16%;top:21%;background:#17241d;color:var(--fx-mint)}
.fx-cp-av{display:inline-flex;margin-left:2px}
.fx-cp-av img{width:20px;height:20px;margin-left:-6px;border:2px solid #17241d;border-radius:50%;object-fit:cover}
.fx-cp-b{right:-12%;top:44%;transition-delay:.12s!important}
.fx-cp-b svg{color:#e0455d;fill:#e0455d}
.fx-cp-likes{display:inline-block;min-width:.7em;text-align:center}
.fx-tick{animation:fx-tick .35s var(--fx-spring)}
@keyframes fx-tick{0%{transform:translateY(-6px) scale(1.4)}100%{transform:none}}
.fx-cp-c{left:-12%;top:63%;transition-delay:.24s!important}
.fx-cp-d{right:-6%;bottom:9%;background:var(--fx-mint);transition-delay:.36s!important}
@media(max-width:950px){.fx-cp{padding:6px 10px;font-size:11px}.fx-cp-a{left:-4%}.fx-cp-b{right:-3%}.fx-cp-c{left:-3%}.fx-cp-d{right:0}}

/* ---------- S4: gold sheen over the badge, a meter of met conditions ---------- */
.proof-back{overflow:hidden}
.fx-sheen{position:absolute;inset:-10%;z-index:3;background:linear-gradient(105deg,transparent 35%,#fff7dc 47%,#ffffff 50%,#fff7dc 53%,transparent 65%);mix-blend-mode:soft-light;opacity:0;transform:translateX(-80%);pointer-events:none}
.fx-shine .fx-sheen{animation:fx-sheen 1.3s var(--fx-out) .1s}
@keyframes fx-sheen{0%{opacity:0;transform:translateX(-80%)}15%{opacity:1}100%{opacity:0;transform:translateX(80%)}}
.fx-shine .proof-seal{animation:fx-seal 1s var(--fx-spring)}
@keyframes fx-seal{0%{transform:scale(.7) rotate(-20deg)}55%{transform:scale(1.12) rotate(4deg)}100%{transform:none}}
.fx-meter{position:absolute;left:50%;top:-58px;z-index:5;display:inline-flex;align-items:center;gap:9px;padding:7px 14px 7px 10px;border-radius:999px;background:#0e1a1d;color:#f4f5ef;box-shadow:0 0 0 1px #e8d39a40,0 14px 30px #0006;font-size:12.5px;white-space:nowrap;opacity:0;transform:translate(-50%,10px) scale(.9);transition:opacity .3s ease,transform .55s var(--fx-spring),background .4s ease,color .4s ease}
.fx-meter.fx-show{opacity:1;transform:translate(-50%,0)}
.fx-meter-dots{display:inline-flex;gap:4px}
.fx-meter-dots i{width:9px;height:9px;border-radius:50%;background:#ffffff26;transition:background .3s ease,transform .45s var(--fx-spring)}
.fx-meter-dots i.on{background:var(--fx-gold);transform:scale(1.15)}
.fx-meter b{font-variant-numeric:tabular-nums}
.fx-meter small{color:#c0cdca;font-size:11.5px}
.fx-meter.is-full{background:var(--fx-gold);color:#17130a}
.fx-meter.is-full small{color:#3d3016}
.fx-meter.is-full .fx-meter-dots i{background:#17130a}
.fx-bump{animation:fx-bump .45s var(--fx-spring)}
@keyframes fx-bump{0%{scale:1}40%{scale:1.12}100%{scale:1}}

/* ---------- S5: tiles pop in, the earned badge stamps ---------- */
.scn-tile:not(.is-empty){animation:fx-tile .5s var(--fx-spring)}
@keyframes fx-tile{0%{transform:scale(.55) rotate(-8deg)}100%{transform:none}}
.fx-stamp .bc-seal,.fx-stamp .bc-badge img:first-child{animation:fx-stamp .7s var(--fx-spring)}
@keyframes fx-stamp{0%{transform:scale(1.6) rotate(-25deg);opacity:.3}100%{transform:none;opacity:1}}
.scn-floats .float-card{transition:box-shadow .3s ease}
.scn-actions button{transition:transform .35s var(--fx-spring),box-shadow .3s ease}
.scn-actions button:hover{transform:translateY(-2px) scale(1.03)}
.scn-actions .is-primary:active{transform:scale(.94)}
.scn-result{animation:fx-tile .55s var(--fx-spring)}

@media(prefers-reduced-motion:reduce){
  .fx-words .fx-wi{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  .fx-tease,.fx-saved,.fx-cp,.fx-meter{transition:none!important}
  .fx-cal .has,.fx-pinm{opacity:1;transform:none;transition:none!important}
  .scn-tile:not(.is-empty),.fx-stamp .bc-seal,.fx-shine .fx-sheen,.fx-shine .proof-seal,.fx-tick,.fx-bump,.diary-feature-trigger.fx-on svg{animation:none!important}
}

/* S2 copy: three chips that light up with what the diary is showing */
.fx-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.fx-chip{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:999px;background:#17130a0d;color:#3c3a35;font-size:13px;font-weight:600;transition:background .35s ease,color .35s ease,transform .5s var(--fx-spring),box-shadow .35s ease}
.fx-chip svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fx-chip.on{background:#121212;color:var(--fx-gold);transform:translateY(-3px);box-shadow:0 10px 22px #0002}
@media(prefers-reduced-motion:reduce){.fx-chip{transition:none}}
.offers[data-mode=cafe] #possibility-title .fx-accent{background-image:linear-gradient(90deg,#b5562f 0 50%,currentColor 50% 100%)}
@media(max-width:950px){.fx-meter{top:-40px;font-size:11px;padding:5px 11px 5px 8px}}
.fx-words .fx-w{padding-top:.12em;margin-top:-.12em}
/* 13.10.: enge Laufweite – letzter Buchstabe (y, e …) ragt über die Wortbox; seitlich Luft ohne Layoutänderung */
.fx-words .fx-w{padding-left:.1em;padding-right:.1em;margin-left:-.1em;margin-right:-.1em}