/* Hero Double Line — accent marks on the emphasised title word and a
   decoration behind the phone. Markup comes from
   core/templatetags/hero_double_line.py; linked only when a section opts in. */

/* Accent marks (.hl-accent*, .hl-draw): see shared.css — they work in every title */

/* Decoration: viewBox -180 -60 680 680 over a 315x560 device box */
.hdl-deco { position: absolute; left: -57.143%; top: -10.714%; width: 215.873%; height: 121.429%; overflow: visible; pointer-events: none; }
.hdl-draw { stroke-dasharray: 1 1.1; stroke-dashoffset: 0; }
.hdl-surface-fill { fill: var(--hdl-surface); }
.hdl-surface-stroke { stroke: var(--hdl-surface); }
.hdl-pop { transform-box: fill-box; transform-origin: center; }
.hdl-fan { transform-origin: 157.5px 560px; transform: rotate(var(--hdl-a)); }
.hdl-f1 { --hdl-a: -16deg; }
.hdl-f2 { --hdl-a: 9deg; }
.hdl-f3 { --hdl-a: -7deg; }
.hdl-m { display: none; }
/* shared.css lets the hero overflow once it stacks (<=900px); the decoration's
   box is wider than the phone, so clip it sideways at the screen-wide section,
   not at the padded column. Vertical overflow stays visible. */
.hero-media-section.hdl-motion-once, .hero-media-section.hdl-motion-off, .hero-media-section.hdl-motion-scroll { overflow-x: clip; }
/* Front layer: hearts and medallions share the decoration's box but sit above the phone */
.hdl-front { z-index: 2; }
.hdl-rise { transform-box: fill-box; }
:is(.hdl-motion-once, .hdl-motion-scroll.hdl-in-media) .hdl-rise { animation: hdl-rise .9s cubic-bezier(.16,1,.3,1) both; }
@keyframes hdl-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) {
  .hdl-medals { display: none; }
  .hdl-d { display: none; }
  .hdl-m { display: inline; }
  .hdl-f1 { --hdl-a: -5deg; }
  .hdl-f2 { --hdl-a: 3.5deg; }
  .hdl-f3 { --hdl-a: -2deg; }
}

/* corner chips stay clear of the contour instead of touching it */
@media (min-width: 901px) {
  .hero-device-stage:has(.hdl-deco-contour) .hero-chip-top-left, .hero-device-stage:has(.hdl-deco-contour) .hero-chip-bottom-left { left: -6%; }
  .hero-device-stage:has(.hdl-deco-contour) .hero-chip-top-right, .hero-device-stage:has(.hdl-deco-contour) .hero-chip-bottom-right { right: -6%; }
}

