/* ---- SITUATIES MET DE APP ERIN ----
   Een herkenbare situatie (foto) met de telefoon die er in 3D uit naar voren komt, en een melding die nog verder
   naar voren zweeft. Gebruikt in de kop van de homepage (vier situaties die wisselen), op de doelgroeppagina's
   (één situatie) en in de kaarten "Voor wie". js/scenes.js regelt het wisselen, het meebewegen met de muis,
   de filmpjes en het binnenkomen van blokken. Wie "minder beweging" heeft ingesteld, krijgt alles stil. */

.scene {
  --tilt-x: 0deg;   /* gezet door js/scenes.js (muis) */
  --tilt-y: 0deg;
  --lift: 0;        /* 0..1: hoe ver de telefoon naar voren komt bij het scrollen */
  --accent: var(--red);
  position: relative;
  perspective: 1200px;
  perspective-origin: 50% 40%;
}
.scene-3d {
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(var(--tilt-y)) rotateY(var(--tilt-x));
  transition: transform 0.25s ease-out;
}
.scene-slide { position: relative; transform-style: preserve-3d; }
.scene-slides { display: grid; transform-style: preserve-3d; }
.scene-slides > .scene-slide { grid-area: 1 / 1; }
.scene-slides > .scene-slide:not(.is-active) { visibility: hidden; }

/* Foto */
.scene-photo {
  position: relative; margin: 0; width: min(440px, 82%); aspect-ratio: 4 / 5;
  border-radius: 28px; overflow: hidden; background: var(--dark);
  box-shadow: 0 30px 70px rgba(17, 24, 32, 0.22);
  transform: translateZ(0);
}
.scene-photo img { width: 100%; height: 100%; object-fit: cover; }
.scene-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(18, 26, 38, 0.72) 0%, rgba(18, 26, 38, 0.15) 38%, rgba(18, 26, 38, 0) 60%);
}
/* Situatie zonder foto (op afstand): een kaartje in de huisstijl */
.scene-photo--map { background: #e7eee9; }
.scene-photo--map svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Grote zin op de foto: de situatie in drie seconden */
.scene-caption {
  position: absolute; left: 26px; top: 24px; width: 60%; z-index: 2; color: #fff;
  transform: translateZ(30px);
}
.scene-caption strong {
  display: block; font-size: clamp(30px, 3.6vw, 44px); line-height: 1.02; font-weight: 900; letter-spacing: -0.03em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.25);
}
.scene-caption span { display: block; margin-top: 8px; max-width: 15em; font-size: 18px; font-weight: 700; line-height: 1.35; }

/* Telefoon die uit de foto naar voren komt */
.scene-phone {
  position: absolute; right: 0; bottom: -28px; width: 200px; z-index: 3;
  padding: 7px; border-radius: 34px; background: #0b0f16;
  box-shadow: 0 0 0 1.5px #2a3342, 0 40px 80px rgba(17, 24, 32, 0.35), 0 12px 24px rgba(17, 24, 32, 0.2);
  transform: translateZ(calc(90px + var(--lift) * 60px)) rotateY(-14deg) rotateX(4deg);
}
.scene-phone img { width: 100%; height: auto; border-radius: 27px; }

/* Melding die nog verder naar voren zweeft */
.scene-bubble {
  position: absolute; left: -18px; bottom: 34px; z-index: 4; width: min(300px, 70%);
  display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 2px 10px; align-items: center;
  padding: 12px 14px; border-radius: 18px; background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 24px 50px rgba(17, 24, 32, 0.25); color: var(--text);
  transform: translateZ(calc(150px + var(--lift) * 90px));
}
.scene-bubble img { grid-row: span 2; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border); background: #fff; padding: 3px; }
.scene-bubble strong { font-size: 16px; line-height: 1.25; font-weight: 800; }
.scene-bubble small { font-size: 14px; color: var(--muted); font-weight: 600; line-height: 1.3; }
.scene-bubble--alarm strong { color: var(--red-dk); }
.scene-bubble--safe strong { color: var(--green-dk); }

