/* ═══════════════════════════════════════════════════════════════
   BinderFlip – CSS Module
   Two-page spread layout with 3D page-flip at the spine
   ═══════════════════════════════════════════════════════════════ */

/* ─── Wrapper ─── */
.BinderFlip_binderWrapper__qHgJC {
  --binder-radius: 10px;
  --page-bg: #f8f7f4;
  --page-shadow: rgba(0, 0, 0, 0.10);
  --edge-color: #ccc8be;
  --spine-w: 16px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* ─── 3-D Spread Container (landscape, two pages side-by-side) ─── */
.BinderFlip_spreadContainer__peQ9l {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  touch-action: pan-y pinch-zoom;
  cursor: grab;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  /* NOTE: do NOT add will-change:transform here – it flattens the
     preserve-3d context on mobile WebKit, breaking backface-visibility. */
}
.BinderFlip_spreadContainer__peQ9l:active {
  cursor: grabbing;
}

/* ─── Half-page positioning (shared by flip, beneath, shadow) ─── */
/* Flip elements & shadows: full 50% width so the transform-origin
   sits exactly at the center line (spine).  The visual gap is
   created by insetting the page faces inside. */
.BinderFlip_flipLeft__xMgPZ,
.BinderFlip_flipRight__Z5Pew,
.BinderFlip_shadowLeft__dHIk_,
.BinderFlip_shadowRight__XWThu {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
}
.BinderFlip_flipLeft__xMgPZ,
.BinderFlip_shadowLeft__dHIk_ {
  left: 0;
}
.BinderFlip_flipRight__Z5Pew,
.BinderFlip_shadowRight__XWThu {
  left: 50%;
}

/* Beneath pages: keep the spine gap offset since they don't flip */
.BinderFlip_beneathLeft__uKZlW,
.BinderFlip_beneathRight__J_O8S {
  position: absolute;
  top: 0;
  width: calc(50% - var(--spine-w) / 2);
  height: 100%;
}
.BinderFlip_beneathLeft__uKZlW {
  left: 0;
}
.BinderFlip_beneathRight__J_O8S {
  left: calc(50% + var(--spine-w) / 2);
}

/* ─── Beneath pages (revealed during flip) ─── */
.BinderFlip_beneathLeft__uKZlW,
.BinderFlip_beneathRight__J_O8S {
  background: var(--page-bg);
  overflow: hidden;
  visibility: hidden;
  z-index: 1;
  box-shadow: 0 1px 4px var(--page-shadow);
}
.BinderFlip_beneathLeft__uKZlW {
  border-radius: var(--binder-radius) 0 0 var(--binder-radius);
}
.BinderFlip_beneathRight__J_O8S {
  border-radius: 0 var(--binder-radius) var(--binder-radius) 0;
}

/* ─── Flip elements (left page + right page) ─── */
.BinderFlip_flipLeft__xMgPZ {
  transform-origin: right center; /* spine */
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  z-index: 3;
  background: transparent;
}
.BinderFlip_flipRight__Z5Pew {
  transform-origin: left center; /* spine */
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  z-index: 3;
  background: transparent;
}

/* ─── Page faces ─── */
.BinderFlip_pageFront__cP7WK,
.BinderFlip_pageBack__bQTH7 {
  position: absolute;
  top: 0;
  bottom: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: var(--page-bg);
  overflow: hidden;
}
.BinderFlip_pageFront__cP7WK {
  z-index: 1;
  box-shadow: 0 1px 6px var(--page-shadow);
}
.BinderFlip_pageBack__bQTH7 {
  z-index: 0;
  transform: rotateY(180deg);
}

/* Left page faces: inset from the right (spine side).
   Both front and back share the SAME bounds so that after a 180°
   flip the back face lands exactly where the opposite pageFront is. */
.BinderFlip_flipLeft__xMgPZ > .BinderFlip_pageFront__cP7WK,
.BinderFlip_flipLeft__xMgPZ > .BinderFlip_pageBack__bQTH7 {
  left: 0;
  right: calc(var(--spine-w) / 2);
}

/* Right page faces: inset from the left (spine side). */
.BinderFlip_flipRight__Z5Pew > .BinderFlip_pageFront__cP7WK,
.BinderFlip_flipRight__Z5Pew > .BinderFlip_pageBack__bQTH7 {
  right: 0;
  left: calc(var(--spine-w) / 2);
}

/* Corner radii — outer corners rounded, spine corners square.
   Front face: rounded on the outer edge of its resting side.
   Back face: rounded on the outer edge of where it LANDS after flip.
   The switch happens at 90° where the page is edge-on (invisible). */
.BinderFlip_flipLeft__xMgPZ > .BinderFlip_pageFront__cP7WK {
  border-radius: var(--binder-radius) 0 0 var(--binder-radius);
}
/* Back face flips to the right → rounded RIGHT corners (matches beneathRight) */
.BinderFlip_flipLeft__xMgPZ > .BinderFlip_pageBack__bQTH7 {
  border-radius: 0 var(--binder-radius) var(--binder-radius) 0;
}
.BinderFlip_flipRight__Z5Pew > .BinderFlip_pageFront__cP7WK {
  border-radius: 0 var(--binder-radius) var(--binder-radius) 0;
}
/* Back face flips to the left → rounded LEFT corners (matches beneathLeft) */
.BinderFlip_flipRight__Z5Pew > .BinderFlip_pageBack__bQTH7 {
  border-radius: var(--binder-radius) 0 0 var(--binder-radius);
}

/* ─── Page content ─── */
.BinderFlip_pageContent__rvA85 {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
  /* Hard 3D boundary: prevents nested perspective/preserve-3d from
     photocard components from propagating into the BinderFlip 3D tree.
     Without this, each card slot adds its own compositing layer to
     the flip element's preserve-3d context, overwhelming mobile GPUs. */
  transform-style: flat;
  -webkit-transform-style: flat;
  /* Prevent content (images, links, etc.) from stealing drag events */
  pointer-events: none;
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
}
.BinderFlip_pageContent__rvA85 img,
.BinderFlip_pageContent__rvA85 video {
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none;
}

/* ─── Blank page placeholder ─── */
.BinderFlip_blankPage__fdU2A {
  width: 100%;
  height: 100%;
  background: var(--page-bg);
}

/* ─── Invisible pad pages (structural alignment pages, hidden from view) ─── */
.BinderFlip_pageFront__cP7WK:has([data-pad]),
.BinderFlip_pageBack__bQTH7:has([data-pad]),
.BinderFlip_beneathLeft__uKZlW:has([data-pad]),
.BinderFlip_beneathRight__J_O8S:has([data-pad]) {
  background: transparent !important;
  box-shadow: none !important;
}
.BinderFlip_pageFront__cP7WK:has([data-pad])::before,
.BinderFlip_pageBack__bQTH7:has([data-pad])::before,
.BinderFlip_beneathLeft__uKZlW:has([data-pad])::before,
.BinderFlip_beneathRight__J_O8S:has([data-pad])::before {
  display: none !important;
}

/* ─── Offscreen preload zone (renders nearby pages invisibly) ─── */
.BinderFlip_preloadZone__Q483a {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  contain: strict;
}

/* ─── Prerender zone (for riffle animation cloning) ──
   Lives OUTSIDE the preserve-3d spreadContainer so the heavy page
   content (images, card 3D effects) doesn't pollute the 3D compositor.
   Must be full-height so cloned content has correct dimensions. */
.BinderFlip_prerenderZone__IHbZZ {
  position: absolute;
  left: 0;
  top: 0;
  /* Match a single page width: half the container minus spine gap */
  width: calc(50% - var(--spine-w, 16px) / 2);
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  z-index: -1;
  /* Prevent this zone from creating a 3D rendering context */
  transform-style: flat;
  -webkit-transform-style: flat;
}

/* ─── Shadow overlays (projected on revealed beneath page) ─── */
.BinderFlip_shadowLeft__dHIk_,
.BinderFlip_shadowRight__XWThu {
  z-index: 4;
  opacity: 0;
  pointer-events: none;
}
.BinderFlip_shadowLeft__dHIk_ {
  border-radius: var(--binder-radius) 0 0 var(--binder-radius);
}
.BinderFlip_shadowRight__XWThu {
  border-radius: 0 var(--binder-radius) var(--binder-radius) 0;
}

/* ─── Page-thickness edge ─── */
.BinderFlip_pageEdge__T4Sxx {
  position: absolute;
  top: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(to right, #b8b4aa, var(--edge-color));
}
.BinderFlip_flipRight__Z5Pew > .BinderFlip_pageEdge__T4Sxx {
  left: -1px;
  transform: rotateY(-90deg);
  transform-origin: right center;
}
.BinderFlip_flipLeft__xMgPZ > .BinderFlip_pageEdge__T4Sxx {
  right: -1px;
  transform: rotateY(90deg);
  transform-origin: left center;
}

/* ─── Spine: visible bar filling the gap between pages ─── */
.BinderFlip_spine__ECzeL {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: var(--spine-w);
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
  background: linear-gradient(
    to right,
    #3a3a3a,
    #4a4a4a 20%,
    #555 40%,
    #4a4a4a 60%,
    #555 80%,
    #3a3a3a
  );
  border-radius: 1px;
}
.BinderFlip_spineBar__wz9zW { display: none; }


/* ─── Hide all rings when front cover hasn't passed 90° ─── */
.BinderFlip_hideRings__iG2tq .BinderFlip_flipRing__yD_GV,
.BinderFlip_hideRings__iG2tq .BinderFlip_spineRing__cLpda,
.BinderFlip_hideRings__iG2tq .BinderFlip_staticRing__CLGHL {
  display: none !important;
}

/* ─── Binder ring halves on flip elements (flip with the page) ─── */
.BinderFlip_flipRing__yD_GV {
  position: absolute;
  width: 52px;
  height: auto;
  z-index: 2;            /* just above pageFront (z-index:1) */
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25));
  transform: translate(-50%, -85%);
}
/* flipLeft: ring center at right edge (spine) → left: 100% */
.BinderFlip_flipRingLeft__cYlpK {
  left: 100%;
  clip-path: inset(0 50% 0 0);   /* show only left half */
}
/* flipRight: ring center at left edge (spine) → left: 0% */
.BinderFlip_flipRingRight__TmU_E {
  left: 0%;
  clip-path: inset(0 0 0 50%);   /* show only right half */
}

