/* ================================================================
   wawww Preloader & Page Transition  v2.0
   ================================================================ */

:root {
  --wawww-accent : #c9a96e;
  --wawww-bg     : #080808;
  --wawww-white  : #f0ede8;
  --wawww-dim    : rgba(240,237,232,0.18);
}

/* ── Content entrance (Bricks / Elementor compatible) ── */
[data-wawww-enter] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1),
              transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
[data-wawww-enter].wawww-entered       { opacity:1; transform:translateY(0); }
[data-wawww-enter]:nth-child(2)        { transition-delay:.08s; }
[data-wawww-enter]:nth-child(3)        { transition-delay:.16s; }
[data-wawww-enter]:nth-child(4)        { transition-delay:.24s; }
[data-wawww-enter]:nth-child(5)        { transition-delay:.32s; }

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

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

/* ── Ambient glow behind stage ── */
#wawww-preloader::before {
  content   : '';
  position  : absolute;
  width     : 70vw;
  height    : 70vh;
  background: radial-gradient(ellipse at center,
                rgba(201,169,110,.09) 0%,
                transparent 70%);
  pointer-events: none;
}

/* ── Stage: logo + rule ── */
.wawww-pre-stage {
  display       : flex;
  flex-direction: column;
  align-items   : center;
  position      : relative;
  z-index       : 1;
}

/* ── Logo row ── */
.wawww-pre-logo-row {
  display    : flex;
  align-items: flex-end;
}

/* Per-letter overflow mask — clips the translateY animation */
.wawww-char-mask {
  display : inline-flex;
  overflow: hidden;
  /* padding adds optical breathing room without breaking the clip */
  padding : 0.08em 0.04em 0.04em;
}

/* The letter: starts below mask, JS slides it to y:0 */
.wawww-char {
  display      : inline-block;
  font-family  : 'Cormorant Garamond', Georgia, serif;
  font-size    : clamp(3.8rem, 10vw, 9rem);
  font-weight  : 300;
  line-height  : 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color        : var(--wawww-white);
  transform    : translateY(115%);
  will-change  : transform;
}

/* Middle character highlighted by JS */
.wawww-char.is-accent { color: var(--wawww-accent); }

/* ── Rule: full-width glowing line ── */
.wawww-pre-rule {
  width     : 100vw;
  height    : 1px;
  position  : relative;
  margin-top: 0.6rem;
  background: rgba(255,255,255,0.04);
}

.wawww-pre-rule-line {
  position  : absolute;
  inset     : 0;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--wawww-accent) 20%,
    var(--wawww-accent) 80%,
    transparent 100%);
  box-shadow : 0 0 14px 3px rgba(201,169,110,.35),
               0 0 40px 6px rgba(201,169,110,.12);
  transform  : scaleX(0);
  transform-origin: center;
  will-change: transform;
}

/* ── Counter: large serif, bottom-right ── */
.wawww-pre-counter {
  position : absolute;
  bottom   : clamp(2rem, 5vh, 3.5rem);
  right    : clamp(2rem, 5vw, 4rem);
  display  : flex;
  align-items: baseline;
  gap      : 0.05em;
  opacity  : 0;
  transform: translateY(10px);
  will-change: opacity, transform;
}

.wawww-pre-number {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size  : clamp(4rem, 10vw, 8rem);
  font-weight: 200;
  line-height: 1;
  color      : var(--wawww-white);
  font-variant-numeric: tabular-nums;
  will-change: contents;
}

.wawww-pre-sym {
  font-family: 'Inter', system-ui, sans-serif;
  font-size  : clamp(0.8rem, 1.6vw, 1.1rem);
  font-weight: 300;
  color      : var(--wawww-accent);
  letter-spacing: 0.05em;
  vertical-align: super;
}

/* ── Progress: 2 px hairline at very bottom ── */
.wawww-pre-progress {
  position: absolute;
  bottom  : 0;
  left    : 0;
  right   : 0;
  height  : 2px;
  background: rgba(255,255,255,0.05);
}

.wawww-pre-bar {
  height    : 100%;
  width     : 0%;
  background: var(--wawww-accent);
  will-change: width;
}

/* ══════════════════════════════════════════════════════
   PAGE TRANSITION — vertical scaleY strips in a row
══════════════════════════════════════════════════════ */

#wawww-transition {
  position: fixed;
  inset   : 0;
  z-index : 99990;
  pointer-events: none;
  display : flex;       /* strips side-by-side */
}

/* Each strip occupies equal width; grows vertically via scaleY */
.wawww-pt-strip {
  flex      : 1;
  height    : 100%;
  background: var(--wawww-bg);
  transform : scaleY(0);
  transform-origin: bottom center;
  will-change: transform;
}

/* Logo shown while strips cover the screen */
.wawww-pt-logo {
  position       : absolute;
  inset          : 0;
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-family    : 'Cormorant Garamond', Georgia, serif;
  font-size      : clamp(2rem, 5vw, 4rem);
  font-weight    : 300;
  letter-spacing : 0.4em;
  text-transform : uppercase;
  color          : var(--wawww-white);
  opacity        : 0;
  will-change    : opacity;
  pointer-events : none;
  user-select    : none;
}