/* Golven achter de telefoon: het signaal gaat de wereld in */
.scene-waves { position: absolute; right: 100px; bottom: 160px; width: 0; height: 0; z-index: 1; transform: translateZ(40px); pointer-events: none; }
.scene-waves i {
  position: absolute; left: -130px; top: -130px; width: 260px; height: 260px; border-radius: 50%;
  border: 3px solid var(--accent); opacity: 0;
  animation: scene-wave 3.2s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
}
.scene-waves i:nth-child(2) { animation-delay: 1.05s; }
.scene-waves i:nth-child(3) { animation-delay: 2.1s; }
@keyframes scene-wave {
  0% { transform: scale(0.35); opacity: 0.55; }
  100% { transform: scale(2.1); opacity: 0; }
}
.scene--safe { --accent: var(--green); }

/* Wisselen: de nieuwe situatie komt binnen, de telefoon draait naar voren, de melding springt eruit */
.scene-slide .scene-photo { transition: opacity 0.6s ease, transform 0.9s ease; }
.scene-slide:not(.is-active) .scene-photo { opacity: 0; transform: translateZ(-60px) scale(0.96); }
.scene-slide .scene-phone { transition: transform 0.95s cubic-bezier(0.2, 0.9, 0.25, 1.12), opacity 0.5s ease; transition-delay: 0.12s; }
.scene-slide:not(.is-active) .scene-phone { opacity: 0; transform: translateZ(-220px) rotateY(38deg) rotateX(10deg); transition-delay: 0s; }
.scene-slide .scene-bubble { transition: transform 0.7s cubic-bezier(0.3, 1.5, 0.5, 1), opacity 0.4s ease; transition-delay: 0.55s; }
.scene-slide:not(.is-active) .scene-bubble { opacity: 0; transform: translateZ(0) scale(0.6) translateY(20px); transition-delay: 0s; }
.scene-slide .scene-caption { transition: opacity 0.5s ease 0.2s, transform 0.6s ease 0.2s; }
.scene-slide:not(.is-active) .scene-caption { opacity: 0; transform: translateZ(30px) translateY(12px); transition-delay: 0s; }

/* Knoppen onder de situaties */
.scene-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 68px; position: relative; z-index: 5; }
.scene-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.scene-tab, .scene-pause {
  min-height: 44px; padding: 0 14px; border-radius: 999px; border: 2px solid var(--border); background: var(--surface);
  font: inherit; font-size: 15px; font-weight: 800; color: var(--text); cursor: pointer;
}
.scene-tab[aria-selected="true"] { background: var(--text); border-color: var(--text); color: #fff; }
.scene-tab:hover { border-color: var(--text); }
.scene-pause { width: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); }
.scene-pause svg { width: 18px; height: 18px; }
.scene-pause .icon-play { display: none; }
@media (min-width: 901px) {
  /* Vijf situaties passen niet op één regel: pauze vooraan, dan lopen alleen de situaties door naar regel twee */
  .scene-controls { flex-wrap: nowrap; align-items: flex-start; }
  .scene-pause { order: -1; flex-shrink: 0; }
  .scene-tabs { min-width: 0; }
}
.scene-pause[aria-pressed="true"] .icon-play { display: block; }
.scene-pause[aria-pressed="true"] .icon-pause { display: none; }

/* ---- Kop van de homepage ---- */
.hero--scenes .hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-top: 56px; padding-bottom: 72px; }
.hero--scenes .scene { padding: 8px 0 0 36px; }
.hero--scenes::before {
  /* zachte gloed achter de situaties */
  content: ""; position: absolute; right: -10%; top: 0; width: 60%; height: 100%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(23, 109, 74, 0.10), rgba(23, 109, 74, 0));
}
.hero--scenes { position: relative; }
@media (max-width: 900px) {
  .hero--scenes .hero-inner { grid-template-columns: minmax(0, 1fr); padding-top: 36px; gap: 28px; }
  .hero--scenes .scene { padding: 0; max-width: 460px; }
}

