/* Livaro scroll-driven 3D hero.
   Zelfstandig bestand: raakt front.css niet aan, zodat de rest van de site
   ongewijzigd blijft en dit in één regel terug te draaien is.

   Opzet: een hoge sectie waarin een schermvullende laag blijft plakken.
   De scrollpositie binnen die sectie stuurt zowel de videovoortgang als
   welke tekstlaag zichtbaar is. Alle tekst is HTML, dus vertaalbaar via
   i18n en klikbaar naar de bestaande routes. */

.hero3d {
  position: relative;
  /* Scrollafstand: vier schermhoogtes scrollen voor de hele video. */
  height: 400vh;
  height: 400dvh;
  background: #050a14;
}

.hero3d-sticky {
  position: sticky;
  top: 0;
  /* vh telt op mobiel de ruimte onder de browserbalk mee, waardoor het blok
     hoger is dan wat je werkelijk ziet en de bovenkant van de inhoud
     wegvalt. dvh volgt de zichtbare hoogte; vh blijft staan als terugval
     voor oudere browsers. */
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: grid;
  place-items: center;
  /* De navbalk is zelf sticky met z-index 50 en zou over de tekst vallen. */
  box-sizing: border-box;
  padding: 88px 16px 24px;
}

@media (max-width: 860px) {
  .hero3d-sticky { padding: 96px 16px 20px; }
}

/* Lage schermen in liggende stand: minder lucht, anders past de prijskaart
   niet meer binnen de zichtbare hoogte. */
@media (max-height: 620px) {
  .hero3d-sticky { padding-top: 72px; }
  .hero3d-stage h1, .hero3d-stage .hero3d-h { font-size: clamp(24px, 5vw, 38px); margin-bottom: 12px; }
  .hero3d-stage .sub { margin-bottom: 16px; font-size: 14.5px; line-height: 1.45; }
  .hero3d-stage .pill-tag { margin-bottom: 12px; padding: 5px 12px; font-size: 12px; }
  .hero3d-trust { margin-top: 12px; font-size: 12px; }
  .hero3d-actions .btn, .hero3d-actions .btn.lg { padding: 11px 18px; font-size: 14.5px; }
  .hero3d-card { padding: 18px 16px; }
  .hero3d-price { margin: 8px 0 6px; }
  .hero3d-price .amount { font-size: clamp(32px, 9vw, 46px); }
  .hero3d-benefits { gap: 8px; }
  .hero3d-benefits li { padding: 10px; font-size: 13px; }
}

.hero3d-media,
.hero3d-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Op smalle schermen valt de 16:9-video weg aan de zijkanten; iets naar
     het midden trekken houdt de figuur in beeld. */
  object-position: 50% 50%;
}

/* De poster staat als achtergrond en niet als img, zodat de media query
   ervoor zorgt dat de browser alleen het passende bestand ophaalt. */
.hero3d-poster {
  z-index: 0;
  background: url('/assets/hero/livaro-world-poster.jpg') center / cover no-repeat;
}

/* Staand scherm krijgt de portretversie: bij een liggende video zou op
   mobiel te veel van de zijkanten wegvallen. */
@media (max-aspect-ratio: 1/1) {
  .hero3d-poster { background-image: url('/assets/hero/livaro-world-tall-poster.jpg'); }
}
.hero3d-media  { z-index: 1; opacity: 0; transition: opacity .4s ease; }
.hero3d-media.is-ready { opacity: 1; }

/* Donkere sluier zodat witte tekst altijd leesbaar blijft, ook op de
   lichtste frames van de video. */
.hero3d-veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(120% 80% at 50% 45%, rgba(5,10,20,.42) 0%, rgba(5,10,20,.78) 68%, rgba(5,10,20,.94) 100%),
    linear-gradient(to bottom, rgba(5,10,20,.55) 0%, rgba(5,10,20,0) 30%, rgba(5,10,20,0) 60%, rgba(5,10,20,.85) 100%);
}

/* --- Tekstlagen ------------------------------------------------------- */

