/* ==========================================================================
   Vellox · /analiza/ (Analiză & date) · page-only styles · "Violet in motion"
   Everything else is the system (site.css): page hero, stage, tabs, frames, crops, split,
   toggle, violet band, phone. The colour of this page is the sun of „Date”, as at the end
   of the homepage tour.
     1. Hero: the Analiză screens on a sun plate
     2. Signature: the real cards lift straight off their own screen (.alift)
     3. CRM on the violet band
     4. The app on the phone
   Final states are the defaults (no JS, reduced motion); analiza.js only adds the
   "before" states and plays them once.
   ========================================================================== */

/* 1. Hero ------------------------------------------------------------------- */
.page-analiza .an-shell { --plate: clamp(10px, 1.9vw, 28px); position: relative; isolation: isolate; }
.page-analiza .an-shell::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: var(--r-stage);
  background: var(--sun);
  transform: translate(var(--plate), var(--plate));
}
.page-analiza .an-shell > .stage { margin-top: 0; }
.page-analiza .an-stage .ruler-tab { --tab-dot: var(--sun); }
/* Armed by analiza.js: the plate waits behind the stage, then slides out once the stage lands */
.page-analiza .an-shell.is-armed::before { transition: transform .9s var(--ease-out), opacity .2s var(--ease); }
.page-analiza .an-shell.is-armed:not(.is-plated)::before { opacity: 0; transform: none; transition: none; }


/* 2. Signature ---------------------------------------------------------------
   An .alift layer covers the screen under the frame bar, in the crop's own box. Each card sits
   exactly on its source (--sx/--sy/--sw: the source rectangle in the capture's 1x pixels;
   --cx/--cy/--cw/--ch: the crop window) and lifts straight towards the viewer from there, so
   the lifted copy always covers its source: no double image. While cards are lifted, the
   screen steps back (a light veil, less colour), as in the homepage tour. */
.page-analiza .alift-host { position: relative; }
.page-analiza .alift {
  --cx: 0; --cy: 0; --cw: 1192; --ch: 767;
  position: absolute; inset: var(--bar-h) 0 0; z-index: 2;
  pointer-events: none;
}
.page-analiza .alift::before {
  content: ""; position: absolute; inset: 0;
  border-radius: 0 0 var(--r-frame) var(--r-frame);
  background: rgb(240 236 255 / .2);
}
.page-analiza .alift-host > .frame img { transition: filter .6s var(--ease); }
.page-analiza .alift-host:has(> .alift:is(:not(.is-armed), .is-lifted)) > .frame img { filter: saturate(.72) brightness(.97); }
.page-analiza .alift__card {
  position: absolute;
  left: calc((var(--sx) - var(--cx)) / var(--cw) * 100%);
  top: calc((var(--sy) - var(--cy)) / var(--ch) * 100%);
  width: calc(var(--sw) / var(--cw) * 100%);
  transform: translateY(var(--ty, -4px)) scale(var(--ls, 1.06));
  transform-origin: var(--lo, 50% 50%);
}
.page-analiza .alift__card::before {
  content: ""; position: absolute; inset: 0;
  border-radius: var(--cr);
  box-shadow: 0 0 0 1px rgb(107 78 255 / .12), 0 2px 6px rgb(42 27 110 / .1), 0 30px 60px -20px rgb(42 27 110 / .5);
}
.page-analiza .alift__card img { position: relative; display: block; width: 100%; height: auto; }
/* The two attribution cards sit 16px apart: their origins keep them clear of each other */
.page-analiza .alift__card--contrib { --sx: 30;  --sy: 395;   --sw: 756; --ls: 1.05; --lo: 75% 50%; --cr: 2.12% / 4.88%; }
.page-analiza .alift__card--rezumat { --sx: 802; --sy: 395;   --sw: 360; --ls: 1.08; --lo: 20% 50%; --cr: 4.44% / 6.64%; --d: .14s; }
.page-analiza .alift__card--kpi     { --sx: 30;  --sy: 156.5; --sw: 214; --ls: 1.16; --ty: -6px; --cr: 5.61% / 7.23%; }
/* Rapoarte has no cut-out file: its card is cut from the same capture (same pixels) */
.page-analiza .alift__card--chart   { --sx: 30;  --sy: 332;   --sw: 756; --sh: 413.5; --ls: 1.04; --cr: 2.12% / 3.87%; }
.page-analiza .alift__crop { position: relative; display: block; overflow: hidden; border-radius: var(--cr); aspect-ratio: var(--sw) / var(--sh); }
.page-analiza .alift__crop img { position: absolute; max-width: none; width: calc(1192 / var(--sw) * 100%); left: calc(var(--sx) / var(--sw) * -100%); top: calc(var(--sy) / var(--sh) * -100%); }
.page-analiza .alift--rap { --ch: 773; }
.page-analiza .alift--kpi { --ch: 771; }

