/* -------------------------------
   HERO SECTION
--------------------------------- */
.hero-section {
  position: relative;
  height: 100vh;
  background: #000;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* -------------------------------
   PROTRACTOR — fully opaque
--------------------------------- */
.protractor-wrapper {
  position: absolute;
  left: 50%;              /* center horizontally */
  top: 50%;               /* center vertically */
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;   /* user cannot interact */
}

.protractor-bg {
  width: 1200px;
  height: auto;

  opacity: 0;             /* start hidden */
  filter: invert(1) brightness(1.2);
  transform: scale(1);

  animation: 
    fadeInCCW 3s cubic-bezier(0.645,0.045,0.355,1) forwards,
    rotateCCW 120s linear infinite;

  animation-delay: 2s, 2s;
  will-change: transform, opacity;
}

/* Fade-in with full opacity */
@keyframes fadeInCCW {
  0% {
    opacity: 0;
    transform: scale(0.95) rotate(0deg);
  }
  100% {
    opacity: 1;             /* fully opaque */
    transform: scale(1.05) rotate(-5deg); /* slight CCW tilt */
  }
}

/* Continuous slow counter-clockwise rotation */
@keyframes rotateCCW {
  from { transform: rotate(-5deg) scale(1.05); }
  to   { transform: rotate(-365deg) scale(1.05); } /* full 360° CCW */
}

/* -------------------------------
   SPARROW FILL — GIF ANIMATED TEXT
--------------------------------- */
.sparrow-fill {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: clamp(40px, 8vw, 60px); /* responsive font size */
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 4px;

  /* Animated GIF inside letters */
  color: transparent; /* required for background-clip text */
  background: url('/userdocs/images/animations/fontanimation.gif') center/cover no-repeat;
  -webkit-background-clip: text; /* Chrome, Safari */
  background-clip: text; /* Firefox support in latest versions */

  /* Glow / stroke */
  text-shadow: 
    0 0 20px rgba(224, 73, 73, 0.568),
    0 0 40px rgba(246, 54, 54, 0.4),
    0 0 60px rgba(255, 97, 0, 0.3);

  /* Center / vertical stretch */
  display: inline-block;
  transform: scale(0.95) scaleY(1.3); /* vertical stretch */
  opacity: 0; /* initial hidden state */

  /* Animation timeline */
  animation: 
    titleFadeIn 3s cubic-bezier(0.645,0.045,0.355,1) forwards,
    titleFadeOut 2s ease forwards;
  animation-delay: 0s, 10s;
}

/* Fade in/out keyframes */
@keyframes titleFadeIn {
  0% { opacity: 0; transform: scale(0.95) scaleY(1.3); }
  100% { opacity: 1; transform: scale(1) scaleY(1.3); }
}

@keyframes titleFadeOut {
  to { opacity: 0; transform: scale(1) scaleY(1.3); }
}

/* Small screen adjustments */
@media (max-width: 480px) {
  .sparrow-fill {
    font-size: clamp(30px, 10vw, 50px);
    letter-spacing: 2px;
  }
}

/* -------------------------------
   TAGLINE
--------------------------------- */
.tagline {
  margin-top: 20px;
  color: #fff;
  opacity: 0;
  white-space: nowrap;
  overflow: hidden;
  width: 0;
  text-shadow: 2px 2px 1px #000;

  font-family: "Playwrite CU Guides", cursive;
  font-size: 1.1rem;

  animation: taglineType 2.5s steps(40) forwards,
             taglineFadeOut 2s ease forwards;

  animation-delay: 3s, 10s; /* typewriter starts 3s, fade out 10s */
}

@keyframes taglineType {
  to { width: 100%; opacity: 1; }
}

@keyframes taglineFadeOut {
  to { opacity: 0; }
}

/* -------------------------------
   FINAL LOGO — CROSSFADE + GLOW
--------------------------------- */
.sparrow-final {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: clamp(80px, 12vw, 112px); /* responsive font */
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 4px;

  color: #ccc;

  text-shadow: 
    0 0 20px rgba(61, 232, 77, 0.6),
    0 0 40px rgba(246, 54, 54, 0.4),
    0 0 60px rgba(255, 97, 0, 0.3);

  /* Center in viewport */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scaleY(1.3); /* vertical stretch */

  opacity: 0; /* fade-in will handle visibility */
  transition: opacity 1s ease;

  /* Animation timeline */
  animation: finalLogoFadeIn 2s cubic-bezier(0.645,0.045,0.355,1) forwards;
  animation-delay: 13s; /* adjust so it shows after hero crossfade */
}

/* Keyframes for final logo fade-in + scale */
@keyframes finalLogoFadeIn {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.95) scaleY(1.3); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1) scaleY(1.3); }
}

/* Optional fine-tune for very small screens */
@media (max-width: 400px) {
  .sparrow-final {
    font-size: 65px; /* ensures text doesn’t get too big */
    letter-spacing: 3px; /* optional tighter spacing */
  }
}

/* -------------------------------
   DOWN ARROW
--------------------------------- */
.down-arrow {
  opacity: 0;
  font-size: 2rem;
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  color: #ccc;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 3;

  /* Fade + bounce */
  animation: arrowFadeIn 1s cubic-bezier(0.645,0.045,0.355,1) forwards,
             arrowBounce 2s ease-in-out infinite;
  animation-delay: 15s, 15s; /* starts after final logo is fully visible */
}

@keyframes arrowFadeIn {
  to { opacity: 1; }
}

@keyframes arrowBounce {
  0%,100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(6px); }
}