/* ─────────────────────────────────────────────────────────
 * panel-flip.css — Phase 2
 * Cube-flip transition that bridges two HTML files.
 *
 * Mental model:
 *   One continuous rotateY rotation from 0° to 180° around a
 *   vertical axis at 15vw from the left of the viewport.
 *
 *   Home page does the first half:     0° → 90°  (rotation: 0deg → -90deg)
 *   Subpage does the second half:     90° → 180° (rotation: -90deg → -180deg)
 *
 *   The "door" element has two faces:
 *     front face (the one facing camera at 0°): transparent — you
 *       see the page underneath through it. On the home this means
 *       you see home; on the subpage it's never visible (door
 *       starts past 90°), so we set it to the panel color.
 *     back face (facing camera once past 90°): on the home, this is
 *       the panel color. On the subpage, this is transparent — the
 *       subpage's actual rendered content shows through.
 *
 *   At the 88°-89° handoff, both pages are showing essentially the
 *   panel-color edge — the seam is invisible.
 *
 * --panel-color: per-page accent; set at runtime by JS.
 * ───────────────────────────────────────────────────────── */

:root {
  --panel-sliver: 0;
  --panel-width: 100vw;
  --panel-flip-duration: 700ms;
  --panel-flip-ease: cubic-bezier(.76, 0, .24, 1);
  --panel-color: #ece8df;
}

/* Lock body scroll while flipping */
html[data-panel-flipping] body,
html[data-panel-arrival]:not([data-panel-arrival="done"]) body {
  overflow: hidden !important;
}

/* ── Door geometry (shared between home + subpage) ── */
.panel-flip-stage {
  position: fixed; inset: 0;
  z-index: 99996;
  pointer-events: none;
  perspective: 1600px;
  perspective-origin: var(--panel-sliver) 50%;
}

.panel-flip-door {
  position: absolute;
  top: 0;
  left: var(--panel-sliver);
  width: var(--panel-width);
  height: 100%;
  transform-style: preserve-3d;
  transform-origin: 0% 50%;
  will-change: transform;
}

.panel-face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}
.panel-face-back {
  transform: rotateY(180deg);
}

/* ── HOME (opening) ───────────────────────────────
   Door starts edge-on at rotateY(-90deg) (invisible) and rotates
   IN to rotateY(0deg) flat-on (covering the right 85% with the
   per-page color). This is the panel "swinging in from the right." */
#panel-flip-door {
  transform: rotateY(-90deg);
}
html[data-panel-flipping="opening"] #panel-flip-door {
  transition: transform var(--panel-flip-duration) var(--panel-flip-ease);
  transform: rotateY(0deg);
}
/* Front face = per-page color (the visible "cover"). Back face never
   shows on the home — door doesn't rotate past 0°. */
#panel-flip-door .panel-face-front { background: var(--panel-color); }
#panel-flip-door .panel-face-back  { background: var(--panel-color); }

/* ── SUBPAGE (arriving) ───────────────────────────
   Door starts flat-on at rotateY(0deg) showing the color cover, and
   rotates OUT to rotateY(90deg) edge-on (revealing the page behind).
   This is the panel "swinging open" to expose the content. */
#panel-arrival-door {
  transform: rotateY(0deg);
}
html[data-panel-arrival="settling"] #panel-arrival-door {
  transition: transform var(--panel-flip-duration) var(--panel-flip-ease);
  transform: rotateY(90deg);
}
/* Front face = color cover (visible 0°→90°). Back face never shows
   to the user. */
#panel-arrival-door .panel-face-front { background: var(--panel-color); }
#panel-arrival-door .panel-face-back  { background: var(--panel-color); }

/* The subpage content itself only occupies the right 85% so the
   home sliver area (left 15%) stays a solid color the eye can
   anchor on during the swap. */
#panel-content-clip {
  position: relative;
  width: var(--panel-width);
  margin-left: var(--panel-sliver);
  min-height: 100vh;
  background: var(--panel-color);
}

/* The 15% sliver: a solid color visible behind everything on the
   subpage so the user perceives it as "home, frozen behind the panel." */
