/* ================================================================
   wawww Lumière — Cinematic Preloader & Transitions  v1.0.0
   Performance: compositor-only props (transform, opacity, clip-path)
   ================================================================ */

:root {
  --wlum-accent : #c9a96e;
  --wlum-bg     : #050505;
  --wlum-white  : #f5f4f0;
}

/* ── Entrance animation helpers (Bricks Builder compatible) ───── */
[data-wlum-enter] {
  opacity   : 0;
  transform : translateY(28px);
  transition: opacity   0.85s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-wlum-enter].wlum-entered { opacity: 1; transform: none; }
[data-wlum-enter]:nth-child(2) { transition-delay: 0.10s; }
[data-wlum-enter]:nth-child(3) { transition-delay: 0.20s; }
[data-wlum-enter]:nth-child(4) { transition-delay: 0.30s; }
[data-wlum-enter]:nth-child(5) { transition-delay: 0.40s; }

/* Class-based (Bricks custom class .wlum-enter) */
.wlum-enter:not([data-wlum-enter]) {
  opacity  : 0;
  transform: translateY(28px);
}

/* ══════════════════════════════════════════════════════════════
   PRELOADER
   ══════════════════════════════════════════════════════════════ */

#wawww-lumiere-preloader {
  position       : fixed;
  inset          : 0;
  z-index        : 99999;
  background     : var(--wlum-bg);
  display        : flex;
  align-items    : center;
  justify-content: center;
  overflow       : hidden;
}

/* ── Film grain overlay ─────────────────────────────────────── */
.wlum-grain {
  position          : absolute;
  inset             : -100px;
  z-index           : 8;
  pointer-events    : none;
  opacity           : 0.055;
  background-image  : url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='wg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23wg)'/%3E%3C/svg%3E");
  background-size   : 256px 256px;
  animation         : wlum-grain-shift 0.1s steps(1) infinite;
  mix-blend-mode    : screen;
  will-change       : background-position;
}

@keyframes wlum-grain-shift {
  0%  { background-position:    0px    0px; }
  16% { background-position:  -80px  -40px; }
  32% { background-position:   40px  -80px; }
  48% { background-position:  -60px   60px; }
  64% { background-position:   80px  -20px; }
  80% { background-position:  -20px   80px; }
}

/* ── Horizontal scanline sweep ──────────────────────────────── */
.wlum-scanline {
  position       : absolute;
  left           : 0;
  right          : 0;
  height         : 1px;
  top            : 9vh;
  background     : linear-gradient(to right,
                     transparent 0%,
                     rgba(255,255,255,0.07) 50%,
                     transparent 100%);
  z-index        : 7;
  pointer-events : none;
  animation      : wlum-scan 3.5s linear infinite;
  will-change    : transform, opacity;
}

@keyframes wlum-scan {
  0%   { transform: translateY(0);     opacity: 0; }
  4%   { opacity: 1; }
  94%  { opacity: 1; }
  100% { transform: translateY(82vh);  opacity: 0; }
}

/* ── Cinematic letterbox bars ───────────────────────────────── */
.wlum-letterbox {
  position      : absolute;
  left          : 0;
  right         : 0;
  z-index       : 6;
  background    : #000;
  pointer-events: none;
}
.wlum-letterbox--top    { top:    0; height: 9vh; }
.wlum-letterbox--bottom { bottom: 0; height: 9vh; }

/* ── Watermark counter (large, background layer) ────────────── */
.wlum-bg-counter {
  position       : absolute;
  inset          : 0;
  display        : flex;
  align-items    : center;
  justify-content: center;
  z-index        : 1;
  pointer-events : none;
  user-select    : none;
}

.wlum-bg-counter-num {
  font-family       : 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  font-size         : min(38vw, 38vh);
  font-weight       : 300;
  line-height       : 1;
  letter-spacing    : -0.04em;
  color             : var(--wlum-white);
  opacity           : 0.035;
  font-variant-numeric: tabular-nums;
  will-change       : opacity;
}

/* ── Center stage ───────────────────────────────────────────── */
.wlum-stage {
  position       : relative;
  z-index        : 5;
  display        : flex;
  flex-direction : column;
  align-items    : center;
  gap            : 2.8rem;
  padding        : 12vh 2rem;
}

/* Logo wrap — GSAP animates clip-path from right to left */
.wlum-logo-wrap {
  display        : flex;
  align-items    : center;
  justify-content: center;
  clip-path      : inset(0 100% 0 0);
  will-change    : clip-path, transform, opacity;
}

