/* css/index-motion.css */

/* ==========================================================================
   1. INDEX PRELOADER SYSTEM
   ========================================================================== */
.preloader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--index-bg, #02162E);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), 
              visibility 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: auto;
}

.preloader-overlay.is-loaded {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.preloader-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  perspective: 600px;
}

/* Base Loader Shape Primitive */
.loader-rect {
  width: 22px;
  height: 38px;
  border-radius: 2px;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* 1. Mustard Rect (#AF7C1C) - Rotating */
.loader-rect-1 {
  background-color: #AF7C1C;
  animation: preloaderRotate 1.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

/* 2. Coral Red Rect (#C44753) - Jumping */
.loader-rect-2 {
  background-color: #C44753;
  animation: preloaderJump 0.9s cubic-bezier(0.33, 1, 0.68, 1) infinite alternate;
}

/* 3. Teal Rect (#0A5960) - Scaling / Pulsing */
.loader-rect-3 {
  background-color: #0A5960;
  animation: preloaderScale 1.1s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}

/* 4. Maroon Rect (#8B0625) - Vertical Stretch */
.loader-rect-4 {
  background-color: #8B0625;
  animation: preloaderStretch 1.0s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite alternate;
}

/* 5. Slate Purple Rect (#4C4D71) - 3D Y-Flip */
.loader-rect-5 {
  background-color: #4C4D71;
  animation: preloaderFlip 1.5s ease-in-out infinite;
}

@keyframes preloaderRotate {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes preloaderJump {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-24px); }
}

@keyframes preloaderScale {
  0%   { transform: scale(0.45); opacity: 0.5; }
  100% { transform: scale(1.25); opacity: 1; }
}

@keyframes preloaderStretch {
  0%   { transform: scaleY(0.4); }
  100% { transform: scaleY(1.35); }
}

@keyframes preloaderFlip {
  0%   { transform: rotateY(0deg); }
  50%  { transform: rotateY(180deg); }
  100% { transform: rotateY(360deg); }
}

/* ==========================================================================
   2. INDEX PAGE CANVAS & HERO STACKING
   ========================================================================== */
.index-page {
  position: relative;
  overflow: hidden;
  background-color: var(--index-bg, #02162E);
}

.rectangles-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.main-content-area {
  position: relative;
  z-index: 2;
}

/* Base Motion Primitive */
.motion-rect {
  position: absolute;
  box-sizing: border-box;
  will-change: transform, opacity, filter, clip-path;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  opacity: 0; /* Kept 0 by default; revealed by timeline JS */
  border-radius: 2px;
}

.motion-rect::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(0, 0, 0, 0.08) 100%);
  pointer-events: none;
  border-radius: inherit;
}

/* ==========================================================================
   3. DESKTOP RESPONSIVE POSITIONS (1440x900 BASE)
   ========================================================================== */
@media (min-width: 855px) {
  .rect-1 {
    top: 20vh;
    left: 0;
    width: 9.72vw;
    height: 3.33vh;
    background-color: #401B1B;
    z-index: 2;
  }

  .rect-2 {
    top: 21.33vh;
    left: 33.19vw;
    width: 22px;
    height: 22px;
    background-color: #C44753;
    z-index: 5;
  }

  .rect-3 {
    top: 16.67vh;
    right: 21.5vw;
    width: 23.18vw;
    height: 18.89vh;
    background-color: #AF7C1C;
    z-index: 3;
  }

  .rect-4 {
    top: calc(5vh + 24px + 15px);
    right: calc(21.57vw + 245px);
    width: 14px;
    height: 14px;
    background-color: #527A49;
    z-index: 5;
  }

  .rect-5 {
    top: 50%;
    right: 18.75vw;
    width: 2.99vw;
    height: 9.67vh;
    background-color: #0A5960;
    z-index: 3;
  }

  .rect-6 {
    bottom: 12.78vh;
    right: 21.88vw;
    width: 12.85vw;
    height: 9.44vh;
    background-color: #8B0625;
    z-index: 4;
  }

  .rect-7 {
    bottom: 0;
    left: calc(50% + 1.39vw);
    width: 9.51vw;
    height: 5.56vh;
    background-color: #C44753;
    z-index: 3;
  }

  .rect-8 {
    bottom: 5.56vh;
    left: calc(50% - 13.89vw);
    width: 22px;
    height: 22px;
    background-color: #0A5960;
    z-index: 5;
  }

  .rect-9 {
    bottom: 20vh;
    left: 20.83vw;
    width: 13px;
    height: 13px;
    background-color: #D15D07;
    z-index: 5;
  }

  .rect-10 {
    top: 39.5%;
    left: calc(12.5vw + 3.2ch);
    width: 14.93vw;
    height: 14.5vh;
    background-color: #4C4D71;
    z-index: 1;
  }
}

.motion-grain-overlay {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.025;
  mix-blend-mode: overlay;
  transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

.motion-grain-overlay.is-active-movement {
  opacity: 0.05;
}

/* ==========================================================================
   MOBILE RESPONSIVE COMPOSITION (@media max-width: 854px)
   Calculated strictly from 402px x 990px Mobile Blueprint
   ========================================================================== */
@media (max-width: 854px) {
  
  /* Rect 1: Dark Brown Bar (Top-Left Edge) */
  .rect-1 {
    top: 12.63vh;
    left: 0;
    width: 14.93vw;
    height: 3.03vh;
    background-color: #401B1B;
    z-index: 2;
  }

  /* Rect 2: Small Green Square (Top Center-Right) */
  .rect-2 {
    top: 12.63vh;
    left: calc(50% + 4.98vw);
    width: 10px;
    height: 10px;
    background-color: #527A49;
    z-index: 5;
  }

  /* Rect 3: Mustard Heavy Block (Upper-Right Area) */
  .rect-3 {
    top: 19.70vh;
    right: 16.17vw;
    width: 46.77vw;
    height: 14.14vh;
    background-color: #AF7C1C;
    z-index: 3;
  }

  /* Rect 4: Teal Vertical Block (Lower Mid-Right) */
  .rect-4 {
    top: calc(50% + 13.13vh);
    right: 6.22vw;
    width: 11.19vw;
    height: 9.09vh;
    background-color: #0A5960;
    z-index: 3;
  }

  /* Rect 5: Maroon Horizontal Block (Lower Right) */
  .rect-5 {
    bottom: 17.17vh;
    right: 7.46vw;
    width: 31.09vw;
    height: 6.57vh;
    background-color: #8B0625;
    z-index: 4;
  }

  /* Rect 6: Red Block (Bottom Center-Left Baseline) */
  .rect-6 {
    right: 50%;
    bottom: calc(60px + 4.55vh);
    width: 13.68vw;
    height: 2.53vh;
    background-color: #C44753;
    z-index: 3;
  }

  /* Rect 7: Teal Square (Lower Left, Aligned to Top of Rect 6) */
  .rect-7 {
    left: 6.22vw;
    bottom: calc(60px + 4.55vh + 2.53vh);
    width: 24px;
    height: 24px;
    background-color: #0A5960;
    z-index: 5;
  }

  /* Rect 8: Orange Square (Lower Left, Mid-Canvas) */
  .rect-8 {
    top: calc(50% + 18.18vh);
    left: 6.22vw;
    width: 15px;
    height: 15px;
    background-color: #D15D07;
    z-index: 5;
  }

  /* Rect 9: Slate Purple Block (Left Edge, Centered Behind Headline) */
  .rect-9 {
    top:  calc(50% - 6.57vh);
    left: 0;
    width: 31.09vw;
    height: 6.57vh;
    background-color: #4C4D71;
    z-index: 1;
  }

  /* Rect 10: Hidden on mobile screen composition */
  .rect-10 {
    display: none;
  }
}