.fyt{position:fixed;inset:0;z-index:9400;font-family:Inter,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;
  opacity:0;transition:opacity .35s ease}
.fyt.on{opacity:1}
/* voalul: închis la bun venit, la cont și la final; deschis când turul arată o pagină, ca ea să se vadă */
.fyt{--fyt-voal:rgba(5,5,9,.74)}
.fyt.pagina{--fyt-voal:rgba(5,5,9,.3)}
.fyt-catch{position:absolute;inset:0}

/* Spotul e o cutie goală a cărei umbră uriașă face voalul; mutarea e o simplă tranziție. */
.fyt-hole{position:fixed;left:50%;top:50%;width:0;height:0;border-radius:14px;pointer-events:none;
  box-shadow:0 0 0 1.5px rgba(201,168,232,.72),0 0 0 200vmax var(--fyt-voal);
  transition:left .55s cubic-bezier(.2,.8,.2,1),top .55s cubic-bezier(.2,.8,.2,1),width .55s cubic-bezier(.2,.8,.2,1),
    height .55s cubic-bezier(.2,.8,.2,1),border-radius .55s ease,box-shadow .35s ease}
.fyt-hole::after{content:"";position:absolute;inset:-1px;border-radius:inherit;box-shadow:0 0 26px 3px rgba(201,168,232,.4);
  animation:fytBreath 2.6s ease-in-out infinite}
.fyt-hole.gol{box-shadow:0 0 0 0 rgba(201,168,232,0),0 0 0 200vmax var(--fyt-voal)}
.fyt-hole.gol::after{display:none}

