/* 1398 [stated]: cardul de unealta cu banda de sticla.
   Iconita 3D felt sta sus si se topeste in culoarea cardului (--cb, culoarea de jos
   a fiecarei iconite, vezi TOOL_CB in js/07). Banda de sticla cu numele si ghidul
   sta dedesubt, peste partea topita, deci nu atinge obiectul. Butonul cu trei
   puncte sta IN banda, iar meniul lui se deschide in sus, inauntrul cardului,
   fiindca .tool taie tot ce iese din el (overflow:hidden). */

.tool:has(> .fvCap){border-radius:22px; background-color:var(--cb, #26234a);
  /* .tool poarta imaginea in stilul inline, ca .fvArt s-o mosteneasca.
     Pe card insusi n-o mai desenam, altfel s-ar vedea prin sticla. */
  background-size:0 0; background-repeat:no-repeat;
  box-shadow:0 12px 26px rgba(0,0,0,.32), inset 0 0 0 1px rgba(255,255,255,.09)}
.tool .fvArt{border-radius:22px 22px 0 0; background-size:cover;
  -webkit-mask-image:linear-gradient(#000 80%, transparent);
          mask-image:linear-gradient(#000 80%, transparent)}
.tool:has(> .fvCap) .ov{display:none}

/* banda de sticla.
   1399: sticla e desenata de ::before, nu de banda insasi. Un element cu backdrop-filter devine
   "backdrop root" pentru copiii lui, deci meniul (copil al benzii) n-ar mai fi putut estompa
   iconita de dedesubt. Asa meniul are si el sticla lui adevarata. */
.tool .fvCap{position:relative; z-index:0; margin:-12px 5px 5px; padding:9px 9px 10px; border-radius:16px; text-align:left;
  background:none; -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none}
.tool .fvCap::before{content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.07));
  -webkit-backdrop-filter:blur(16px) saturate(150%); backdrop-filter:blur(16px) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(255,255,255,.14), 0 6px 14px rgba(0,0,0,.16)}
/* 1399 [stated]: numele pe un rand, putin mai mic, si niciodata peste cercul cu trei puncte.
   Punctele stau centrate pe verticala, in dreapta; textul are coloana lui, care se opreste inaintea lor. */
.tool .fvCap:has(.tmHost){padding-right:32px}
.tool .fvCap .tn{color:#fff; font-size:14px; line-height:17px; text-shadow:0 1px 2px rgba(0,0,0,.18)}
.tool .fvCap .fvWith{color:rgba(255,255,255,.74); font-size:11.5px; overflow:hidden; text-overflow:ellipsis}
.tool .fvCap .ckName, .tool.locked .fvCap .ckName{color:rgba(255,255,255,.7)}

/* butonul cu trei puncte, in dreapta benzii, centrat pe verticala.
   .tmHost devine static, ca butonul si meniul sa se aseze fata de banda. */
.tool .fvCap .tmHost{position:static}
/* fara cercul crem de fetru (css/11, cu !important): aici e sticla, ca banda */
.tool .fvCap .tmBtn{top:50%; bottom:auto; right:5px; width:24px; height:24px; transform:translateY(-50%); gap:2.5px;
  background:rgba(0,0,0,.18) !important; background-image:none !important; border:0 !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22); color:#fff !important;
  -webkit-backdrop-filter:none; backdrop-filter:none}
.tool .fvCap .tmBtn i{width:2.6px; height:2.6px}
.tool .fvCap .tmBtn:active{background:rgba(0,0,0,.3) !important}
/* 1400 [stated]: meniul sta centrat in card, fara varful mic, cu aceeasi sticla ca banda numelui,
   iar iconita din spate se estompeaza cat e deschis. Cardul e container, deci 50cqw = jumatate din latime
   (= mijlocul imaginii patrate); meniul e asezat fata de banda, care incepe la 100cqw - 12px. */
.tool:has(> .fvCap){container-type:inline-size}
.tool .fvCap .tmMenu{top:calc(26px - 50cqw); bottom:auto; left:50%; right:auto; transform:translate(-50%,-50%);
  min-width:min(150px, calc(100cqw - 22px)) !important; max-width:calc(100cqw - 16px)}
.tool .fvCap .tmMenu.tmCat::before{display:none !important}
.tool .fvCap .tmMenu.tmCat{background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.07)), color-mix(in srgb, var(--cb, #26234a) 72%, transparent) !important;
  -webkit-backdrop-filter:blur(16px) saturate(150%); backdrop-filter:blur(16px) saturate(150%);
  box-shadow:0 14px 30px -12px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.24), inset 0 0 0 1px rgba(255,255,255,.16) !important;
  animation:tmPop .18s ease-out}
.tool .fvCap .tmMenu.tmCat button{justify-content:flex-start}
@keyframes tmPop{from{opacity:0; transform:translate(-50%,-46%) scale(.96)} to{opacity:1; transform:translate(-50%,-50%) scale(1)}}
.tool .fvArt{transition:filter .25s ease, transform .25s ease}
.tool:has(.tmMenu) .fvArt{filter:blur(8px) brightness(.82); transform:scale(1.04)}

/* ===== 1399 [stated]: meniul cu Info / Pin to home, cu aceeasi sticla ca banda ===== */
.tmMenu.tmCat{background:linear-gradient(180deg, rgba(40,34,72,.62), rgba(22,18,44,.70)) !important;
  -webkit-backdrop-filter:blur(18px) saturate(150%); backdrop-filter:blur(18px) saturate(150%);
  border-radius:16px !important; padding:6px !important; gap:4px;
  box-shadow:0 16px 34px -12px rgba(6,4,18,.7), inset 0 1px 0 rgba(255,255,255,.2), inset 0 0 0 1px rgba(255,255,255,.16) !important}
.tmMenu.tmCat::before{background:rgba(26,22,50,.8); box-shadow:inset -1px -1px 0 rgba(255,255,255,.14)}
.tmMenu.tmCat button{background:rgba(255,255,255,.08) !important; color:#fff !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1) !important; padding:9px 16px 9px 11px !important}
.tmMenu.tmCat button:active{background:rgba(255,255,255,.18) !important; filter:none}
.tmMenu.tmCat button b{color:#fff !important; font-size:14px}
.tmMenu.tmCat button svg{stroke:#fff}

/* ===== 1399 [stated]: taburile Mind / Body / Soul, tot sticla ===== */
#ordBar .cTab, #ordBar .cTab.on{border:0 !important; border-image:none !important; border-radius:999px !important;
  min-height:48px; padding:0 12px !important; color:#f5efe4 !important;
  background:linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.06)) !important;
  -webkit-backdrop-filter:blur(14px) saturate(140%); backdrop-filter:blur(14px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(255,255,255,.14), 0 8px 18px -10px rgba(0,0,0,.5) !important}
#ordBar .cTab.on{color:#fff !important;
  background:linear-gradient(180deg, color-mix(in srgb, var(--tc) 62%, rgba(255,255,255,.18)), color-mix(in srgb, var(--tc) 34%, transparent)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34), inset 0 0 0 1px color-mix(in srgb, var(--tc) 70%, white), 0 10px 22px -10px color-mix(in srgb, var(--tc) 70%, transparent) !important;
  text-shadow:0 1px 2px rgba(0,0,0,.25)}
#ordBar .cTab:active{transform:scale(.97)}

/* ===== 1399 [stated]: "Picked for you" = aceleasi carduri ca la Unelte, la fel de mari ===== */
/* 1400 [stated]: Your Favorite Tools si Picked for you = carusel orizontal cu cardurile de unealta.
   Varianta premium 3D se alege din pagina cu optiuni (carousel-options). */
/* 1401 [stated]: varianta aleasa = "Floating depth" (js/09 hcInit), cu aterizare lina, fara arc.
   Cardurile stau unul peste altul in mijlocul scenei; pozitia, inclinarea si adancimea le da JS-ul. */
.hcCar{position:relative; margin:4px -16px 0; padding:8px 0 4px; overflow:hidden; touch-action:pan-y;
  -webkit-user-select:none; user-select:none; perspective:900px; cursor:grab}
.hcCar.hcDrag{cursor:grabbing}
.hcTrack{position:relative; height:calc(min(44vw, 176px) + 76px); transform-style:preserve-3d}
.hcCar .tool{position:absolute; left:50%; top:10px; width:min(44vw, 176px); margin-left:calc(min(44vw, 176px) / -2);
  transition:none !important; will-change:transform, opacity; cursor:pointer;
  box-shadow:0 calc(14px + var(--hcGlow,0) * 14px) calc(28px + var(--hcGlow,0) * 22px) rgba(0,0,0,.4),
             0 0 calc(var(--hcGlow,0) * 38px) color-mix(in srgb, var(--cb) 60%, transparent), inset 0 0 0 1px rgba(255,255,255,.09)}
.hcCar .tool:active{transform:none}
/* plutirea: foarte lenta si mica, ca o respiratie */
@keyframes hcBob{0%,100%{translate:0 0} 50%{translate:0 -5px}}
.hcCar .tool{animation:hcBob 7s ease-in-out infinite}
.hcCar .tool:nth-child(2n){animation-duration:8s; animation-delay:-2s}
.hcCar .tool:nth-child(3n){animation-duration:9s; animation-delay:-4s}
.hcCar.hcDrag .tool{animation-play-state:paused}
.hcDots{display:flex; justify-content:center; gap:6px; margin-top:2px; min-height:6px}
.hcDots i{width:6px; height:6px; border-radius:99px; background:rgba(255,255,255,.28); transition:width .6s ease, background .6s ease}
.hcDots i.on{width:18px; background:#f5efe4}
@media (prefers-reduced-motion:reduce){.hcCar .tool{animation:none}}

/* ===== 1399 [stated]: coperti noi 3D felt pentru cardul Audio de pe Acasa, cate una pe zona ===== */
.hubAuArt{--auBg:url(../img/hub-audio-3d-body.webp?v=1399); --auFill:rgb(10,68,51); --auSh:10,60,45;
  background:var(--auFill) var(--auBg) 100% 50%/auto 100% no-repeat}
body[data-cat="mind"] .hubAuArt{--auBg:url(../img/hub-audio-3d-mind.webp?v=1399); --auFill:rgb(7,37,98); --auSh:7,32,88}
body[data-cat="soul"] .hubAuArt{--auBg:url(../img/hub-audio-3d-soul.webp?v=1399); --auFill:rgb(38,21,84); --auSh:34,18,76}
/* 1400 [stated]: fara gradientul de peste poza */
.hubAuArt:before{display:none !important}

/* ===== 1399 [stated]: butonul de resetare a ritualului, doar pentru teste ===== */
#ritTestHost{display:flex; justify-content:center; margin:2px 0 8px}
.ritTestReset{display:flex; align-items:center; justify-content:center; gap:7px; padding:7px 14px; border-radius:999px;
  border:1px dashed rgba(240,236,227,.35); background:rgba(255,255,255,.05); color:rgba(240,236,227,.8);
  font:500 11.5px var(--font-body); letter-spacing:.3px; cursor:pointer; -webkit-tap-highlight-color:transparent}
.ritTestReset svg{width:13px; height:13px}
.ritTestReset:active{transform:scale(.97); background:rgba(255,255,255,.12)}