/* Higher Self - build 1303. Card of the Day (prefix cd).
   1) Ritualul de dimineata: la prima deschidere a zilei, evantaiul cu cele 55 de carti, alegi una, se intoarce.
   2) Pe Home, cardul "Mesajul zilei" (V4 pop-out) ia locul peisajului si al mesajului animat din hero.
   3) Modalul cu cartea mare (atingi = intorci, atingi in afara = inchizi).
   Toate clasele sunt prefixate (cd*) ca sa nu se loveasca de .flip, .face, .screen etc. din restul aplicatiei. */

/* poarta: pana se deschide ritualul, aplicatia nu se vede (fara flash de Home) */
html.cdGate body > *:not(#cdOv){visibility:hidden !important}
html.cdGate body{background:#06081a}

/* ---------- RITUALUL ---------- */
#cdOv{position:fixed; inset:0; z-index:9500; display:none; color:#f0ece3; font-family:var(--font-body);
  background:radial-gradient(120% 70% at 50% 0%, #1a1f52 0%, #0d1233 40%, #06081a 100%);
  opacity:0; transition:opacity .6s ease; overflow:hidden; --cdAcc:#e8c26a}
#cdOv.on{display:block}
#cdOv.show{opacity:1}
#cdOv .cdStage{position:absolute; top:0; bottom:0; left:50%; width:min(100vw,430px); transform:translateX(-50%)}
#cdOv .cdStars{position:absolute; inset:0; pointer-events:none}
#cdOv .cdStars i{position:absolute; width:2px; height:2px; border-radius:50%; background:#fff; opacity:.5; animation:cdTw 4s ease-in-out infinite}
@keyframes cdTw{50%{opacity:.08}}

#cdOv .cdTop{position:absolute; left:0; right:0; top:calc(56px + env(safe-area-inset-top, 0px)); text-align:center; padding:0 28px;
  transition:opacity .5s, transform .5s; z-index:2; pointer-events:none}
#cdOv .cdEye{font-size:11px; letter-spacing:3.2px; font-weight:600; color:#e8c26a; opacity:.85; text-transform:uppercase}
#cdOv .cdTitle{font-family:var(--font-title); font-weight:700; font-size:28px; line-height:1.2; margin-top:12px}
#cdOv .cdLead{font-size:13px; color:rgba(240,236,227,.55); margin-top:10px; line-height:1.6}

#cdOv .cdFan{position:absolute; inset:0; touch-action:none; cursor:grab; user-select:none; -webkit-user-select:none}
#cdOv .cdFan.drag{cursor:grabbing}
#cdOv .cdFc{position:absolute; left:50%; top:var(--cdCardTop); width:var(--cdCw); height:var(--cdCh); margin-left:calc(var(--cdCw) / -2);
  transform-origin:50% var(--cdPivot); border-radius:12px; will-change:transform,opacity; backface-visibility:hidden;
  box-shadow:-6px 6px 18px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.07); background:#1a1a2a}
#cdOv .cdFc img{width:100%; height:100%; object-fit:cover; display:block; border-radius:12px; pointer-events:none; user-select:none; -webkit-user-drag:none}
#cdOv .cdFc:after{content:""; position:absolute; inset:-2px; border-radius:14px; pointer-events:none; opacity:0; transition:opacity .45s ease;
  box-shadow:0 0 0 2px var(--cdAcc), 0 0 38px rgba(232,194,106,.45), 0 26px 50px rgba(0,0,0,.6)}
#cdOv .cdFc.up:after{opacity:1}
#cdOv .cdFc.gone{pointer-events:none; transition:transform .8s cubic-bezier(.4,0,.6,1), opacity .6s ease; opacity:0 !important}

#cdOv .cdHint{position:absolute; left:0; right:0; bottom:calc(58px + env(safe-area-inset-bottom, 0px)); text-align:center; font-size:12px;
  color:rgba(240,236,227,.55); transition:opacity .4s; padding:0 24px; pointer-events:none}
#cdOv .cdHint b{color:#f0ece3; font-weight:500}
#cdOv .cdPick{position:absolute; left:0; right:0; bottom:calc(46px + env(safe-area-inset-bottom, 0px)); text-align:center; opacity:0; transform:translateY(18px);
  transition:opacity .45s ease, transform .55s cubic-bezier(.2,.9,.3,1.2); pointer-events:none; z-index:950}
#cdOv .cdPick.on{opacity:1; transform:none; pointer-events:auto}
#cdOv .cdPick .cdSm{font-size:12px; color:rgba(240,236,227,.55); margin-top:12px}
#cdOv .cdFade{opacity:0 !important; pointer-events:none}
#cdOv .cdBtn{display:inline-flex; align-items:center; justify-content:center; height:52px; padding:0 44px; border-radius:26px; border:0;
  background:var(--cdAcc); color:#0b0d22; font:600 15px var(--font-body); letter-spacing:.4px; cursor:pointer; box-shadow:0 10px 30px rgba(0,0,0,.4)}
#cdOv .cdBtn:active{transform:scale(.97)}

/* cartea aleasa (se intoarce) */
#cdOv .cdChosen{position:absolute; left:50%; top:var(--cdBigTop); width:var(--cdBw); height:var(--cdBh); margin-left:calc(var(--cdBw) / -2);
  perspective:1400px; display:none; z-index:900}
