/* css/loading-button.css */

.loading-btn-container {
    position: relative;
    width: 250px;
    height: 60px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.5s ease-in;
    margin-top: 5px;
}

/* Hide the original button, we just use its container for interaction */
.loading-btn-container .loading-btn-original {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0; /* Make it invisible */
    border: none;
    background: transparent;
    cursor: pointer;
    z-index: 10;
    pointer-events: none; /* Disabled until ready */
}

.loading-btn-container svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* SVG doesn't capture clicks */
}

/* The main geometric outline */
.loading-btn-container .shape {
    fill: transparent;
    stroke-width: 3px;
    stroke: hsl(108, 70%, 30%);
    stroke-dasharray: 525; /* Total length of the path */
    stroke-dashoffset: 525;
    transition: stroke 0.5s ease;
}

/* The inner decorative lines */
.loading-btn-container .deco-line {
    fill: none;
    stroke-width: 1px;
    stroke: hsl(108, 70%, 30%, 0.5);
    stroke-dasharray: 180; /* Length of the decorative lines */
    stroke-dashoffset: 180;
    transition: stroke 0.5s ease;
}

.loading-btn-container .btn-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Orbitron', sans-serif;
    font-size: 1.1rem;
    color: hsl(108, 70%, 50%);
    opacity: 0;
    transition: opacity 0.3s ease 0.8s, color 0.5s ease;
    letter-spacing: 1px;
    pointer-events: none;
}

/* --- ANIMATION START --- */
.loading-btn-container.unfolding .shape {
    /* Animation: draw the shape over 4.5 seconds to sync with text completion */
    animation: draw-shape 4.5s ease-out forwards;
}

.loading-btn-container.unfolding .deco-line-1 {
    animation: draw-deco 2s ease-out 1.5s forwards;
}
.loading-btn-container.unfolding .deco-line-2 {
    animation: draw-deco 2s ease-out 2s forwards;
}

.loading-btn-container.unfolding .btn-text {
    /* Fade in text after shape is mostly drawn, completing around when text finishes */
    animation: fade-in-text 1s ease-in 3.5s forwards;
}


@keyframes draw-shape {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes draw-deco {
     to {
        stroke-dashoffset: 0;
    }
}

@keyframes fade-in-text {
    to {
        opacity: 1;
    }
}


/* --- READY STATE --- */
.loading-btn-container.ready .loading-btn-original {
    pointer-events: auto; /* Make button clickable */
}

.loading-btn-container.ready .shape,
.loading-btn-container.ready .deco-line {
    stroke: hsl(108, 90%, 60%);
}

.loading-btn-container.ready .btn-text {
    color: hsl(108, 100%, 85%);
}

/* The final glow animation */
.loading-btn-container.ready svg {
    filter: drop-shadow(0 0 5px hsl(108, 90%, 60%));
    animation: pulse-glow 2s infinite ease-in-out;
    transition: filter 0.5s ease-out;
}

.loading-btn-container.ready .btn-text {
     text-shadow: 0 0 15px hsl(108, 90%, 60%);
}

.loading-btn-container.ready:hover .shape,
.loading-btn-container.ready:hover .deco-line {
    stroke: hsl(108, 100%, 85%);
}
.loading-btn-container.ready:hover .btn-text {
    color: #fff;
}


@keyframes pulse-glow {
    0%, 100% {
        filter: drop-shadow(0 0 8px hsl(108, 90%, 60%)); /* Increased base glow */
    }
    50% {
        filter: drop-shadow(0 0 30px hsl(108, 90%, 75%)); /* Increased pulse glow and brightness */
    }
}

/* Smooth fade & slide animations */
.fade-out {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Scope everything to the loading overlay only */
#loadingScreen #loadingContentWrapper{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  min-height:100vh;
  gap:16px;
  max-width:min(900px, 92vw);
  margin-inline:auto;
}

/* Only the two swapped sections get these transitions */
#loadingScreen #animatedLoadingButtonContainer,
#loadingScreen #requestingAccessScreen{
  opacity:0;
  transform:translateY(20px);
  transition:opacity 0.8s ease, transform 0.8s ease;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:100%;
  gap:16px;
}

/* Rename to avoid collisions with any site-wide .visible */
#loadingScreen .ls-visible{
  opacity:1 !important;
  transform:translateY(0) !important;
}

/* Keep the egg + tweet centered only in this screen */
#loadingScreen .visual-content-wrapper{
  display:grid;
  place-items:center;
  grid-auto-flow:row;
  gap:18px;
  width:100%;
  max-width:900px;
  margin:0 auto;
}

#loadingScreen #miniEggContainer{
  display:grid;
  place-items:center;
  width:clamp(220px, 28vw, 360px);
  aspect-ratio:1/1;
  margin:0 auto;
}

#loadingScreen #tweetCardContainer{
  max-width:min(560px, 90vw);
  margin:0 auto;
}

/* Text for just the requesting flow: stop justification weirdness */
#loadingScreen .requesting-text{
  opacity:0;                    /* your fade still works */
  transition:opacity 0.5s ease; /* keep the smooth swap */
  color:var(--text-bright);
  font-size:1.1rem;
  text-align:center;            /* force off 'justify' if any */
  text-align-last:center;
  text-wrap:balance;
  min-height:1.6em;             /* reserves space so swaps don't jump */
  width:min(720px, 92vw);
  margin:20px auto 0;
  text-shadow:0 0 8px var(--primary-green-glow);
}

@media (max-width:520px){
  #loadingScreen .visual-content-wrapper{ gap:12px; }
  #loadingScreen #miniEggContainer{ width:min(78vw, 360px); }
}