/**
 * THE DESIGNERS REPUBLIC™ / RAY SYSTEM — MICRO-ANIMATION SUITE
 * Responsive kinetic tactile micro-interactions across all application states.
 * Scoped, zero-dependency, ultra-lightweight CSS.
 */

/* ==========================================================================
   0. SCREEN-STATE DYNAMIC ENTRANCE
   ========================================================================== */
.screen-state.active {
  display: flex !important;
  animation: tdrStateSlideUp 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes tdrStateSlideUp {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   1. STATE A: IDLE / ENTRY SCREEN
   ========================================================================== */
/* Living Breathing 404 Display Typography */
.title-404 {
  animation: tdrTitleBreathe 4.2s ease-in-out infinite alternate;
  will-change: letter-spacing, text-shadow;
}

@keyframes tdrTitleBreathe {
  0% {
    letter-spacing: -0.06em;
    text-shadow: 0 0 0 transparent;
  }
  50% {
    letter-spacing: -0.04em;
    text-shadow: 0 0 28px rgba(124, 86, 246, 0.4), 0 0 2px rgba(252, 252, 252, 0.8);
  }
  100% {
    letter-spacing: -0.055em;
    text-shadow: 0 0 14px rgba(171, 250, 79, 0.25);
  }
}

/* Sub-title subtle drift */
.title-visa {
  animation: tdrVisaDrift 4.2s ease-in-out infinite alternate;
}

@keyframes tdrVisaDrift {
  0% { opacity: 0.95; transform: translateX(0); }
  100% { opacity: 1; transform: translateX(1.5px); }
}

/* Living Fuchsia Glitch Laser Sweep */
.living-glitch {
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 12px rgba(234, 69, 145, 0.5);
}

.living-glitch::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 24px;
  background: linear-gradient(90deg, transparent, #FFFFFF, transparent);
  animation: tdrGlitchBeam 2.8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

@keyframes tdrGlitchBeam {
  0%, 15% { transform: translateX(-30px); opacity: 0; }
  35% { opacity: 1; }
  55%, 100% { transform: translateX(85px); opacity: 0; }
}

/* State A Primary Action Button: Neon Beacon Pulse */
#btn-take-portrait.btn-lime {
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(171, 250, 79, 0.35);
  animation: tdrLimeBeacon 2.6s ease-in-out infinite;
  transition: transform 0.14s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
}

@keyframes tdrLimeBeacon {
  0%, 100% {
    box-shadow: 0 4px 18px rgba(171, 250, 79, 0.35);
  }
  50% {
    box-shadow: 0 6px 28px rgba(171, 250, 79, 0.65), 0 0 0 2px rgba(171, 250, 79, 0.3);
  }
}

#btn-take-portrait.btn-lime:active {
  transform: scale(0.965);
}

/* Secondary Button Tactility */
#btn-choose-photos {
  transition: transform 0.14s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease, background-color 0.2s ease;
}

#btn-choose-photos:hover {
  border-color: rgba(255, 255, 255, 0.6);
  background-color: rgba(255, 255, 255, 0.08);
}

#btn-choose-photos:active {
  transform: scale(0.965);
}

/* Metadata Tag Beacon Dot */
.tag-meta {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tag-meta::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-lime);
  box-shadow: 0 0 8px var(--color-lime);
  animation: tdrBeaconDot 1.6s infinite ease-in-out;
}

@keyframes tdrBeaconDot {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.15); box-shadow: 0 0 12px var(--color-lime); }
}

/* ==========================================================================
   2. STATE B: CROP & VIEWPORT CALIBRATION
   ========================================================================== */