.wlum-logo-text {
  display      : flex;
  gap          : 0;
  font-family  : 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  font-size    : clamp(3rem, 10vw, 7rem);
  font-weight  : 300;
  letter-spacing: 0.18em;
  color        : var(--wlum-white);
  white-space  : nowrap;
}
.wlum-logo-text .wlum-accent { color: var(--wlum-accent); }

.wlum-logo-img {
  max-width    : min(300px, 65vw);
  max-height   : 90px;
  width        : auto;
  height       : auto;
  object-fit   : contain;
  filter       : brightness(0) invert(1);
}

/* ── Progress row ───────────────────────────────────────────── */
.wlum-progress-row {
  display        : flex;
  align-items    : center;
  gap            : 1.4rem;
  width          : min(340px, 72vw);
}

.wlum-progress-track {
  position  : relative;
  flex      : 1;
  height    : 1px;
  background: rgba(255,255,255,0.1);
  overflow  : visible;
}

.wlum-progress-bar {
  position        : absolute;
  inset           : 0;
  background      : var(--wlum-accent);
  transform       : scaleX(0);
  transform-origin: left center;
  will-change     : transform;
}

/* Glowing dot that rides the tip of the bar */
.wlum-progress-glow {
  position     : absolute;
  top          : 50%;
  left         : 0%;
  transform    : translate(-50%, -50%);
  width        : 5px;
  height       : 5px;
  border-radius: 50%;
  background   : var(--wlum-accent);
  box-shadow   : 0 0 10px 3px var(--wlum-accent);
  opacity      : 0;
  will-change  : left, opacity;
  pointer-events: none;
}

/* Small readable counter */
.wlum-counter-small {
  display        : flex;
  align-items    : baseline;
  gap            : 0.1em;
  font-family    : 'Inter', system-ui, -apple-system, sans-serif;
  font-size      : 0.65rem;
  letter-spacing : 0.3em;
  color          : rgba(255,255,255,0.4);
  white-space    : nowrap;
  will-change    : opacity;
}
.wlum-counter-pct { color: var(--wlum-accent); font-size: 0.55em; }

/* ── Film-reel cue marks (flash near end like real 35mm) ──── */
.wlum-cue {
  position      : absolute;
  width         : 18px;
  height        : 18px;
  border-radius : 50%;
  border        : 1px solid rgba(255,255,255,0.25);
  z-index       : 9;
  opacity       : 0;
  pointer-events: none;
  will-change   : opacity;
}
.wlum-cue--tl { top: calc(9vh + 18px); left: 22px; }
.wlum-cue--tr { top: calc(9vh + 18px); right: 22px; }

/* ── Exit curtains (top closes down, bottom closes up) ──────── */
.wlum-curtain {
  position       : absolute;
  left           : 0;
  right          : 0;
  height         : 50%;
  background     : var(--wlum-bg);
  z-index        : 20;
  will-change    : transform;
}
.wlum-curtain--top {
  top             : 0;
  transform       : scaleY(0);
  transform-origin: top center;
}
.wlum-curtain--bottom {
  bottom          : 0;
  transform       : scaleY(0);
  transform-origin: bottom center;
}

/* ══════════════════════════════════════════════════════════════
   PAGE TRANSITION
   ══════════════════════════════════════════════════════════════ */

#wawww-lumiere-transition {
  position      : fixed;
  inset         : 0;
  z-index       : 99990;
  pointer-events: none;
  overflow      : hidden;
}

/* Single full-screen panel */
.wlum-tr-panel {
  position  : absolute;
  inset     : 0;
  background: var(--wlum-bg);
  will-change: transform, clip-path;
  /* Default initial state for curtain style (overridden by JS) */
  transform : translateY(100%);
}

/* Logo displayed at center while panel covers screen */
.wlum-tr-logo {
  position       : absolute;
  inset          : 0;
  display        : flex;
  align-items    : center;
  justify-content: center;
  z-index        : 2;
  opacity        : 0;
  pointer-events : none;
  will-change    : opacity, transform;
}

.wlum-tr-logo .wlum-logo-text {
  font-size      : clamp(2rem, 5.5vw, 4rem);
  letter-spacing : 0.22em;
}
.wlum-tr-logo .wlum-logo-img,
.wlum-tr-logo .wlum-logo-img--sm {
  max-height: 55px;
  max-width : min(220px, 50vw);
}

/* ── Grain on transition panel too ─────────────────────────── */
#wawww-lumiere-transition::after {
  content        : '';
  position       : absolute;
  inset          : -100px;
  z-index        : 3;
  pointer-events : none;
  opacity        : 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='wg2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23wg2)'/%3E%3C/svg%3E");
  background-size: 256px 256px;
  animation      : wlum-grain-shift 0.1s steps(1) infinite;
  mix-blend-mode : screen;
}