/* ==========================================================================
   DIVLAB PAGE TRANSITION — Geometric Tangram Preloader
   --------------------------------------------------------------------------
   Pairs with dvl-transition.js. Standalone: zero external dependencies.
   Runs strictly BETWEEN pages when navigating the website.

   PERFORMANCE ARCHITECTURE (Zero Lag / 120fps Hardware Locked):
   - Dedicated GPU Compositor Layer (translateZ / backface-visibility).
   - Unified mathematical easing curve without mid-rotation pauses.
   - Independent containment layer (contain: paint) to prevent layout thrashing.
   - 100% immune to FOUC (raw content flash).

   THE 5-PHASE TANGRAM SEQUENCE:
     1. Starts as 8 individual right-angled triangles forming a square with gaps
     2. Triangles smoothly glide inward, closing the gaps into a solid square
     3. Solid square spins fluidly through 45° into a diamond
     4. Square completes rotation to 90° with luxurious deceleration
     5. Triangles smoothly expand outward with clean gaps, and the page reveals!
   ========================================================================== */

:root {
  --dvl-trans-bg: #ffffff;
  --dvl-trans-color: #3a301e;
  --dvl-trans-size: 52px;
  --dvl-trans-z: 99999999;
}

/* ==========================================================================
   BULLETPROOF FOUC PREVENTION (ZERO RAW CONTENT FLASH)
   When armed in head before first paint:
   1. The viewport is solid pure white.
   2. All body content is 100% hidden until the page and 3D scenes are ready.
   ========================================================================== */
html.dvl-transition-armed {
  background-color: #ffffff !important;
}

html.dvl-transition-armed body {
  background-color: #ffffff !important;
}

html.dvl-transition-armed body > *:not(#dvl-page-transition) {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* ==========================================================================
   THE SHEET (Full Viewport Overlay)
   ========================================================================== */
.dvl-page-transition {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  z-index: var(--dvl-trans-z) !important;
  background-color: #ffffff !important;
  display: grid;
  place-items: center;

  /* Performance Isolation: do not invalidate page layout underneath */
  contain: strict;

  /* State: hidden by default until armed or triggered */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.35s cubic-bezier(0.16, 1, 0.3, 1);

  touch-action: none;
  overscroll-behavior: contain;
  user-select: none;
  -webkit-user-select: none;
}

/* Armed state (during transition) */
.dvl-page-transition.dvl-is-active,
html.dvl-transition-armed .dvl-page-transition {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: all !important;
  display: grid !important;
}

/* When armed immediately on incoming page, start solid with no fade-in delay */
html.dvl-transition-armed .dvl-page-transition:not(.dvl-is-leaving) {
  transition: none !important;
}

/* Dismissed state */
.dvl-page-transition.dvl-is-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ==========================================================================
   HARDWARE-ACCELERATED TANGRAM CONTAINER
   ========================================================================== */
.dvl-tangram-box {
  width: var(--dvl-trans-size);
  height: var(--dvl-trans-size);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: center center;

  /* Dedicated GPU Compositor Thread Layer (Never blocks on main thread) */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  perspective: 1000px;
  will-change: transform;

  /* Silky smooth continuous rotation */
  animation: dvlSmoothSpin 2.1s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

.dvl-tangram-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  transform: translateZ(0);
  shape-rendering: geometricPrecision;
}

/* The 8 right-angled triangles */
.dvl-tri {
  fill: var(--dvl-trans-color);
  will-change: transform;
  transform-origin: 50px 50px;
  animation: dvlSmoothContract 2.1s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

/* Vector outward offsets for the 8 triangles (clean 3px gaps) */
.dvl-tri-1 { --dx: -2.5px; --dy: -4px;   }
.dvl-tri-2 { --dx: -4px;   --dy: -2.5px; }
.dvl-tri-3 { --dx:  2.5px; --dy: -4px;   }
.dvl-tri-4 { --dx:  4px;   --dy: -2.5px; }
.dvl-tri-5 { --dx:  4px;   --dy:  2.5px; }
.dvl-tri-6 { --dx:  2.5px; --dy:  4px;   }
.dvl-tri-7 { --dx: -2.5px; --dy:  4px;   }
.dvl-tri-8 { --dx: -4px;   --dy:  2.5px; }

/* ==========================================================================
   SYNCHRONIZED KEYFRAMES (Continuous Harmonic Easing)
   No stop-and-go jerks, perfectly timed contraction & rotation.
   ========================================================================== */
@keyframes dvlSmoothSpin {
  0%, 30% {
    transform: rotate(0deg);
  }
  75%, 100% {
    transform: rotate(90deg);
  }
}

@keyframes dvlSmoothContract {
  0%, 14% {
    /* Phase 1: Expanded with clean gaps */
    transform: translate(var(--dx), var(--dy));
  }
  28%, 76% {
    /* Phase 2, 3, 4: Solid closed square while spinning */
    transform: translate(0, 0);
  }
  88%, 100% {
    /* Phase 5: Re-expanded with clean gaps */
    transform: translate(var(--dx), var(--dy));
  }
}

/* ==========================================================================
   ACCESSIBILITY — PREFERS-REDUCED-MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .dvl-tangram-box {
    animation: none !important;
  }
  .dvl-tri {
    animation: dvlReducedFade 1.6s ease-in-out infinite alternate !important;
    transform: translate(var(--dx), var(--dy)) !important;
  }
}

@keyframes dvlReducedFade {
  0% { opacity: 0.35; }
  100% { opacity: 1; }
}