/* ==========================================================================
   assets/css/page-transition.css
   MAP ADVERTISING — PAGE TRANSITIONS & MICRO-ANIMATIONS ENGINE
   Corporate, fast, 60fps GPU-accelerated motion graphics with MAP branding.
   Speed First: Transitions strictly 180ms – 380ms maximum.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. GLOBAL MOTION VARIABLES & EASINGS
   -------------------------------------------------------------------------- */
:root {
  --map-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --map-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --map-flow-indigo: #432cf3;
  --map-flow-mint: #2ad590;
  --map-flow-navy: #0c1523;
}

/* --------------------------------------------------------------------------
   2. TIER 1: FULL MAP LOGO TRANSITION (Initial Load, Login, Major Modules)
   Duration: 280ms - 380ms MAX. No rotation, no bounce, no 3D spin.
   -------------------------------------------------------------------------- */
#map-logo-transition {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
  background: radial-gradient(circle at center, #14223a 0%, #0c1523 70%, #050a12 100%);
  contain: strict;
  transform: translateZ(0);
  will-change: opacity, transform;
  transition: opacity 0.22s var(--map-ease-out), visibility 0.22s var(--map-ease-out);
}

/* Active State (Entry) */
#map-logo-transition.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Exiting State */
#map-logo-transition.exiting {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s var(--map-ease-in-out), visibility 0.2s var(--map-ease-in-out);
}

/* Focal Stage Wrapper */
.map-logo-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  transform: scale(0.96);
  opacity: 0;
  transition: transform 0.26s var(--map-ease-out), opacity 0.26s var(--map-ease-out);
  will-change: transform, opacity;
}

#map-logo-transition.active .map-logo-stage {
  transform: scale(1);
  opacity: 1;
}

#map-logo-transition.exiting .map-logo-stage {
  transform: scale(0.98);
  opacity: 0;
}

/* Subtle Aura Glow */
.map-logo-glow {
  position: absolute;
  width: 360px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(67, 44, 243, 0.3) 0%, rgba(42, 213, 144, 0.15) 50%, transparent 80%);
  filter: blur(30px);
  pointer-events: none;
  transform: translateZ(0);
}

/* Glass Mount Frame with Advertising Light Sweep */
.map-logo-mount {
  position: relative;
  padding: 22px 36px;
  border-radius: 20px;
  background: rgba(12, 21, 35, 0.85);
  border: 1px solid rgba(67, 44, 243, 0.35);
  box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.8),
              0 0 25px rgba(67, 44, 243, 0.2),
              inset 0 1px 0 rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* The Official MAP Logo Asset */
.map-brand-img {
  width: 100%;
  max-width: 240px;
  height: auto;
  max-height: 70px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.6));
  position: relative;
  z-index: 2;
}

/* Advertising Motion Light Sweep (Passes across logo swiftly) */
.map-light-sweep {
  position: absolute;
  top: -50%;
  bottom: -50%;
  left: -80%;
  width: 60%;
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(255, 255, 255, 0.65) 45%,
    rgba(42, 213, 144, 0.75) 55%,
    transparent 80%
  );
  transform: translateX(-100%) skewX(-25deg);
  pointer-events: none;
  z-index: 3;
}

#map-logo-transition.active .map-light-sweep {
  animation: mapLightSweep 0.38s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes mapLightSweep {
  0%   { transform: translateX(-100%) skewX(-25deg); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: translateX(360%) skewX(-25deg); opacity: 0; }
}

/* Sleek Monospace Tagline */
.map-logo-meta {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'SF Mono', Consolas, Monaco, monospace;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--map-flow-mint);
  text-transform: uppercase;
  font-weight: 700;
  opacity: 0.9;
}

/* --------------------------------------------------------------------------
   3. TIER 2: FAST "CAMPAIGN FLOW" TOP PROGRESS BAR
   Used for regular internal clicks, tabs, pagination. 180ms - 250ms MAX.
   -------------------------------------------------------------------------- */
#map-campaign-flow {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 999998;
  pointer-events: none;
  opacity: 0;
  overflow: hidden;
  transition: opacity 0.15s ease;
}

#map-campaign-flow.active {
  opacity: 1;
}

.flow-stream-line {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #432cf3, #2ad590);
  box-shadow: 0 0 10px rgba(42, 213, 144, 0.8), 0 0 4px #432cf3;
  border-radius: 0 3px 3px 0;
  transition: width 0.22s var(--map-ease-out);
  will-change: width;
}

#map-campaign-flow.active .flow-stream-line {
  width: 100%;
}

/* --------------------------------------------------------------------------
   4. PAGE CONTENT ENTRANCE & EXIT ANIMATION
   Old Page: opacity 1 -> 0
   New Page: opacity 0 -> 1, translateY 8px -> 0px (180ms - 240ms ease-out)
   -------------------------------------------------------------------------- */
.page-content,
.main-area {
  animation: mapPageIn 0.22s var(--map-ease-out) forwards;
  will-change: opacity, transform;
}

