/* ══════════════════════════════════════════════════════════════
   EatCrayons – Page Transitions (Logo Expand)
   © Rise Marketing Co., LLC – EatCrayons. 2026.
   ══════════════════════════════════════════════════════════════ */

/* ── TRANSITION OVERLAY ── */
.page-transition {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  /* No background — the dark fill comes from the logo div with cutout */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}

/* ── LOGO ELEMENT ──
   Dark fill with the logo shape punched out (transparent).
   Sized large so it covers the viewport when fully scaled.
   We scale DOWN from here (0.02) then back UP to 1. */
.page-transition-logo {
  width: 200vmax;
  height: 200vmax;
  opacity: 0;
  will-change: transform, opacity;
  transform: scale(0.02);
  background: var(--dark, #121217);

  /* Two mask layers composited to create the cutout:
     Layer 1 (top): logo SVG — white where the logo shape is
     Layer 2 (bottom): solid white covering everything
     XOR/exclude: where both are white (logo area) → transparent */
  --logo-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 601.92 618' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M477.86,0H0v618h601.92V0h-124.06ZM477.86,493.94H124.06v-124.06h229.74v-124.06H124.06v-121.76h353.8v369.88Z'/%3E%3C/svg%3E");
  -webkit-mask-image: var(--logo-mask), linear-gradient(#fff, #fff);
  mask-image: var(--logo-mask), linear-gradient(#fff, #fff);
  -webkit-mask-size: 50% auto, 100% 100%;
  mask-size: 50% auto, 100% 100%;
  -webkit-mask-position: center, center;
  mask-position: center, center;
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* Hide the DOM SVG — the CSS mask handles the visual */
.page-transition-logo svg {
  display: none;
}

/* ═══════════════════════════════════
   PHASE 1 — EXIT (current page)
   Overlay fades to dark, logo scales up
   ═══════════════════════════════════ */
.page-transition.is-exiting {
  pointer-events: all;
  animation: overlayFadeIn 580ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.page-transition.is-exiting .page-transition-logo {
  animation: logoGrow 580ms cubic-bezier(0.4, 0, 0.15, 1) forwards;
}

@keyframes overlayFadeIn {
  0%   { opacity: 0; }
  35%  { opacity: 1; }
  100% { opacity: 1; }
}

@keyframes logoGrow {
  0%   { opacity: 0; transform: scale(0.015); }
  15%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1); }
}

/* ═══════════════════════════════════
   PHASE 2 — COVERED (between pages)
   Solid dark overlay, logo at max scale
   ═══════════════════════════════════ */
.page-transition.is-covered {
  opacity: 1;
  pointer-events: all;
}

.page-transition.is-covered .page-transition-logo {
  opacity: 1;
  transform: scale(1);
}

/* ═══════════════════════════════════
   PHASE 3 — ENTER (new page)
   Logo shrinks back, overlay fades out
   ═══════════════════════════════════ */
.page-transition.is-entering {
  pointer-events: none;
  animation: overlayFadeOut 560ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.page-transition.is-entering .page-transition-logo {
  animation: logoShrink 520ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes overlayFadeOut {
  0%   { opacity: 1; }
  65%  { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes logoShrink {
  0%   { opacity: 1; transform: scale(1); }
  60%  { opacity: 1; }
  100% { opacity: 0; transform: scale(0.02); }
}

/* ── PAGE CONTENT ENTER ── */
.page-content-enter {
  animation: pageReveal 460ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: 200ms;
}

@keyframes pageReveal {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  .page-transition.is-exiting,
  .page-transition.is-entering,
  .page-transition.is-exiting .page-transition-logo,
  .page-transition.is-entering .page-transition-logo,
  .page-content-enter {
    animation-duration: 0.01ms !important;
  }
}