/* ---- Doelgroeppagina: één situatie naast de tekst ---- */
/* De golven rond de telefoon mogen niet buiten het scherm uitsteken (anders kun je op een telefoon opzij schuiven). */
.page-hero--scene { overflow: hidden; overflow: clip; }
.page-hero--scene .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 48px; align-items: center; padding-top: 56px; padding-bottom: 80px; }
.page-hero--scene .scene-photo { width: min(380px, 80%); }
.page-hero--scene .scene-phone { width: 176px; }
@media (max-width: 900px) {
  .page-hero--scene .wrap { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-bottom: 64px; }
  .page-hero--scene .scene { max-width: 420px; }
}

@media (max-width: 900px) {
  /* Op de telefoon eerst de situatie, dan de tekst */
  .hero--scenes .scene { order: -1; }
  .scene-controls { flex-wrap: nowrap; }
  .scene-tabs { flex-wrap: nowrap; overflow-x: auto; min-width: 0; flex: 0 1 auto; scrollbar-width: none; padding: 2px; }
  .scene-tabs::-webkit-scrollbar { display: none; }
  .scene-tab { flex-shrink: 0; }
  .scene-pause { flex-shrink: 0; }
  .scene-phone { width: 168px; }
  .scene-caption { width: 54%; }
}
@media (max-width: 520px) {
  .scene { perspective: 900px; }
  .scene-photo { width: 80%; border-radius: 22px; }
  .scene-phone { transform: translateZ(calc(30px + var(--lift) * 20px)) rotateY(-12deg) rotateX(3deg); right: 6px; }
  .scene-bubble { transform: translateZ(calc(50px + var(--lift) * 30px)); }
  .scene-phone { width: 138px; padding: 5px; border-radius: 24px; bottom: -20px; }
  .scene-phone img { border-radius: 20px; }
  .page-hero--scene .scene-phone { width: 132px; }
  .scene-caption { left: 18px; top: 18px; width: 62%; }
  .scene-caption strong { font-size: 28px; }
  .scene-caption span { font-size: 16px; max-width: 12em; }
  .scene-bubble { left: 4px; bottom: 22px; width: 70%; padding: 10px 12px; grid-template-columns: 30px minmax(0, 1fr); }
  .scene-bubble img { width: 30px; height: 30px; }
  .scene-bubble strong { font-size: 15px; }
  .scene-bubble small { font-size: 13px; }
  .scene-waves { right: 70px; bottom: 120px; }
  .scene-controls { margin-top: 40px; }
  .scene-tab { padding: 0 12px; font-size: 15px; }
}

/* Heel smalle schermen: kleinere telefoon, zodat de zin op de foto leesbaar blijft */
@media (max-width: 380px) {
  .scene-phone, .page-hero--scene .scene-phone { width: 112px; border-radius: 20px; padding: 4px; }
  .scene-phone img { border-radius: 16px; }
  .scene-caption { width: 60%; left: 14px; top: 14px; }
  .scene-caption strong { font-size: 23px; }
  .scene-caption span { font-size: 14px; }
  .scene-bubble { width: 78%; }
}