#panel-sliver-bg {
  position: fixed;
  top: 0; left: 0;
  width: var(--panel-sliver);
  height: 100%;
  z-index: -1;
  background: #0a0a0a;
  pointer-events: none;
}

/* Once flip is complete, the door is removed from the layout and
   normal scroll resumes inside #panel-content-clip. */
html[data-panel-arrival="done"] #panel-arrival-stage { display: none; }
html[data-panel-arrival="done"] body { overflow: auto !important; }

/* ── SUBPAGE (closing) ────────────────────────────
   Mirror of arrival: door starts edge-on at rotateY(90deg) (invisible)
   and rotates IN to rotateY(0deg) (color cover flat-on, hiding page).
   At ~88% through, navigate back to home. */
html[data-panel-closing] #panel-arrival-stage { display: block !important; }
html[data-panel-closing] #panel-arrival-door  { transform: rotateY(90deg); }
html[data-panel-closing="closing"] #panel-arrival-door {
  transition: transform var(--panel-flip-duration) var(--panel-flip-ease);
  transform: rotateY(0deg);
}

/* ── HOME (returning) ─────────────────────────────
   Door arrives at rotateY(0deg) (color flat-on, covering home) and
   rotates OUT to rotateY(-90deg) (edge-on, revealing home). */
#panel-flip-door.return-mode { transform: rotateY(0deg); }
html[data-panel-returning="settling"] #panel-flip-door.return-mode {
  transition: transform var(--panel-flip-duration) var(--panel-flip-ease);
  transform: rotateY(-90deg);
}

/* Direct-load (no flip) — page renders normally without any door. */
html[data-panel-direct] #panel-arrival-stage { display: none; }
/* Phase 6 fix: when loaded directly, no panel sliver should offset the chrome. */
html[data-panel-direct] { --panel-sliver: 0; }

/* While returning to home, paint a synchronous full-bleed backdrop in
   the panel color BEFORE the door is built, so home content never
   flashes into view. The door builds on top of this and animates.
   The backdrop only paints while data-panel-returning is in 'pre' state
   (i.e. door has not yet started rotating). Once 'settling' begins, the
   door's animation IS the visible cover; once it ends, the bridge
   removes data-panel-returning entirely and this rule no longer matches. */
html[data-panel-returning="pre"] body::before {
  content: '';
  position: fixed; top: 0; left: var(--panel-sliver); right: 0; bottom: 0;
  background: var(--panel-color);
  z-index: 99995;
  pointer-events: none;
}

/* ── REDUCED MOTION ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html[data-panel-flipping="opening"] #panel-flip-door,
  html[data-panel-arrival="settling"] #panel-arrival-door {
    transition-duration: 1ms;
  }
}

/* ── PHASE 6: REDUCED-MOTION FADE COVER ─────────────────── */
#panel-fade-cover {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--panel-color);
  z-index: 99997;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
/* Open: cover fades IN to hide the navigation cut. */
html[data-panel-fading="opening"] #panel-fade-cover { opacity: 1; }
/* Close (subpage → home): cover fades IN before navigation. */
html[data-panel-fading="closing"] #panel-fade-cover { opacity: 1; }
/* Return (home arriving): cover starts visible, then fades OUT. */
html[data-panel-fading="returning"]     #panel-fade-cover { opacity: 1; transition: none; }
html[data-panel-fading="returning-out"] #panel-fade-cover { opacity: 0; }

/* ── PHASE 6: DIRECT-LOAD SPLASH ─────────────────────────── */
/* When a subpage loads directly (no ?from=panel), paint a synchronous
   per-page color over the whole viewport so fonts/images can settle
   without a white flash. The subpage clears it on `load`. */
html[data-panel-direct] body::before {
  content: '';
  position: fixed; inset: 0; z-index: 99990;
  background: var(--panel-bg, var(--panel-color, #ece8df));
  pointer-events: none;
  opacity: 1;
  transition: opacity .4s ease .05s;
}
html[data-panel-direct][data-panel-direct-ready] body::before {
  opacity: 0;
}