/* ─── Static rings (directly on spreadContainer, container coords) ─── */
.BinderFlip_staticRing__CLGHL {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -85%);
  width: 52px;
  height: auto;
  z-index: 5;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25));
}
/* Center strip on spine */
.BinderFlip_staticRingCenter__7YwCA {
  clip-path: inset(0 18px 0 18px);
}
/* Left half (for cover backing left side) */
.BinderFlip_staticRingLeft__IGo5J {
  clip-path: inset(0 50% 0 0);
}
/* Right half (for cover backing right side) */
.BinderFlip_staticRingRight__Uwysm {
  clip-path: inset(0 0 0 50%);
}


/* Spine edge on page faces — a narrow gradient strip along the spine side.
   Uses ::before so it doesn't conflict with page content.
   Each page face shows half the spine (its own edge). */

/* LEFT pages → spine strip on the RIGHT edge (both faces share bounds) */
.BinderFlip_flipLeft__xMgPZ > .BinderFlip_pageFront__cP7WK::before,
.BinderFlip_flipLeft__xMgPZ > .BinderFlip_pageBack__bQTH7::before,
.BinderFlip_beneathLeft__uKZlW::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 4px;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    to right,
    transparent,
    rgba(0,0,0,0.06) 30%,
    rgba(0,0,0,0.15) 80%,
    rgba(0,0,0,0.22)
  );
}

