/* Satzprofi effects layer. Loaded by the start page and the app (scripts add ?v=… to refresh caches).
   Everything is switched off with html.fx-off (the preview's on/off button); html.fx-reduce = calm mode for "reduce motion". */
@property --fx-a{syntax:"<angle>";inherits:false;initial-value:0deg}

/* ---------- gender colours: der / die / das ---------- */
:root{--der:#1E40AF;--die:#9D174D;--das:#115E59;--der-bg:#DBEAFE;--die-bg:#FCE7F3;--das-bg:#CCFBF1}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--der:#93C5FD;--die:#F9A8D4;--das:#5EEAD4;--der-bg:rgba(59,130,246,.17);--die-bg:rgba(236,72,153,.17);--das-bg:rgba(20,184,166,.17)}}
:root[data-theme="dark"]{--der:#93C5FD;--die:#F9A8D4;--das:#5EEAD4;--der-bg:rgba(59,130,246,.17);--die-bg:rgba(236,72,153,.17);--das-bg:rgba(20,184,166,.17)}
html:not(.fx-off) .der,html:not(.fx-off) .die,html:not(.fx-off) .das{padding:.02em .32em;border-radius:.4em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
html:not(.fx-off) .der{background:var(--der-bg)}html:not(.fx-off) .die{background:var(--die-bg)}html:not(.fx-off) .das{background:var(--das-bg)}
html.fx-off{--der:#2350b5;--die:#b02e41;--das:#1d6640}

/* ---------- aurora: fixed behind the whole page (start page and app) ---------- */
html:not(.fx-off){background:var(--paper)}html:not(.fx-off) body{background:transparent}
.fx-aurora{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;opacity:.6}
.fx-app .fx-aurora{opacity:.38}
.fx-aurora i{position:absolute;width:60vmax;height:60vmax;border-radius:50%;
  background:radial-gradient(circle at center,var(--fx-c) 0,transparent 62%);will-change:transform}
.fx-aurora i:nth-child(1){--fx-c:color-mix(in srgb,var(--accent) 38%,transparent);top:-25%;left:-15%;animation:fx-drift1 26s ease-in-out infinite alternate}
.fx-aurora i:nth-child(2){--fx-c:color-mix(in srgb,#7c5cff 26%,transparent);top:15%;right:-25%;animation:fx-drift2 32s ease-in-out infinite alternate}
.fx-aurora i:nth-child(3){--fx-c:color-mix(in srgb,#14b8a6 20%,transparent);bottom:-35%;left:15%;animation:fx-drift3 38s ease-in-out infinite alternate}
@keyframes fx-drift1{to{transform:translate(18vw,22vh) scale(1.15)}}
@keyframes fx-drift2{to{transform:translate(-20vw,18vh) scale(.9)}}
@keyframes fx-drift3{to{transform:translate(12vw,-20vh) scale(1.2)}}
html.fx-off .fx-aurora{display:none}

/* ---------- main buttons: specular light that follows the mouse, slight 3D tilt, a shine sweep when idle ---------- */
html:not(.fx-off) .btn-primary{--mx:50%;--my:50%;--rx:0deg;--ry:0deg;--ang:0deg;position:relative;overflow:hidden;isolation:isolate;
  transform:perspective(600px) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .18s ease-out,box-shadow .25s,background .2s;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.18),0 6px 18px -8px color-mix(in srgb,var(--accent) 70%,transparent)}
html:not(.fx-off) .btn-primary::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .25s;
  background:radial-gradient(90px circle at var(--mx) var(--my),rgba(255,255,255,.55),rgba(255,255,255,.12) 45%,transparent 70%)}
html:not(.fx-off) .btn-primary::after{content:"";position:absolute;inset:-2px auto -2px -60%;width:45%;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 0,rgba(255,255,255,.38) 50%,transparent 100%);transform:skewX(-18deg);animation:fx-shine 4.8s ease-in-out infinite}
@keyframes fx-shine{0%,62%{left:-60%}82%,100%{left:125%}}
@media (hover:hover){html:not(.fx-off) .btn-primary:hover::before{opacity:1}
  html:not(.fx-off) .btn-primary:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 0 4px color-mix(in srgb,var(--accent) 20%,transparent),0 14px 30px -10px color-mix(in srgb,var(--accent) 80%,transparent)}
  html:not(.fx-off) .btn-primary:hover::after{animation-play-state:paused;opacity:0}}
html:not(.fx-off) .btn-primary:active{transform:perspective(600px) rotateX(var(--rx)) rotateY(var(--ry)) scale(.96)}

/* ---------- plan cards: spotlight that follows the mouse + moving border on "Most popular" ---------- */
html:not(.fx-off) .tier,html:not(.fx-off) .hp{--mx:50%;--my:50%;isolation:isolate;transition:transform .25s,border-color .2s,box-shadow .25s}
html:not(.fx-off) .tier::before,html:not(.fx-off) .hp::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;transition:opacity .3s;
  background:radial-gradient(420px circle at var(--mx) var(--my),color-mix(in srgb,var(--accent) 16%,transparent),transparent 60%)}
html:not(.fx-off) .hp{position:relative}
@media (hover:hover){html:not(.fx-off) .tier:hover::before,html:not(.fx-off) .hp:hover::before{opacity:1}
  html:not(.fx-off) .tier:hover{transform:translateY(-4px);box-shadow:0 18px 40px -18px rgba(0,0,0,.45)}}
html:not(.fx-off) .tier.best,html:not(.fx-off) .hp-best{border-color:transparent;
  background:linear-gradient(var(--sheet),var(--sheet)) padding-box,
    conic-gradient(from var(--fx-a),var(--accent),#7c5cff,#14b8a6,var(--accent)) border-box;animation:fx-spin 6s linear infinite}
@keyframes fx-spin{to{--fx-a:360deg}}
/* cards come in one after another */
html:not(.fx-off) .tiers .tier.reveal:nth-child(2){transition-delay:.12s}html:not(.fx-off) .tiers .tier.reveal:nth-child(3){transition-delay:.24s}
html:not(.fx-off) .hplans .hp{animation:fx-rise .6s ease both}html:not(.fx-off) .hplans .hp:nth-child(2){animation-delay:.12s}html:not(.fx-off) .hplans .hp:nth-child(3){animation-delay:.24s}
@keyframes fx-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---------- app: account chip ---------- */
:root{--fx-gold:#a87400;--fx-gold2:#e0a800;--fx-glow:rgba(168,116,0,.22)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--fx-gold:#d4a017;--fx-gold2:#f3d36b;--fx-glow:rgba(212,160,23,.18)}}
:root[data-theme="dark"]{--fx-gold:#d4a017;--fx-gold2:#f3d36b;--fx-glow:rgba(212,160,23,.18)}
html:not(.fx-off) .acctbtn.fx-int{background:linear-gradient(var(--sheet),var(--sheet)) padding-box,
  conic-gradient(from var(--fx-a),var(--fx-gold),var(--accent),var(--fx-gold2),var(--accent),var(--fx-gold)) border-box;
  border:2px solid transparent;box-shadow:0 0 0 4px var(--fx-glow),0 4px 14px -4px var(--fx-glow);animation:fx-spin 5s linear infinite}
html:not(.fx-off) .acctbtn.fx-prem{box-shadow:inset 0 0 0 2px var(--accent),0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent)}
html:not(.fx-off) .acctbtn.on .dot{animation:fx-pulse 2.4s ease-out infinite}
@keyframes fx-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 55%,transparent)}70%,100%{box-shadow:0 0 0 7px transparent}}

/* ---------- app: tab line that glides ---------- */
.fx-tabs{position:relative}
@media (min-width:601px){.navrow .tabs.fx-tabs{overflow-y:hidden}}
html:not(.fx-off) .fx-tabs .tab[aria-selected="true"]{border-color:transparent}
.fx-tabline{position:absolute;height:2.5px;border-radius:2px;background:var(--accent);pointer-events:none;z-index:2;
  transition:left .35s cubic-bezier(.3,1.3,.5,1),width .35s cubic-bezier(.3,1.3,.5,1),top .35s ease}
html.fx-off .fx-tabline{display:none}
/* phones: the tabs are boxes there, and the chosen box already stands out: no line under it */
@media (max-width:600px){.fx-tabline{display:none}html:not(.fx-off) .fx-tabs .tab[aria-selected="true"]{border-color:var(--accent)}}
/* switches: a glass pill slides (and stretches) to the chosen button; buttons keep their simple hover */
.fx-seg{position:relative}
.fx-seg>button{position:relative;z-index:1}
.fx-seg.fx-ready>button[aria-pressed="true"]{transition:none}  /* no fading: the pill is the highlight */
html:not(.fx-off) .fx-seg.fx-ready>button[aria-pressed="true"]{background:transparent;box-shadow:none}
/* the pill: a vivid, solid blue with a glass shine (white text on it in light and dark mode) */
:root{--fx-pill:#2446c4}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--fx-pill:#4a6cf0}}
:root[data-theme="dark"]{--fx-pill:#4a6cf0}
.fx-pill{position:absolute;z-index:0;border-radius:10px;pointer-events:none;transform-origin:center;
  background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,.04) 50%,rgba(0,0,0,.08)),var(--fx-pill);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.45),inset 0 -1px 2px rgba(0,0,0,.2),0 6px 16px -6px color-mix(in srgb,var(--fx-pill) 85%,transparent)}
html:not(.fx-off) .fx-seg.fx-ready>button[aria-pressed="true"],html:not(.fx-off) .fx-tabnav.fx-ready>.tab[aria-selected="true"]{color:#fff}
html:not(.fx-off) .fx-tabnav>.tab[aria-selected="true"] small{color:rgba(255,255,255,.85)}
html.fx-off .fx-pill{display:none}
/* computers: the tab bar as a pill navigation */
.navrow .tabs.fx-tabnav{gap:4px;padding:5px;border-radius:16px;border:1px solid var(--rule);
  background:color-mix(in srgb,var(--sheet) 70%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);align-self:center}
.fx-tabnav>.tab{border:0!important;border-radius:12px;padding:7px 14px;margin:0;position:relative;z-index:1;align-items:center;text-align:center;transition:color .15s,background .15s}
.fx-tabnav>.tab:not([aria-selected="true"]):hover{background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--ink)}
.fx-tabnav>.tab[aria-selected="true"]{transition:none}
.fx-tabnav>.fx-pill{border-radius:12px}
.fx-tabnav .fx-tabline{display:none}
.navrow.fx-navrow{border-bottom:0;margin-top:-6px;margin-bottom:6px}  /* no line under the pill bar; centred between the title and the box below */
.fx-tabnav>.tab.locked::after{top:5px;inset-inline-end:5px}
/* article buttons in Wortschatz: the chosen article takes its gender's colour */
html:not(.fx-off) #wsArt .art-der[aria-pressed="true"]{background:var(--der-bg);color:var(--der);box-shadow:inset 0 0 0 1.5px var(--der)}
html:not(.fx-off) #wsArt .art-die[aria-pressed="true"]{background:var(--die-bg);color:var(--die);box-shadow:inset 0 0 0 1.5px var(--die)}
html:not(.fx-off) #wsArt .art-das[aria-pressed="true"]{background:var(--das-bg);color:var(--das);box-shadow:inset 0 0 0 1.5px var(--das)}
/* plural is always "die" and isn't feminine: neutral grey instead of the feminine colour */
html:not(.fx-off) .die.fx-plural{color:var(--muted);background:color-mix(in srgb,var(--muted) 16%,transparent)}

/* ---------- loading: lattice of dots in a wave ---------- */
.fx-lattice{display:inline-grid;grid-template-columns:repeat(3,5px);gap:3px;vertical-align:middle;margin-inline-end:10px;flex:none}
.fx-lattice i{width:5px;height:5px;border-radius:1.5px;background:var(--accent);animation:fx-lat 1.2s ease-in-out infinite}
.fx-lattice i:nth-child(1){animation-delay:0s}.fx-lattice i:nth-child(2),.fx-lattice i:nth-child(4){animation-delay:.1s}
.fx-lattice i:nth-child(3),.fx-lattice i:nth-child(5),.fx-lattice i:nth-child(7){animation-delay:.2s}
.fx-lattice i:nth-child(6),.fx-lattice i:nth-child(8){animation-delay:.3s}.fx-lattice i:nth-child(9){animation-delay:.4s}
@keyframes fx-lat{0%,100%{transform:scale(.55);opacity:.35}40%{transform:scale(1);opacity:1}}
html:not(.fx-off) .thinking.fx-l::before{display:none}
.btn.fx-busy .fx-lattice{grid-template-columns:repeat(3,4px);gap:2px;margin-inline-end:8px}.btn.fx-busy .fx-lattice i{width:4px;height:4px;background:currentColor}
html.fx-off .fx-lattice{display:none}

/* ---------- saving: a fuse burns along the bottom, then the star pops with sparks ---------- */
.say.fx-saved{position:relative}
.say.fx-saved::after{content:"";position:absolute;left:0;bottom:-3px;height:2px;width:100%;border-radius:2px;transform-origin:left;
  background:linear-gradient(90deg,transparent,var(--fx-gold2) 70%,#fff);animation:fx-fuse .45s ease-in forwards,fx-fade .3s .45s forwards}
@keyframes fx-fuse{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes fx-fade{to{opacity:0}}
.fx-star{display:inline-block;font-weight:inherit;color:var(--fx-gold2);animation:fx-pop .5s .4s cubic-bezier(.3,1.8,.5,1) both;position:relative}
.fx-star::before{content:"";position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px;border-radius:50%;pointer-events:none;opacity:0;
  box-shadow:0 -12px var(--fx-gold2),10px -6px var(--fx-gold2),10px 6px var(--accent),0 12px var(--fx-gold2),-10px 6px var(--accent),-10px -6px var(--fx-gold2);
  animation:fx-spark .55s .45s ease-out}
@keyframes fx-pop{0%{transform:scale(.4) rotate(-30deg)}60%{transform:scale(1.5) rotate(10deg)}100%{transform:none}}
@keyframes fx-spark{0%{opacity:1;transform:scale(.3)}100%{opacity:0;transform:scale(1.6)}}

/* ---------- preview badge ---------- */
.fx-badge{position:fixed;z-index:9999;bottom:12px;right:12px;opacity:.9;display:flex;gap:8px;align-items:center;padding:6px 6px 6px 12px;border-radius:999px;
  background:rgba(17,22,29,.88);color:#e6ebf0;font:600 12.5px system-ui,sans-serif;box-shadow:0 6px 20px rgba(0,0,0,.35)}
.fx-badge button{all:unset;cursor:pointer;padding:5px 10px;border-radius:999px;background:#8fa8f2;color:#11161d}
.fx-badge button+button{background:#2b3643;color:#e6ebf0}

/* calm mode: the device asks for reduced motion (the preview's Motion switch can override it).
   Only the big, constant movements stop; the small ones that answer a tap (pill, card, save, loader) still play. */
html.fx-reduce .fx-aurora i,html.fx-reduce .btn-primary::after,html.fx-reduce .tier.best,html.fx-reduce .hp-best,html.fx-reduce .acctbtn.fx-int,html.fx-reduce .acctbtn .dot,html.fx-reduce .hplans .hp{animation:none!important}
html.fx-reduce .fx-tabline{transition:none!important}
html.fx-reduce .btn-primary{transform:none!important}