/*
 * GOLPOOGRO - Real 3D Physical Page Turn Physics Animations
 * Real-time bending flaps, dynamic page creases, corner curl hover nodes, and light swept paper reflections
 */

.physical-double-spread {
  perspective: 2500px;
}

/* Page turning simulated flip layout sheet */
.flipping-page-stage {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  background-color: var(--reader-paper-bg);
  box-shadow: inset -5px 0 10px rgba(0,0,0,0.05);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  z-index: 50;
  pointer-events: none;
}

/* Page flip pivots depending on direction */
.flipping-page-stage.flip-right-to-left {
  right: 0;
  transform-origin: left center;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  box-shadow: -15px 0 35px rgba(0, 0, 0, 0.25);
  animation: pageFlipL 0.7s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

.flipping-page-stage.flip-left-to-right {
  left: 0;
  transform-origin: right center;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  box-shadow: 15px 0 35px rgba(0, 0, 0, 0.25);
  animation: pageFlipR 0.7s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

/* Flip Backside covering layer for proper 3D two-sided sheet */
.flipping-page-backside {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--reader-paper-bg);
  box-shadow: inset 5px 0 10px rgba(0,0,0,0.05);
  transform: rotateY(180deg);
  backface-visibility: hidden;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  padding: 40px 50px 30px 50px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.flipping-page-stage.flip-left-to-right .flipping-page-backside {
  transform: rotateY(-180deg);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* Moving highlights/crease gradient overlay to represent light sweep */
.flipping-page-glare {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 60;
  backface-visibility: hidden;
}

.flipping-page-stage.flip-right-to-left .flipping-page-glare {
  background: linear-gradient(105deg, rgba(255,255,255,0) 30%, rgba(255,255,255,0.12) 48%, rgba(0,0,0,0.18) 52%, rgba(255,255,255,0) 70%);
  animation: sweepGlareL 0.7s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

.flipping-page-stage.flip-left-to-right .flipping-page-glare {
  background: linear-gradient(-105deg, rgba(255,255,255,0) 30%, rgba(255,255,255,0.12) 48%, rgba(0,0,0,0.18) 52%, rgba(255,255,255,0) 70%);
  animation: sweepGlareR 0.7s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

/* Drop shadow falling on the page underneath */
.page-underneath-shadow {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  background: rgba(0,0,0,0.15);
  pointer-events: none;
  z-index: 40;
}

.flipping-page-stage.flip-right-to-left ~ .page-underneath-shadow {
  left: 0;
  animation: shadowL 0.7s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

.flipping-page-stage.flip-left-to-right ~ .page-underneath-shadow {
  right: 0;
  animation: shadowR 0.7s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

/* Page turning keyframes with realistic skew-bending */
@keyframes pageFlipL {
  0% {
    transform: rotateY(0deg) skewY(0deg);
  }
  30% {
    transform: rotateY(-40deg) skewY(-2deg) scaleX(0.98);
  }
  70% {
    transform: rotateY(-130deg) skewY(2deg) scaleX(0.98);
  }
  100% {
    transform: rotateY(-180deg) skewY(0deg);
  }
}

@keyframes pageFlipR {
  0% {
    transform: rotateY(0deg) skewY(0deg);
  }
  30% {
    transform: rotateY(40deg) skewY(2deg) scaleX(0.98);
  }
  70% {
    transform: rotateY(130deg) skewY(-2deg) scaleX(0.98);
  }
  100% {
    transform: rotateY(180deg) skewY(0deg);
  }
}

/* Glare sweeping reflections keyframes */
@keyframes sweepGlareL {
  0% { background-position: -200px 0; opacity: 0.6; }
  50% { opacity: 1; }
  100% { background-position: 200px 0; opacity: 0; }
}

@keyframes sweepGlareR {
  0% { background-position: 200px 0; opacity: 0.6; }
  50% { opacity: 1; }
  100% { background-position: -200px 0; opacity: 0; }
}

/* Cast shadows underneath keyframes */
@keyframes shadowL {
  0% { width: 0%; opacity: 0; }
  50% { width: 50%; opacity: 0.45; filter: blur(12px); }
  100% { width: 0%; opacity: 0; }
}

@keyframes shadowR {
  0% { width: 0%; opacity: 0; }
  50% { width: 50%; opacity: 0.45; filter: blur(12px); }
  100% { width: 0%; opacity: 0; }
}


/* ==================================================
   CORNER CURL HOVER INTERACTION DESIGN (Tactile Feel)
   ================================================== */
.reader-corner-fold {
  position: absolute;
  width: 60px;
  height: 60px;
  cursor: pointer;
  z-index: 155;
  transition: all 0.3s ease;
}

.reader-corner-fold.top-right {
  top: 0;
  right: 0;
}

.reader-corner-fold.bottom-right {
  bottom: 0;
  right: 0;
}

.reader-corner-fold.top-left {
  top: 0;
  left: 0;
}

.reader-corner-fold.bottom-left {
  bottom: 0;
  left: 0;
}

/* Decorative visual curl flap */
.corner-peel-flap {
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  pointer-events: none;
}

/* Fold vectors */
.reader-corner-fold.top-right:hover .corner-peel-flap {
  width: 25px;
  height: 25px;
  border-width: 0 25px 25px 0;
  border-color: transparent transparent var(--reader-gold-accent) transparent;
  box-shadow: -4px 4px 10px rgba(0,0,0,0.15);
}

.reader-corner-fold.bottom-right:hover .corner-peel-flap {
  bottom: 0;
  right: 0;
  width: 25px;
  height: 25px;
  border-width: 25px 25px 0 0;
  border-color: transparent transparent transparent var(--reader-gold-accent);
  box-shadow: -4px -4px 10px rgba(0,0,0,0.15);
}

.reader-corner-fold.top-left:hover .corner-peel-flap {
  left: 0;
  width: 25px;
  height: 25px;
  border-width: 0 0 25px 25px;
  border-color: transparent var(--reader-gold-accent) transparent transparent;
  box-shadow: 4px 4px 10px rgba(0,0,0,0.15);
}

.reader-corner-fold.bottom-left:hover .corner-peel-flap {
  bottom: 0;
  left: 0;
  width: 25px;
  height: 25px;
  border-width: 25px 0 0 25px;
  border-color: var(--reader-gold-accent) transparent transparent transparent;
  box-shadow: 4px -4px 10px rgba(0,0,0,0.15);
}