/* ==========================================================================
   SmartGlas — custom styles
   ========================================================================== */

html { scroll-behavior: smooth; }
  body { background-color: #121212; }
  ::selection { background: #00b1fd; color: #121212; }

  .trace-dark  { background-image: linear-gradient(90deg, transparent 0%, #2e2e2e 15%, #2e2e2e 85%, transparent 100%); height: 1px; }
  .trace-light { background-image: linear-gradient(90deg, transparent 0%, #e4e3df 15%, #e4e3df 85%, transparent 100%); height: 1px; }

  .glow-text { text-shadow: 0 0 44px rgba(0, 177, 253, 0.35); }

  .btn-primary { position: relative; transition: box-shadow .4s ease, transform .2s ease; }
  .btn-primary:hover { box-shadow: 0 0 0 1px rgba(0,177,253,.5), 0 10px 34px -8px rgba(0,177,253,.5); transform: translateY(-1px); }
  .btn-primary:active { transform: translateY(0); }

  .card-hover-dark  { transition: border-color .35s ease, background-color .35s ease, transform .35s ease; }
  .card-hover-dark:hover { border-color: rgba(0,177,253,.4); background-color: rgba(0,177,253,.04); transform: translateY(-4px); }
  .card-hover-light { transition: border-color .35s ease, box-shadow .35s ease, transform .35s ease; }
  .card-hover-light:hover { border-color: rgba(0,147,184,.5); box-shadow: 0 20px 50px -20px rgba(18,18,18,.15); transform: translateY(-4px); }

  /* ---- Hero window-pane switch ----
     Real "window" component: an outer frame + mullion bars (always sharp,
     pure CSS, never touched by JS) dividing the photo into three panes.
     Each pane has its own frost layer that blurs ONLY what's behind that
     pane via backdrop-filter. Toggling one class on the wrapper cascades
     to every pane at once — furniture/frame stays sharp, only the glass
     panes switch between matte and clear. */
  .pane-frost {
    background: rgba(247, 247, 244, 0.4);
    backdrop-filter: blur(15px) saturate(0.55) brightness(1.12);
    -webkit-backdrop-filter: blur(15px) saturate(0.55) brightness(1.12);
    opacity: 1;
    transition: opacity .85s cubic-bezier(.4,0,.2,1),
                backdrop-filter .85s cubic-bezier(.4,0,.2,1),
                -webkit-backdrop-filter .85s cubic-bezier(.4,0,.2,1);
  }
  #windowWrap.privacy-off .pane-frost {
    opacity: 0;
    backdrop-filter: blur(0px) saturate(1) brightness(1);
    -webkit-backdrop-filter: blur(0px) saturate(1) brightness(1);
  }
  .mullion {
    background: linear-gradient(180deg, #2e2e2e, #17191c);
    box-shadow: 0 0 0 1px rgba(0,0,0,.5) inset;
  }

  .switch-dot { transition: background-color .35s ease, box-shadow .35s ease; }
  .switch-dot.is-active { box-shadow: 0 0 14px 2px rgba(0,177,253,.7); }

  /* Scroll reveal */
  .reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.2,.7,.3,1), transform .9s cubic-bezier(.2,.7,.3,1); }
  .reveal.in { opacity: 1; transform: translateY(0); }

  .nav-link { position: relative; }
  .nav-link::after { content:''; position:absolute; left:0; bottom:-4px; width:0; height:1px; background:#00b1fd; transition: width .25s ease; }
  .nav-link:hover::after { width: 100%; }

  .calc-pulse { animation: calcPulse .5s ease; }
  @keyframes calcPulse { 0% { opacity:.4; transform: translateY(4px); } 100% { opacity:1; transform: translateY(0); } }

  /* FAQ accordion — grid-rows trick gives smooth auto-height animation
     without any JS height measurement */
  .faq-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .45s cubic-bezier(.4,0,.2,1);
  }
  .faq-item.open .faq-content { grid-template-rows: 1fr; }
  .faq-content > div { overflow: hidden; }
  .faq-chevron { transition: transform .35s ease; }
  .faq-item.open .faq-chevron { transform: rotate(45deg); }
  .faq-item.open .faq-question { color: #00b1fd; }

  /* Product-type accordion (#producten) — same grid-rows trick as FAQ */
  .product-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .45s cubic-bezier(.4,0,.2,1);
  }
  .product-item.open .product-content { grid-template-rows: 1fr; }
  .product-content > div { overflow: hidden; }
  .product-chevron { transition: transform .35s ease; }
  .product-item.open .product-chevron { transform: rotate(45deg); }
  .product-item.open .product-name { color: #00b1fd; }
  .product-item { transition: border-color .3s ease; }
  .product-item.open { border-color: rgba(0,177,253,.4); }

  /* Toepassingen filter buttons */
  .filter-btn { transition: background-color .3s ease, color .3s ease, border-color .3s ease; }
  .filter-btn.active { background-color: #00b1fd; color: #121212; border-color: #00b1fd; }

  /* Calculator step indicator (#calculator) */
  .calc-tab-dot { border-color: #e4e3df; color: #6b6b68; background-color: #ffffff; }
  .calc-tab-label { color: #6b6b68; }
  .calc-tab.is-active .calc-tab-dot { border-color: #00b1fd; background-color: #00b1fd; color: #121212; }
  .calc-tab.is-active .calc-tab-label { color: #121212; }
  .calc-tab.is-complete .calc-tab-dot { border-color: #0089d6; background-color: #ffffff; color: #0089d6; }

  /* Process step connector */
  .process-line { background: linear-gradient(90deg, transparent, #2e2e2e 15%, #2e2e2e 85%, transparent); }

  input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible {
    outline: 2px solid #00b1fd;
    outline-offset: 2px;
  }

  @media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
  }