#cdOv .cdGlow{position:absolute; inset:-40px; border-radius:50%; background:radial-gradient(closest-side, var(--cdAcc), transparent); opacity:0; filter:blur(18px); transition:opacity 1.2s}
#cdOv .cdChosen.lit .cdGlow{opacity:.32}
.cdFlip{position:relative; width:100%; height:100%; transform-style:preserve-3d}
.cdFace{position:absolute; inset:0; border-radius:16px; overflow:hidden; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.08); container-type:inline-size; background:#11132c}
.cdFace img{width:100%; height:100%; object-fit:cover; display:block}
.cdFace.cdBack{transform:rotateY(180deg)}
/* randul mic de pe spate e text HTML (2pt mai mare decat pe cartea tiparita), pus peste spatele curatat */
.cdSub{position:absolute; left:12%; right:12%; text-align:center; font:400 4.3cqw/1.5 var(--font-body); color:rgba(240,236,227,.86);
  text-wrap:balance; letter-spacing:.1px}
.cdShine{position:absolute; inset:0; background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 48%, transparent 62%); transform:translateX(-120%); pointer-events:none}
#cdOv .cdChosen.shineOn .cdBack .cdShine{animation:cdShine 1.3s .1s ease forwards}
@keyframes cdShine{to{transform:translateX(120%)}}
#cdOv .cdSpark{position:absolute; width:4px; height:4px; border-radius:50%; background:var(--cdAcc); box-shadow:0 0 8px var(--cdAcc); pointer-events:none; opacity:0}

#cdOv .cdAfter{position:absolute; left:0; right:0; bottom:calc(44px + env(safe-area-inset-bottom, 0px)); text-align:center; padding:0 28px; opacity:0; transform:translateY(14px);
  transition:opacity .7s, transform .7s; pointer-events:none; z-index:950}
#cdOv .cdAfter.on{opacity:1; transform:none; pointer-events:auto}
#cdOv .cdWho{font-size:12px; color:rgba(240,236,227,.55); margin-bottom:16px; letter-spacing:.3px}
#cdOv .cdWho b{color:var(--cdAcc); font-weight:600; letter-spacing:2px}

/* ---------- HOME: cardul Mesajul zilei (V4 pop-out) ---------- */
/* hero-ul cu peisaj si mesajul animat se ascund; cardul sta primul in #hubBody, ritualul ramane dedesubt */
body.cdHome #fvHero{display:none !important}
body.cdHome #hubBody{margin-top:0 !important; padding-top:6px !important}
body.cdHome #hubBody:before, body.cdHome #hubBody:after, body.cdHome .hubSeam{display:none !important}
/* butonul de ritual urca peste cusatura hero-ului (margin -209px in css/28); fara hero sta sub card */
body.cdHome #hubBody .ritBox{margin:0 auto !important}
#cdHome{display:none}
body.cdHome #cdHome{display:block}
#cdHome .cdW{position:relative; margin:22px 0 18px; padding-top:34px; cursor:pointer; -webkit-tap-highlight-color:transparent}
#cdHome .cdMotd{position:relative; min-height:190px; border-radius:22px; overflow:hidden; background:rgb(var(--cdBase, 11,15,34));
  padding:20px 0 20px 18px; border:1px solid rgba(255,255,255,.09); box-shadow:0 18px 40px rgba(0,0,0,.45); isolation:isolate}
#cdHome .cdBlur{position:absolute; inset:-30px; background:var(--cdBackImg) 50% 50%/cover no-repeat; filter:blur(22px) saturate(1.2); transform:scale(1.3); opacity:.85; z-index:0}
#cdHome .cdTx{position:relative; z-index:2; width:calc(100% - 150px); max-width:220px; color:#f0ece3}
#cdHome .cdLbl{font:600 9.5px var(--font-body); letter-spacing:2.4px; color:rgba(240,236,227,.6); text-transform:uppercase}
#cdHome .cdCh{font:600 10.5px var(--font-body); letter-spacing:2.6px; color:var(--cdAcc); margin-top:6px}
#cdHome .cdQ{font-family:var(--font-title); font-weight:700; font-size:20px; line-height:1.2; margin:10px 0 12px; color:#f0ece3}
#cdHome .cdBar{width:30px; height:3px; border-radius:2px; background:var(--cdAcc)}
#cdHome .cdS{font:400 12.5px/1.55 var(--font-body); color:rgba(240,236,227,.82); margin-top:10px}
#cdHome .cdPop{position:absolute; right:16px; top:0; width:118px; aspect-ratio:472/655; border-radius:10px; z-index:3; rotate:6deg;
  background:var(--cdPhoto) center/cover no-repeat; animation:cdBob 6s ease-in-out infinite;
  box-shadow:0 22px 40px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.14), 0 0 40px color-mix(in srgb, var(--cdAcc) 25%, transparent)}
@keyframes cdBob{0%,100%{translate:0 0} 50%{translate:0 -6px}}

/* ---------- MODALUL ---------- */
#cdMod{position:fixed; inset:0; background:rgba(3,4,14,.86); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); display:flex; flex-direction:column;
  align-items:center; justify-content:center; z-index:9600; opacity:0; pointer-events:none; transition:opacity .35s}
#cdMod.on{opacity:1; pointer-events:auto}
#cdMod .cdMc{width:min(270px, 72vw); aspect-ratio:472/655; perspective:1200px; cursor:pointer}
#cdMod .cdFlip{transition:transform .9s cubic-bezier(.3,.1,.2,1); transform:rotateY(180deg)}
#cdMod .cdFlip.front{transform:rotateY(0)}
#cdMod .cdX{margin-top:26px; font:400 12px var(--font-body); color:rgba(240,236,227,.55); text-align:center; padding:0 24px}

@media (max-width:370px){ #cdHome .cdLbl{letter-spacing:1.6px} }
@media (prefers-reduced-motion:reduce){
  #cdOv .cdStars i, #cdHome .cdPop{animation:none}
  #cdOv .cdChosen.shineOn .cdBack .cdShine{animation:none}
  #cdMod .cdFlip{transition-duration:.25s}
}