/* ============================================================================
 * hero.css — HERO + OVERLAY (specific homepage/sandbox), se incarca DUPA glass.css
 * Contine: hero (titlu/semnatura/play/rand/coloane), overlay ploaie (cb-rain-on),
 * hero-clouds, header-veil, coregrafia Calatoriei, fundalul video homepage.
 * Foloseste tokenii/primitivele din glass.css (--glass-*, .cb-card, etc.).
 * ============================================================================ */

/* ============ HERO (sandbox): titlu + semnatura + buton play glass ============
 * Peste ploaie. Text/semnatura urmeaza tema (--glass-ink). */
.cb-hero { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: normal; padding: 120px 0; }
/* FULL-WIDTH, doua coloane: [stanga titlu+subtitlu+semnatura] | [dreapta play+text] */
.cb-hero-inner { width: 100%; max-width: 1680px; margin: 250px auto; padding: 0; display: flex; align-items: center; gap: 160px; }
.cb-hero-col { flex: 1 1 50%; min-width: 0; }
/* STANGA: aliniat stanga (titlu -> subtitlu -> semnatura) */
.cb-hero-col--left { text-align: left; }
.cb-hero-col--left .cb-hero-title { margin: 0; max-width: none; }
.cb-hero-col--left .cb-hero-support { margin: 28px 0 0; max-width: 560px; }
.cb-hero-col--left .cb-hero-sign { margin: 52px 0 0; }
/* DREAPTA: stivuit, centrat (play -> text) */
.cb-hero-col--right { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 34px; }
.cb-hero-col--right .cb-hero-cta { margin-top: 0; }
@media (max-width: 999px) {
  .cb-hero-inner { flex-direction: column; gap: 48px; padding: 0 32px; }
  .cb-hero-col { flex: none; width: 100%; }
}
.cb-hero-title {
  color: var(--glass-ink);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: .01em;
  font-size: clamp(28px, 4.2vw, 40px);
  margin: 0 auto;
  max-width: 900px;
  font-style: italic;
  text-shadow: 0 2px 16px rgb(2 5 24), 0 1px 3px rgb(0 1 4);
}
/* text suport sub titlu */
.cb-hero-support {
  color: var(--glass-ink); opacity: .9;
  font-size: clamp(15px, 1.4vw, 19px); line-height: 1.55;
  max-width: 640px; margin: 75px auto 0;
  text-shadow: 0 2px 16px rgb(4 8 34), 0 1px 4px rgb(1 3 12);
}
/* semnatura ALB in ambele teme (in light preia look-ul dark) + umbra pe video */
.cb-hero-sign { display: block; height: 72px; width: auto; margin: 40px auto 0;
  filter: brightness(0) invert(1) drop-shadow(0 3px 10px rgba(6, 10, 32, .5)); }

/* Light mode: hero-ul preia look-ul "dark" (text alb) peste video-ul intunecat.
 * Bate regula body.cb-rain-on #ajax-content-wrap h1/p (!important) prin id + clase. */
html[data-theme="light"] body.cb-rain-on #ajax-content-wrap .cb-hero-title,
html[data-theme="light"] body.cb-rain-on #ajax-content-wrap .cb-hero-support,
html[data-theme="light"] body.cb-rain-on #ajax-content-wrap .cb-hero-cta__text {
  color: #f3f5ff !important;
}

/* buton hero = PICATURA DE APA animata (adaptat din CodePen "Water Drop", jaronwhite;
 * CSS pur, fara JS), stilizata GLASS (in tema cu restul site-ului, FARA blur).
 * CICLU COMPLET IN BUCLA (--cyc): picatura cade -> cand se opreste din cadere si incepe
 * sa se morfeze in cerc apare iconul PLAY -> ripple-uri albe RAPIDE si SUPRAPUSE (2 emitteri:
 * ::before + ::after, inele concentrice care se suprapun = efect de apa real) -> cand se sting
 * inelele, picatura DISPARE (dropfade) -> pauza scurta -> RESET. Sub-animatiile impart --cyc. */
.cb-hero-play { display: inline-flex; text-decoration: none; margin: 0; }
.cb-drop-container {
  --cyc: 5.5s;
  /* picatura arata MEREU ca in light mode (independent de tema): pinuim tokenii glass light */
  --glass-bg: rgba(255, 255, 255, .50);
  --glass-border: rgba(255, 255, 255, .55);
  --glass-ink: #121a4c;
  position: relative; z-index: 0; isolation: isolate;   /* tine ripple-urile (z-index:-1) in interior */
  display: block; width: 110px; height: 110px; margin: 0 auto;   /* +15% fata de 96px */
  animation: cb-dropfade var(--cyc) linear infinite;     /* fade scurt la reset (maskeaza saltul) */
}
/* picatura = GLASS: fundal translucid + hairline, FARA backdrop-blur (e in miscare) */
.cb-drop {
  position: absolute; top: -25%; left: 0; width: 100%; height: 100%;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: 0 5px 28px #080d2a3b;
  border-radius: 100% 5% 100% 100%;
  transform: rotate(-45deg);
  animation: cb-drip var(--cyc) ease-in-out infinite;
}
/* iconul PLAY in centrul cercului (cerneala temei; apare cand picatura se aseaza) */
.cb-drop-play {
  position: absolute; inset: 0; z-index: 1;
  display: grid; place-items: center;
  opacity: 0;
  animation: cb-playin var(--cyc) ease-out infinite;
}
.cb-drop-play svg { width: 41px; height: 41px; margin-left: 3px; fill: var(--glass-ink); }   /* triunghi centrat optic (+15%) */
/* ripple-uri albe: 3 pulsuri per ciclu, CERC PERFECT concentric, centrat pe picatura
 * (fara rotateX-ul "oblic" din pen). translate(-50%,-50%) tine inelul centrat pe centrul
 * containerului (= centrul picaturii asezate) indiferent cat creste. */