.hero3d-stage {
  position: absolute;
  z-index: 3;
  width: min(760px, 88vw);
  text-align: center;
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .5s ease, transform .5s ease;
  pointer-events: none;
}

.hero3d-stage.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Laag 2 en 3 gebruiken een h2 (er hoort maar een h1 per pagina te zijn),
   maar moeten er identiek uitzien als de hero-titel. */
.hero3d-stage h1,
.hero3d-stage .hero3d-h {
  font-size: clamp(38px, 6vw, 74px);
  line-height: 1.04;
  letter-spacing: -.02em;
  font-weight: 800;
  margin: 0 0 22px;
  text-shadow: 0 2px 30px rgba(4, 10, 22, .65);
}

.hero3d-stage .sub {
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.55;
  max-width: 620px;
  margin: 0 auto 34px;
  color: var(--muted, #9fb0c8);
}

.hero3d-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.hero3d-trust {
  margin-top: 22px;
  font-size: 13px;
  color: var(--dim, #6f8099);
}

/* --- Pluspunten ------------------------------------------------------- */

.hero3d-benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero3d-benefits li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: rgba(8, 16, 32, .62);
  border: 1px solid rgba(103, 232, 249, .22);
  border-radius: 14px;
  padding: 18px 16px;
  font-size: 15px;
  font-weight: 600;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 14px 34px -18px rgba(2, 8, 24, .9);
}

/* Klein gradientpunt als anker voor het oog; puur decoratief. */
.hero3d-benefits li::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: linear-gradient(105deg, #22d3ee, #8b5cf6);
  box-shadow: 0 0 10px rgba(34, 211, 238, .8);
}

/* --- Prijskaart ------------------------------------------------------- */

.hero3d-card {
  position: relative;
  overflow: hidden;
  background: rgba(7, 14, 28, .74);
  border: 1px solid rgba(103, 232, 249, .26);
  border-radius: 22px;
  padding: 36px 30px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    0 30px 80px rgba(0, 0, 0, .55),
    0 0 70px -12px rgba(56, 189, 248, .25);
}

/* Gradient-hairline bovenlangs: zelfde signatuur als de kaarten op de site. */
.hero3d-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(105deg, #22d3ee, #3b82f6 40%, #8b5cf6 75%, #d946ef);
  opacity: .75;
}

.hero3d-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  margin: 14px 0 10px;
}

.hero3d-price .amount {
  font-size: clamp(44px, 7vw, 68px);
  font-weight: 800;
  letter-spacing: -.03em;
  background: linear-gradient(105deg, #67e8f9 0%, #93c5fd 45%, #c4b5fd 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.hero3d-price .period {
  font-size: 15px;
  color: var(--muted, #9fb0c8);
}

/* Telefoons: kaart en knoppen compacter, en de knoppen over de volle breedte
   zodat ze naast elkaar niet uit het kader lopen. */
@media (max-width: 560px) {
  .hero3d-stage { width: min(520px, 92vw); }
  .hero3d-card { padding: 24px 18px; border-radius: 18px; }
  .hero3d-benefits { grid-template-columns: 1fr 1fr; gap: 10px; }
  .hero3d-benefits li { padding: 14px 10px; font-size: 13.5px; }
  .hero3d-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero3d-actions .btn { width: 100%; justify-content: center; }
}

/* --- Toegankelijkheid en terugval ------------------------------------- */

/* Wie beweging heeft uitgezet krijgt geen scrubbende video maar een
   stilstaand beeld met alle tekst tegelijk zichtbaar. */
@media (prefers-reduced-motion: reduce) {
  .hero3d { height: auto; }
  .hero3d-sticky { position: static; height: auto; padding: 80px 0; }
  .hero3d-media { display: none; }
  .hero3d-stage {
    position: static;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    margin: 0 auto 56px;
  }
}

/* Zonder JavaScript blijft de hero gewoon leesbaar. */
.no-js .hero3d { height: auto; }
.no-js .hero3d-sticky { position: static; height: auto; padding: 80px 0; }
.no-js .hero3d-media { display: none; }
.no-js .hero3d-stage {
  position: static;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  margin: 0 auto 56px;
}