.fyt-box{position:fixed;left:0;top:0;width:320px;transform:translate3d(-999px,-999px,0);
  transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.fyt.fix .fyt-box,.fyt.fix .fyt-hole{transition:none}
.fyt-card{position:relative;z-index:2;padding:15px 18px 14px;border-radius:20px;background:#f8f7fb;color:#15131c;
  box-shadow:0 0 0 1px rgba(21,19,28,.06),0 28px 64px -22px rgba(0,0,0,.75),0 0 46px -14px rgba(201,168,232,.45)}
.fyt-card.nudge{animation:fytNudge .45s ease}
.fyt-c{transition:opacity .15s ease}
.fyt-card.schimb .fyt-c{opacity:0}
.fyt-top{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:16px}
.fyt-top b{display:flex;align-items:center;gap:8px;font-weight:650;font-size:12px;letter-spacing:.01em;color:#6f6b7a}
.fyt-av{display:none;width:26px;height:26px;border-radius:50%;object-fit:cover;background:#cfeee2;box-shadow:0 0 0 2px #fff}
.fyt-card.mic .fyt-av{display:block}
.fyt-dots{display:flex;gap:5px;align-items:center}
.fyt-dots i{width:6px;height:6px;border-radius:99px;background:#dedbe6;transition:width .3s ease,background .3s ease}
.fyt-dots i.f{background:#bcb7c9}
.fyt-dots i.c{width:16px;background:#15131c}
.fyt-card h3{margin:9px 0 5px;font:600 17px/1.3 Inter,system-ui,sans-serif;letter-spacing:-.015em;color:#15131c}
.fyt-card h3 .ac{color:#7a5cc4}
.fyt-tx{position:relative;margin:0;font-size:14px;line-height:1.55;color:#4a4655}
.fyt-tx .g{visibility:hidden}
.fyt-tx .t{position:absolute;left:0;top:0;right:0}
.fyt-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fyt-th{display:inline-flex;gap:5px;align-items:center;height:21px}
.fyt-th i{width:6px;height:6px;border-radius:50%;background:#9b97a7;animation:fytDot 1.1s ease-in-out infinite}
.fyt-th i:nth-child(2){animation-delay:.15s}
.fyt-th i:nth-child(3){animation-delay:.3s}

.fyt-foot{display:flex;align-items:center;gap:8px;margin-top:14px}
.fyt-r{margin-left:auto;display:flex;align-items:center;gap:8px}
.fyt-skip{border:0;background:none;padding:6px 2px;font:inherit;font-size:13px;color:#6f6b7a;cursor:pointer}
.fyt-skip:hover,.fyt-skip:focus-visible{outline:0;color:#15131c;text-decoration:underline;text-underline-offset:3px}
.fyt-back{height:36px;padding:0 14px;border-radius:999px;border:1px solid rgba(21,19,28,.14);background:#fff;color:#15131c;
  font:inherit;font-size:13.5px;font-weight:500;cursor:pointer;transition:border-color .15s ease}
.fyt-back:hover{border-color:rgba(21,19,28,.36)}
.fyt-back:focus-visible{outline:2px solid rgba(122,92,196,.6);outline-offset:2px}
.fyt-next{display:inline-flex;align-items:center;gap:10px;height:38px;padding:0 5px 0 16px;border:2px solid transparent;border-radius:999px;
  color:#fff;font:inherit;font-size:13.5px;font-weight:500;cursor:pointer;white-space:nowrap;
  background:linear-gradient(#15131c,#15131c) padding-box,linear-gradient(#15131c,#15131c) border-box;box-shadow:0 10px 24px rgba(21,19,28,.25);
  transition:transform .15s ease,box-shadow .2s ease,background .2s ease}
.fyt-next .ar{width:26px;height:26px;border-radius:50%;background:#fff;color:#15131c;display:grid;place-items:center}
.fyt-next .ar svg{width:14px;height:14px}
.fyt-next:focus-visible{outline:2px solid rgba(122,92,196,.6);outline-offset:3px}
.fyt-next:hover{transform:translateY(-1px);
  background:linear-gradient(#15131c,#15131c) padding-box,linear-gradient(100deg,#7c6cf6 0%,#a855f7 40%,#ec4899 72%,#f97316 100%) border-box;
  box-shadow:0 14px 32px rgba(21,19,28,.28),0 0 22px rgba(124,108,246,.28)}
.fyt-foot [hidden]{display:none}

/* În spatele cardului (z 1 < 2); fereastra lui taie ce coboară sub card. */
.fyt-fy{position:absolute;z-index:1;left:0;top:-126px;width:228px;height:166px;overflow:hidden;pointer-events:none;--d:-1}
.fyt-fy.fara{display:none}
.fyt-fy::before{content:"";position:absolute;left:44px;top:-4px;width:140px;height:140px;border-radius:50%;opacity:0;pointer-events:none;
  background:radial-gradient(circle,rgba(201,168,232,.62) 0%,rgba(157,216,194,.26) 45%,rgba(255,255,255,0) 70%)}
.fyt-fy.morph::before{animation:fytGlow 1.1s ease-out}
.fyt-fy .fy-in{position:absolute;left:22px;top:26px;width:184px;height:184px;transition:transform .5s cubic-bezier(.2,.9,.3,1.25)}
.fyt-fy.duck .fy-in{transform:translateY(146px);transition:transform .26s cubic-bezier(.5,0,.75,0)}
.fyt-fy .fy-float{position:absolute;inset:0;animation:fytFloat 6s ease-in-out infinite}
.fyt-fy .fy-pose{position:absolute;inset:0;transform-origin:50% 92%;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.fyt-fy .fy-mir{position:absolute;inset:0}
.fyt-fy.mir .fy-mir{transform:scaleX(-1)}
.fyt-fy img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;user-select:none;-webkit-user-drag:none}
/* Masca ascunde manșeta brațului ridicat cât mâna e jos. */
.fyt-fy .fy-body{-webkit-mask:linear-gradient(#000 0 0) top/100% 50% no-repeat,linear-gradient(to right,transparent 30%,#000 34%) bottom/100% 50.5% no-repeat;
  mask:linear-gradient(#000 0 0) top/100% 50% no-repeat,linear-gradient(to right,transparent 30%,#000 34%) bottom/100% 50.5% no-repeat}
.fyt-fy:is(.g-wave,.g-present,.g-look) .fy-body{-webkit-mask:none;mask:none}
.fyt-fy .fy-hand{transform-origin:18.88% 58.59%;transform:translateY(64px);transition:transform .45s cubic-bezier(.2,.8,.2,1)}

/* --d = partea țintei: -1 stânga, 1 dreapta. */
.fyt-fy.g-wave .fy-hand{transform:none;animation:fytWave 2.4s ease-in-out .15s}
.fyt-fy.g-present .fy-hand{transform:rotate(-12deg);transition-delay:.35s}
.fyt-fy.g-present .fy-pose{transform:rotate(calc(var(--d) * 4deg))}
.fyt-fy.g-peek .fy-in{animation:fytPeek 1.3s cubic-bezier(.2,.8,.2,1)}
.fyt-fy.g-peek .fy-pose{transform:rotate(calc(var(--d) * -5deg))}
.fyt-fy.g-hop .fy-float{animation:fytHop .7s cubic-bezier(.3,.7,.4,1) .3s,fytFloat 6s ease-in-out 1s infinite}
.fyt-fy.g-think .fy-pose{transform:rotate(calc(var(--d) * -6deg)) translateY(3px)}
.fyt-fy.g-self .fy-pose{animation:fytNod 1.1s ease-in-out .3s}
.fyt-fy.g-look .fy-pose{transform:rotate(calc(var(--d) * 5deg)) translateY(-3px)}
.fyt-fy.g-look .fy-hand{transform:rotate(-7deg);transition-delay:.3s}
.fyt-fy.g-float .fy-float{animation:fytZeroG 7s ease-in-out infinite}

@keyframes fytBreath{0%,100%{opacity:.35}50%{opacity:.9}}
@keyframes fytFloat{50%{transform:translateY(-4px)}}
@keyframes fytWave{0%,100%{transform:rotate(0)}14%{transform:rotate(-10deg)}30%{transform:rotate(8deg)}46%{transform:rotate(-7deg)}62%{transform:rotate(4deg)}78%{transform:rotate(0)}}
@keyframes fytPeek{0%{transform:translateY(146px)}36%{transform:translateY(58px)}64%{transform:translateY(58px)}100%{transform:none}}
@keyframes fytHop{0%,100%{transform:none}35%{transform:translateY(-12px)}60%{transform:none}78%{transform:translateY(-4px)}}
@keyframes fytNod{0%,40%,80%,100%{transform:none}20%,60%{transform:translateY(3px) rotate(calc(var(--d) * 2deg))}}
@keyframes fytZeroG{0%,100%{transform:none}25%{transform:translate(2px,-7px) rotate(-2.5deg)}50%{transform:translate(0,-3px) rotate(1.5deg)}75%{transform:translate(-2px,-8px) rotate(2.5deg)}}
@keyframes fytGlow{0%{opacity:0;transform:scale(.55)}30%{opacity:1}100%{opacity:0;transform:scale(1.35)}}
@keyframes fytNudge{0%,100%{transform:none}30%{transform:translateY(-5px)}60%{transform:translateY(1px)}}
@keyframes fytDot{0%,60%,100%{opacity:.35;transform:none}30%{opacity:1;transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){
  .fyt,.fyt *,.fyt *::before,.fyt *::after{animation:none!important;transition:none!important}
}