/* =====================================================
   animations.css
   PURPOSE: ALL animation and transition keyframes
   for the entire app. Every animation lives here.

   WHAT IS A KEYFRAME?
   A CSS (Cascading Style Sheets) keyframe defines
   how an element looks at different points during
   an animation. For example, at 0% (start) it might
   be invisible, at 50% half visible, at 100% fully
   visible.

   ANIMATIONS IN THIS FILE:
     - fadeIn       (modal backdrop appearance)
     - slideUp      (modal box appearance)
     - cardFlip     (card front to back flip)
     - shuffleCards (the deck shuffle visual)
     - pulseGlow    (confidence score button glow)
     - slideInRight (screen transition)
   ===================================================== */

/* --- Fade In ---
   Used by: modal backdrop, screen transitions */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* --- Fade Out ---
   Used by: modal close, overlay removal */
@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* --- Slide Up ---
   Used by: modal box appearing from the bottom */
@keyframes slideUp {
  from {
    opacity:   0;
    transform: translateY(30px); /* Start 30px below */
  }
  to {
    opacity:   1;
    transform: translateY(0);    /* End at normal position */
  }
}

/* --- Slide In From Right ---
   Used by: screen navigation transitions.
   Shorter distance and duration than before — iOS
   push transitions are quick and don't overshoot. */
@keyframes slideInRight {
  from {
    opacity:   0;
    transform: translateX(24px);
  }
  to {
    opacity:   1;
    transform: translateX(0);
  }
}

/* Apply screen transition to every new screen render */
#screen-container > * {
  animation: slideInRight 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* =====================================================
   CARD FLIP ANIMATIONS
   
   These keyframes are no longer used directly.
   The flip is now controlled by CSS (Cascading Style
   Sheets) classes (.flipped-right and .flipped-left)
   added by card-editor.js rather than by keyframe
   animations. This gives smoother control and allows
   the flip direction to change dynamically.
   
   The transition: transform 0.5s ease on
   .card-flip-inner handles the actual animation.
   These keyframes are kept here as fallbacks.
   ===================================================== */

/* Flip toward the RIGHT (Question → Answer) */
@keyframes flipRight {
  0%   { transform: rotateY(0deg);   }
  100% { transform: rotateY(180deg); }
}

/* Flip toward the LEFT (Answer → Question) */
@keyframes flipLeft {
  0%   { transform: rotateY(0deg);    }
  100% { transform: rotateY(-180deg); }
}

/* Card flip container needs perspective to show 3D depth */
.card-flip-container {
  perspective:       1000px; /* 1000px = viewing distance */
  cursor:            pointer;
}

.card-flip-inner {
  position:          relative;
  width:             100%;
  height:            100%;
  /* Smooth flip transition over 0.5 seconds */
  transition:        transform 0.5s ease;
  transform-style:   preserve-3d; /* Maintain 3D space */
}

/* When the flipped class is added, the card rotates */
.card-flip-container.flipped .card-flip-inner {
  transform: rotateY(180deg);
}

/* Front face of the flip card */
.card-flip-front,
.card-flip-back {
  position:          absolute;
  width:             100%;
  height:            100%;
  /* backface-visibility: hidden means the back of
     each face is invisible when facing away */
  backface-visibility: hidden;
  border-radius:     var(--border-radius-card);
  background-color:  var(--color-card-bg);
  border:            var(--border-width) solid var(--color-card-border);
}

/* The back face starts rotated 180 degrees */
.card-flip-back {
  transform: rotateY(180deg);
}

/* --- Shuffle Animation ---
   Used by: the deck shuffle button
   Creates a fanning then restacking card effect */
.shuffle-overlay {
  position:         fixed;
  top:              0;
  left:             0;
  width:            100%;
  height:           100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index:          500;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  animation:        fadeIn 0.2s ease;
}

.shuffle-overlay--done {
  animation: fadeOut 0.3s ease forwards;
}

.shuffle-animation {
  position:   relative;
  width:      120px;
  height:     160px;
  display:    flex;
  align-items: center;
  justify-content: center;
}

/* Each of the 5 stacked card elements — styled like a real
   deck's branded card back (centered wordmark) rather than a
   blank rectangle, so the fan reads as RemSym cards shuffling. */
.shuffle-card {
  position:         absolute;
  width:            90px;
  height:           120px;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  background-color: var(--color-card-bg);
  border:           none;
  border-radius:    var(--border-radius-card);
  box-shadow:       var(--shadow-elevation-2);
  font-size:        var(--font-size-footnote);
  font-weight:      700;
  color:            var(--color-accent-amber);
  letter-spacing:   0.01em;
}

/* Each card fans out at a different angle and timing */
.shuffle-card--1 {
  animation: shuffleFan1 0.8s ease forwards;
}
.shuffle-card--2 {
  animation: shuffleFan2 0.8s ease forwards;
  animation-delay: 0.05s;
}
.shuffle-card--3 {
  animation: shuffleFan3 0.8s ease forwards;
  animation-delay: 0.1s;
}
.shuffle-card--4 {
  animation: shuffleFan4 0.8s ease forwards;
  animation-delay: 0.15s;
}
.shuffle-card--5 {
  animation: shuffleFan5 0.8s ease forwards;
  animation-delay: 0.2s;
}