/* Armed (JS, motion allowed): flat on the source until lifted, then the lift plays once per
   view; the shadow grows just after the card lands. Flat cards ignore the pointer parallax
   (data-depth), so they always sit pixel for pixel on their source. */
.page-analiza .alift.is-armed .alift__card { transition: transform .8s var(--ease-out) var(--d, 0s); }
.page-analiza .alift.is-armed .alift__card::before { transition: opacity .6s var(--ease) calc(var(--d, 0s) + .28s); }
.page-analiza .alift.is-armed::before { transition: opacity .5s var(--ease); }
.page-analiza .alift.is-armed:not(.is-lifted) .alift__card { transform: none; translate: none !important; transition: none; }
.page-analiza .alift.is-armed:not(.is-lifted) .alift__card::before,
.page-analiza .alift.is-armed:not(.is-lifted)::before { opacity: 0; transition: none; }

/* Phones: each window shows one card, which lifts alone; Tracking becomes the phone screen */
@media (max-width: 759.98px) {
  .page-analiza .alift--atrib { --cx: 794; --cy: 386; --cw: 374; --ch: 378; }
  .page-analiza .alift--atrib .alift__card--contrib { display: none; }
  .page-analiza .alift--atrib .alift__card--rezumat { --ls: 1.03; --ty: -2px; --lo: 50% 25%; --d: 0s; }
  .page-analiza .alift--rap { --cx: 794; --cy: 324; --cw: 374; --ch: 484; }
  .page-analiza .alift--rap .alift__card--chart { --sx: 802; --sw: 360; --sh: 468.5; --ls: 1.03; --ty: -2px; --lo: 50% 25%; --cr: 4.44% / 3.42%; }
  .page-analiza .alift--kpi { display: none; }
  .page-analiza .alift-host.alift-host--desk:has(> .alift) > .frame img { filter: none; }
}


/* 3. CRM on the violet band ---------------------------------------------------- */
.page-analiza .an-fact { --tick: var(--sun); max-width: 22rem; margin-top: var(--s6); }
.page-analiza .an-fact .figure__num { font-size: clamp(2.25rem, 1.45rem + 2.2vw, 3.5rem); font-size: min(clamp(2.25rem, 1.45rem + 2.2vw, 3.5rem), 20cqi); }
.page-analiza .an-fact .figure__label { max-width: none; }
/* The toggle on violet: a dark glass pill, the chosen view white (violet-700 on white 7.8:1) */
.page-analiza .band-violet .toggle { background: rgb(20 13 51 / .2); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .38); }
.page-analiza .band-violet .toggle__btn { color: #fff; }
.page-analiza .band-violet .toggle__btn:hover { background: rgb(255 255 255 / .1); }
.page-analiza .band-violet .toggle__btn[aria-pressed="true"] { background: #fff; color: var(--violet-700); box-shadow: 0 8px 18px -8px rgb(20 13 51 / .55); }
.page-analiza .band-violet .frame { box-shadow: 0 2px 4px rgb(20 13 51 / .1), 0 40px 80px -36px rgb(20 13 51 / .6); }


/* 4. The app on the phone: the index under the lede, the phone on a sun stage ----- */
.page-analiza .split__text > .ruler-tabs--vertical { margin-top: var(--s6); }
.page-analiza .an-phone {
  padding: clamp(36px, 4.4vw, 64px) var(--s5);
  border-radius: var(--r-stage);
  background: var(--sun-tint);
}
.page-analiza .an-phone .phone { margin-inline: auto; }
@media (max-width: 759.98px) {
  .page-analiza .an-phone { padding: var(--s6) var(--s4); border-radius: var(--r-lg); }
}

/* Without JS: every screen and phone shows, one after another; the tabs and the toggle need JS,
   so they step aside (the CRM shows its client view) */
html:not(.js) .page-analiza :is([role="tablist"], [data-tabs-caption], .toggle) { display: none; }
html:not(.js) .page-analiza .tab-panels--stack { gap: var(--s7); }
html:not(.js) .page-analiza .tab-panels--stack > .tab-panel { grid-area: auto; opacity: 1; visibility: visible; content-visibility: visible; }
html:not(.js) .page-analiza .an-phone__panels { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s5); }
html:not(.js) .page-analiza .an-phone__panels > .tab-panel { flex: 0 0 190px; }

@media print {
  .page-analiza .alift, .page-analiza .an-shell::before { display: none; }
  .page-analiza .alift-host > .frame img { filter: none; }
}