@font-face {
  font-family: 'Ruigslay';
  src: url('./fonts/Ruigslay.ttf') format('truetype'),
       url('./fonts/Ruigslay.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Ethereal Havena';
  src: url('./fonts/Ethereal Havena DEMO.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: 'Crimson Text', serif;
  overflow-x: hidden; /* Prevent horizontal scrolling */
  overflow-y: hidden; /* Prevent vertical scrolling*/
  background-color: #EEEEEE; /* Light gray background in light mode */
}

/* Title styling with Ruigslay font */
h1 {
  font-family: 'Ruigslay', 'Crimson Text', serif;
  text-align: center;
  font-size: 1.75rem !important;
  line-height: 1.2 !important;
  color: #1f2732 !important; /* Dark gray*/
}

/* Desktop sizing - 50% bigger and vertically centered */
@media (min-width: 769px) {
  h1 {
    font-size: 2.625rem !important; /* 1.75rem * 1.5 */
  }
  
  #generate-btn {
    width: 150px; /* 100px * 1.5 */
    height: 150px; /* 100px * 1.5 */
    min-width: 150px;
  }
  
  #generate-btn .btn-text {
    font-size: 1.6rem !important; /* 1.2rem * 1.5 */
  }
  
  label[for="childs-mode-toggle"] {
    font-size: 1.8rem !important; /* 1.2rem * 1.5 */
  }
  
  #phrase-output {
    font-size: 1.5rem !important; /* Base size * 1.5 */
    line-height: 1.4 !important;
  }
  
  /* Push content down slightly on desktop */
  .flex.flex-col.items-center.justify-start {
    padding-top: 8rem !important; /* More padding than mobile's 4rem (pt-16) */
  }
}

/* Mobile adjustments for title */
@media (max-width: 768px) {
  h1 {
    font-size: 2.3rem !important;
    line-height: 1.3 !important;
  }
}

/* Button text styling with Ruigslay font */
#generate-btn .btn-text {
  font-size: 1.2rem !important;
  font-family: 'Ruigslay', 'Crimson Text', serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding-top: 2px;
  line-height: 1.2 !important;
}

/* Ethereal Havena font for specific elements */
label[for="childs-mode-toggle"] {
  font-size: 1.2rem !important;
  padding-top: 2px;
  font-family: 'Ethereal Havena', 'Crimson Text', serif;
  transition: color 0.3s ease;
}

/* Pink text when child's mode is active */
.childs-mode label[for="childs-mode-toggle"] {
  color: #ec4899 !important; /* pink-500 */
}

/* GO button text with Ethereal Havena when ready */
#generate-btn.ready .btn-text {
  font-family: 'Ethereal Havena', 'Crimson Text', serif;
}

/* Mobile button text size and child's mode text */
@media (max-width: 768px) {
  #generate-btn .btn-text {
    font-size: 1.6rem !important;
  }
  
  label[for="childs-mode-toggle"] {
    font-size: 1.3rem !important;
  }
  
  #phrase-output {
    font-size: 1.5rem !important;
    line-height: 1.4 !important;
  }
  
  /* #generate-btn {
    width: 140px;
    height: 100px;
    min-width: 140px; */
  }
}

/* Navigation Button */
.nav-icon {
  position: fixed !important;
  top: 20px !important;
  right: 20px !important;
  font-size: 2rem !important;
  cursor: pointer !important;
  z-index: 1000 !important;
  user-select: none;
  transition: transform 0.2s ease;
}


.nav-icon:hover {
  transform: scale(1.05);
}



/* Prevent all scrolling on all elements */
html {
  overflow: hidden;
}

/* Ensure mobile viewport doesn't allow scrolling */
@media (max-width: 768px) {
  body, html {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
  }
}

/* Styles for the button fill-up mechanic */
#generate-btn {
  position: relative;
  overflow: hidden;
  /* Base background transparent */
  background-color: transparent;
  transition: background-color 0.3s ease;
  cursor: default; /* Default cursor during loading */
  border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; /* Organic blob shape */
  width: 100px;
  height: 100px;
  min-width: 100px; /* Override any width constraints */
  animation: wiggle 8s ease-in-out infinite;
  will-change: border-radius; /* Hint to browser for optimization */
}

#generate-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(var(--fill-scale, 0));
  width: 100%;
  height: 100%;
  background-color: #1f2732; /* Same as title color */
  border-radius: inherit; /* Match the button's organic shape */
  transition: none; /* No transition by default */
}

#generate-btn.filling::before {
  transition: transform 0.3s ease-out; /* Smooth animation when filling */
}

#generate-btn .btn-text {
    position: relative; /* Ensures text stays on top of the fill */
    z-index: 1;
}

/* Button states */
#generate-btn.filling {
  background-color: transparent; /* No background while filling */
  border: none; /* No border while filling */
}

#generate-btn.filling .btn-text {
  color: #9ca3af; /* light grey while filling */
}

#generate-btn.ready::before {
  background-color: #1f2732; /* Same as title color */
}

#generate-btn.ready .btn-text {
  color: white; /* white when ready */
}

#generate-btn.ready {
  cursor: pointer; /* Pointer cursor only when ready (showing "GO") */
  position: relative;
  overflow: hidden;
  border: 4px solid #E9E9E9; /* Light mode: light gray border */
  transform: scale(1.08); /* Slightly bigger when ready */
}

/* Dark mode button border */
.dark #generate-btn.ready {
  border: 4px solid #303030; /* Dark mode: gray border */
}

