/* ========================================================================== INTRO VIDEO — ecran plin, inainte de landing page ========================================================================== Cum se leaga cu restul paginii: - Clasa `cu-intro` se pune pe de un script mic din , INAINTE de prima randare. Faptul ca ea exista dovedeste ca JS-ul merge. - Overlay-ul e `display: none` implicit si devine vizibil DOAR sub `.cu-intro`. Asa, daca utilizatorul are JS oprit, nu apare niciun ecran negru peste care nu poate trece: vede direct landing page-ul. - La final, intro.js scoate clasa `cu-intro` si derularea se deblocheaza. Nu depinde de style.css si nu il modifica. ========================================================================== */ /* Cat timp ruleaza intro-ul, pagina de dedesubt nu se deruleaza. Blocam pe ambele elemente: pe unele browsere `overflow` pe singur nu ajunge. */ .cu-intro, .cu-intro body { overflow: hidden; } /* Implicit ascuns — vezi explicatia despre JS oprit din capul fisierului. */ .intro { display: none; } .cu-intro .intro { display: block; position: fixed; inset: 0; z-index: 9999; background: #000; opacity: 1; transition: opacity 0.4s ease; } /* Iesirea: se estompeaza, dar nu mai primeste click-uri in timpul estomparii. */ .intro.is-iese { opacity: 0; pointer-events: none; } .intro-video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; /* `cover` umple tot ecranul fara benzi negre. Fisierele sunt deja pe orientarea potrivita (1920x1080 pe desktop, 1080x1920 pe mobil), deci decupajul e minim. */ object-fit: cover; background: #000; } /* --------------------------------------------------------------- butoane --- */ .intro-buton { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px; /* Minim 44px pe verticala: pragul de zona atinsa cu degetul. */ min-height: 44px; padding: 10px 20px; border: 2px solid rgba(255, 255, 255, 0.75); border-radius: 999px; background: rgba(0, 0, 0, 0.45); color: #fff; font-family: 'Montserrat', system-ui, sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .intro-buton:hover, .intro-buton:focus-visible { background: rgba(0, 0, 0, 0.7); border-color: #fff; transform: scale(1.04); } .intro-buton:focus-visible { outline: 3px solid #FEDB65; outline-offset: 3px; } .intro-buton svg { flex: 0 0 auto; width: 18px; height: 18px; fill: currentColor; } /* `env(safe-area-inset-*)` fereste butoanele de crestatura si de bara de jos de pe iPhone. Al doilea argument e valoarea de rezerva pe restul ecranelor. */ .intro-skip { top: calc(16px + env(safe-area-inset-top, 0px)); right: calc(16px + env(safe-area-inset-right, 0px)); } .intro-sunet { left: 50%; bottom: calc(28px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); } /* Butonul de sunet e centrat cu `translateX`, deci hover-ul lui nu poate folosi `scale` singur — l-ar smuci din centru. Rescriem toata transformarea. */ .intro-sunet:hover, .intro-sunet:focus-visible { transform: translateX(-50%) scale(1.04); } .intro-sunet[hidden] { display: none; } /* --------------------------------------------------------- diagnostic --- */ /* Apare numai cu `?intro=debug` in adresa. Exista pentru telefon, unde nu ai consola: arata readyState, networkState, paused/muted si codul de eroare. */ .intro-diagnostic { position: absolute; z-index: 3; top: calc(70px + env(safe-area-inset-top, 0px)); left: 12px; max-width: calc(100% - 24px); margin: 0; padding: 10px 12px; border-radius: 8px; background: rgba(0, 0, 0, 0.82); color: #7CFF9B; font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 11px; line-height: 1.5; white-space: pre-wrap; pointer-events: none; } /* ------------------------------------------------------------ ecran mic --- */ @media only screen and (max-width: 519.98px) { .intro-buton { padding: 9px 16px; font-size: 12px; letter-spacing: 0.06em; } .intro-skip { top: calc(12px + env(safe-area-inset-top, 0px)); right: calc(12px + env(safe-area-inset-right, 0px)); } .intro-sunet { bottom: calc(22px + env(safe-area-inset-bottom, 0px)); } } /* ----------------------------------------------------- reducerea miscarii --- */ /* Videoul ramane (e continut cerut, nu decor), dar estomparea de la final dispare pentru cine a cerut mai putina miscare. */ @media (prefers-reduced-motion: reduce) { .cu-intro .intro, .intro-buton { transition: none; } .intro-buton:hover, .intro-buton:focus-visible { transform: none; } .intro-sunet:hover, .intro-sunet:focus-visible { transform: translateX(-50%); } }