/* Viewfinder Corner Reticle Brackets */
.crop-box {
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.crop-box:hover,
.crop-box:active {
  border-color: var(--color-lime);
  box-shadow: 0 0 20px rgba(171, 250, 79, 0.2);
}

/* Tactile Dither Mode Toggles */
.toggle-btn {
  transition: transform 0.12s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.2s ease;
  position: relative;
}

.toggle-btn:hover {
  border-color: rgba(255, 255, 255, 0.25);
}

.toggle-btn:active {
  transform: scale(0.95);
}

.toggle-btn.active {
  border-color: var(--color-lime) !important;
  background-color: rgba(171, 250, 79, 0.1) !important;
  box-shadow: 0 0 16px rgba(171, 250, 79, 0.2), inset 0 0 0 1px var(--color-lime);
}

.toggle-btn.active .toggle-name {
  color: var(--color-lime);
  text-shadow: 0 0 8px rgba(171, 250, 79, 0.4);
}

/* Range Slider Dynamic Thumb Interaction */
.range-slider {
  transition: opacity 0.2s ease;
}

.range-slider::-webkit-slider-thumb {
  transition: transform 0.14s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s ease;
  cursor: grab;
}

.range-slider:active::-webkit-slider-thumb {
  transform: scale(1.22);
  box-shadow: 0 0 14px var(--color-lime), 0 0 0 2px rgba(171, 250, 79, 0.4);
  cursor: grabbing;
}

/* ==========================================================================
   3. STATE C: DETAILS & POETIC ASSIGNMENT
   ========================================================================== */
/* Inspire Shuffle Button Kinetic Twist */
.shuffle-btn {
  transition: transform 0.16s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.18s ease,
              border-color 0.18s ease,
              color 0.18s ease,
              box-shadow 0.18s ease;
}

.shuffle-btn:hover {
  background-color: rgba(171, 250, 79, 0.18);
  border-color: var(--color-lime);
  box-shadow: 0 0 12px rgba(171, 250, 79, 0.35);
  transform: translateY(-1px);
}

.shuffle-btn:active {
  transform: scale(0.92) rotate(45deg);
}

/* Electric Focus States for Text Inputs */
.text-input {
  transition: border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.2s ease,
              transform 0.12s ease;
}

.text-input:focus {
  border-color: var(--color-lime) !important;
  box-shadow: 0 0 0 1px var(--color-lime), 0 0 20px rgba(171, 250, 79, 0.24) !important;
  background-color: rgba(171, 250, 79, 0.035) !important;
  transform: translateY(-1px);
}

/* Primary Issue Entry Button: High-Voltage Call-to-Action */
#btn-issue-entry.btn-lime {
  animation: tdrIssueReady 2.2s infinite ease-in-out;
  transition: transform 0.14s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
}

@keyframes tdrIssueReady {
  0%, 100% {
    box-shadow: 0 4px 18px rgba(171, 250, 79, 0.35);
  }
  50% {
    box-shadow: 0 6px 30px rgba(171, 250, 79, 0.7), 0 0 16px rgba(124, 86, 246, 0.4);
  }
}

#btn-issue-entry.btn-lime:active {
  transform: scale(0.965);
}

/* ==========================================================================
   4. STATE D: ISSUED VISA & EXPORT SUITE
   ========================================================================== */
/* Card Entrance Lift */
.preview-card-wrap:not(.hidden) {
  animation: tdrCardLift 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes tdrCardLift {
  0% {
    opacity: 0;
    transform: translateY(16px) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1.0);
  }
}

/* Tactile Preview Selector Tabs */
.view-tab {
  position: relative;
  transition: transform 0.14s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.2s ease,
              background-color 0.2s ease,
              box-shadow 0.2s ease;
}

.view-tab:active {
  transform: scale(0.96);
}

.view-tab.active {
  border-color: var(--color-lime) !important;
  background-color: rgba(171, 250, 79, 0.1) !important;
  box-shadow: 0 0 18px rgba(171, 250, 79, 0.25), inset 0 0 0 1px var(--color-lime);
}

.view-tab.active .tab-main {
  text-shadow: 0 0 8px rgba(171, 250, 79, 0.35);
}

/* Export Buttons Tactility & Icon Micro-Nudge */
.export-buttons-grid .btn {
  position: relative;
  transition: transform 0.14s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.2s ease,
              background-color 0.2s ease;
}

.export-buttons-grid .btn svg {
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.export-buttons-grid .btn:hover svg {
  transform: translateY(-2px);
}

.export-buttons-grid .btn:active {
  transform: scale(0.965);
}

/* Replay Ritual Button Tactile Feedback */
#btn-replay-ritual {
  transition: color 0.2s ease, transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

#btn-replay-ritual:hover {
  color: var(--color-lime) !important;
  transform: translateY(-1px);
}

#btn-replay-ritual:active {
  transform: scale(0.92) rotate(-30deg);
}

/* Issue Another Button Tactility */
#btn-new-visa {
  transition: transform 0.14s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.2s ease,
              background-color 0.2s ease;
}

#btn-new-visa:hover {
  border-color: rgba(255, 255, 255, 0.35);
  background-color: rgba(255, 255, 255, 0.05);
}

#btn-new-visa:active {
  transform: scale(0.97);
}