/* Page-specific styles for about.html
 * Contains styles for the logo player and button animations.
 * Brand colors are inherited from global-styles.css
 */

/* --- Animated Button Styles (from about_page_v3.html) --- */

@keyframes gradientBG-fast {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Default (un-toggled) button state */
.btn-animated {
    background-color: var(--color-main); /* Static color */
    background-image: none; /* No gradient */
    border: 2px solid transparent;
    transform: translateY(0);
    box-shadow: 0 5px 15px rgba(var(--color-main-rgb), 0.3); /* Deep shadow */
    transition: all 0.2s ease-out; /* Snappy press */
}

/* Toggled ("pushed in") button state */
.btn-animated[data-toggled="true"] {
    /* "Hot" gradient */
    background-image: linear-gradient(-45deg,
        #a05195, /* Magenta */
        #f95d6a, /* Coral */
        #ff7c43, /* Orange */
        #d45087);
    background-size: 400% 400%;
    animation: gradientBG-fast 8s ease infinite; /* Faster */
    box-shadow: 0 1px 2px rgba(var(--color-main-rgb), 0.2); /* "Pressed" shadow */
    transform: translateY(4px); /* Deeper "Pushed in" */
    border-color: rgba(255, 255, 255, 0.5);
}

/* Call to Action button (retains original gradient) */
.btn-cta-animated {
    background: linear-gradient(-45deg,
        var(--color-main),
        var(--color-second),
        var(--color-second-n2),
        var(--color-main));
    background-size: 400% 400%;
    animation: gradientBG-fast 15s ease infinite;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}
.btn-cta-animated:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(var(--color-main-rgb), 0.3);
}

/* --- Logo Player Styles --- */

/* Ensures the player box background/borders respect theme */
.player-box {
    background-color: var(--card-bg-color);
    border-color: var(--border-color);
}
.player-box h3 {
    background-color: var(--card-bg-color);
    border-color: var(--border-color);
}

/* Logo Preview Window */
#preview-window {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 350px; /* Give it a base height */
}

#preview-window svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    
    /* Smooth 200ms fade when animations swap */
    /* This masks the abrupt transition when loading new animations */
    /* Old animation fades out while new animation fades in simultaneously */
    transition: opacity 200ms ease-in-out;
}



.text-par {
  text-align: justify;
}

/* Styling the SVG path itself with our CSS variable */
#preview-window svg path {
    stroke: var(--logo-color, var(--color-second)) !important; /* Default to orange */
    transition: stroke 0.3s ease;
}

/* Custom color slider - Interactive gradient */
#colorSlider {
    -webkit-appearance: none;
    width: 100%;
    height: 16px; /* Increased height for better visibility */
    border-radius: 8px;
    /* Full gradient across the entire slider */
    background: linear-gradient(90deg, 
        #005C4B, #003f5c, #2f4b7c, #665191, #a05195,
        #d45087, #f95d6a, #ff7c43, #ffa600, #FFD17A, #FFFCF5);
    outline: none;
    opacity: 0.9;
    transition: opacity .2s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
#colorSlider:hover {
    opacity: 1;
}

/* Webkit (Chrome, Safari, Edge) slider thumb */
#colorSlider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--logo-color, var(--color-second));
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.1), 0 3px 8px rgba(0,0,0,0.3);
    cursor: pointer;
    transition: all 0.15s ease;
}

#colorSlider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.2), 0 4px 12px rgba(0,0,0,0.4);
}

/* Firefox slider thumb */
#colorSlider::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--logo-color, var(--color-second));
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.1), 0 3px 8px rgba(0,0,0,0.3);
    cursor: pointer;
    transition: all 0.15s ease;
}

#colorSlider::-moz-range-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.2), 0 4px 12px rgba(0,0,0,0.4);
}

/* Dark mode slider thumb - use dark border for contrast */
body.dark-mode #colorSlider {
    box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

body.dark-mode #colorSlider::-webkit-slider-thumb {
    border-color: var(--color-dark);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.1), 0 3px 8px rgba(0,0,0,0.5);
}

