:root{
  /* KLOWDI luxe neutrals */
  --klowdi-ink: #2b241c;                 /* warm ink (geen hard zwart) */
  --klowdi-ink-dim: rgba(43,36,28,.60);

  --klowdi-sweep: rgba(255,255,255,.26);
  --klowdi-vignette: rgba(0,0,0,.10);

  /* spacing: default gap tussen KLO en WDI */
  --klowdi-gap: 38px;

  /* typography */
  --klowdi-font-ui: "PP Mori", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --klowdi-font-display: "Editorial New", Georgia, "Times New Roman", serif;

  /* sizes */
  --klowdi-brand-size: clamp(56px, 7.8vw, 140px);
  --klowdi-brand-tracking: .14em;
}

/* ===== Fonts =====
   Zet de font files hier:
   /wp-content/themes/hello-elementor-child/assets/fonts/
   En laat de bestandsnamen exact matchen.
*/
@font-face{
  font-family:"PP Mori";
  src:url("./fonts/PPMori-Regular.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Editorial New";
  src:url("./fonts/EditorialNew-Regular.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

html.klowdi-lock, body.klowdi-lock{
  height:100%;
  overflow:hidden !important;
}

#klowdi-preloader{
  position:fixed;
  inset:0;
  z-index:999999;
  background:#f4f1ea;
  display:block;
  opacity:1;
  pointer-events:all;
  transform:translateZ(0);
  will-change:opacity;
}

#klowdi-preloader .klowdi-preloader__stage{
  position:relative;
  width:100%;
  height:100%;
}

/* ===== Corner counter ===== */
#klowdi-preloader .klowdi-preloader__counter{
  font-family: var(--klowdi-font-ui);
  color:var(--klowdi-ink-dim);
  letter-spacing:.22em;
  text-transform:uppercase;
  font-variant-numeric: tabular-nums;
  user-select:none;
}
#klowdi-preloader .klowdi-preloader__counter--corner{
  position:absolute;
  top:24px;
  left:24px;
  font-size:12px;
  opacity:.95;
  z-index:60;
}
#klowdi-preloader .klowdi-preloader__percent{
  opacity:.7;
  margin-left:3px;
}

/* ===== FULL-SCREEN background image ===== */
#klowdi-preloader .klowdi-preloader__visual{
  position:absolute;
  inset:0;
  z-index:1;
  overflow:hidden;
  pointer-events:none;
}
#klowdi-preloader .klowdi-preloader__image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;

  opacity:1;
  transform: scale(1.14);
  filter: blur(14px) saturate(1.05) contrast(1.02);

  will-change: transform, filter, opacity;
}

/* sweep */
#klowdi-preloader .klowdi-preloader__sweep{
  position:absolute;
  inset:-35%;
  background: linear-gradient(
    120deg,
    transparent 35%,
    var(--klowdi-sweep) 50%,
    transparent 65%
  );
  mix-blend-mode: overlay;
  opacity:.95;
  transform: translateX(-36%);
  will-change: transform;
}

/* vignette */
#klowdi-preloader .klowdi-preloader__vignette{
  position:absolute;
  inset:0;
  background: radial-gradient(1200px 900px at 50% 46%, transparent 40%, var(--klowdi-vignette) 100%);
  opacity:1;
}

/* ===== CUTOUT layer (MacMag vibe) ===== */
#klowdi-preloader .klowdi-preloader__cutout{
  position:absolute;
  inset:0;
  z-index:15;
  display:none;
  place-items:center;
  pointer-events:none;

  opacity:0;
  filter: blur(8px);
  transform: scale(1.01);
  will-change: opacity, filter, transform;
}

#klowdi-preloader .klowdi-cutout-word{
  font-family: var(--klowdi-font-display);
  font-size: clamp(92px, 14vw, 280px);
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: .9;

  /* === APPLY CUTOUT/MASK LOOK TO MOVING LETTERS (KLO / WDI) === */
#klowdi-preloader .klowdi-word{
  /* beeld-in-tekst */
  background-image: url("https://klowdiofficial.com/wp-content/uploads/2026/01/studio-image-1768779339566-2-scaled.jpg");
  background-size: cover;
  background-position: center;

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;

  /* frosty/glas randje */
  text-shadow: none !important;
  filter: saturate(1.08) contrast(1.06);
  opacity: .92;
}


/* ===== BRAND (KLO / WDI) ===== */
#klowdi-preloader .klowdi-preloader__brand{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  z-index:25;

  display:flex;
  align-items:center;
  justify-content:center;

  will-change: transform, opacity, filter;
}

#klowdi-preloader .klowdi-preloader__word{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: var(--klowdi-gap); /* JS zet dit later naar px */
}

/* Force kleur + font (Elementor overrides killen) */
#klowdi-preloader .klowdi-word{
  font-family: var(--klowdi-font-ui) !important;
  font-size: var(--klowdi-brand-size) !important;
  letter-spacing: var(--klowdi-brand-tracking) !important;
  text-transform:uppercase;
  color: var(--klowdi-ink) !important;
  line-height:1;

  text-shadow:
    0 1px 0 rgba(255,255,255,.20),
    0 14px 38px rgba(0,0,0,.10);

  opacity:0;
  filter: blur(10px);
  transform: translate3d(0,0,0);
  will-change: transform, opacity, filter;
}

/* Grain */
#klowdi-preloader .klowdi-preloader__grain{
  position:absolute;
  inset:-20%;
  pointer-events:none;
  opacity:.09;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  background-size:240px 240px;
  mix-blend-mode:overlay;
  transform:translateZ(0);
  animation:klowdiGrain 1.2s steps(2) infinite;
  z-index:80;
}
@keyframes klowdiGrain{
  0%{ transform: translate3d(-2%,-2%,0); }
  100%{ transform: translate3d(2%,2%,0); }
}

/* Mobile tweaks */
@media (max-width: 480px){
  :root{ --klowdi-gap: 22px; }
  #klowdi-preloader .klowdi-preloader__counter--corner{ top:16px; left:16px; }
  #klowdi-preloader .klowdi-cutout-word{ letter-spacing:.04em; opacity:.70; }
}