/* ==========================================================================
   HUTT ROSSUM — bestaande merk-loader + filmkorrel (ONGEWIJZIGD behouden)
   Geëxtraheerd uit de oude style.css zodat de loader exact blijft werken
   bovenop het nieuwe Wolweide-ontwerp. Markup: render_global_header /
   page_transition() in class-frontend.php. Gedrag: assets/js/site.js.
   Tokens (--brown-darker, --on-deep-soft, --ease-soft) komen uit home.css.
   ========================================================================== */

/* ---------- Filmkorrel-overlay (cinematisch) ---------- */
.grain{
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Merk-loader (logo "scherpstellen") ---------- */
#hr-loader{
  position:fixed; inset:0; z-index:9999;
  display:grid; place-items:center;
  background: radial-gradient(120% 90% at 50% 30%, #2d2017 0%, var(--brown-darker) 60%, #1a110b 100%);
  overflow:hidden;
  /* CSS-failsafe: als site.js nooit draait (netwerkfout/JS-error) mag de
     loader de site niet permanent afdekken. In het normale pad verbergt JS
     de loader ruim vóór deze 6s. Aparte keyframes-naam zodat .is-done
     (hrFade) deze animatie schoon vervangt. */
  animation:hrLoaderFailsafe .7s var(--ease-soft) 6s forwards;
}
@keyframes hrLoaderFailsafe{ to{ opacity:0; visibility:hidden; } }
#hr-loader::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
#hr-loader.is-done{ animation:hrFade .7s var(--ease-soft) forwards; }
@keyframes hrFade{ to{ opacity:0; visibility:hidden; } }

.hr-stage{ position:relative; display:flex; flex-direction:column; align-items:center; gap:clamp(30px,5vw,46px); }
.hr-logobox{ position:relative; display:inline-block; isolation:isolate; }

/* warme gloed achter het logo — faadt in en 'ademt' zacht tijdens het laden */
.hr-halo{
  position:absolute; z-index:0; left:50%; top:50%; transform:translate(-50%,-50%) scale(.92);
  width:200%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(176,126,79,.32) 0%, rgba(176,126,79,.10) 40%, transparent 64%);
  filter:blur(6px); opacity:0;
  animation:hrHaloIn 1.4s var(--ease-soft) .35s forwards,
            hrBreathe 3.4s ease-in-out 1.7s infinite;
}
@keyframes hrHaloIn{ to{ opacity:.85; } }
@keyframes hrBreathe{
  0%,100%{ opacity:.5;  transform:translate(-50%,-50%) scale(.94); }
  50%{     opacity:.95; transform:translate(-50%,-50%) scale(1.05); }
}

/* het échte logo, gerecolord naar crème, stelt scherp: wazig+gedimd -> scherp+helder */
.hr-logo{
  position:relative; z-index:2; display:block;
  height:clamp(60px, 9.5vw, 100px); width:auto;
  opacity:0; transform:scale(1.03);
  filter:brightness(0) invert(93%) sepia(16%) saturate(420%) hue-rotate(354deg) brightness(60%) blur(12px);
  animation:hrFocus 1.7s cubic-bezier(.2,.7,.2,1) .35s forwards;
  will-change:filter, opacity, transform; backface-visibility:hidden;
}
@keyframes hrFocus{
  0%{   opacity:0; transform:scale(1.03);
        filter:brightness(0) invert(93%) sepia(16%) saturate(420%) hue-rotate(354deg) brightness(60%) blur(12px); }
  100%{ opacity:1; transform:scale(1);
        filter:brightness(0) invert(93%) sepia(16%) saturate(420%) hue-rotate(354deg) brightness(99%) blur(0); }
}

.hr-bar{ width:clamp(140px, 22vw, 200px); height:2px; border-radius:99px; background:rgba(233,217,185,.18); overflow:hidden; }
.hr-bar span{ display:block; height:100%; width:100%; background:var(--on-deep-soft); transform:translateX(-100%);
  animation:hrBar 2.6s var(--ease-soft) .2s forwards; }
@keyframes hrBar{ 0%{ transform:translateX(-100%);} 70%{ transform:translateX(-12%);} 100%{ transform:translateX(0);} }

@media (prefers-reduced-motion: reduce){
  .cookie-banner{ transition:none; }
  .hr-halo{ animation:none; opacity:.7; transform:translate(-50%,-50%) scale(1); }
  .hr-logo{ animation:none; opacity:1; transform:none;
    filter:brightness(0) invert(93%) sepia(16%) saturate(420%) hue-rotate(354deg) brightness(99%); }
  .hr-bar span{ animation:none; transform:none; }
}

/* ---------- Cookie banner (bestaand, behouden) ---------- */
.cookie-banner{
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 200%);
  z-index: 200;
  width: calc(100% - 32px);
  max-width: 720px;
  background: var(--brown-deep);
  color: var(--paper);
  border-radius: 14px;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.55);
  /* visibility: verborgen banner mag niet keyboard-focusbaar zijn */
  visibility: hidden;
  transition: transform .6s var(--ease-out), visibility 0s .6s;
}
.cookie-banner.show{ transform: translate(-50%, 0); visibility: visible; transition: transform .6s var(--ease-out), visibility 0s; }
.cookie-banner .cb-inner{
  display:grid; grid-template-columns: 1fr auto;
  gap: 24px; align-items: center;
  padding: 22px 26px;
}
.cookie-banner .cb-title{
  font-family:var(--font-display); font-style: italic;
  font-size: 22px; color: var(--paper); margin-bottom: 4px;
}
.cookie-banner p{
  margin: 0;
  color: #d6c8b1; font-size: 13.5px; line-height: 1.55;
  max-width: 56ch;
}
.cookie-banner p a{ color: var(--paper); border-bottom: 1px solid rgba(243,234,216,.4); }
.cookie-banner .cb-actions{ display:flex; gap: 8px; flex-shrink: 0; }
.cookie-banner .cb-btn{
  appearance: none; border: 0;
  min-height: 44px; /* touch-target */
  padding: 11px 18px;
  border-radius: 999px;
  font-family: inherit; font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  cursor: pointer;
  transition: all .25s var(--ease-out);
}
.cookie-banner .cb-primary{ background: var(--paper); color: var(--brown-deep); }
.cookie-banner .cb-primary:hover{ background: #fff; }
.cookie-banner .cb-ghost{ background: transparent; color: var(--paper); border: 1px solid rgba(243,234,216,.3); }
.cookie-banner .cb-ghost:hover{ background: rgba(243,234,216,.1); }
@media (max-width: 720px){
  .cookie-banner .cb-inner{ grid-template-columns: 1fr; gap: 16px; padding: 18px 20px; }
  .cookie-banner .cb-actions{ flex-direction: column-reverse; }
  .cookie-banner .cb-btn{ width: 100%; padding: 13px 18px; }
}