/* Shimmer effect for ready button */
#generate-btn.ready::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -100%;
  width: 120%;
  height: 200%;
  background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  animation: shimmer 4s infinite;
}

/* Dark mode shimmer - darker color for visibility on white button */
.dark #generate-btn::after {
  background: linear-gradient(45deg, transparent, rgba(0, 0, 0, 0.05), transparent);
}

@keyframes shimmer {
  0% { left: -120%; }
  20% { left: 120%; }
  100% { left: 120%; }
}

/* Organic wiggle animation */
@keyframes wiggle {
  0%, 100% { 
    border-radius: 58% 42% 56% 44% / 52% 48% 50% 48%;
  }
  25% { 
    border-radius: 45% 55% 60% 40% / 48% 52% 46% 54%;
  }
  50% { 
    border-radius: 55% 45% 42% 58% / 54% 46% 52% 48%;
  }
  75% { 
    border-radius: 42% 58% 48% 52% / 46% 54% 48% 52%;
  }
}


/* Child's mode styling - pink when enabled */
.childs-mode #generate-btn.ready::before {
  background-color: #ec4899; /* pink-500 - make the fill pink when child's mode is on */
}

.childs-mode #generate-btn.ready .btn-text {
  color: white !important; /* white text in child's mode (both light and dark) */
}

/* Child's mode filling bubble - pink while loading */
.childs-mode #generate-btn::before {
  background-color: #ec4899 !important; /* pink-500 - same as ready button in child's mode */
}

/* Child's mode filling bubble in dark mode - also pink */
.dark.childs-mode #generate-btn::before {
  background-color: #ec4899 !important; /* pink-500 - override dark mode white with pink */
}

/* Mute button styles */
#mute-btn.muted #mute-icon {
  opacity: 0.25; /*faded when muted */
  filter: grayscale(100%);
}

/* Wiggle animation for when music is playing */
@keyframes subtle-wiggle {
  0%, 50% { transform: rotate(6deg); }
  51%, 100% { transform: rotate(-6deg); }
}

#mute-btn.playing #mute-icon {
  animation: subtle-wiggle .932s steps(2, end) infinite;
}

/* Copy button styles */
#copy-btn {
  background-color: transparent !important;
}

#copy-btn:hover,
#copy-btn:focus,
#copy-btn:active {
  background-color: transparent !important;
  outline: none;
}

@media (max-width: 639px) {
  #toast {
    margin-top: -.2rem; /* Move toast even higher on mobile */
  }
}

/* Dark mode styles */
.dark {
  background-color: #060b11 !important; /* gray-800 */
  color: #f9fafb !important; /* gray-50 */
  transition: none !important;
}

.dark * {
  transition: none !important;
}

/* Disable transitions for instant dark mode switching, but allow progress bar animation */
.dark .text-gray-900,
.dark .text-black,
.dark .text-gray-600,
.dark .bg-gray-100,
.dark .bg-gray-200,
.dark .bg-gray-300,
.dark .border-gray-300,
.dark .text-gray-400,
.dark .bg-blue-500,
.dark .bg-blue-600,
.dark #generate-btn,
.dark #generate-btn.ready {
  transition: none !important;
}

/* Keep smooth transitions for progress bar and other animations */
#generate-btn::before {
  transition: transform 0.3s ease-out !important; /* Smooth progress bar fill */
}

#generate-btn.filling::before {
  transition: transform 0.3s ease-out !important; /* Smooth progress bar fill */
}

/* Ensure filling animation works in dark mode too */
.dark #generate-btn.filling::before {
  transition: transform 0.3s ease-out !important; /* Override dark mode transition disable */
}

/* Disable transitions during reset (when no classes are present) */
#generate-btn:not(.filling):not(.ready)::before {
  transition: none !important; /* No animation when resetting to empty */
}

.dark .text-gray-900,
.dark .text-black {
  color: #f9fafb !important; /* gray-50 */
}

.dark .text-gray-600 {
  color: #d1d5db !important; /* gray-300 */
}

.dark .bg-gray-100 {
  background-color: #1f2937 !important; /* gray-800 */
}

.dark .bg-gray-200 {
  background-color: #374151 !important; /* gray-700 */
}

.dark .bg-gray-300 {
  background-color: #4b5563 !important; /* gray-600 */
}

.dark .border-gray-300 {
  border-color: #4b5563 !important; /* gray-600 */
}

.dark .text-gray-400 {
  color: #9ca3af !important; /* gray-400 */
}

.dark .bg-blue-500 {
  background-color: #3b82f6 !important; /* Keep blue button in dark mode */
}

.dark .bg-blue-600 {
  background-color: #2563eb !important; /* Keep darker blue for hover */
}

/* Dark mode progress bar - transparent background, light grey fill */
.dark #generate-btn {
  background-color: transparent !important; /* transparent background */
}

.dark #generate-btn::before {
  background-color: #ffffff !important; /* white - same as ready button in dark mode */
}

/* GO button white with dark gray text in dark mode when ready */
.dark #generate-btn.ready {
  background-color: #ffffff !important; /* white background when ready */
}

.dark #generate-btn.ready::before {
  background-color: #ffffff !important; /* white fill when ready */
}

.dark #generate-btn.ready .btn-text {
  color: #374151 !important; /* black text when ready */
}

/* Child's mode styling in dark mode - pink when enabled */
.dark.childs-mode #generate-btn.ready::before {
  background-color: #ec4899 !important; /* pink-500 - pink fill when child's mode is on */
}

.dark.childs-mode #generate-btn.ready .btn-text {
  color: white !important; /* white text in dark child's mode */
}