/* 3 inele concentrice REALE (span-uri dedicate): apar 1->2->3, cresc IMPREUNA (spatiate),
 * apoi se sting pe rand (cel mai batran/din afara primul). Centrare prin translate. */
.cb-ripple {
  position: absolute; z-index: -1;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 108%; height: 108%;
  border: 4px solid #fff; border-radius: 100%;
  opacity: 0;
}
.cb-ripple--1 { animation: cb-rip1 var(--cyc) linear infinite; }
.cb-ripple--2 { animation: cb-rip2 var(--cyc) linear infinite; }
.cb-ripple--3 { animation: cb-rip3 var(--cyc) linear infinite; }
.cb-hero-play:hover .cb-drop { filter: brightness(1.12); }

@keyframes cb-drip {
  0%   { top: -25%; transform: rotate(-45deg); border-radius: 100% 5% 100% 100%; }  /* sus, lacrima */
  29%  { top: 0;    transform: rotate(-45deg); border-radius: 100% 5% 100% 100%; }  /* a cazut (~1.6s) */
  40%  { top: 0;    transform: rotate(0deg);   border-radius: 100%; }               /* morfat in cerc */
  100% { top: 0;    transform: rotate(0deg);   border-radius: 100%; }               /* hold */
}
/* picatura vizibila din cadere pana dupa ce se stinge ULTIMUL inel, apoi DISPARE inainte de reset */
@keyframes cb-dropfade { 0% { opacity: 0; } 5% { opacity: 1; } 80% { opacity: 1; } 88% { opacity: 0; } 100% { opacity: 0; } }
/* iconul apare cand se opreste din cadere (~29%) si incepe morful spre cerc */
@keyframes cb-playin {
  0%, 29% { opacity: 0; transform: scale(.6); }
  40%     { opacity: 1; transform: scale(1); }
  100%    { opacity: 1; transform: scale(1); }
}
/* Cele 3 inele au ACEEASI forma de miscare, decalata cu 6% (spawn 42/48/54). Fiecare: apare mic,
 * creste constant (calatoreste) ramanand vizibil, apoi se stinge la capat. Fiindca inelul 1 e cel
 * mai batran, ajunge primul la capat -> se sting 1->2->3, iar intre timp sunt toate 3 concentrice. */