/* ---- Kaarten "Voor wie": foto met de telefoon die naar voren komt ---- */
.audience-visual { position: relative; perspective: 900px; }
.audience-scene { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--dark); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.audience-scene > img { width: 100%; height: 100%; object-fit: cover; }
.audience-scene .scene-photo--map { position: absolute; inset: 0; width: auto; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
.audience-phone {
  position: absolute; right: 14px; bottom: -46px; width: 88px; padding: 4px; border-radius: 17px; background: #0b0f16;
  box-shadow: 0 18px 40px rgba(17, 24, 32, 0.35); z-index: 2;
  transform: translateZ(20px) rotateY(-12deg) rotateX(6deg);
  transition: transform 0.45s cubic-bezier(0.2, 0.9, 0.25, 1.2);
}
.audience-phone img { width: 100%; height: auto; border-radius: 13px; }
.audience:hover .audience-phone, .audience:focus-visible .audience-phone { transform: translateZ(70px) translateY(-14px) rotateY(-4deg) rotateX(2deg); }
.audience--scene { overflow: visible; }
.audience-quote { display: block; font-size: 22px; line-height: 1.15; font-weight: 900; letter-spacing: -0.02em; margin-bottom: 8px; padding-right: 96px; }

/* ---- Zie het in actie: filmpjes als lusje ---- */
.loops { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 28px; margin-top: 8px; }
.loop { margin: 0; text-align: center; }
.loop-frame {
  position: relative; border-radius: 26px; overflow: hidden; background: var(--dark);
  box-shadow: 0 30px 60px rgba(17, 24, 32, 0.18);
}
.loop video { display: block; width: 100%; height: auto; }
.loop--wide { width: min(430px, 100%); }
.loop--tall { width: min(226px, 60%); }
.loop figcaption { margin-top: 14px; font-weight: 800; font-size: 18px; }
.loop figcaption small { display: block; font-weight: 600; font-size: 15px; color: var(--muted); }
.loop-toggle {
  position: absolute; right: 10px; bottom: 10px; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(18, 26, 38, 0.72); color: #fff; display: inline-flex; align-items: center; justify-content: center;
}
.loop-toggle svg { width: 18px; height: 18px; }
.loop-toggle .icon-play { display: none; }
.loop-toggle[aria-pressed="true"] .icon-play { display: block; }
.loop-toggle[aria-pressed="true"] .icon-pause { display: none; }

/* ---- Korte functies: icoon, kop, één regel ---- */
.features-short { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.features-short .card { padding: 22px; }
.features-short .card h3 { margin-bottom: 4px; }
@media (max-width: 860px) { .features-short { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .features-short { grid-template-columns: minmax(0, 1fr); } }

/* ---- Blokken die in 3D binnenkomen bij het scrollen (alleen met js/scenes.js en zonder "minder beweging") ---- */
.motion [data-reveal] {
  opacity: 0; transform: perspective(900px) translateY(40px) rotateX(10deg);
  transition: opacity 0.8s ease, transform 0.9s cubic-bezier(0.2, 0.8, 0.25, 1);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.motion [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .scene-waves { display: none; }
  .scene-3d, .scene-slide .scene-photo, .scene-slide .scene-phone, .scene-slide .scene-bubble, .scene-slide .scene-caption,
  .audience-phone { transition: opacity 0.2s ease; }
  .scene-slide:not(.is-active) .scene-phone, .scene-slide:not(.is-active) .scene-bubble { transform: translateZ(90px) rotateY(-14deg); }
}

/* ---- Aan je pols: Apple Watch in plaats van de telefoon ----
   Zilveren kast met echte schermen uit de horloge-app (assets/watch/): wijzerplaat met het Tap2bSafe-knopje,
   een tik, Tap2bSafe met de rode knop die wordt vastgehouden ("BLIJF"), daarna ALARM ACTIEF. Eén keer per keer
   dat de situatie in beeld komt; met "minder beweging" alleen de wijzerplaat. */
.scene-photo--watch { background: #eef1ee; }
.scene-photo--watch svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene-photo--watch::after { display: none; }

.scene-watch {
  position: absolute; right: 28px; bottom: -10px; width: 190px; z-index: 3;
  filter: drop-shadow(0 34px 40px rgba(17, 24, 32, 0.32)) drop-shadow(0 10px 14px rgba(17, 24, 32, 0.18));
  transform: translateZ(calc(90px + var(--lift) * 60px)) rotateY(-16deg) rotateX(6deg);
}
.scene-watch .watch-case, .scene-watch .watch-glare { display: block; width: 100%; height: auto; }
.scene-watch .watch-glare { position: absolute; inset: 0; pointer-events: none; }
/* Plek van het scherm in kast.png (afgedrukt door Store/film/web-horloge) */
.scene-watch .watch-screen {
  position: absolute; left: 9.877%; top: 9.124%; width: 74.897%; height: 81.387%;
  border-radius: 12% / 9.9%; overflow: hidden; background: #000;
}
.scene-watch .watch-screen img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.scene-slide .scene-watch { transition: transform 0.95s cubic-bezier(0.2, 0.9, 0.25, 1.12), opacity 0.5s ease; transition-delay: 0.12s; }
.scene-slide:not(.is-active) .scene-watch { opacity: 0; transform: translateZ(-220px) rotateY(38deg) rotateX(10deg); transition-delay: 0s; }

.scene-watch .watch-app, .scene-watch .watch-hold, .scene-watch .watch-active, .scene-watch .watch-tap, .scene-watch .watch-ring { opacity: 0; }
/* Tik op het Tap2bSafe-knopje (rechts op de wijzerplaat) en een ring die groeit tijdens het vasthouden van ALARM */
.scene-watch .watch-tap {
  position: absolute; left: 74%; top: 50%; width: 24%; aspect-ratio: 1; margin: -12% 0 0 -12%;
  border-radius: 50%; background: rgba(255, 255, 255, 0.75);
}
.scene-watch .watch-ring {
  position: absolute; left: 50%; top: 47%; width: 44%; aspect-ratio: 1; margin: -22% 0 0 -22%;
  border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.9); box-sizing: border-box;
}

@media (prefers-reduced-motion: no-preference) {
  .scene-slide.is-active .watch-face { animation: watch-face 6s ease 0.7s both; }
  .scene-slide.is-active .watch-tap { animation: watch-tap 6s ease-out 0.7s both; }
  .scene-slide.is-active .watch-app { animation: watch-app 6s ease 0.7s both; }
  .scene-slide.is-active .watch-hold { animation: watch-hold 6s ease 0.7s both; }
  .scene-slide.is-active .watch-ring { animation: watch-ring 6s ease 0.7s both; }
  .scene-slide.is-active .watch-active { animation: watch-active 6s ease 0.7s both; }
}
@keyframes watch-face   { 0%, 30% { opacity: 1; } 36%, 100% { opacity: 0; } }
@keyframes watch-tap    { 0%, 18% { opacity: 0; transform: scale(0.5); } 21% { opacity: 0.6; } 32%, 100% { opacity: 0; transform: scale(1.9); } }
@keyframes watch-app    { 0%, 32% { opacity: 0; } 38%, 100% { opacity: 1; } }
@keyframes watch-hold   { 0%, 46% { opacity: 0; } 48%, 72% { opacity: 1; } 73%, 100% { opacity: 0; } }
@keyframes watch-ring   { 0%, 46% { opacity: 0; transform: scale(0.7); } 50% { opacity: 0.9; transform: scale(1); } 72% { opacity: 0.9; transform: scale(1.15); } 73%, 100% { opacity: 0; } }
@keyframes watch-active { 0%, 72% { opacity: 0; } 73%, 100% { opacity: 1; } }

@media (prefers-reduced-motion: no-preference) {
  #situatie-pols.is-active .scene-bubble { transition-delay: 5.1s; }
}
@media (max-width: 900px) { .scene-watch { width: 160px; } }
@media (max-width: 520px) {
  .scene-watch { width: 132px; right: 18px; bottom: -12px; transform: translateZ(calc(30px + var(--lift) * 20px)) rotateY(-12deg) rotateX(3deg); }
}
@media (max-width: 380px) { .scene-watch { width: 112px; } }
@media (prefers-reduced-motion: reduce) {
  .scene-slide .scene-watch { transition: opacity 0.2s ease; }
  .scene-slide:not(.is-active) .scene-watch { transform: translateZ(90px) rotateY(-16deg); }
}

/* Situatie zonder foto: donkere tekst op het lichte kaartje */
.scene-photo--map::after { display: none; }
.scene-caption--dark { color: var(--text); }
.scene-caption--dark strong { text-shadow: none; }