/* RIGHT pages → spine strip on the LEFT edge (both faces share bounds) */
.BinderFlip_flipRight__Z5Pew > .BinderFlip_pageFront__cP7WK::before,
.BinderFlip_flipRight__Z5Pew > .BinderFlip_pageBack__bQTH7::before,
.BinderFlip_beneathRight__J_O8S::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    to left,
    transparent,
    rgba(0,0,0,0.06) 30%,
    rgba(0,0,0,0.15) 80%,
    rgba(0,0,0,0.22)
  );
}

/* Cover inside faces — spine edge */
.BinderFlip_coverFlip__Ce0eh > .BinderFlip_coverFront__KtY2w::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    to left,
    transparent,
    rgba(0,0,0,0.06) 30%,
    rgba(0,0,0,0.15) 80%,
    rgba(0,0,0,0.22)
  );
}
.BinderFlip_backFlip__LF1_K > .BinderFlip_coverFront__KtY2w::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 4px;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    to right,
    transparent,
    rgba(0,0,0,0.06) 30%,
    rgba(0,0,0,0.15) 80%,
    rgba(0,0,0,0.22)
  );
}

/* ─── Cover / Back cover (single-page flip overlays) ───
   Covers are 10% bigger than pages: 5% overhang on top/bottom/outer edge */
.BinderFlip_coverFlip__Ce0eh,
.BinderFlip_backFlip__LF1_K {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;          /* same as pages — overhang is on the faces */
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  z-index: 15;
  display: none;
}
.BinderFlip_coverFlip__Ce0eh {
  left: 50%;
  transform-origin: left center; /* hinges at spine center */
}
.BinderFlip_backFlip__LF1_K {
  left: 0;
  transform-origin: right center; /* hinges at spine center */
}

/* Cover faces — front (outside) and back (inside).
   Vertical overhang: -5% top/bottom so covers peek out above and below pages. */