@keyframes cb-rip1 {
  0%, 42%     { width: 108%; height: 108%; opacity: 0; }
  44%         { width: 130%; height: 130%; opacity: .85; }   /* nascut */
  62%         { width: 360%; height: 360%; opacity: .8; }    /* calatoreste, vizibil */
  68%         { width: 420%; height: 420%; opacity: 0; }     /* se stinge PRIMUL */
  68.5%, 100% { width: 108%; height: 108%; opacity: 0; }
}
@keyframes cb-rip2 {
  0%, 48%     { width: 108%; height: 108%; opacity: 0; }
  50%         { width: 130%; height: 130%; opacity: .85; }
  68%         { width: 360%; height: 360%; opacity: .8; }
  74%         { width: 420%; height: 420%; opacity: 0; }     /* se stinge AL DOILEA */
  74.5%, 100% { width: 108%; height: 108%; opacity: 0; }
}
@keyframes cb-rip3 {
  0%, 54%     { width: 108%; height: 108%; opacity: 0; }
  56%         { width: 130%; height: 130%; opacity: .85; }
  74%         { width: 360%; height: 360%; opacity: .8; }
  80%         { width: 420%; height: 420%; opacity: 0; }     /* se stinge ULTIMUL -> apoi pleaca picatura */
  80.5%, 100% { width: 108%; height: 108%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cb-drop-container, .cb-drop, .cb-drop-play, .cb-ripple { animation: none !important; }
  .cb-drop-container { opacity: 1; }
  .cb-drop { top: 0; transform: rotate(0deg); border-radius: 100%; }
  .cb-drop-play { opacity: 1; }
  .cb-ripple { opacity: 0; }
}
/* CTA hero: text-invitatie + buton play (sub textul suport) */
.cb-hero-cta { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-top: 46px; }
.cb-hero-cta__text { color: var(--glass-ink); font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .85; margin: 30px 0 0 0; text-shadow: 0 1px 8px rgba(6, 10, 32, .5); }

/* ===== TENTA sandbox = GRADIENT radial pe stratul FIX #cb-rain-tint, ANIMAT la scroll =====
 * La scroll, variabila --fill (0 sus -> 1 cand randul 2 e in view, setata din JS in
 * sandbox.php) umple centrul transparent: HERO = vignette (centru transparent, se vede
 * video-ul); RANDUL 2 = navy aproape opac pe TOT ecranul (video ascuns). Stratul e fix,
 * dar gradientul se transforma cu scroll-ul. `background` shorthand + !important bate
 * stilul inline pus de motorul de ploaie / preset (inclusiv veil-ul solid). Scoped pe
 * body.cb-tint-vignette -> DOAR sandbox; celelalte pagini isi pastreaza tinta lor.
 * Controlabil din DevTools (#cb-rain-tint): --tint-x/-y (pozitie centru), --tint-rx/-ry
 * (dimensiuni elipsa la fill 0), --tint-clear (raza transparenta din centru la fill 0). */
body.cb-tint-vignette #cb-rain-tint {
  --tint-rgb: 0 6 36;
  --tint-x: 50%;
  --tint-y: 100%;
  --tint-rx: 100%;
  --tint-ry: 75%;
  --tint-clear: 45%;
  --tint-navy: 0 4 27;   /* culoarea fazei 1 (hero->randul 2) */
  --tint-white: 255 255 255;  /* culoarea fazei 2 (spre randul 3) */
  --tint-edge: .55;   /* intensitatea la marginea vignette-ului in hero (fill 0) */
  --tint-max: .75;    /* CAP faza 1: navy la randul 2 (fill 1) */
  --tint-max3: .8;    /* CAP faza 2: alb la randul 3 (fill2 1) */
  --fill: 0;          /* faza 1 (setat din JS): hero -> randul 2 */
  --fill2: 0;         /* faza 2 (setat din JS): randul 2 -> randul 3 (vireaza spre alb) */
  /* alpha tinta la umplere completa: navy .6 -> alb .8 pe masura ce fill2 creste */
  --tint-a: calc(var(--tint-max) + var(--fill2) * (var(--tint-max3) - var(--tint-max)));
  --tint-ia: calc(var(--fill) * var(--tint-a));                                    /* centru */
  --tint-oa: calc(var(--tint-edge) + var(--fill) * (var(--tint-a) - var(--tint-edge)));  /* margine */
  background: radial-gradient(ellipse var(--tint-rx) var(--tint-ry) at var(--tint-x) var(--tint-y),
    color-mix(in srgb, rgb(var(--tint-navy) / var(--tint-ia)), rgb(var(--tint-white) / var(--tint-ia)) calc(var(--fill2) * 100%)) var(--tint-clear),
    color-mix(in srgb, rgb(var(--tint-navy) / var(--tint-oa)), rgb(var(--tint-white) / var(--tint-oa)) calc(var(--fill2) * 100%)) 100%
  ) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
/* DARK mode: randul 3 NU vireaza spre alb (ar fi fundal alb in dark). Faza 2 ramane navy
 * -> scena ramane inchisa tot parcursul; textul (--glass-ink deschis) ramane lizibil. */
html[data-theme="dark"] body.cb-tint-vignette #cb-rain-tint { --tint-white: 0 4 27; }

/* ===== RANDUL 2 (Misiunea) are FUNDAL INCHIS (navy) => textul urmeaza FUNDALUL, nu tema.
 * Folosim mecanismul existent: continutul se coloreaza cu `var(--glass-ink)`, deci doar
 * suprascriem --glass-ink pe rand la valoarea de "fundal inchis" (cerneala deschisa) si
 * tot textul devine deschis automat (indiferent de tema). Cardurile au fundal DESCHIS
 * propriu -> le readucem --glass-ink la inchis (cerneala navy). */
body.cb-tint-vignette .cb-row2 { --glass-ink: #f3f5ff; }

/* ===== RANDUL 3: carusel MINUTUL (regulile CUSTOM copiate 1:1 din /blog; baza
 * .nectar-recent-posts-slider e deja in head-ul temei pe sandbox). Scoped pe
 * body.cb-tint-vignette ca sa NU atinga caruselul din /blog (aceleasi clase). ===== */
body.cb-tint-vignette .nectar-recent-posts-slider_multiple_visible .flickity-viewport .nectar-recent-post-slide .nectar-recent-post-bg { transform: scale(1.23) translateZ(0) !important; }
body.cb-tint-vignette .nectar-recent-posts-slider_multiple_visible .flickity-viewport:not(.no-hover) .nectar-recent-post-slide:hover .nectar-recent-post-bg { transform: scale(1.34) translateZ(0) !important; }
@media only screen and (max-width: 690px) {
  body.cb-tint-vignette .flickity-viewport { height: 500px !important; }
  body.cb-tint-vignette .nectar-recent-posts-slider_multiple_visible .nectar-recent-post-slide { width: 75%; border-radius: 5px; min-height: 500px !important; padding-top: 45%; margin: 0 15px; }
}
@media only screen and (min-width: 1000px) {
  body.cb-tint-vignette .nectar-recent-posts-slider_multiple_visible[data-columns="3"] .nectar-recent-post-slide,
  body.cb-tint-vignette .nectar-recent-posts-slider_multiple_visible[data-columns="4"] .nectar-recent-post-slide { width: 17%; margin: 0 10px; }
}
@media only screen and (min-width: 1600px) {
  body.cb-tint-vignette .nectar-recent-posts-slider_multiple_visible[data-columns="4"] .nectar-recent-post-slide { width: 17%; padding-top: 26%; }
}
body.cb-tint-vignette .nectar-recent-posts-slider_multiple_visible .recent-post-container.container { position: absolute; top: 20px; left: 25px; max-width: 85% !important; z-index: 10; padding: 0; }
/* titlul slide-ului: 18px/27px (ca pe blog; regula globala de h3 nu e portata pe sandbox) */
body.cb-tint-vignette .nectar-recent-posts-slider_multiple_visible .recent-post-container h3,
body.cb-tint-vignette .nectar-recent-posts-slider_multiple_visible .recent-post-container h3 a { font-size: 18px; line-height: 27px; font-weight: 600; letter-spacing: 0; text-transform: none; }
/* overlay slide: gradient culoare (sus, unde e titlul) -> transparent (si pe hover) */
body.cb-tint-vignette .nectar-recent-posts-slider_multiple_visible .nectar-recent-post-slide .nectar-recent-post-bg:after,
body.cb-tint-vignette .nectar-recent-posts-slider_multiple_visible .nectar-recent-post-slide:not(.no-bg-img):hover .nectar-recent-post-bg:after {
  background-color: transparent;
  background-image: linear-gradient(to bottom, rgba(10, 16, 44, 0.82) 0%, rgba(10, 16, 44, 0.35) 25%, rgba(10, 16, 44, 0) 100%);
}
/* buton play glass in coltul dreapta-jos al slide-ului */
body.cb-tint-vignette .nectar-recent-posts-slider_multiple_visible .nectar-recent-post-slide .cb-slide-play {
  position: absolute; right: 20px; bottom: 20px; z-index: 11; width: 54px; height: 54px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: rgba(10, 16, 44, 0.55);
  -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(120, 140, 220, 0.45); box-shadow: 0 6px 22px rgba(8, 13, 42, 0.5);
  transition: transform 0.2s ease, background 0.2s ease;
}
body.cb-tint-vignette .nectar-recent-posts-slider_multiple_visible .nectar-recent-post-slide .cb-slide-play svg { width: 22px; height: 22px; margin-left: 3px; fill: #fff; }
body.cb-tint-vignette .nectar-recent-posts-slider_multiple_visible .nectar-recent-post-slide:hover .cb-slide-play { transform: scale(1.08); background: rgba(10, 16, 44, 0.72); }
/* container relativ + fara padding-bottom al temei */
body.cb-tint-vignette .nectar-recent-posts-slider_multiple_visible { position: relative; padding-bottom: 0 !important; }
body.cb-tint-vignette .nectar-recent-posts-slider_multiple_visible .flickity-viewport .nectar-recent-post-bg-wrap { border: 0; }
/* fade la marginea DREAPTA (indiciu de scroll orizontal). FARA backdrop-filter: pe sandbox
 * fundalul din spatele caruselului variaza (navy->alb la scroll), iar blur-ul facea o banda
 * vizibila urata; doar gradientul alb (ca efectul curat de pe blog). */
body.cb-tint-vignette .cb-carousel-fade {
  position: absolute; top: 0; right: 0; bottom: 0; width: 80px; z-index: 12; pointer-events: none;
  background: linear-gradient(to left, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0) 100%);
}
body.cb-tint-vignette .nectar-recent-posts-slider_multiple_visible .flickity-page-dots { display: none !important; }
body.cb-tint-vignette .nectar-recent-posts-slider_multiple_visible .flickity-viewport { padding-left: 10px; }

/* RANDUL 3 (MINUTUL): textul urmeaza SCENA, sincron cu culoarea logo-ului din header
 * (aceeasi sursa: cb-scene-* pus de scriptul header-ului). Scena inchisa (navy) -> text
 * alb (ca logo alb); scena deschisa (alb, la randul 3 in light) -> text navy (ca logo navy). */
body.cb-tint-vignette.cb-scene-dark  .cb-row3 { --glass-ink: #f3f5ff; }
body.cb-tint-vignette.cb-scene-light .cb-row3 { --glass-ink: #121a4c; }

/* ===== RANDUL 4: CARTEA (rand copiat din /cartea-apa-care-te-vindeca). Coperta sticky +
 * descriere. Sticky col + padding = din head-ul temei (deja pe sandbox). Textul urmeaza
 * --glass-ink (navy pe scena alba in light, alb pe navy in dark). ===== */
body.cb-tint-vignette .cb-book-cover-wrap,
body.cb-tint-vignette .cb-book-cover-wrap .inner,
body.cb-tint-vignette .cb-book-cover-wrap .hover-wrap,
body.cb-tint-vignette .cb-book-cover-wrap .hover-wrap-inner { width: 100% !important; max-width: 100% !important; }
body.cb-tint-vignette .cb-book-cover-wrap img { width: 100% !important; height: auto !important; }
/* badge Goodreads (stele + scor) */
body.cb-tint-vignette .cb-stars { --pct: 100%; position: relative; display: inline-block; font-size: 19px; line-height: 1; letter-spacing: 2px; color: #d8dae2; }
body.cb-tint-vignette .cb-stars::before { content: "\2605\2605\2605\2605\2605"; }
body.cb-tint-vignette .cb-stars .cb-stars-on { position: absolute; left: 0; top: 0; width: var(--pct); overflow: hidden; white-space: nowrap; color: #f5b301; }
body.cb-tint-vignette .cb-stars .cb-stars-on::before { content: "\2605\2605\2605\2605\2605"; }
body.cb-tint-vignette .cb-gr-badge { display: flex; flex-direction: column; align-items: center; gap: 5px; margin-top: 16px; }
body.cb-tint-vignette .cb-gr-badge .cb-gr-score { font-family: 'Montserrat', system-ui, sans-serif; font-weight: 800; font-size: 20px; color: var(--glass-ink); }
body.cb-tint-vignette .cb-gr-badge .cb-gr-link { font-size: 11px; letter-spacing: .5px; text-transform: uppercase; text-decoration: underline; opacity: .7; color: var(--glass-ink); }
/* semnatura navy -> alb pe dark; citatul-semnatura urmeaza tema pe dark (inline e navy) */
html[data-theme="dark"] body.cb-tint-vignette .cb-row4 img[src*="signatureCB"] { filter: brightness(0) invert(1); }
html[data-theme="dark"] body.cb-tint-vignette .cb-row4 .nectar_single_testimonial .inner,
html[data-theme="dark"] body.cb-tint-vignette .cb-row4 .nectar_single_testimonial .wrap span { color: var(--glass-ink) !important; }

/* butoanele de continut ale homepage-ului folosesc stilul .cb-cta (definit in glass.css):
 * "Citeste toata Introducerea", "Comanda cartea" (randul 4), "Afla mai multe" (randul 2). */


/* ===== SPIKE: overlay ploaie in sandbox (body.cb-rain-on) =====
 * Straturile video/tenta/canvas (fixed, z 0..2) stau in spate; wrapperele devin
 * transparente ca sa se vada prin toata pagina, iar footer-ul urca peste ploaie. */
body.cb-rain-on,
body.cb-rain-on.cb-plain-bg,
body.cb-rain-on .ocm-effect-wrap, body.cb-rain-on .ocm-effect-wrap-inner,
body.cb-rain-on #ajax-content-wrap,
body.cb-rain-on .container-wrap,
body.cb-rain-on .main-content { background: transparent !important; }
/* footer deasupra canvasului de ploaie (glass-ul lui refracta ploaia din spate) */
body.cb-rain-on #footer-outer { position: relative; z-index: 5; }
/* TOT continutul peste ploaie (canvas ploaie = z2); textul trebuie sa fie deasupra */
body.cb-rain-on #ajax-content-wrap { position: relative; z-index: 3; }
/* TEXT theme-aware peste tenta: continutul (titluri + paragrafe + liste) urmeaza
 * --glass-ink (navy in light, deschis in dark). Override peste culorile hardcodate
 * ale temei. NU atinge butoane/iconite/spans (pot avea accent intentionat).
 * Exceptie: hero-ul isi are deja culorile lui (--glass-ink) -> consistent. */
body.cb-rain-on #ajax-content-wrap h1,
body.cb-rain-on #ajax-content-wrap h2,
body.cb-rain-on #ajax-content-wrap h3,
body.cb-rain-on #ajax-content-wrap h4,
body.cb-rain-on #ajax-content-wrap h5,
body.cb-rain-on #ajax-content-wrap h6,
body.cb-rain-on #ajax-content-wrap p,
body.cb-rain-on #ajax-content-wrap li { color: var(--glass-ink) !important; }

/* Hero — ceata SCOASA. In loc de mist: un overlay plat navy peste video-bg
 * (vezi .cb-site-video::after mai jos). .hero-clouds ramane doar ca strat gol
 * pentru whiteout-ul de la play (Calatoria). */

.hero-clouds {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1; /* peste video-wrap, sub coloanele de continut */
}

/* PAS 3b: val de ceata alb in spatele header-ului (logo+meniu), top-heavy ->
 * transparent jos, in tonul cetii; scoate meniul in evidenta peste video.
 * Fix sus, sub continutul header-ului (z mare la Salient), peste video. */
.cb-header-veil {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 130px;
  z-index: 90;
  pointer-events: none;
  opacity: 1;
  transition: opacity .7s ease;
  /* mist usor, doar vizibil sus (nu bara atasata de header) */
  background: linear-gradient(180deg,
    rgba(255,255,255,0.58) 0%,
    rgba(255,255,255,0.36) 34%,
    rgba(255,255,255,0.16) 64%,
    rgba(255,255,255,0.05) 85%,
    rgba(255,255,255,0) 100%);
}
@media (min-width: 1000px) { .cb-header-veil { height: 150px; } }


/* ============ PAS 2: activarea Calatoriei (coregrafia la click pe play) ============
 * body.jn-activating declanseaza iesirea fina, coregrafiata: header sus, text
 * hero fade la stanga, cele 3 boxuri fade in jos una cate una, ceata se disipa.
 * !important bate stilurile inline puse de animatiile de intrare ale temei. */
#header-outer,
.jn-hero-text,
.hero-clouds,
.jn-box {
  transition: transform .85s cubic-bezier(.5, 0, .2, 1), opacity .7s ease, filter .9s ease;
}
body.jn-activating #header-outer { transform: translateY(-108%) !important; opacity: 0 !important; }
body.jn-activating .cb-header-veil { opacity: 0 !important; }
body.jn-activating .jn-hero-text { transform: translateX(-72px) !important; opacity: 0 !important; }
/* PAS 4: la play NU se disipa ceata, ci se face WHITEOUT (predare fina catre
 * overlay-ul alb al Calatoriei). Un strat alb pe .hero-clouds urca la opac. */
.hero-clouds::after {
  content: ''; position: absolute; inset: 0; background: #ffffff;
  opacity: 0; pointer-events: none; transition: opacity 1s ease;
}
body.jn-activating .hero-clouds { opacity: 1 !important; }
body.jn-activating .hero-clouds::after { opacity: 1; }
body.jn-activating .hc-cloud { opacity: 0.9; }
/* boxurile cad in jos, staggered 1->2->3 */
body.jn-activating .jn-box { transform: translateY(52px) !important; opacity: 0 !important; }
body.jn-activating .jn-box--1 { transition-delay: .10s; }
body.jn-activating .jn-box--2 { transition-delay: .26s; }
body.jn-activating .jn-box--3 { transition-delay: .42s; }
/* butonul de play: raspuns tactil la activare (creste usor si se stinge ultimul) */
.hero-play-trigger img { transition: transform .5s cubic-bezier(.34,1.56,.64,1), opacity .6s ease; }
body.jn-activating .hero-play-trigger img { transform: scale(1.18); opacity: 0; transition-delay: .15s; }

/* ============ PAS 3: Calatoria IN pagina (overlay, FARA redirect) ============
 * Butonul de play deschide experienta peste homepage, in ACELASI document.
 * Fundal alb = continuitate cu ceata care tocmai s-a disipat; iframe-ul
 * (/calatoria-apei) se incarca lazy la prima activare si urca fin in cadru.
 * Inchidere: buton, Esc sau Back din browser (starea e pusa in history). */
.jn-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: #f7fafc; /* = --cb-paper al calatoriei: prinde ceata disipata */
  opacity: 0;
  visibility: hidden;
  transition: opacity .7s ease, visibility 0s linear .7s;
}
.jn-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity .7s ease;
}
.jn-overlay-frame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  opacity: 0;
  transform: translateY(10px) scale(1.012);
  transition: transform 1.1s cubic-bezier(.5,0,.2,1) .12s, opacity .9s ease .12s;
}
.jn-overlay.is-open .jn-overlay-frame { opacity: 1; transform: none; }
.jn-overlay-close {
  position: fixed;
  top: 16px;
  right: 18px;
  z-index: 2;
  font: 600 12px/1 system-ui, -apple-system, sans-serif;
  letter-spacing: .04em;
  color: #0b2036;
  background: rgba(255,255,255,.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(11,32,54,.16);
  border-radius: 999px;
  padding: 9px 14px;
  cursor: pointer;
  opacity: 0;
  transition: opacity .5s ease .5s, background .2s ease;
}
.jn-overlay.is-open .jn-overlay-close { opacity: 1; }
.jn-overlay-close:hover { background: #fff; }

/* cat timp Calatoria e deschisa, homepage-ul din spate nu se scroll-eaza */
body.jn-overlay-lock { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .jn-overlay, .jn-overlay-frame, .jn-overlay-close { transition: opacity .3s ease; }
  .jn-overlay-frame { transform: none; }
}

/* ============ FUNDAL VIDEO FIX AL SITE-ULUI (homepage) ============
 * Un singur video, FIX in spatele intregii pagini (sta pe loc la scroll);
 * sectiunile devin transparente ca sa se vada prin toata pagina.
 * Lizibilitatea textului peste video = pasul urmator. */
.cb-site-video {
  position: fixed;
  inset: 0;
  z-index: 2;            /* deasupra straturilor albe; continutul (.container-wrap z:10) ramane peste */
  overflow: hidden;
  background: #0b1730;   /* fallback pana se incarca video-ul */
  pointer-events: none;
}
.cb-site-video__el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* overlay plat: albastru inchis de tot, opacity 0.3 (in loc de ceata) */
.cb-site-video::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--hero-overlay);
  pointer-events: none;
}

/* text hero = culoarea bg-ului logo (#f3f5ff), peste overlay-ul navy */
.jn-hero-text,
.jn-hero-text * {
  color: #f3f5ff !important;
}
/* semnatura (SVG navy) -> ALB. badge-ul CWS ramane cum e (nu il atingem). */
.jn-hero-text img[src*="signatureCB"] {
  filter: brightness(0) invert(1);
}

/* fundaluri transparente: sa se vada video-ul prin TOATA pagina */
html, body,
.ocm-effect-wrap, .ocm-effect-wrap-inner,
#ajax-content-wrap,
.container-wrap,
.main-content { background: transparent !important; }

/* AGRESIV: tot lanturile de containere + straturile de fundal Salient/VC ->
 * transparente, ca nimic sa nu acopere video-ul. */
#ajax-content-wrap, #ajax-content-wrap > *,
.container-wrap, .container-wrap > *,
.main-content, .main-content > .row, .main-content > .row > *,
.wpb_row, .vc_row, .vc_row-fluid,
.row-bg-wrap, .inner-wrap, .row-bg, .row-bg-layer,
.row-bg.using-bg-color, .row-bg.viewport-desktop, .row-bg.viewport-mobile,
.full-width-section, .full-width-content,
.patternbg {
  background-color: transparent !important;
  background-image: none !important;
}
.row-bg-overlay, .video-color-overlay { opacity: 0 !important; background: transparent !important; }

/* hero-ul avea propriul video (acum redundant) -> il ascund */
.nectar-video-inner { display: none !important; }

/* ceata hero (.hero-clouds) RAMANE (peste video, in zona hero); scoatem doar
 * voalul din header + dunga alba "material" (pusa de JS in spatele header-ului) */
.cb-header-veil { display: none !important; }
.bg-color-stripe { background-color: transparent !important; }

/* randuri transplant din pagini (ex. /povestea) puse in sandbox, in .container.main-content */
/* imaginile urmeaza coloana (tema sare peste img cu srcset+width fix -> le fac responsive aici) */
.main-content .img-with-animation { max-width: 100%; height: auto; }
/* poza: colturi 30px (regula era in <style>-ul paginii /povestea, o aducem aici) */
.main-content .img-with-aniamtion-wrap[data-border-radius="20px"] .img-with-animation,
.main-content .img-with-aniamtion-wrap[data-border-radius="20px"] .inner,
.main-content .img-with-aniamtion-wrap[data-border-radius="20px"] .hover-wrap { border-radius: 30px; }

/* sandbox sectiunea MISIUNEA MEA (coloana text): continut la 80%, centrat in coloana.
 * (inlocuieste inline-urile: wpb_wrapper width:80% margin:0 auto + margin-top pe titlu). */
.cb-mission > .vc_column-inner > .wpb_wrapper { width: 80%; margin-left: auto; margin-right: auto; }
.cb-mission > .vc_column-inner > .wpb_wrapper > .wpb_text_column:first-child { margin-top: 70px; }

/* Butonul "Afla mai multe" (Misiunea, randul 2) foloseste .cb-cta. Randul 2 forteaza --glass-ink
 * ALB (mereu pe navy) -> discul sagetii ar fi alb pe alb in light. Fortam sageata navy (discul e
 * mereu alb aici); eticheta ramane alba (--glass-ink). Valabil in ambele teme (randul 2 e mereu navy). */
body.cb-tint-vignette .cb-row2 .cb-cta__arrow { color: #121a4c; }

/* ===== BOXURI SPECIALIZARE / IMPLICARE (design preluat 1:1 din /povestea): "glass" fals
 * (fundal translucid, FARA backdrop-blur), stivuite UNA SUB ALTA in coloana din dreapta.
 * Randul 2 are --glass-ink deschis (text alb pe navy) -> in interiorul boxurilor (glass
 * deschis) resetam --glass-ink la navy ca sa fie lizibil. ===== */
body.cb-tint-vignette .cb-row2 .cb-boxes { max-width: 100%; margin: 60px 0 0; }
body.cb-tint-vignette .cb-row2 .cb-boxes-sec + .cb-boxes-sec { margin-top: 48px; }
body.cb-tint-vignette .cb-row2 .cb-row-title { margin: 0 0 18px; text-align: left; }
body.cb-tint-vignette .cb-row2 .cb-row-title h4 { font-weight: 400; font-family: 'Montserrat'; letter-spacing: 1.5px; font-size: 15px; line-height: 1.3; color: var(--glass-ink); margin: 0; }
/* boxurile arata MEREU ca in light mode (independent de tema): cerneala navy + border light */
body.cb-tint-vignette .cb-row2 .child_column { --glass-ink: #121a4c; --glass-border: rgba(255, 255, 255, .55); }
body.cb-tint-vignette .cb-row2 .child_column > .vc_column-inner {
  background: color-mix(in srgb, #ffffffd4 82%, transparent);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  box-shadow: 0 5px 22px #080d2a1f;
  overflow: hidden;
  padding: 22px !important;   /* padding fix (theme-ul da procent, prea mare in coloana ingusta) */
  transition: transform .2s ease, box-shadow .2s ease;
}
body.cb-tint-vignette .cb-row2 .child_column .column-bg-overlay-wrap { display: none !important; }  /* pastel -> glass */
body.cb-tint-vignette .cb-row2 .child_column:hover > .vc_column-inner { transform: translateY(-3px); box-shadow: 0 14px 34px #080d2a3d; }
body.cb-tint-vignette .cb-row2 .child_column h5 { color: var(--glass-ink); }
body.cb-tint-vignette .cb-row2 .child_column p { color: var(--glass-ink) !important; }
/* DOAR Hopkins/Harvard (cb-logo-card) = logo DEASUPRA textului (vertical) */
body.cb-tint-vignette .cb-row2 .cb-logo-card .cb-logo-fig { margin: 8px auto 26px; }
body.cb-tint-vignette .cb-row2 .cb-logo-card .cb-logo-fig img { height: 50px; width: auto; max-width: 100%; display: block; margin: 0 auto; }
/* restul (cb-media-card) = PICTOGRAMA in LATERALUL textului, MEREU (orizontal) */
body.cb-tint-vignette .cb-row2 .cb-media-card > .vc_column-inner > .wpb_wrapper { display: flex; align-items: center; gap: 16px; }
body.cb-tint-vignette .cb-row2 .cb-media-card .cb-media-fig { flex: 0 0 84px; width: 84px; }
body.cb-tint-vignette .cb-row2 .cb-media-card .cb-media-text { flex: 1 1 auto; min-width: 0; }
/* pictograma = patrat alb, imagine centrata contain */
body.cb-tint-vignette .cb-row2 .cb-media-fig { aspect-ratio: 1 / 1; margin-bottom: 0; background: #fff; border-radius: 10px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
body.cb-tint-vignette .cb-row2 .cb-media-fig img { width: auto !important; height: auto !important; max-width: 78%; max-height: 78%; display: block; margin: 0 !important; border-radius: 0; }
/* STIVUIT single-column; fiecare box margin-bottom 15px */
body.cb-tint-vignette .cb-row2 .cb-boxes .row_col_wrap_12_inner { display: block !important; }
body.cb-tint-vignette .cb-row2 .cb-boxes .inner_row { margin-bottom: 0; }
body.cb-tint-vignette .cb-row2 .cb-boxes .child_column { width: 100% !important; max-width: 100% !important; margin: 0 0 15px !important; left: auto !important; float: none !important; }

/* coloana poza STICKY la scroll (ramane pe loc cat deruleaza coloana text).
 * Randul e vc_row-o-equal-height -> tema NU pune .n-sticky{height:100%} (doar pe non-equal-height),
 * deci sticky-ul n-avea cursa. Fortam inaltimea containerului sticky + sticky-ul explicit. */
@media only screen and (min-width: 1000px) {
  .cb-sticky-col > .n-sticky { height: 100% !important; }
  .cb-sticky-col > .n-sticky > .vc_column-inner { position: sticky !important; top: 100px; align-self: flex-start; }
}

/* ===== SCENA DE INTRO (doar sandbox: html.cb-intro; JS reveleaza inline, apoi scoate clasa) =====
 * Reveal-ul se face prin INLINE style din JS (opacity:1) -> nu mai avem nevoie de .cb-reveal;
 * inline bate orice regula de aici. Selectorii de hide au specificitate destula cat sa bata tema. */
/* FAZA 1 - textul hero, element cu element (titlu/subtitlu/semnatura): fade lung, catifelat */
html.cb-intro .cb-hero-title,
html.cb-intro .cb-hero-support,
html.cb-intro .cb-hero-sign { opacity: 0; transition: opacity 1.7s cubic-bezier(.22, 1, .36, 1); }
/* FAZA 3 - picatura play + textul ei: intra ultimele, fade si mai lin */
html.cb-intro .cb-hero-play,
html.cb-intro .cb-hero-cta__text { opacity: 0; transition: opacity 1.9s cubic-bezier(.22, 1, .36, 1); }
/* Animatia picaturii sta pe PAUZA la 0% cat timp e ascunsa in intro -> nu ruleaza "pe ascuns".
 * JS adauga .cb-drop-run la revelare (faza 3) -> porneste ciclul de la inceput, odata cu aparitia. */
html.cb-intro .cb-hero-play .cb-drop-container,
html.cb-intro .cb-hero-play .cb-drop,
html.cb-intro .cb-hero-play .cb-drop-play,
html.cb-intro .cb-hero-play .cb-ripple { animation-play-state: paused; }
html.cb-intro .cb-hero-play.cb-drop-run .cb-drop-container,
html.cb-intro .cb-hero-play.cb-drop-run .cb-drop,
html.cb-intro .cb-hero-play.cb-drop-run .cb-drop-play,
html.cb-intro .cb-hero-play.cb-drop-run .cb-ripple { animation-play-state: running; }
/* restul (logo, meniu, socials, play, card): fade 1s, dezvaluite esalonat de JS.
 * !important pe elementele de header: tema forteaza logo-ul vizibil (inline/!important),
 * asa ca hide-ul trebuie sa fie tot !important; JS reveleaza inline+!important (bate si asta). */
html.cb-intro #header-outer #logo,
html.cb-intro #header-outer nav ul.sf-menu:not(.buttons),
html.cb-intro #header-outer #social-in-menu { opacity: 0 !important; transition: opacity 1.7s cubic-bezier(.22, 1, .36, 1); }
html.cb-intro #cb-rain-tab { opacity: 0; transition: opacity .5s ease; }   /* ascunde tab-ul de reglaj in intro */