/* ---------- Intro brand reveal (peste hero, o dată pe sesiune) ----------
   Portat 1:1 după design_handoff_beval_intro: dezvăluire prin câmp de lumină
   (măști radiale care cresc dintr-o linie-sămânță pe baza logo-ului), apoi
   lockup-ul se ridică și se dizolvă, iar o linie de lumină „deschide" spre hero.
   Toți timpii/easing-urile/culorile din README sunt păstrate exact. `--bv-sp` e
   multiplicatorul global de viteză (retunează tot intro-ul dintr-o variabilă).
   Overlay-ul e în HTML de la server (acoperă primul paint), e `pointer-events:none`
   (pagina e interactivă imediat) și se termină invizibil chiar și fără JS
   (fiecare strat are `forwards` spre opacity:0), deci nu poate bloca site-ul. */
:root {
  --bv-sp: 1;
  --bv-acc: #1ba0b5;
}

/* Sărire fără flash pe vizite repetate / reduced-motion: scriptul sincron din
   <head> pune `.bv-skip` pe <html> înainte de paint, deci overlay-ul nu apare. */
.bv-skip .bv-intro {
  display: none !important;
}

.bv-intro {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #080b0e;
  pointer-events: none;
  animation: bv-veil calc(1.1s * var(--bv-sp)) cubic-bezier(0.4, 0, 0.2, 1) calc(3.95s * var(--bv-sp)) forwards;
}

.bv-bloom {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  background: radial-gradient(58% 42% at 50% 49%, rgba(255, 236, 206, 0.09) 0%, rgba(27, 160, 181, 0.05) 45%, rgba(0, 0, 0, 0) 72%);
  opacity: 0;
  animation: bv-bloom calc(2.4s * var(--bv-sp)) cubic-bezier(0.3, 0, 0.3, 1) calc(1.1s * var(--bv-sp)) both;
}

.bv-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(78% 62% at 50% 50%, rgba(0, 0, 0, 0) 40%, rgba(4, 6, 8, 0.85) 100%);
}

.bv-lockup {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(42vw, 340px);
  aspect-ratio: 715 / 530;
  transform: translate(-50%, -50%);
  animation:
    bv-settle calc(3.4s * var(--bv-sp)) cubic-bezier(0.22, 0.61, 0.26, 1) calc(0.55s * var(--bv-sp)) both,
    bv-logo-out calc(1.15s * var(--bv-sp)) cubic-bezier(0.4, 0, 0.2, 1) calc(3.85s * var(--bv-sp)) forwards;
}

.bv-seed {
  position: absolute;
  left: 50%;
  top: 48.9%;
  height: 1px;
  width: 0;
  transform: translate(-50%, -50%);
  background: linear-gradient(90deg, rgba(27, 160, 181, 0) 0%, var(--bv-acc) 22%, #dff6fa 50%, var(--bv-acc) 78%, rgba(27, 160, 181, 0) 100%);
  animation:
    bv-seed calc(1.05s * var(--bv-sp)) cubic-bezier(0.2, 0.7, 0.2, 1) calc(0.12s * var(--bv-sp)) both,
    bv-seed-fade calc(0.9s * var(--bv-sp)) ease-out calc(2.5s * var(--bv-sp)) forwards;
}

/* Măștile câmpului (elementul devine vizibil) și ale inelului (frontul de lumină
   care călărește marginea). Prefixate `-webkit-` pentru Safari. */
.bv-field {
  position: absolute;
  inset: 0;
  -webkit-mask-image: radial-gradient(circle, #000 0%, #000 40%, rgba(0, 0, 0, 0) 76%);
  mask-image: radial-gradient(circle, #000 0%, #000 40%, rgba(0, 0, 0, 0) 76%);
  -webkit-mask-position: 50% 48.9%;
  mask-position: 50% 48.9%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 0% 0%;
  mask-size: 0% 0%;
}

.bv-ring {
  position: absolute;
  inset: 0;
  mix-blend-mode: screen;
  opacity: 0;
  -webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 0) 26%, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0) 56%);
  mask-image: radial-gradient(circle, rgba(0, 0, 0, 0) 26%, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0) 56%);
  -webkit-mask-position: 50% 48.9%;
  mask-position: 50% 48.9%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 0% 0%;
  mask-size: 0% 0%;
}

/* Simbolul: decupat din logotipul autentic al companiei (../assets/beval-symbol.png,
   extras din beval-logo.png din handoff). Calea e relativă la acest fișier din css/,
   deci „../" urcă un nivel până la rădăcină. Așezat în partea de sus a lockup-ului,
   cu baza pe linia-sămânță (48.9%). */
.bv-symbol {
  background: url(../assets/beval-symbol.png?v=2) no-repeat 50% 0% / auto 48%;
  animation: bv-field calc(1.75s * var(--bv-sp)) cubic-bezier(0.32, 0.02, 0.24, 1) calc(0.6s * var(--bv-sp)) both;
}

.bv-symbol-ring {
  background: url(../assets/beval-symbol.png?v=2) no-repeat 50% 0% / auto 48%;
  filter: brightness(2.2) saturate(0.45);
  animation: bv-ring calc(1.75s * var(--bv-sp)) cubic-bezier(0.32, 0.02, 0.24, 1) calc(0.6s * var(--bv-sp)) both;
}

