/* Plantsoon hero — pure HTML/CSS, no scripts.
   Schaalt volledig mee met de breedte via CSS container-query units (cqw).
   1 cqw = 1% van de hero-breedte. Sub-componenten gebruiken genest em zodat
   de interne maten 1-op-1 de oorspronkelijke verhoudingen volgen. */

.psh-wrap { container-type: inline-size; width: 100%; max-width: 1240px; }

.psh {
  position: relative; width: 100%; aspect-ratio: 620 / 540;
  overflow: hidden; background: #1a2818;
  border-radius: 18px;
  font-size: 1cqw;                 /* 1em = 1% hero-breedte            */
  --cycle: 12.5s;
  font-family: -apple-system, system-ui, sans-serif;
}

/* ---------- achtergrond ---------- */
.psh-bg {
  position: absolute; inset: -6cqw;
  background: url(/images/website_2/main/maple-sm.jpg) center / cover no-repeat;
  filter: blur(1.7cqw) saturate(1.1);
}
.psh-tint {
  position: absolute; inset: 0; mix-blend-mode: multiply; pointer-events: none;
  background: linear-gradient(135deg, rgba(255,210,140,.10) 0%, rgba(60,80,50,.18) 60%, rgba(20,30,20,.30) 100%);
}
.psh-leak {
  position: absolute; inset: 0; mix-blend-mode: screen; pointer-events: none;
  background: radial-gradient(ellipse 60% 40% at 10% 5%, rgba(255,235,170,.28), transparent 60%);
}
.psh-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 110% 110% at 50% 45%, transparent 55%, rgba(0,0,0,.45) 100%);
}
.psh-fgleaf { position: absolute; left: -6.5cqw; bottom: -5cqw; filter: blur(1.6cqw); opacity: .7; pointer-events: none; }
.psh-fgleaf i { position: absolute; display: block; }
.psh-fgleaf i:nth-child(1){ left:0; top:0; width:18cqw; height:11cqw; background:#3a5e2a; border-radius:60% 30% 50% 40%; transform:rotate(-25deg); }
.psh-fgleaf i:nth-child(2){ left:6.5cqw; top:5cqw; width:15cqw; height:10cqw; background:#2a4a20; border-radius:60% 30% 50% 40%; transform:rotate(15deg); }
.psh-fgleaf i:nth-child(3){ left:13cqw; top:1cqw; width:13cqw; height:9cqw; background:#4a6e36; border-radius:60% 30% 50% 40%; transform:rotate(-8deg); }

.psh-glow-tr {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(ellipse 50% 35% at 90% 8%, rgba(255,225,150,.18), transparent 65%);
}
.psh-flash {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: 0;
  background: radial-gradient(ellipse 40% 50% at 75% 45%, rgba(200,255,235,.6), transparent 55%);
  animation: ps-flash var(--cycle) infinite;
}

/* ---------- label (centraal — wijkt na de scan naar rechtsboven, achter de telefoon) ---------- */
.psh-label { position: absolute; top: 22%; left: 16%; transform-origin: center center; font-size: .68cqw; z-index: 1;
  animation: ps-label-recede var(--cycle) infinite cubic-bezier(.5,0,.2,1); }
.psh-label__plate {
  position: relative; box-sizing: border-box;
  width: 100em; height: 71.43em; border-radius: 5em; color: #f4f1e6;
  background: linear-gradient(135deg, #0e1a36 0%, #08122a 60%, #050a1a 100%);
  box-shadow: inset 0 .24em 0 rgba(255,255,255,.12), inset 0 -.24em 0 rgba(0,0,0,.5),
              0 2.85em 6.17em rgba(0,0,0,.55), 0 .71em 1.9em rgba(0,0,0,.4);
}
.psh-label__nr { position:absolute; top:2.04cqw; left:2.38cqw; font-size:3.8em; font-family: ui-monospace,"SF Mono",monospace; font-weight:500; letter-spacing:.025em; color:rgba(244,241,230,.55); }
.psh-label__fam { position:absolute; top:2.04cqw; right:4.08cqw; font-size:3.8em; font-style:italic; letter-spacing:.012em; color:rgba(244,241,230,.55); }
.psh-label__name { position:absolute; top:10em; left:0; right:0; bottom:23em; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4.5em; text-align:center; padding:0 6em; font-family:Georgia,"Times New Roman",serif; }
.psh-label__name b { font-size:10em; font-weight:400; line-height:1.08; letter-spacing:.007em; white-space:nowrap; }
.psh-label__name em { font-size:6.2em; font-style:italic; line-height:1.08; white-space:nowrap; color:rgba(244,241,230,.92); }
.psh-label__brand { position:absolute; left:4em; bottom:5em; display:flex; align-items:center; gap:1.8em; }
.psh-label__brand span { font-size:3.2em; font-weight:600; letter-spacing:.156em; text-transform:uppercase; color:rgba(244,241,230,.85); }
.psh-label__qr { position:absolute; right:4em; bottom:3em; display:flex; flex-direction:column; align-items:center; gap:1.1em; }
.psh-label__qr .pad { position:relative; background:#f4f1e6; padding:.8em; border-radius:.8em; }
.psh-label__qr svg { display:block; width:21em; height:21em; }
.psh-label__qr .url { font-size:3.2em; letter-spacing:.015em; color:rgba(244,241,230,.65); }

/* scanner overlay over QR */
.psh-scan { position:absolute; inset:-1.68em; overflow:hidden; pointer-events:none; animation: ps-scanner-corners var(--cycle) infinite; }
.psh-scan i { position:absolute; width:4.62em; height:4.62em; filter: drop-shadow(0 0 .9em #7be0c4); }
.psh-scan i.tl{ top:0; left:0; border-top:.73em solid #7be0c4; border-left:.73em solid #7be0c4; }
.psh-scan i.tr{ top:0; right:0; border-top:.73em solid #7be0c4; border-right:.73em solid #7be0c4; }
.psh-scan i.bl{ bottom:0; left:0; border-bottom:.73em solid #7be0c4; border-left:.73em solid #7be0c4; }
.psh-scan i.br{ bottom:0; right:0; border-bottom:.73em solid #7be0c4; border-right:.73em solid #7be0c4; }
.psh-scan b { position:absolute; left:1.68em; right:1.68em; top:0; height:.84em; display:block;
  background:linear-gradient(90deg, transparent, #7be0c4 30%, #7be0c4 70%, transparent);
  box-shadow:0 0 1.9em #7be0c4, 0 0 3.3em rgba(123,224,196,.5);
  animation: ps-scan-bar var(--cycle) infinite cubic-bezier(.4,0,.6,1); }

/* ---------- telefoon (verborgen — komt tijdens de scan over het label) ---------- */
.psh-phone {
  position:absolute; top:12%; left:33%; font-size:.30cqw; transform:rotate(-7deg); z-index:5;
  width:100em; height:216em; border-radius:13.5em; background:#0a0a0a; padding:1.8em; box-sizing:border-box;
  box-shadow:0 12em 24em rgba(0,0,0,.5), 0 3em 6em rgba(0,0,0,.35), inset 0 0 0 .8em rgba(255,255,255,.08);
  filter: drop-shadow(0 5cqw 8cqw rgba(0,0,0,.42)); transform-origin:center bottom;
  animation: ps-phone-glow var(--cycle) infinite, ps-phone-enter var(--cycle) infinite cubic-bezier(.2,.7,.2,1);
}
.psh-phone__screen { position:relative; width:100%; height:100%; border-radius:11.7em; overflow:hidden; background:#000; }
.psh-scroll { position:absolute; inset:0; overflow:hidden; }
.psh-scroll__inner { width:100%; --ps-scroll-end:-180em; animation: ps-phone-page-scroll var(--cycle) infinite cubic-bezier(.5,0,.5,1); will-change:transform; }
.psh-island { position:absolute; top:4em; left:50%; transform:translateX(-50%); width:32em; height:9em; border-radius:5em; background:#0a0a0a; z-index:50; }
.psh-phone__edge { position:absolute; inset:0; border-radius:13.5em; box-shadow: inset .54em .54em .54em rgba(255,255,255,.15); pointer-events:none; }

/* locked screen — camera-zoeker die de QR scant */
.psh-locked { position:absolute; inset:0; animation: ps-phone-locked var(--cycle) infinite;
  background:linear-gradient(180deg,#0a0e10 0%,#14181a 60%,#0a0e10 100%); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9em; }
.psh-locked__view { position:relative; width:64em; height:64em; }
.psh-locked__view .c { position:absolute; width:17em; height:17em; filter:drop-shadow(0 0 1.4em rgba(95,224,160,.7)); }
.psh-locked__view .c.tl { top:0; left:0; border-top:1.8em solid #4fd089; border-left:1.8em solid #4fd089; border-top-left-radius:4em; }
.psh-locked__view .c.tr { top:0; right:0; border-top:1.8em solid #4fd089; border-right:1.8em solid #4fd089; border-top-right-radius:4em; }
.psh-locked__view .c.bl { bottom:0; left:0; border-bottom:1.8em solid #4fd089; border-left:1.8em solid #4fd089; border-bottom-left-radius:4em; }
.psh-locked__view .c.br { bottom:0; right:0; border-bottom:1.8em solid #4fd089; border-right:1.8em solid #4fd089; border-bottom-right-radius:4em; }
.psh-locked__qr { position:absolute; inset:14em; opacity:.5; }
.psh-locked__qr i { position:absolute; width:13em; height:13em; border:2em solid rgba(255,255,255,.5); border-radius:2em; }
.psh-locked__qr i:nth-child(1){ top:0; left:0; } .psh-locked__qr i:nth-child(2){ top:0; right:0; } .psh-locked__qr i:nth-child(3){ bottom:0; left:0; }
.psh-locked__view .beam { position:absolute; left:2.5em; right:2.5em; height:1.8em; border-radius:1em;
  background:linear-gradient(90deg,transparent,#6fe9ad 20%,#6fe9ad 80%,transparent);
  box-shadow:0 0 5em 1em rgba(95,224,160,.6); animation: ps-locked-beam 1.7s infinite ease-in-out; }
.psh-locked__mark { display:flex; align-items:center; gap:3em; animation: ps-locked-pulse var(--cycle) infinite ease-in-out; }
.psh-locked__mark .box { width:15.65em; height:15.65em; border-radius:3.91em; background:rgba(47,107,58,.18); border:.43em solid rgba(47,107,58,.35); display:flex; align-items:center; justify-content:center; }
.psh-locked__mark .box i { width:5.22em; height:5.22em; border-radius:50%; background:#2f6b3a; display:block; }
.psh-locked__mark span { font-size:3.91em; letter-spacing:.156em; text-transform:uppercase; color:rgba(244,241,232,.4); }

/* ---------- plantpagina ---------- (font-size in em, geometrie in cqw — geen dubbele schaal) */
.psh-page { font-size:.4348em; width:100%; background:#f7f5ef; color:#1a201c; }
.psh-page__top { padding:4.96cqw 1.83cqw 1.04cqw; display:flex; align-items:center; justify-content:space-between; }
.psh-page__top .g { display:flex; align-items:center; gap:.65cqw; min-width:0; }
.psh-page__top .leaf { flex:none; width:1.83cqw; height:1.83cqw; border-radius:.39cqw; background:#2f6b3a; display:flex; align-items:center; justify-content:center; font-size:9em; }
.psh-page__top .gn { font-size:10em; font-weight:600; color:#2f6b3a; white-space:nowrap; }
.psh-page__top .x { font-size:12em; color:#8a9088; flex:none; }

.psh-photo { position:relative; width:100%; height:22.83cqw; overflow:hidden; }
.psh-photo__strip { display:flex; width:200%; height:100%; animation: ps-photo-swipe var(--cycle) infinite cubic-bezier(.55,0,.3,1); will-change:transform; }
.psh-photo__strip > div { width:50%; height:100%; }
.psh-photo__s1 { background:url(/images/website_2/main/maple-sm.jpg) center 40% / cover; }
.psh-photo__s2 { background:url(/images/website_2/main/maple2-sm.jpg) center 45% / cover; }
.psh-photo__grad { position:absolute; left:0; right:0; bottom:0; height:40%; pointer-events:none; background:linear-gradient(180deg, transparent, rgba(0,0,0,.25)); }
.psh-photo__dots { position:absolute; left:0; right:0; bottom:1.30cqw; display:flex; justify-content:center; gap:.65cqw; }
.psh-photo__dots i { width:.65cqw; height:.65cqw; border-radius:50%; background:#fff; box-shadow:0 .13cqw .26cqw rgba(0,0,0,.4); display:block; }
.psh-photo__dots i:nth-child(1){ animation: ps-photo-pip1 var(--cycle) infinite; }
.psh-photo__dots i:nth-child(2){ animation: ps-photo-pip2 var(--cycle) infinite; }
.psh-photo__count { position:absolute; right:1.30cqw; bottom:1.30cqw; width:4.43cqw; height:1.96cqw; }
.psh-photo__count span { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.55); color:#fff; border-radius:9cqw; font-size:9em; font-weight:600; }
.psh-photo__count span:nth-child(1){ animation: ps-photo-count1 var(--cycle) infinite; }
.psh-photo__count span:nth-child(2){ animation: ps-photo-count2 var(--cycle) infinite; }

.psh-sec { padding:0 1.83cqw; }
.psh-sec--t { padding-top:1.57cqw; }
.psh-sec--s { padding-top:1.83cqw; }
.psh-sec--m { padding-top:2.09cqw; }
.psh-sec--k { padding:1.83cqw 1.83cqw 2.61cqw; }
.psh-h1 { font-size:18em; font-weight:700; line-height:1.15; letter-spacing:-.017em; }
.psh-sub { font-size:11em; font-style:italic; color:#5a6058; margin-top:.26cqw; }
.psh-meta { display:flex; gap:.78cqw; margin-top:1.04cqw; align-items:center; font-size:10em; color:#5a6058; white-space:nowrap; }
.psh-meta .dot { color:#8a9088; }
.psh-tags { display:flex; gap:.78cqw; margin-top:1.30cqw; font-size:9em; color:#5a6058; }
.psh-tags span { padding:.39cqw .91cqw; background:#eae6dc; border-radius:9cqw; }
.psh-lbl { font-size:9.5em; font-weight:700; line-height:1.3; color:#2f6b3a; text-transform:uppercase; letter-spacing:.063em; }
.psh-p { font-size:10.5em; line-height:1.55; color:#1a201c; margin-top:.65cqw; }
.psh-p + .psh-p { margin-top:1.04cqw; }
.psh-subm { font-size:10em; color:#5a6058; margin-top:.26cqw; margin-bottom:1.04cqw; }
.psh-coord { margin-top:1.04cqw; font-size:10em; color:#5a6058; }
.psh-know { margin-top:1.57cqw; padding:1.04cqw 1.30cqw; background:rgba(47,107,58,.08); border-radius:1.04cqw; font-size:10em; color:#2f6b3a; font-weight:600; display:flex; align-items:center; gap:.78cqw; }

/* ---------- map (geometrie in cqw) ---------- */
.psh-map { position:relative; width:100%; aspect-ratio:1.6/1; border-radius:1.30cqw; overflow:hidden; background:#f4ede0; box-shadow: inset 0 0 0 .13cqw rgba(0,0,0,.08), 0 .13cqw .39cqw rgba(0,0,0,.06); }
.psh-map svg.base { position:absolute; inset:0; width:100%; height:100%; display:block; }
.psh-map__compass { position:absolute; right:1.04cqw; top:1.04cqw; width:2.87cqw; height:2.87cqw; background:#fff; border-radius:50%; box-shadow:0 .13cqw .39cqw rgba(0,0,0,.18); display:flex; align-items:center; justify-content:center; font-size:10em; font-weight:700; color:#3a4034; }
.psh-map__compass i { position:absolute; top:-.39cqw; left:50%; transform:translateX(-50%); width:0; height:0; border-left:.39cqw solid transparent; border-right:.39cqw solid transparent; border-bottom:.65cqw solid #dc3c3c; }
.psh-map__zoom { position:absolute; right:1.04cqw; bottom:2.35cqw; background:#fff; border-radius:.52cqw; box-shadow:0 .13cqw .39cqw rgba(0,0,0,.18); overflow:hidden; font-size:12em; font-weight:500; color:#5a604a; line-height:1; }
.psh-map__zoom span { width:2.35cqw; height:2.35cqw; display:flex; align-items:center; justify-content:center; }
.psh-map__zoom span:first-child { border-bottom:.13cqw solid #e8e2d0; }
.psh-map__scale { position:absolute; left:1.04cqw; bottom:.78cqw; display:flex; align-items:center; gap:.52cqw; font-size:7em; color:#5a604a; }
.psh-map__scale b { width:3.65cqw; height:.52cqw; border-left:.13cqw solid #5a604a; border-right:.13cqw solid #5a604a; border-bottom:.13cqw solid #5a604a; display:block; }
.psh-map__pin { position:absolute; left:28%; top:26%; width:0; height:0; }
.psh-map__pin .ring { position:absolute; left:-1.17cqw; top:-1.17cqw; width:2.35cqw; height:2.35cqw; border-radius:50%; background:rgba(220,60,60,.5); animation: ps-map-pulse 2s infinite ease-out; }
.psh-map__pin .out { position:absolute; left:-.91cqw; top:-.91cqw; width:1.83cqw; height:1.83cqw; border-radius:50%; background:radial-gradient(circle at 35% 30%, #ee5858, #b81f1f); box-shadow:0 0 0 .26cqw #fff, 0 .26cqw .52cqw rgba(0,0,0,.4); }
.psh-map__pin .pip { position:absolute; left:-.33cqw; top:-.33cqw; width:.65cqw; height:.65cqw; border-radius:50%; background:#fff; }
.psh-map__pin .call { position:absolute; left:1.57cqw; top:-1.43cqw; padding:.39cqw 1.04cqw; background:#fff; border-radius:9cqw; font-size:8.5em; font-weight:700; color:#1a201c; white-space:nowrap; box-shadow:0 .26cqw .78cqw rgba(0,0,0,.22), 0 0 0 .13cqw rgba(0,0,0,.05); }

/* ---------- keyframes ---------- */
/* Volgorde: label centraal — telefoon komt omhoog — scanindicatie op QR — ontgrendelt naar pagina */
@keyframes ps-scanner-corners { 0%,24%{opacity:0;transform:scale(1.25)} 28%,44%{opacity:1;transform:scale(1)} 47%,100%{opacity:0;transform:scale(1)} }
@keyframes ps-scan-bar { 0%,26%{top:0;opacity:0} 29%{top:0;opacity:1} 44%{top:100%;opacity:1} 47%,100%{top:100%;opacity:0} }
@keyframes ps-flash { 0%,44%,50%,100%{opacity:0} 47%{opacity:.85} }
@keyframes ps-phone-locked { 0%,44%{opacity:1} 50%,96%{opacity:0} 100%{opacity:1} }
@keyframes ps-phone-page-scroll {
  0%,48%{opacity:0;transform:translateY(14em)} 54%{opacity:1;transform:translateY(0)} 71%{opacity:1;transform:translateY(0)}
  90%{opacity:1;transform:translateY(var(--ps-scroll-end,-300em))} 96%{opacity:1;transform:translateY(var(--ps-scroll-end,-300em))} 100%{opacity:0;transform:translateY(var(--ps-scroll-end,-300em))} }
@keyframes ps-phone-glow { 0%,40%,54%,100%{box-shadow:0 0 0 rgba(123,224,196,0)} 46%{box-shadow:0 0 17em 4em rgba(123,224,196,.55)} }
@keyframes ps-phone-enter {
  0%,10%{ opacity:0; transform:translate(0,40cqw) rotate(-7deg) scale(.92) }
  22%  { opacity:1; transform:translate(7cqw,4cqw) rotate(-7deg) scale(1) }
  46%  { opacity:1; transform:translate(7cqw,4cqw) rotate(-7deg) scale(1) }
  58%  { opacity:1; transform:translate(-11cqw,8cqw) rotate(-4deg) scale(1.34) }
  96%  { opacity:1; transform:translate(-11cqw,8cqw) rotate(-4deg) scale(1.34) }
  100% { opacity:0; transform:translate(-11cqw,40cqw) rotate(-7deg) scale(1.22) }
}
@keyframes ps-label-recede {
  0%,10%{ transform:rotate(-2deg) translate(0,0) scale(1); opacity:1 }
  22%   { transform:rotate(-2deg) translate(0,0) scale(1); opacity:1 }
  46%   { transform:rotate(-2deg) translate(0,0) scale(1); opacity:1 }
  58%   { transform:translate(24cqw,-18cqw) rotate(4deg) scale(.66); opacity:.85 }
  96%   { transform:translate(24cqw,-18cqw) rotate(4deg) scale(.66); opacity:.85 }
  100%  { transform:rotate(-2deg) translate(0,0) scale(1); opacity:1 }
}
@keyframes ps-locked-pulse { 0%,44%,100%{opacity:.35;transform:scale(1)} 34%{opacity:.85;transform:scale(1.08)} }
@keyframes ps-locked-beam { 0%{top:3em;opacity:.25} 12%{opacity:1} 50%{top:59em;opacity:1} 88%{opacity:1} 100%{top:3em;opacity:.25} }
@keyframes ps-map-pulse { 0%{transform:scale(.6);opacity:.75} 100%{transform:scale(3.2);opacity:0} }
@keyframes ps-photo-swipe { 0%,60%{transform:translateX(0)} 66%,100%{transform:translateX(-50%)} }
@keyframes ps-photo-pip1 { 0%,61%{opacity:1} 66%,100%{opacity:.4} }
@keyframes ps-photo-pip2 { 0%,61%{opacity:.4} 66%,100%{opacity:1} }
@keyframes ps-photo-count1 { 0%,61%{opacity:1} 65%,100%{opacity:0} }
@keyframes ps-photo-count2 { 0%,61%{opacity:0} 65%,100%{opacity:1} }

/* respecteer reduced-motion: toon de pagina statisch i.p.v. de loop */
@media (prefers-reduced-motion: reduce) {
  .psh-flash, .psh-scan, .psh-scan b, .psh-phone, .psh-scroll__inner, .psh-locked, .psh-locked__view .beam,
  .psh-label, .psh-photo__strip, .psh-photo__dots i, .psh-photo__count span, .psh-map__pin .ring { animation: none !important; }
  .psh-label { transform: translate(24cqw,-18cqw) rotate(4deg) scale(.66); opacity:.85; }
  .psh-locked { opacity: 0; }
  .psh-scroll__inner { opacity: 1; transform: none; }
  .psh-photo__count span:nth-child(2) { opacity: 0; }
}