@keyframes mapPageIn {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Page Exit Trigger Class */
body.page-exiting .page-content,
body.page-exiting .main-area {
  opacity: 0 !important;
  transform: translateY(-4px) !important;
  transition: opacity 0.12s var(--map-ease-in-out), transform 0.12s var(--map-ease-in-out) !important;
}

/* --------------------------------------------------------------------------
   5. BUTTONS MICRO-FEEDBACK
   Hover: 2-3px subtle movement
   Click: small scale feedback (0.98)
   -------------------------------------------------------------------------- */
.btn {
  transition: transform 0.14s var(--map-ease-out), 
              box-shadow 0.14s ease, 
              background-color 0.14s ease,
              border-color 0.14s ease !important;
  transform: translateZ(0);
  will-change: transform;
}

.btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(67, 44, 243, 0.25);
}

.btn:active:not(:disabled) {
  transform: scale(0.98) translateY(0);
}

/* Small Loading Indicator for Buttons */
.btn-loading {
  position: relative;
  pointer-events: none;
  opacity: 0.85;
}

.btn-loading::after {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  vertical-align: middle;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: btnSpin 0.6s linear infinite;
}

@keyframes btnSpin {
  to { transform: rotate(360deg); }
}

/* --------------------------------------------------------------------------
   6. SIDEBAR MENU STAGGERED REVEAL
   Logo remains fixed. Menu items stagger in (20ms increments).
   -------------------------------------------------------------------------- */
.sidebar .nav-item {
  animation: navItemStagger 0.25s var(--map-ease-out) both;
  will-change: transform, opacity;
}

.sidebar .nav-item:nth-child(1)  { animation-delay: 15ms; }
.sidebar .nav-item:nth-child(2)  { animation-delay: 30ms; }
.sidebar .nav-item:nth-child(3)  { animation-delay: 45ms; }
.sidebar .nav-item:nth-child(4)  { animation-delay: 60ms; }
.sidebar .nav-item:nth-child(5)  { animation-delay: 75ms; }
.sidebar .nav-item:nth-child(6)  { animation-delay: 90ms; }
.sidebar .nav-item:nth-child(7)  { animation-delay: 105ms; }
.sidebar .nav-item:nth-child(8)  { animation-delay: 120ms; }
.sidebar .nav-item:nth-child(9)  { animation-delay: 135ms; }
.sidebar .nav-item:nth-child(10) { animation-delay: 150ms; }
.sidebar .nav-item:nth-child(11) { animation-delay: 165ms; }
.sidebar .nav-item:nth-child(12) { animation-delay: 180ms; }

@keyframes navItemStagger {
  0% {
    opacity: 0;
    transform: translateX(8px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* --------------------------------------------------------------------------
   7. CARDS RAPID STAGGER
   Card 1 -> 0ms, Card 2 -> 20ms, Card 3 -> 40ms, Card 4 -> 60ms
   Total stagger <= 250ms.
   -------------------------------------------------------------------------- */
.card {
  animation: cardStaggerIn 0.26s var(--map-ease-out) both;
  will-change: transform, opacity;
}

.card:nth-child(1) { animation-delay: 0ms; }
.card:nth-child(2) { animation-delay: 20ms; }
.card:nth-child(3) { animation-delay: 40ms; }
.card:nth-child(4) { animation-delay: 60ms; }
.card:nth-child(5) { animation-delay: 80ms; }
.card:nth-child(6) { animation-delay: 100ms; }

@keyframes cardStaggerIn {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --------------------------------------------------------------------------
   8. MODULE-SPECIFIC MICRO-ACCENTS
   Micro-interactions, not intro animations.
   -------------------------------------------------------------------------- */
/* Projects: Timeline flow line accent */
body[data-module="projects"] .card-body {
  position: relative;
}
body[data-module="projects"] .card-body::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 0;
  background: var(--map-flow-indigo);
  animation: flowLineGrow 0.3s var(--map-ease-out) forwards;
}

@keyframes flowLineGrow {
  to { height: 100%; }
}

/* Creative: Subtle drawing/reveal glow */
body[data-module="creative"] .card {
  border-top-color: rgba(67, 44, 243, 0.6) !important;
  transition: border-color 0.2s ease;
}

/* Production: Progress / assembly pulse */
body[data-module="production"] .table tr:hover td {
  background: rgba(67, 44, 243, 0.03);
}

/* Events: Stage / spotlight sheen */
body[data-module="events"] .card:hover {
  box-shadow: 0 8px 24px -6px rgba(42, 213, 144, 0.15);
}

/* Reports: Chart reveal */
body[data-module="reports"] .table {
  animation: reportsFade 0.25s var(--map-ease-out) forwards;
}
@keyframes reportsFade {
  from { opacity: 0.3; }
  to   { opacity: 1; }
}

/* --------------------------------------------------------------------------
   9. MOBILE OPTIMIZATIONS (< 768px)
   Ultra-fast: 150ms - 200ms. No full-screen takeover on normal links.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .map-brand-img {
    max-width: 190px;
    max-height: 55px;
  }
  .map-logo-mount {
    padding: 16px 24px;
    border-radius: 16px;
  }
  .map-logo-glow {
    width: 240px;
    height: 120px;
  }
  .page-content,
  .main-area {
    animation-duration: 0.18s;
  }
  .card {
    animation-duration: 0.2s;
  }
}

/* --------------------------------------------------------------------------
   10. ACCESSIBILITY & PREFERS-REDUCED-MOTION
   Strictly disable heavy transforms, scales, and light sweeps.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .map-light-sweep {
    display: none !important;
  }
  .map-logo-stage,
  .btn,
  .card,
  .page-content,
  .sidebar .nav-item {
    transform: none !important;
  }
  #map-logo-transition {
    transition: opacity 0.1s ease !important;
  }
}