.bv-word {
  animation: bv-field-w calc(1.3s * var(--bv-sp)) cubic-bezier(0.32, 0.02, 0.24, 1) calc(1.75s * var(--bv-sp)) both;
}

.bv-word-ring {
  animation: bv-ring-w calc(1.3s * var(--bv-sp)) cubic-bezier(0.32, 0.02, 0.24, 1) calc(1.75s * var(--bv-sp)) both;
}

.bv-sub {
  animation: bv-field-c calc(1.2s * var(--bv-sp)) cubic-bezier(0.32, 0.02, 0.24, 1) calc(2.55s * var(--bv-sp)) both;
}

.bv-sub-ring {
  animation: bv-ring-c calc(1.2s * var(--bv-sp)) cubic-bezier(0.32, 0.02, 0.24, 1) calc(2.55s * var(--bv-sp)) both;
}

.bv-word-text {
  position: absolute;
  left: 0;
  right: 0;
  top: 54.2%;
  height: 31.8%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: min(7.1vw, 58px);
  line-height: 1;
  color: #edf1f2;
  text-indent: 0.16em;
}

.bv-word-ring .bv-word-text {
  color: #dff6fa;
}

.bv-sub-text {
  position: absolute;
  left: 0;
  right: 0;
  top: 86%;
  height: 14%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-size: clamp(11px, 1.9vw, 15px);
  line-height: 1;
  color: #10a9c2;
  text-indent: 0.3em;
}

.bv-sub-ring .bv-sub-text {
  color: #8ee6f4;
}

.bv-aperture {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 1px;
  width: 0;
  transform: translate(-50%, -50%);
  background: linear-gradient(90deg, rgba(223, 246, 250, 0) 0%, rgba(223, 246, 250, 0.9) 50%, rgba(223, 246, 250, 0) 100%);
  animation: bv-open calc(1.3s * var(--bv-sp)) cubic-bezier(0.3, 0, 0.2, 1) calc(3.8s * var(--bv-sp)) both;
}

/* Reveal-ul hero-ului: DOAR scale (nu opacity), ca imaginea LCP să se picteze de
   la t=0 în spatele vălului opac — altfel opacity:0 până la 3,7s ar întârzia LCP.
   Zoom-ul de așezare rămâne vizibil cât se dizolvă vălul. */
.hero-media {
  animation: bv-hero-media calc(3.4s * var(--bv-sp)) cubic-bezier(0.16, 0.7, 0.24, 1) calc(3.7s * var(--bv-sp)) both;
}

.bv-skip .hero-media {
  animation: none;
}

@keyframes bv-field   { from { mask-size: 0% 0%; -webkit-mask-size: 0% 0%; } to { mask-size: 190% 256%; -webkit-mask-size: 190% 256%; } }
@keyframes bv-field-w { from { mask-size: 0% 0%; -webkit-mask-size: 0% 0%; } to { mask-size: 250% 337%; -webkit-mask-size: 250% 337%; } }
@keyframes bv-field-c { from { mask-size: 0% 0%; -webkit-mask-size: 0% 0%; } to { mask-size: 275% 371%; -webkit-mask-size: 275% 371%; } }
@keyframes bv-ring    { from { mask-size: 0% 0%; -webkit-mask-size: 0% 0%; opacity: 0; } 16% { opacity: 0.5; } 74% { opacity: 0.4; } to { mask-size: 190% 256%; -webkit-mask-size: 190% 256%; opacity: 0; } }
@keyframes bv-ring-w  { from { mask-size: 0% 0%; -webkit-mask-size: 0% 0%; opacity: 0; } 16% { opacity: 0.42; } 74% { opacity: 0.34; } to { mask-size: 250% 337%; -webkit-mask-size: 250% 337%; opacity: 0; } }
@keyframes bv-ring-c  { from { mask-size: 0% 0%; -webkit-mask-size: 0% 0%; opacity: 0; } 16% { opacity: 0.42; } 74% { opacity: 0.34; } to { mask-size: 275% 371%; -webkit-mask-size: 275% 371%; opacity: 0; } }
@keyframes bv-seed { 0% { width: 0; opacity: 0; } 22% { opacity: 0.95; } 100% { width: 116%; opacity: 0.16; } }
@keyframes bv-seed-fade { from { opacity: 0.16; } to { opacity: 0; } }
@keyframes bv-open { 0% { width: 0; opacity: 0; } 30% { opacity: 0.55; } 100% { width: 130vw; opacity: 0; } }
@keyframes bv-bloom { from { opacity: 0; transform: translate(-50%, -50%) scale(0.6); } to { opacity: 0.5; transform: translate(-50%, -50%) scale(1); } }
@keyframes bv-settle { from { transform: translate(-50%, -50%) scale(1.035); } to { transform: translate(-50%, -50%) scale(1); } }
@keyframes bv-logo-out { from { opacity: 1; transform: translate(-50%, -50%) scale(1) translateY(0); } to { opacity: 0; transform: translate(-50%, -50%) scale(0.985) translateY(-10px); } }
@keyframes bv-veil { from { opacity: 1; } to { opacity: 0; } }
@keyframes bv-hero-media { from { transform: scale(1.1); } to { transform: scale(1); } }

/* Garanție CSS: chiar dacă JS întârzie, nimic nu animează pentru reduced-motion. */
@media (prefers-reduced-motion: reduce) {
  .bv-intro { display: none !important; }
  .hero-media { animation: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}