/* ==========================================================================
   IT SMART MEDIA — DUAL-SURFACE 3D PAGE TRANSITION ENGINE
   Both pages are visible simultaneously in real 3D space:
   1. 3D Page Flip (Book Page Turn revealing new target page underneath)
   2. 3D Page Roll (Cylindrical Paper Roll revealing target page)
   3. 3D Page Curl (Origami Diagonal Corner Curl revealing target page)
   4. 3D Cube Orbit (Dual-Face 3D Spatial Cube rotating from Page A to Page B)
   5. 3D Shutter Doors (Dual Perspective Doors opening to reveal target page)
   ========================================================================== */

/* Main 3D Transition Stage: Fixed viewport overlay for simultaneous dual-page 3D rendering */
.trans-3d-stage {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99990;
  overflow: hidden;
  perspective: 2000px;
  perspective-origin: 50% 50%;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  background: #0E1017;
  transition: opacity 0.2s ease, visibility 0.2s;
}

.trans-3d-stage.is-active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

/* Individual Page Sheets (Over & Under) */
.trans-sheet {
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #FFFFFF;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform, opacity, filter, box-shadow;
}

/* Under Sheet (Target Page waiting directly behind) */
.trans-sheet--under {
  z-index: 10;
  transform: translateZ(0) scale(1);
}

/* Target page ambient shadow that lifts as the top page turns */
.trans-sheet--under::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  pointer-events: none;
  z-index: 99;
  opacity: 1;
  transition: opacity 0.85s cubic-bezier(0.25, 1, 0.35, 1);
}

.trans-3d-stage.is-revealing .trans-sheet--under::after {
  opacity: 0;
}

/* Over Sheet (Current Page that flips/rolls/curls away) */
.trans-sheet--over {
  z-index: 20;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.35);
}

/* Content Container inside Sheet */
.trans-sheet__inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100vh;
  pointer-events: none;
  background: #FFFFFF;
}

/* ==========================================================================
   STYLE 1: 3D PAGE FLIP (REALISTIC BOOK TURN)
   Current page flips 180deg on its left spine, revealing the new page behind
   ========================================================================== */
.trans-3d-stage--page-flip .trans-sheet--over {
  transform-origin: 0% 50%; /* Left book spine */
  animation: transBookPageFlip 0.92s cubic-bezier(0.25, 0.9, 0.35, 1) forwards;
}

.trans-3d-stage--page-flip .trans-sheet--under {
  animation: transUnderLift 0.92s cubic-bezier(0.25, 1, 0.35, 1) forwards;
}

@keyframes transBookPageFlip {
  0% {
    transform: rotateY(0deg);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    filter: brightness(1);
  }
  40% {
    transform: rotateY(-65deg) translateZ(60px);
    box-shadow: -25px 0 60px rgba(0, 0, 0, 0.45);
    filter: brightness(0.92);
  }
  100% {
    transform: rotateY(-135deg) translateZ(120px) scale(0.92);
    box-shadow: -50px 0 90px rgba(0, 0, 0, 0.65);
    opacity: 0;
    filter: brightness(0.75);
  }
}

@keyframes transUnderLift {
  0% {
    transform: scale(0.94) translateZ(-80px);
    filter: brightness(0.85);
  }
  100% {
    transform: scale(1) translateZ(0);
    filter: brightness(1);
  }
}

/* ==========================================================================
   STYLE 2: 3D PAGE ROLL (CYLINDRICAL PARCHMENT ROLL)
   Current page rolls up smoothly towards top, revealing target page underneath
   ========================================================================== */
.trans-3d-stage--page-roll .trans-sheet--over {
  transform-origin: 50% 0%; /* Top edge */
  animation: transCylinderRoll 0.9s cubic-bezier(0.25, 0.85, 0.3, 1) forwards;
}

.trans-3d-stage--page-roll .trans-sheet--under {
  animation: transUnderLift 0.9s cubic-bezier(0.25, 1, 0.35, 1) forwards;
}

@keyframes transCylinderRoll {
  0% {
    transform: rotateX(0deg) translateY(0) scale(1);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    filter: brightness(1);
  }
  50% {
    transform: rotateX(50deg) translateY(-40%) scale(0.92);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5);
    filter: brightness(0.88);
  }
  100% {
    transform: rotateX(85deg) translateY(-115%) scale(0.82);
    box-shadow: 0 60px 100px rgba(0, 0, 0, 0.7);
    opacity: 0;
    filter: brightness(0.7);
  }
}

/* ==========================================================================
   STYLE 3: 3D PAGE CURL (ORIGAMI CORNER PEEL)
   Current page curls diagonally from bottom-right, revealing target page underneath
   ========================================================================== */
.trans-3d-stage--page-curl .trans-sheet--over {
  transform-origin: 0% 0%; /* Top-left anchor */
  animation: transOrigamiCurl 0.92s cubic-bezier(0.25, 0.9, 0.35, 1) forwards;
}

.trans-3d-stage--page-curl .trans-sheet--under {
  animation: transUnderLift 0.92s cubic-bezier(0.25, 1, 0.35, 1) forwards;
}

