/* Studiodijk — stylesheet (uit de design-export) */

  @font-face {
    font-family: 'Sora';
    src: url("../assets/fonts/sora.ttf") format('truetype-variations'),
         url("../assets/fonts/sora.ttf") format('truetype');
    font-weight: 100 800; font-style: normal; font-display: swap;
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body { margin: 0; font-family: 'Sora', system-ui, sans-serif; background:#F5F2EC; color:#0A0A0A; -webkit-font-smoothing:antialiased; }
  /* Pure-CSS scroll reveal. Guarded by @supports so unsupported browsers keep content fully visible — never trapped. */
  @keyframes sdReveal { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:none; } }
  @keyframes sdMarquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }
  @keyframes sdParallax { from { transform:scale(1.14) translateY(-4.5%); } to { transform:scale(1.14) translateY(4.5%); } }
  /* All motion is SCROLL-driven (view/scroll timelines) — never time-based, so it can never freeze and trap content.
     Guarded by @supports so unsupported browsers keep everything fully visible and static. */
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      [data-reveal] {
        animation: sdReveal linear both;
        animation-timeline: view();
        animation-range: entry 2% cover 22%;
      }
      [data-parallax] {
        animation: sdParallax linear both;
        animation-timeline: view();
        animation-range: cover;
      }
      [data-marquee] {
        animation: sdMarquee linear both;
        animation-timeline: scroll(root);
      }
    }
  }
  /* Diensten — hover GIF-preview venster */
  [data-svc] [data-pop] {
    opacity:0; pointer-events:none;
    transition: opacity 200ms ease, transform 120ms ease-out;
    will-change: transform, opacity;
  }
  [data-svc]:hover [data-pop] { opacity:1; pointer-events:auto; }
  /* Classy details */
  ::selection { background:#A56E33; color:#FFF; }
  html { scrollbar-color:#A56E33 #E7E2D8; scrollbar-width:thin; }
  ::-webkit-scrollbar { width:10px; height:10px; }
  ::-webkit-scrollbar-track { background:#E7E2D8; }
  ::-webkit-scrollbar-thumb { background:#A56E33; border:3px solid #E7E2D8; }
  ::-webkit-scrollbar-thumb:hover { background:#8A5A28; }
  /* Loading screen — fade is cosmetic; JS guarantees removal so it can never trap the page */
  #sd-loader { transition: opacity 620ms cubic-bezier(0.16,1,0.3,1); }
  #sd-loader.done { opacity:0; }
  /* ===== RESPONSIVE: iPad/tablet + mobiel (overschrijft inline-styles met !important) ===== */
  /* iPad / tablet (<= 1024px): werk-galerij 12-koloms -> 2-up */
  @media (max-width: 1024px) {
    #werk > div:last-child { grid-template-columns:1fr 1fr !important; }
    #werk > div:last-child > div { grid-column:auto !important; margin-top:0 !important; }
  }
  /* Hover-GIF tonen op elk muis-apparaat; alleen verbergen op touch (geen hover) */
  @media (hover: none) {
    #diensten [data-pop] { display:none !important; }
  }
  /* iPad portret / kleine tablet (<= 900px): Over stapelt, portret eronder */
  @media (max-width: 900px) {
    #over > div { grid-template-columns:1fr !important; }
    #over > div > div:last-child { aspect-ratio:16/10 !important; max-height:62vh; }
  }
  /* Mobiel (<= 640px) */
  @media (max-width: 640px) {
    nav { padding-left:20px !important; padding-right:20px !important; }
    nav > div > a:not(:last-child) { display:none !important; }
    nav > div > a:last-child { margin-left:0 !important; padding:11px 18px !important; }
    #top h1 { font-size:clamp(40px,12vw,72px) !important; }
    #diensten [data-svc] { grid-template-columns:1fr !important; gap:6px !important; }
    #diensten [data-svc] > span:first-child { font-size:22px !important; }
    #werk > div:last-child { grid-template-columns:1fr !important; }
  }

  /* ── hover-effecten (uit style-hover van de design-export) ── */
  .hv1:hover { transform:scale(1.04); }
  .hv2:hover { transform:scale(1.05); }
  .hv3:hover { color:#0A0A0A; background-size:100% 1px; }
  .hv4:hover { background:#A56E33; }
  .hv5:hover { padding-left:18px; }
  .hv6:hover { border-color:#fff; }

  /* image-slot leeg-staat (gereproduceerd uit de design-export, statisch) */
  .sd-frame{position:absolute;inset:0;overflow:hidden;background:rgba(0,0,0,.04)}
  .sd-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:12px;box-sizing:border-box;cursor:pointer;user-select:none;font:13px/1.3 system-ui,-apple-system,sans-serif;color:rgba(0,0,0,.55)}
  .sd-empty svg{opacity:.45}
  .sd-cap{max-width:90%;font-weight:500;letter-spacing:.01em}
  .sd-ring{position:absolute;inset:0;pointer-events:none;border:1.5px dashed rgba(0,0,0,.25)}

  /* video click-to-play (Dronevlucht): overlay vervaagt tijdens afspelen */
  #werk video { cursor:pointer; }
  #werk video + div { transition:opacity .35s ease; }
  #werk .sd-vid-on video + div { opacity:0; }