/**
 * splitflap.css
 * ---------------------------------------------------------------------------
 * Visual styling for the SplitFlap component (see splitflap.js).
 * Colours/timing/fonts are all exposed as CSS custom properties on
 * [data-flap-theme] so the board is easy to reskin without touching the
 * component logic. Four themes are provided; "classic" is the default.
 */

/* ---------- Theme presets ---------- */
.flap-board{
  --flap-bg: #1c1c1e;         /* panel base colour (charcoal) */
  --flap-bg-2: #141416;       /* darker gradient stop */
  --flap-fg: #f2ede4;         /* glyph colour (warm cream) */
  --flap-crease: rgba(0,0,0,0.6);
  --flap-gloss: rgba(255,255,255,0.05);
  --flap-shadow: rgba(0,0,0,0.4);
  --flap-cell-radius: 2px;
  --flap-gap: 1px;            /* space between neighbouring character cells */
}
.flap-board[data-flap-theme="amber"]{
  --flap-bg:#1a1408; --flap-bg-2:#0e0b04; --flap-fg:#ffb300;
  --flap-crease:rgba(0,0,0,0.8); --flap-gloss:rgba(255,179,0,0.08); --flap-shadow:rgba(0,0,0,0.6);
}
.flap-board[data-flap-theme="green"]{
  --flap-bg:#0a1410; --flap-bg-2:#050b08; --flap-fg:#4dff9e;
  --flap-crease:rgba(0,0,0,0.8); --flap-gloss:rgba(77,255,158,0.07); --flap-shadow:rgba(0,0,0,0.6);
}
.flap-board[data-flap-theme="modern"]{
  --flap-bg:#16181d; --flap-bg-2:#0b0c0f; --flap-fg:#ffffff;
  --flap-crease:rgba(0,0,0,0.7); --flap-gloss:rgba(255,255,255,0.05); --flap-shadow:rgba(0,0,0,0.5);
}

/* ---------- Layout ---------- */
.flap-field{
  display:inline-flex;
  gap:var(--flap-gap);
  perspective:300px;
  vertical-align:middle;
}

.flap-cell{
  position:relative;
  width:0.92em;
  height:1.5em;
  flex:none;
  border-radius:var(--flap-cell-radius);
  box-shadow:0 1px 2px var(--flap-shadow), 0 0 0 1px rgba(0,0,0,0.3);
}

/* Static top/bottom panels — always show the *settled* character */
.flap-panel{
  position:absolute;
  left:0; right:0; height:50%;
  overflow:hidden;
  background:linear-gradient(180deg, var(--flap-bg), var(--flap-bg-2));
  border-radius:var(--flap-cell-radius);
}
.flap-panel-top{ top:0; box-shadow:inset 0 -2px 2px var(--flap-crease); }
.flap-panel-bottom{ bottom:0; box-shadow:inset 0 2px 2px var(--flap-crease), 0 1px 0 var(--flap-gloss); }

/* Gloss highlight sweep for a "premium plastic" feel rather than flat colour */
.flap-panel::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, var(--flap-gloss), transparent 60%);
  pointer-events:none;
}

/* Crease line between the two halves */
.flap-hinge{
  position:absolute; left:0; right:0; top:50%; height:2px;
  transform:translateY(-1px);
  background:var(--flap-crease);
  z-index:3;
}

/* Glyph rendering: a double-height character positioned so overflow-hidden
   on the half-height panel reveals only the correct half. */
.flap-glyph{
  position:absolute;
  left:0; right:0;
  height:200%;
  display:flex; align-items:center; justify-content:center;
  font-weight:700;
  color:var(--flap-fg);
  text-shadow:0 1px 0 rgba(0,0,0,0.5);
  -webkit-font-smoothing:antialiased;
}
.flap-panel-top .flap-glyph{ top:0; }
.flap-panel-bottom .flap-glyph{ top:-100%; }

/* The animating leaf — only two faces of THIS element ever move.
   Everything is transform/opacity so it stays on the GPU compositor. */
.flap-leaf{
  position:absolute; left:0; right:0; top:0; height:50%;
  transform-style:preserve-3d;
  transform-origin:bottom;
  pointer-events:none;
  will-change:transform;
  backface-visibility:hidden;
}
.flap-leaf-face{
  position:absolute; inset:0;
  overflow:hidden;
  background:linear-gradient(180deg, var(--flap-bg), var(--flap-bg-2));
  border-radius:var(--flap-cell-radius);
  backface-visibility:hidden;
  box-shadow:inset 0 -3px 4px var(--flap-crease);
}
.flap-leaf-front{ transform:rotateX(0deg); z-index:2; }
.flap-leaf-back{ transform:rotateX(180deg); z-index:2; }
.flap-leaf-front .flap-glyph,
.flap-leaf-back .flap-glyph{ top:0; }

/* Belt-and-braces: the leaf only needs to be visible while a flip is
   actually in progress. At rest it should be fully transparent so any
   momentary mismatch in its (mirrored) text can never occlude the real,
   static character underneath. */
.flap-leaf:not(.flap-leaf-flipping){ opacity:0; }

/* Hop animation — mechanical deceleration with a slight overshoot/bounce
   at the very end, simulating physical momentum in the drum mechanism. */
@keyframes flapHop{
  0%   { transform:rotateX(0deg); }
  70%  { transform:rotateX(-172deg); }
  85%  { transform:rotateX(-183deg); } /* tiny bounce past flat        */
  100% { transform:rotateX(-180deg); } /* settle                      */
}
.flap-leaf.flap-leaf-flipping{
  animation:flapHop var(--flap-hop-duration, 140ms) cubic-bezier(.4,0,.2,1) both;
}

/* ---------- Accessibility & fallbacks ---------- */

/* Respect reduced-motion: no animation, values just update instantly. */
@media (prefers-reduced-motion: reduce){
  .flap-leaf{ display:none !important; }
}

/* forced-colors (Windows High Contrast) and prefers-contrast: strip the
   gradients/gloss that would otherwise fight the OS contrast theme. */
@media (forced-colors: active){
  .flap-panel, .flap-leaf-face{ background:Canvas; forced-color-adjust:none; border:1px solid CanvasText; }
  .flap-glyph{ color:CanvasText; text-shadow:none; }
  .flap-panel::after{ display:none; }
}
@media (prefers-contrast: more){
  .flap-board{ --flap-bg:#000; --flap-bg-2:#000; --flap-fg:#fff; --flap-gloss:transparent; }
  .flap-panel::after{ display:none; }
}

.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}