/* Autograph Landing Page - Self-Hosted Animations
 * Replaces Framer Motion runtime with CSS animations
 */

/* ===========================================
   Scroll-triggered fade-in animations
   =========================================== */

/* Initial hidden state for elements that fade in on scroll */
[data-framer-appear-id],
[style*="opacity:0.001"],
[style*="opacity: 0.001"] {
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Animated state when element is visible */
[data-framer-appear-id].is-visible,
.is-visible[style*="opacity:0.001"],
.is-visible[style*="opacity: 0.001"] {
  opacity: 1 !important;
  transform: none !important;
}

/* Stagger delays for hero section elements */
[data-framer-appear-id="x396uv"].is-visible {
  transition-delay: 0.8s; /* Subheader appears after hero title */
}

[data-framer-appear-id="uufjnc"].is-visible {
  transition-delay: 1s; /* Buttons appear after subheader */
}

/* Word-by-word animation for headings */
h2 span[style*="display:inline-block"] {
  opacity: 1;
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

h2 span[style*="display:inline-block"].is-visible {
  opacity: 1 !important;
  transform: none !important;
}

/* Stagger delays for word animations */
h2 span[style*="display:inline-block"]:nth-child(1) { transition-delay: 0s; }
h2 span[style*="display:inline-block"]:nth-child(2) { transition-delay: 0.1s; }
h2 span[style*="display:inline-block"]:nth-child(3) { transition-delay: 0.2s; }
h2 span[style*="display:inline-block"]:nth-child(4) { transition-delay: 0.3s; }
h2 span[style*="display:inline-block"]:nth-child(5) { transition-delay: 0.4s; }
h2 span[style*="display:inline-block"]:nth-child(6) { transition-delay: 0.5s; }

/* ===========================================
   Hero text rotation animation
   =========================================== */

@keyframes heroTextFlip {
  0% {
    opacity: 0;
    transform: rotateX(-90deg);
  }
  100% {
    opacity: 1;
    transform: rotateX(0deg);
  }
}

/* Hero rotating text - initial animation */
.framer-1nedghy-container span[style*="rotateX(-90deg)"] {
  animation: heroTextFlip 0.8s ease-out forwards;
  animation-delay: 0.3s;
}

/* Hero rotating text - transition for JS-driven cycling */
.framer-1nedghy-container span {
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

/* Make sure parent has perspective for 3D transforms */
.framer-1nedghy-container {
  perspective: 1200px;
}

/* ===========================================
   Mobile hamburger menu
   =========================================== */

/* Menu icon - three bars */
[data-framer-name="Icon"] {
  cursor: pointer;
}

/* Menu bar transitions */
[data-framer-name="Top"],
[data-framer-name="Bottom"] {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* When menu is open - animate to X */
.menu-open [data-framer-name="Icon"] [data-framer-name="Top"]:first-child {
  transform: translateY(4px) rotate(45deg);
}

.menu-open [data-framer-name="Icon"] [data-framer-name="Bottom"] {
  transform: translateY(-4px) rotate(-45deg);
}

.menu-open [data-framer-name="Icon"] > div:nth-child(2) {
  opacity: 0;
}

/* Mobile nav links */
[data-framer-name="links"] {
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.menu-open [data-framer-name="links"] {
  opacity: 1 !important;
}

.menu-open [data-framer-name="links"] > div {
  opacity: 1 !important;
}

/* Mobile overlay */
[data-framer-name="Overlay"] {
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.menu-open [data-framer-name="Overlay"] {
  opacity: 0.5 !important;
  pointer-events: auto;
}

/* ===========================================
   Testimonial carousel (simplified)
   =========================================== */

/* Make carousel navigation buttons visible */
.framer--slideshow-controls button {
  display: flex !important;
  pointer-events: auto !important;
}

/* ===========================================
   Logo marquee / infinite scroll
   =========================================== */

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/*
 * Note: Auto-marquee disabled to avoid hitting interactive carousels.
 * The logo slider content is static.
 * If marquee is desired, add a specific class like .logo-marquee to the element.
 */

/* ===========================================
   Button hover effects (already CSS, ensure they work)
   =========================================== */

.framer-edOlz {
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.framer-edOlz:hover {
  transform: translateY(-1px);
}

.framer-edOlz:active {
  transform: translateY(0);
}

/* ===========================================
   Utility: ensure sections are visible
   =========================================== */

/* Override any JS-set opacity:0 on section containers */
section[style*="opacity:0"],
section[style*="opacity: 0"] {
  opacity: 1 !important;
}

/* Ensure carousel section is visible */
.framer-khlo5-container section {
  opacity: 1 !important;
}