/* ===================================================
   PAGE LOADER — sketch → wireframe → final
   Phase 1: hand-drawn strokes draw in sequentially
            (stroke-dashoffset 100 → 0 with rough filter)
   Phase 2: clean wireframe (filled gray, thin stroke)
   Phase 3: fade out, real page reveals
   =================================================== */

.loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: #fdfdff;
  pointer-events: none;
  overflow: hidden;
  opacity: 1;
  /* Loader bg fades out AFTER all shapes have masked out individually */
  transition: opacity 0.5s ease 1.05s;
}

.loader.is-leaving { opacity: 0; }
.loader.is-done    { visibility: hidden; }

.loader__defs {
  position: absolute;
  width: 0; height: 0;
  pointer-events: none;
}

/* ---------- NAV (mirrors .nav) ---------- */
.loader__nav {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  padding: 24px 40px;
  box-sizing: border-box;
  z-index: 2;
}
.loader__nav-inner {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
.loader__nav-side {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
}

/* ---------- HERO (mirrors .hero) ---------- */
.loader__hero {
  min-height: 100vh;
  padding: 180px 40px 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  box-sizing: border-box;
}

.loader__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  gap: 0;
}

.loader__badges {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 40px;
  position: relative;
}

/* ---------- BASE SHAPE (now an SVG element) ---------- */
.loader__shape {
  display: block;
  filter: url(#loaderRoughen);
  overflow: visible;
  clip-path: inset(0 0 0 0);
  -webkit-clip-path: inset(0 0 0 0);
  transition:
    clip-path 0.7s cubic-bezier(0.83, 0, 0.17, 1),
    -webkit-clip-path 0.7s cubic-bezier(0.83, 0, 0.17, 1);
}

/* On exit: each shape's mask wipes top → bottom, staggered by position */
.loader.is-leaving .loader__shape {
  clip-path: inset(100% 0 0 0);
  -webkit-clip-path: inset(100% 0 0 0);
}
.loader.is-leaving .loader__shape--logo    { transition-delay: 0ms; }
.loader.is-leaving .loader__shape--link-1  { transition-delay: 80ms; }
.loader.is-leaving .loader__shape--link-2  { transition-delay: 130ms; }
.loader.is-leaving .loader__shape--cta     { transition-delay: 180ms; }
.loader.is-leaving .loader__shape--title-1 { transition-delay: 300ms; }
.loader.is-leaving .loader__shape--title-2 { transition-delay: 430ms; }
.loader.is-leaving .loader__shape--badge-1 { transition-delay: 560ms; }
.loader.is-leaving .loader__shape--badge-2 { transition-delay: 620ms; }

.loader__shape rect,
.loader__shape circle {
  fill: transparent;
  stroke: #ff4417;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition:
    stroke-dashoffset 0.95s cubic-bezier(0.65, 0, 0.35, 1),
    fill 1.1s ease,
    stroke 1.1s ease,
    stroke-width 1.1s ease;
}

.loader.is-ready .loader__shape rect,
.loader.is-ready .loader__shape circle {
  stroke-dashoffset: 0;
}

/* ---------- SHAPE SIZES ---------- */
/* Sizes mirror the real hero/nav elements */
.loader__shape--logo  { width: 100px; height: 18px; }
.loader__shape--link  { width: 50px;  height: 16px; }
.loader__shape--cta   { width: 124px; height: 40px; }

/* Title rects: each line at hero font-size 136px × 1.06 line-height ≈ 144px */
.loader__shape--title-1,
.loader__shape--title-2 { height: 144px; }
.loader__shape--title-1 { width: min(880px, 78vw); }
.loader__shape--title-2 { width: min(480px, 42vw); }

.loader__shape--badge      { height: 36px; }
.loader__shape--badge-1    { width: 220px; }
.loader__shape--badge-2    { width: 188px; }

/* ---------- SEQUENTIAL DRAW-IN (the "being drawn" feel) ---------- */
.loader.is-ready .loader__shape--logo    rect { transition-delay: 0ms; }
.loader.is-ready .loader__shape--link-1  rect { transition-delay: 220ms; }
.loader.is-ready .loader__shape--link-2  rect { transition-delay: 380ms; }
.loader.is-ready .loader__shape--cta     rect { transition-delay: 540ms; }
.loader.is-ready .loader__shape--title-1 rect { transition-delay: 780ms; }
.loader.is-ready .loader__shape--title-2 rect { transition-delay: 1040ms; }
.loader.is-ready .loader__shape--badge-1 rect { transition-delay: 1300ms; }
.loader.is-ready .loader__shape--badge-2 rect { transition-delay: 1500ms; }

/* ---------- HANDWRITTEN LABELS ---------- */
.loader__label {
  font-family: 'Kalam', cursive;
  font-size: 13px;
  color: #ff4417;
  position: absolute;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.55s ease;
  pointer-events: none;
}

/* labels appear roughly when their shape finishes drawing */
.loader.is-ready .loader__label--logo   { opacity: 1; transition-delay: 750ms; }
.loader.is-ready .loader__label--menu   { opacity: 1; transition-delay: 1300ms; }
.loader.is-ready .loader__label--title  { opacity: 1; transition-delay: 1700ms; }
.loader.is-ready .loader__label--badges { opacity: 1; transition-delay: 2200ms; }

.loader.is-wireframe .loader__label { opacity: 0; transition-delay: 0s; }

.loader__label--logo   { top: -22px; left: -4px;  transform: rotate(-6deg); }
.loader__label--menu   { top: -24px; right: -2px; transform: rotate(4deg);  }
.loader__label--title  { top: -28px; left: 50%; transform: translateX(-50%) rotate(-4deg); font-size: 15px; }
.loader__label--badges { bottom: -24px; left: 50%; transform: translateX(-50%) rotate(3deg); }

/* ---------- WIREFRAME STATE — clean geometry ---------- */
.loader.is-wireframe .loader__shape rect,
.loader.is-wireframe .loader__shape circle {
  transition-delay: 0ms !important;
  fill: #f2f3f4;
  stroke: rgba(0, 0, 0, 0.14);
  stroke-width: 1;
}

/* ---------- CAPTION (bottom progress hint) ---------- */
.loader__caption {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Kalam', cursive;
  font-size: 14px;
  color: #1a1a1a;
}

.loader__caption-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #ff4417;
  animation: loaderPulse 1.4s ease-in-out infinite;
  flex-shrink: 0;
}

.loader__caption-stack {
  position: relative;
  min-width: 200px;
  height: 1.2em;
  display: inline-block;
}
.loader__caption-text {
  position: absolute;
  left: 50%; top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.loader.is-ready    .loader__caption-text--sketch { opacity: 1; }
.loader.is-wireframe .loader__caption-text--sketch { opacity: 0; }
.loader.is-wireframe .loader__caption-text--wire   { opacity: 1; }
.loader.is-leaving   .loader__caption-text--wire   { opacity: 0; }
.loader.is-leaving   .loader__caption-text--final  { opacity: 1; }

@keyframes loaderPulse {
  0%, 100% { transform: scale(1);   opacity: 1;   }
  50%      { transform: scale(1.5); opacity: 0.5; }
}

/* ---------- TABLET / MOBILE — loader is desktop-only ---------- */
@media (max-width: 1024px) {
  .loader { display: none; }
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  .loader, .loader__shape rect, .loader__shape circle,
  .loader__label, .loader__caption-text {
    transition-duration: 0.2s !important;
    transition-delay: 0s !important;
  }
  .loader__caption-dot { animation: none; }
}