/**
 * IKS Conference 2026 — Direction-Aware Digital Book Page Transitions
 * Poornaprajna Institute of Management (PIM), Udupi
 */

/* Master Easing Curves */
:root {
  --ease-apple: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-book: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Smooth HTML Scrolling */
html {
  scroll-behavior: smooth;
}

/* Master Viewport Container with Zero Horizontal Overflow */
#app-view-container {
  position: relative;
  width: 100%;
  overflow-x: hidden;
  overflow-y: visible;
}

.view-panel {
  width: 100%;
  will-change: transform;
  backface-visibility: hidden;
}

/* ==========================================================================
   DIRECTION-AWARE DIGITAL BOOK PAGE TRANSITIONS
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FORWARD NAVIGATION (NEXT PAGE: RIGHT → LEFT)
   -------------------------------------------------------------------------- */

/* Current Page Exits: 0% → -100% (Right to Left) */
.page-exit-left {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 1;
  pointer-events: none;
  animation: pageExitLeft 450ms var(--ease-book) forwards !important;
  will-change: transform;
}

@keyframes pageExitLeft {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-100%, 0, 0);
  }
}

/* Next Page Enters: +100% → 0% (Right to Left) */
.page-enter-from-right {
  position: relative !important;
  width: 100% !important;
  z-index: 2;
  animation: pageEnterFromRight 450ms var(--ease-book) forwards !important;
  will-change: transform;
}

@keyframes pageEnterFromRight {
  0% {
    transform: translate3d(100%, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

/* --------------------------------------------------------------------------
   2. BACKWARD NAVIGATION (PREVIOUS PAGE: LEFT → RIGHT)
   -------------------------------------------------------------------------- */

/* Current Page Exits: 0% → +100% (Left to Right) */
.page-exit-right {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 1;
  pointer-events: none;
  animation: pageExitRight 450ms var(--ease-book) forwards !important;
  will-change: transform;
}

@keyframes pageExitRight {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(100%, 0, 0);
  }
}

/* Previous Page Enters: -100% → 0% (Left to Right) */
.page-enter-from-left {
  position: relative !important;
  width: 100% !important;
  z-index: 2;
  animation: pageEnterFromLeft 450ms var(--ease-book) forwards !important;
  will-change: transform;
}

@keyframes pageEnterFromLeft {
  0% {
    transform: translate3d(-100%, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

/* Direct Page Load Entrance */
.page-load-enter {
  animation: pageLoadEnterFromRight 450ms var(--ease-book) forwards;
  will-change: transform, opacity;
}

@keyframes pageLoadEnterFromRight {
  0% {
    transform: translate3d(60px, 0, 0);
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

/* Full SSR Page Transition Handlers */
body.page-transitioning {
  opacity: 0;
  transform: translate3d(-60px, 0, 0);
  transition: opacity 320ms ease, transform 360ms var(--ease-book);
}

body.page-loaded {
  animation: pageBodyReady 450ms var(--ease-book) forwards;
}

@keyframes pageBodyReady {
  0% {
    opacity: 0;
    transform: translate3d(40px, 0, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* Staggered Element Entrance Utility Classes */
.animate-fade-up {
  opacity: 0;
  transform: translateY(16px);
  animation: fadeUp 0.65s var(--ease-apple) forwards;
  will-change: opacity, transform;
}

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

.stagger-1 { animation-delay: 0.08s; }
.stagger-2 { animation-delay: 0.16s; }
.stagger-3 { animation-delay: 0.24s; }
.stagger-4 { animation-delay: 0.32s; }
.stagger-5 { animation-delay: 0.40s; }

/* Scroll-Based Intersection Observer Reveal */
.reveal {
  opacity: 0;
  transform: translateY(25px);
  transition: opacity 0.65s var(--ease-apple), transform 0.65s var(--ease-apple);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Accordion Smooth Expansion */
.full-track ol {
  animation: accordionSlide 0.35s var(--ease-apple) forwards;
  will-change: opacity, transform;
}

@keyframes accordionSlide {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Glass Utility Classes */
.glass {
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}

.glass-header {
  background: rgba(33, 7, 9, 0.88);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border-bottom: 1px solid rgba(201, 148, 56, 0.4);
}

.glass-card-light {
  background: rgba(255, 252, 243, 0.84);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  border: 1px solid rgba(213, 186, 124, 0.5);
  box-shadow: 0 10px 30px rgba(77, 23, 24, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.glass-card-dark {
  background: rgba(42, 9, 12, 0.9);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 2px solid var(--gold);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Hover Lift Effect */
.hover-lift {
  transition: transform 0.35s var(--ease-apple), box-shadow 0.35s var(--ease-apple);
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(77, 23, 24, 0.1);
}

/* Accessibility: Respect Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .page-enter-from-right,
  .page-exit-left,
  .page-enter-from-left,
  .page-exit-right,
  .page-load-enter,
  body.page-loaded,
  body.page-transitioning {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
    position: static !important;
  }
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  .animate-fade-up {
    opacity: 1 !important;
    transform: none !important;
  }
}