/* One-shot motion, after the title's heroFadeUp (0.35s + 0.6s) */
.hdl-motion-once .hl-draw { animation: hdl-draw .8s cubic-bezier(.4,0,.2,1) 1s both; }
.hdl-motion-once .hl-accent-r .hl-draw { animation-delay: 1.25s; }
.hdl-motion-once .hdl-draw { animation: hdl-draw 1.8s cubic-bezier(.4,0,.2,1) 1.1s both; }
:is(.hdl-motion-once, .hdl-motion-scroll.hdl-in-media) .hdl-pop { animation: hdl-pop .5s cubic-bezier(.16,1,.3,1) 2.8s both; }
:is(.hdl-motion-once, .hdl-motion-scroll.hdl-in-media) .hdl-fan { animation: hdl-fan 1.2s cubic-bezier(.16,1,.3,1) 1.1s both; }
@keyframes hdl-draw { from { stroke-dashoffset: 1.05; } to { stroke-dashoffset: 0; } }
@keyframes hdl-pop { 0% { transform: scale(0); } 60% { transform: scale(1.3); } 100% { transform: scale(1); } }
@keyframes hdl-fan { from { transform: rotate(0deg); } to { transform: rotate(var(--hdl-a)); } }
/* Reel interface: the three social icons on the right of the phone's screen. Decorative: no clicks. */
.hdl-reel { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
:is(.hdl-motion-once, .hdl-motion-scroll.hdl-in-media) .hdl-reel { animation: hdl-fade 1.2s ease 1.2s both; }
@keyframes hdl-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---- motion_mode "scroll" (hybride) ----
   Twee eenmalige triggers (observer in base.html), elk pas als het stuk dat beweegt écht in beeld is:
   `.hdl-in` = tekstkolom (label, kop, subtekst, CTA) voor 60% in beeld; `.hdl-in-media` = telefoonkolom grotendeels
   in beeld (chips, hartjes, medailles, waaier, reel). De tijden hierboven en in shared.css tellen vanaf dat moment.
   Contour, streepjes en telefoon-parallax lopen mee met het scrollen (animation-timeline: view()), elk op de
   timeline van het element zelf (niet van de sectie: die is 100svh en begint te tekenen vóór de telefoon in beeld is).
   Zonder view() vallen ze terug op dezelfde timing als "once", na de trigger. */
:root { --hdl-ease: cubic-bezier(.16,1,.3,1); }
@keyframes hdl-chip-in { from { opacity: 0; transform: translateY(18px) scale(.8); } to { opacity: 1; transform: none; } }
@keyframes hdl-drift { from { transform: translateY(36px); } to { transform: translateY(-36px); } }
@media (prefers-reduced-motion: no-preference) {
  html.hl-js .hdl-motion-scroll:not(.hdl-in) :is(.hero-label, .hero-headline, .hero-sub, .hero-ctas) { opacity: 0; animation: none; }
  html.hl-js .hdl-motion-scroll:not(.hdl-in-media) :is(.hero-media-col, .hero-chip, .hdl-rise, .hdl-pop, .hdl-reel) { opacity: 0; animation: none; }
  html.hl-js .hdl-motion-scroll:not(.hdl-in-media) .hdl-fan { animation: none; transform: rotate(0deg); }
  /* streepjes en contour verschijnen pas met hun eigen trigger: nooit een lijn zonder het woord of de telefoon */
  html.hl-js .hdl-motion-scroll:not(.hdl-in) .hl-accent-mark, html.hl-js .hdl-motion-scroll:not(.hdl-in-media) .hdl-deco { opacity: 0; }
  .hdl-motion-scroll .hl-accent-mark, .hdl-motion-scroll .hdl-deco { transition: opacity .5s ease; }
  .hdl-motion-scroll.hdl-in-media .hero-chip { animation: hdl-chip-in .6s var(--hdl-ease) var(--hdl-cd, .9s) both, heroChipFloat 4.5s ease-in-out infinite calc(var(--hdl-cd, .9s) + .6s); }
  .hdl-motion-scroll.hdl-in-media .hero-chip-top-left { --hdl-cd: .75s; }
  .hdl-motion-scroll.hdl-in-media .hero-chip-top-right { --hdl-cd: .85s; }
  .hdl-motion-scroll.hdl-in-media .hero-chip-left { --hdl-cd: .95s; }
  .hdl-motion-scroll.hdl-in-media .hero-chip-right { --hdl-cd: 1.05s; }
  .hdl-motion-scroll.hdl-in-media .hero-chip-bottom-left { --hdl-cd: 1.15s; }
  .hdl-motion-scroll.hdl-in-media .hero-chip-bottom-right { --hdl-cd: 1.25s; }
}
/* shared.css zet de sectie op overflow:hidden (desktop); dat maakt hem een scroll-container en dan koppelen de
   timelines van de kinderen zich aan de sectie i.p.v. de pagina. clip knipt hetzelfde af zonder scroll-container. */
@supports (animation-timeline: view()) {
  @media (min-width: 901px) { .hero-media-section.hdl-motion-scroll { overflow: clip; } }
  @media (prefers-reduced-motion: no-preference) {
    .hdl-motion-scroll .hero-media-col { view-timeline: --hdl-media block; }
    .hdl-motion-scroll .hero-headline { view-timeline: --hdl-title block; }
    .hdl-motion-scroll .hdl-draw { animation: hdl-draw linear both; animation-timeline: --hdl-media; animation-range: cover 22% cover 43%; }
    .hdl-motion-scroll .hl-draw { animation: hdl-draw cubic-bezier(.4,0,.2,1) both; animation-timeline: --hdl-title; animation-range: cover 30% cover 41%; }
    .hdl-motion-scroll .hl-accent-r .hl-draw { animation-range: cover 35% cover 46%; }
    .hdl-motion-scroll .hero-device-stage { animation: hdl-drift linear both; animation-timeline: --hdl-media; animation-range: cover 0% cover 100%; }
  }
}
@supports not (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html.hl-js .hdl-motion-scroll:not(.hdl-in) .hl-draw { stroke-dashoffset: 1.05; }
    html.hl-js .hdl-motion-scroll:not(.hdl-in-media) .hdl-draw { stroke-dashoffset: 1.05; }
    .hdl-motion-scroll.hdl-in .hl-draw { animation: hdl-draw .8s cubic-bezier(.4,0,.2,1) .5s both; }
    .hdl-motion-scroll.hdl-in .hl-accent-r .hl-draw { animation-delay: .75s; }
    .hdl-motion-scroll.hdl-in-media .hdl-draw { animation: hdl-draw 1.8s cubic-bezier(.4,0,.2,1) .6s both; }
  }
}
@media (max-width: 760px) { @keyframes hdl-drift { from { transform: translateY(18px); } to { transform: translateY(-18px); } } }
@media (prefers-reduced-motion: reduce) {
  .hl-draw, .hdl-draw, .hdl-pop, .hdl-fan, .hdl-reel, .hdl-rise { animation: none !important; }
}

/* Icon chips (chips_style: double_line): 48 px high, a 28 px Double Line icon. Two classes beat shared.css's size rules. */
.hero-chip.hero-chip-dl { height: var(--hdl-chip-h, 48px); box-sizing: border-box; padding: 0 18px 0 12px; gap: 10px; font-size: 15px; }
.hero-chip.hero-chip-dl.hero-chip-size-klein { --hdl-chip-h: 40px; font-size: 13px; padding: 0 14px 0 10px; }
.hero-chip.hero-chip-dl.hero-chip-size-groot { --hdl-chip-h: 56px; font-size: 17px; padding: 0 22px 0 14px; }
.hero-chip.hero-chip-dl.hero-chip-image { padding: 0 16px; --hero-chip-logo: 30px; }
.hero-chip-dl .hdl-chip-icon { display: flex; width: 28px; height: 28px; flex: none; color: inherit; }
.hero-chip-dl .hdl-chip-icon svg { display: block; width: 100%; height: 100%; }