@keyframes transOrigamiCurl {
  0% {
    transform: rotate3d(0, 0, 0, 0deg) translate3d(0, 0, 0) scale(1);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    filter: brightness(1);
  }
  45% {
    transform: rotate3d(1, -1, 0.2, 45deg) translate3d(25%, -25%, 80px) scale(0.94);
    box-shadow: -35px 35px 70px rgba(0, 0, 0, 0.45);
    filter: brightness(0.9);
  }
  100% {
    transform: rotate3d(1, -1, 0.2, 95deg) translate3d(70%, -70%, 220px) scale(0.85);
    box-shadow: -60px 60px 100px rgba(0, 0, 0, 0.65);
    opacity: 0;
    filter: brightness(0.75);
  }
}

/* ==========================================================================
   STYLE 4: 3D CUBE ORBIT (DUAL-FACE SPATIAL CUBE ROTATION)
   Both pages are mounted on adjacent faces of a 3D Cube rotating 90deg
   ========================================================================== */
.trans-cube-wrap {
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
  transform-style: preserve-3d;
  will-change: transform;
  animation: transCubeRotate 0.94s cubic-bezier(0.25, 1, 0.35, 1) forwards;
}

.trans-cube-face {
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #FFFFFF;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.trans-cube-face--current {
  transform: rotateY(0deg) translateZ(50vw);
}

.trans-cube-face--next {
  transform: rotateY(90deg) translateZ(50vw);
}

@keyframes transCubeRotate {
  0% {
    transform: translateZ(-50vw) rotateY(0deg);
  }
  100% {
    transform: translateZ(-50vw) rotateY(-90deg);
  }
}

/* ==========================================================================
   STYLE 5: 3D SHUTTER DOORS (DUAL SWING DOORS REVEALING TARGET PAGE)
   Current page splits into Left & Right doors that swing open in perspective
   ========================================================================== */
.trans-doors-container {
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 25;
  display: flex;
  transform-style: preserve-3d;
}

.trans-door {
  flex: 1;
  height: 100%;
  position: relative;
  overflow: hidden;
  background: #FFFFFF;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform, box-shadow, filter;
}

.trans-door--left {
  transform-origin: left center;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
  animation: transDoorSwingLeft 0.88s cubic-bezier(0.25, 1, 0.35, 1) forwards;
}

.trans-door--right {
  transform-origin: right center;
  border-left: 1px solid rgba(0, 0, 0, 0.1);
  animation: transDoorSwingRight 0.88s cubic-bezier(0.25, 1, 0.35, 1) forwards;
}

.trans-3d-stage--shutter-doors .trans-sheet--under {
  animation: transUnderLift 0.88s cubic-bezier(0.25, 1, 0.35, 1) forwards;
}

@keyframes transDoorSwingLeft {
  0% {
    transform: rotateY(0deg);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    filter: brightness(1);
  }
  100% {
    transform: rotateY(-95deg) scale(0.9);
    box-shadow: -40px 0 80px rgba(0, 0, 0, 0.6);
    opacity: 0;
    filter: brightness(0.7);
  }
}

@keyframes transDoorSwingRight {
  0% {
    transform: rotateY(0deg);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    filter: brightness(1);
  }
  100% {
    transform: rotateY(95deg) scale(0.9);
    box-shadow: 40px 0 80px rgba(0, 0, 0, 0.6);
    opacity: 0;
    filter: brightness(0.7);
  }
}

/* ==========================================================================
   FLOATING 3D HUD PILL (Clear Visual Indicator of Current 3D Mode)
   ========================================================================== */
.trans-pill-3d {
  position: fixed;
  top: calc(var(--header-h, 76px) + 18px);
  left: 50%;
  transform: translateX(-50%) translateY(-20px) scale(0.9);
  z-index: 100005; /* Above everything */
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px 9px 12px;
  background: rgba(14, 16, 23, 0.94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 74, 43, 0.5);
  border-radius: 9999px;
  box-shadow: 0 14px 40px -10px rgba(0, 0, 0, 0.6), 0 0 25px rgba(255, 74, 43, 0.3);
  color: #FFFFFF;
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.35s ease,
              visibility 0.35s;
}

.trans-pill-3d.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
}

.trans-pill-3d__icon {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: linear-gradient(135deg, #FF2D2D 0%, #FF6333 100%);
  display: grid;
  place-items: center;
  box-shadow: 0 0 12px rgba(255, 74, 43, 0.6);
  color: #FFFFFF;
}

.trans-pill-3d__icon svg {
  width: 14px;
  height: 14px;
  animation: transPillIconRotate 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

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

.trans-pill-3d__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #FF4A2B;
  box-shadow: 0 0 10px #FF4A2B;
  animation: transDotBlink 0.8s ease-in-out infinite alternate;
}

@keyframes transDotBlink {
  0% { opacity: 0.4; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1.2); }
}

.trans-pill-3d__bar {
  position: absolute;
  bottom: 0;
  left: 14px;
  right: 14px;
  height: 2px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 2px;
  overflow: hidden;
}

.trans-pill-3d__bar-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #FF2D2D, #FFA37B);
  box-shadow: 0 0 10px #FF4A2B;
  animation: transPillFill 0.9s ease-out forwards;
}

@keyframes transPillFill {
  0% { width: 0%; }
  100% { width: 100%; }
}

/* Reduced Motion Safety */
@media (prefers-reduced-motion: reduce) {
  .trans-3d-stage, .trans-pill-3d {
    display: none !important;
  }
}