body.dark-mode #colorSlider::-moz-range-thumb {
    border-color: var(--color-dark);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.1), 0 3px 8px rgba(0,0,0,0.5);
}


/* --- Loading Indicator Styles --- */

@keyframes flash-colors {
    0%   { color: var(--color-second); }
    50%  { color: var(--color-second-n2); }
    100% { color: var(--color-second); }
}

.loading-text {
    display: none; /* Hidden by default */
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.1rem;
    font-weight: 600;
    z-index: 10;
    text-shadow: 0 0 10px rgba(0,0,0,0.5);
    animation: flash-colors 1.5s ease-in-out infinite;
}

/* Dark mode loading text is easier to see */
body.dark-mode .loading-text {
    text-shadow: none;
}


/* --- [NEW] Mobile-Specific Layout Overrides --- */

/* * This targets screens *smaller* than the 'md' breakpoint (768px).
 * This is where we create the merged box.
 */
@media (max-width: 767px) {

  /* 1. Create the merged, scrolling box */
  #mobile-merged-box {
    max-height: 90vh; /* Max height is 90% of the viewport */
    overflow-y: auto;   /* The box itself scrolls */
    overflow-x: hidden;

    /* These match the 'rounded-lg' and 'shadow-xl' from the player-box */
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

    /* We need to set a background and border for the merged box */
    background-color: var(--card-bg-color);
    border: 1px solid var(--border-color);
  }

  /* 2. Remove rounding and borders from the *children* */
  #interactive-box-controls {
    border-radius: 0;
    border: none;
    box-shadow: none;
  }

  #interactive-box-player {
    border-radius: 0;
    border: none;
    box-shadow: none;
  }

  /* 3. Make the player height responsive (this is the key) */
  .player-box {
    height: auto !important; /* Override inline 'h-[500px]' */
  }

  /* Make the SVG preview window a responsive square */
  #preview-window {
    aspect-ratio: 1 / 1;
    height: auto;
    min-height: 0; /* Override min-height */
  }

  /* 4. Disable sticky positioning on mobile */
  .sticky-container,
  .player-box {
    position: static;
    top: auto;
  }
}

/* * This targets screens *larger* than 'md' (768px and up).
 * We restore the 500px height for the desktop sticky player.
 */
@media (min-width: 768px) {
  .player-box {
    height: 500px;
  }
}

/* --- [NEW] Mobile-Specific Layout Overrides (v3) --- */

/* Targets screens *smaller* than 'md' breakpoint (767px) */
@media (max-width: 767px) {

  /* 1. Visually merge the Controls and Player boxes */
  .controls {
    /* Remove rounding and borders */
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-bottom-width: 0;
    box-shadow: none;
  }
  .player-box {
    /* Remove rounding and borders */
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top-width: 0;
    /* We only want shadow on the player box */
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

    /* Let the player height be automatic */
    height: auto !important;
  }

  /* 2. Make the player window a responsive square */
  #preview-window {
    aspect-ratio: 1 / 1;
    height: auto;
    min-height: 0;
  }

  /* 3. Disable sticky positioning on mobile */
  .sticky-container,
  .player-box {
    position: static;
    top: auto;
  }

  /* 4. [NEW] Make buttons smaller on mobile */
  #button-grid .btn-animated {
    font-size: 1rem; /* 16px, down from 1.125rem */
    padding: 0.75rem; /* p-3, down from p-4 */
  }
}

/* --- [NEW] Desktop Layout Restoration --- */

/* Restore desktop player height and sticky behavior */
@media (min-width: 768px) {

  .player-box {
    height: 500px;
    /* Restore rounding */
    border-radius: 0.5rem; /* rounded-lg */
  }

  .controls {
    /* Restore rounding */
    border-radius: 0.5rem; /* rounded-lg */
  }

  .sticky-container {
    position: sticky;
    top: 3rem; /* 12 * 0.25rem = 3rem */
  }

  /* Restore desktop button sizes */
  #button-grid .btn-animated {
    font-size: 1.125rem; /* text-lg */
    padding: 1rem; /* p-4 */
  }
}