/* Fan out keyframes - each card fans to a different angle */
@keyframes shuffleFan1 {
  0%   { transform: rotate(0deg)    translateX(0); }
  40%  { transform: rotate(-20deg)  translateX(-40px); }
  100% { transform: rotate(0deg)    translateX(0); }
}
@keyframes shuffleFan2 {
  0%   { transform: rotate(0deg)    translateX(0); }
  40%  { transform: rotate(-10deg)  translateX(-20px); }
  100% { transform: rotate(0deg)    translateX(0); }
}
@keyframes shuffleFan3 {
  0%   { transform: rotate(0deg)    translateX(0); }
  40%  { transform: rotate(0deg)    translateY(-15px); }
  100% { transform: rotate(0deg)    translateX(0); }
}
@keyframes shuffleFan4 {
  0%   { transform: rotate(0deg)    translateX(0); }
  40%  { transform: rotate(10deg)   translateX(20px); }
  100% { transform: rotate(0deg)    translateX(0); }
}
@keyframes shuffleFan5 {
  0%   { transform: rotate(0deg)    translateX(0); }
  40%  { transform: rotate(20deg)   translateX(40px); }
  100% { transform: rotate(0deg)    translateX(0); }
}

/* Shuffle label text */
.shuffle-label {
  position:   absolute;
  bottom:     -28px;
  color:      var(--color-accent-amber);
  font-size:  var(--font-size-small);
  white-space: nowrap;
}

/* --- Active confidence button state ---
   Previously an infinite pulsing glow (pulseGlow).
   Retired in favor of a calm static ring — continuous
   pulsing chrome reads as busier than iOS conventions
   typically allow for a simple "selected" state. */
.confidence-btn--active {
  box-shadow: 0 0 0 2px var(--tint-accent-strong);
}

/* =====================================================
   CARD SWIPE INTO DECK ANIMATION
   ADDED FOR: Organize Deck → Move Cards feature

   PURPOSE: Animates a floating card element flying
   from the current deck position across the screen
   and into the chosen destination deck.

   HOW IT WORKS:
   JavaScript (JS = JavaScript = the programming
   language that makes the app interactive) creates
   a temporary floating card element, positions it
   at the source location, then uses these keyframes
   (keyframes = rules that define what an element
   looks like at each point of an animation) to
   animate it flying to the destination deck card.

   The animation has three phases:
     0%   = Card starts at source position, full size
     60%  = Card arcs upward and across the screen
     100% = Card shrinks and fades into destination
   ===================================================== */

/* Main swipe arc animation.
   The actual start/end X (horizontal) and Y (vertical)
   positions are set dynamically by JS using the
   element's style.setProperty() calls, so the card
   always flies to exactly where the destination
   deck card is on screen regardless of scroll
   position or screen size.                          */
@keyframes cardSwipeIntoDeck {
  0% {
    transform:  scale(1) rotate(0deg);
    opacity:    1;
  }
  40% {
    /* Arc upward and slightly rotate mid-flight      */
    transform:  scale(0.85) rotate(-8deg)
                translateY(-40px);
    opacity:    1;
  }
  100% {
    /* Shrink and fade as it lands in the destination */
    transform:  scale(0.2) rotate(5deg);
    opacity:    0;
  }
}

/* The floating card element created by JS.
   position: fixed (fixed = stays in place relative
   to the browser window, not the page content) lets
   it fly across the full screen without being
   clipped (clipped = cut off by a parent element's
   overflow: hidden rule).                          */
.card-swipe-flycard {
  position:       fixed;
  /* Top and left are set by JS at runtime           */
  width:          80px;
  height:         110px;
  background:     var(--color-card-bg);
  border:         none;
  border-radius:  var(--border-radius-card);
  /* --border-radius-card = 16px                     */
  box-shadow:     var(--shadow-elevation-2);
  /* box-shadow = soft drop shadow for depth         */
  z-index:        9999;
  /* z-index: 9999 = sits above everything else on
     the screen including modals (modal = a popup
     overlay dialog box) during the animation       */
  pointer-events: none;
  /* pointer-events: none = the flying card cannot
     be accidentally clicked during animation       */

  /* The animation itself:
     0.45s = duration (slightly longer than the
     shuffle at 0.8s to feel deliberate but quick)
     ease-in = starts slow then accelerates, giving
     a natural card-throw feeling                   */
  animation:      cardSwipeIntoDeck 0.45s ease-in forwards;
  /* forwards = card stays in its final state (scaled
     down and invisible) after the animation ends,
     until JS removes the element from the DOM
     (DOM = Document Object Model = the browser's
     live map of all page elements)                 */
}

/* Optional card content shown on the flying card  */
.card-swipe-flycard__text {
  padding:     8px;
  font-size:   9px;
  color:       var(--color-text-secondary);
  /* --color-text-secondary = #cccccc light grey     */
  overflow:    hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  /* ellipsis (ellipsis = the "..." symbol) = text
     that is too long gets cut off with "..."        */
}