.BinderFlip_coverFront__KtY2w,
.BinderFlip_coverBack__Kb9X0 {
  position: absolute;
  top: -5%;
  bottom: -5%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}
.BinderFlip_coverFront__KtY2w {
  z-index: 1;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
}
.BinderFlip_coverBack__Kb9X0 {
  z-index: 0;
  transform: rotateY(180deg);
}

/* coverFlip (right side):
   Front = visible when closed on right, 5% overhang on outer (right) edge.
   Back  = visible when open on left, needs 10% (of parent = 5% of container)
           overhang on right so that after -180° flip it matches the backing. 
   The size difference is invisible at 90° (edge-on). */
.BinderFlip_coverFlip__Ce0eh > .BinderFlip_coverFront__KtY2w {
  left: calc(var(--spine-w) / 2);
  right: -5%;
  border-radius: 0 var(--binder-radius) var(--binder-radius) 0;
}
.BinderFlip_coverFlip__Ce0eh > .BinderFlip_coverBack__Kb9X0 {
  left: calc(var(--spine-w) / 2);
  right: -10%;
  border-radius: var(--binder-radius) 0 0 var(--binder-radius);
}

/* backFlip (left side):
   Front = visible when closed on left, 5% overhang on outer (left) edge.
   Back  = visible when open on right, needs 10% (of parent = 5% of container)
           overhang on left so that after 180° flip it matches the backing. */
.BinderFlip_backFlip__LF1_K > .BinderFlip_coverFront__KtY2w {
  left: -5%;
  right: calc(var(--spine-w) / 2);
  border-radius: var(--binder-radius) 0 0 var(--binder-radius);
}
.BinderFlip_backFlip__LF1_K > .BinderFlip_coverBack__Kb9X0 {
  left: -10%;
  right: calc(var(--spine-w) / 2);
  border-radius: 0 var(--binder-radius) var(--binder-radius) 0;
}

/* ─── Cover backing — always behind pages when open ─── */
.BinderFlip_coverBacking__b6hnX {
  position: absolute;
  top: -5%;
  height: 110%;
  z-index: 1;
  overflow: visible;
  box-shadow: 0 3px 16px rgba(0, 0, 0, 0.25);
  background: transparent;
}
.BinderFlip_coverBackingLeft__pIMog {
  left: -5%;
  width: calc(50% - var(--spine-w) / 2 + 5%);
  border-radius: var(--binder-radius) 0 0 var(--binder-radius);
}
.BinderFlip_coverBackingRight__2iGSS {
  left: calc(50% + var(--spine-w) / 2);
  width: calc(50% - var(--spine-w) / 2 + 5%);
  border-radius: 0 var(--binder-radius) var(--binder-radius) 0;
}

/* ─── Controls ─── */
.BinderFlip_controls__QDH_O {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  justify-content: center;
  padding: 4px 0;
}

.BinderFlip_navButton__YFBh2 {
  padding: 8px 22px;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: #ccc;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease,
    color 0.15s ease, transform 0.1s ease;
  backdrop-filter: blur(4px);
  font-family: inherit;
  line-height: 1;
}
.BinderFlip_navButton__YFBh2:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}
.BinderFlip_navButton__YFBh2:active:not(:disabled) {
  transform: scale(0.95);
}
.BinderFlip_navButton__YFBh2:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.BinderFlip_pageIndicator__WDiIG {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  font-variant-numeric: tabular-nums;
  min-width: 80px;
  text-align: center;
}

/* ─── prefers-reduced-motion ─── */
.BinderFlip_reducedMotion__d84Ts .BinderFlip_flipLeft__xMgPZ,
.BinderFlip_reducedMotion__d84Ts .BinderFlip_flipRight__Z5Pew,
.BinderFlip_reducedMotion__d84Ts .BinderFlip_coverFlip__Ce0eh,
.BinderFlip_reducedMotion__d84Ts .BinderFlip_backFlip__LF1_K {
  transform: none !important;
  transition: opacity 0.25s ease !important;
}
.BinderFlip_reducedMotion__d84Ts .BinderFlip_shadowLeft__dHIk_,
.BinderFlip_reducedMotion__d84Ts .BinderFlip_shadowRight__XWThu,
.BinderFlip_reducedMotion__d84Ts .BinderFlip_pageEdge__T4Sxx {
  display: none;
}

/* ─── Touch devices ─── */
@media (hover: none) {
  .BinderFlip_spreadContainer__peQ9l,
  .BinderFlip_spreadContainer__peQ9l:active {
    cursor: default;
  }
}