/* Reglas del hero de produccion (cherry-pick de overrides.css) */

/* ========= CRITICAL: Remove ALL Webflow template badges/popups ========= */
/* These MUST be hidden regardless of how Webflow injects them */
.w-webflow-badge,
.w-webflow-branding,
.page-popups-wrapper,
.buy-template-popup,
.all-templates-popup,
[class*="template-popup"],
[class*="buy-template"],
a[href*="webflow.com/templates"],
a[href*="zoyaqib.com"],
div:has(> a[href*="webflow.com/templates"]) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  left: -9999px !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Hide any element containing "Buy now for $29" or "See more by Zoya" text */
/* These are injected by Webflow scripts */
.popup-logo,
.popup-text,
[class*="popup-"] {
  display: none !important;
}



/* --- Hero Video Fixes --- */

/* 1. Style the videos with correct aspect ratio and rounded corners */
.hero-images-grid video {
  width: 100%;
  height: auto !important;
  /* Aspect ratio controls the height */
  aspect-ratio: 9 / 16;
  object-fit: contain !important;
  background: #000;
  /* neat letterboxing when needed */
  border-radius: 32px !important;
  display: block;
}

/* 2. Make ONLY the HERO mobile mockup clip the scrolling videos behind it */
.hero-section .mobile-mockup-inner {
  overflow: hidden !important;
  /* This clips videos AND UI image to only show inside the phone */
  border-radius: 50px !important;
  position: relative !important;
  /* Needed for absolute positioning of children */
  /* Keep Webflow's original positioning - DON'T override z-index */
}

/* 3. Keep video grid settings close to original Webflow CSS */
.hero-images-grid {
  /* DON'T override z-index - let Webflow handle it */
  /* DON'T override positioning - Webflow's scroll animation needs it */
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr !important;
  /* 5 columns like original */
  grid-column-gap: 1.25vw !important;
  grid-row-gap: 1.25vw !important;
}

/* Responsive behavior matching original template */
@media (max-width: 991px) {
  .hero-images-grid {
    grid-column-gap: 10px !important;
    grid-row-gap: 10px !important;
    /* Let Webflow handle the layout change to flex on mobile */
  }

  .hero-section .mobile-mockup-inner {
    width: 200px !important;
    /* Match original mobile width */
  }
}

/* 4. Fix z-index hierarchy */
.mobile-frame {
  z-index: 3;
  position: relative;
}

/* Hide ONLY the dark placeholder background (mobile-bg) */
/* Keep mobile-image-bg visible - it shows the app UI */
.hero-section .mobile-bg {
  display: none !important;
}

/* CTA section: hide the dark placeholder background */
.cta-section .mobile-bg {
  display: none !important;
}

/* Position the app UI image INSIDE the phone mockup, aligned to bottom */
.hero-section .mobile-image-bg {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-height: 100% !important;
  /* Ensure it doesn't overflow */
  object-fit: contain !important;
  z-index: 2 !important;
  /* Above videos but below frame */
}

.hero-section .bottom-gradient {
  position: relative;
  z-index: 1;
  pointer-events: none;
}

/* The "High-performing ad creative" text - let Webflow's original CSS handle it (z-index: 0 in original) */

/* Ensure the top heading and CTA button are above the mockup */
.heading-wrapper,
.large-button-block {
  position: relative;
  z-index: 10 !important;
}

/* Hide the phone-video that was inserted by JS - we don't need it */
/* The videos in the grid behind the mockup are what should be visible */
.phone-video {
  display: none !important;
}

/* Fix videos in phone mockups to fill without black bars */
.feature-mockup-inner video.mobile-image-bg,
.mobile-mockup-inner video.mobile-image-bg {
  object-fit: cover !important;
  transform: scale(1.02) !important;
  border-radius: 32px !important;
}



/* Prevent mid-phrase overlap under phone */
.absolute-heading-wrapper .home-h1 {
  white-space: normal;
}

/* Hero rotator: remove decorative dash and avoid clipping/truncation */
.hero-title-bottom-1,
.hero-title-bottom-2,
.hero-title-bottom-3,
.hero-title-bottom-1 *,
.hero-title-bottom-2 *,
.hero-title-bottom-3 * {
  white-space: nowrap;
  -webkit-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
  word-break: keep-all;
}

.hero-title-bottom-1::after,
.hero-title-bottom-2::after,
.hero-title-bottom-3::after {
  content: none !important;
}

.hero-title-bottom-wrapper {
  overflow: hidden;
  white-space: nowrap;
}

.hero-title-bottom-1,
.hero-title-bottom-2,
.hero-title-bottom-3 {
  padding-right: 0.2em;
  box-sizing: content-box;
}

/* Ensure Webflow badge stays hidden (safe duplicate) */
.w-webflow-badge,
.w-webflow-branding,
a[href*="webflow.com"][class*="badge"],
a[href*="webflow.com"]:not(.keep-link) {
  display: none !important;
  visibility: hidden !important;
}

/* Quick fix: hide rotating middle word to avoid stray hyphen/plus and truncation */
.hero-title-bottom-wrapper {
  display: none !important;
}

/* Hero rotator (new) — prevent clipping and hyphen insertion */
.hero-rotator,
.hero-rotator * {
  white-space: nowrap;
  -webkit-hyphens: none;
  hyphens: none;
  word-break: keep-all;
}

.hero-rotator-mask {
  display: inline-block;
  overflow: visible;
  max-width: none;
  vertical-align: baseline;
}

/* Remove any decorative hyphen from template leftovers */
.hero-rotator::after,
.rotating-word::after,
[data-words]::after {
  content: none !important;
}

/* Optional: keep gradient look on rotating word if template provides it */
.hero-rotator.gradient,
.hero-rotator .gradient {
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ===== New: width-adaptive rotator for headline (Webflow clone) ===== */
/* Wrapper inserted before the original .hero-title-bottom-wrapper */
.rotator-wrap {
  display: inline-block;
  /* vertical-align is not needed for flex items */
  overflow: hidden;
  white-space: nowrap;
  transition: width 320ms cubic-bezier(.2, .8, .2, 1);
}

/* Visible rotating word (uses .home-h1 + .gradient-text for aesthetics) */
.rotator-word {
  display: block;
  text-transform: uppercase;
  will-change: opacity, transform;
}

/* Off-screen measurer: replicates typography for exact width calculation */
.rotator-measure {
  position: absolute;
  left: -9999px;
  top: 0;
  white-space: nowrap;
  pointer-events: none;
  visibility: hidden;
  font: inherit;
  letter-spacing: inherit;
  line-height: 0.95;
  text-transform: uppercase;
}

/* ===== Headline unification: single-line, centered, consistent metrics ===== */
.heading-wrapper {
  display: flex;
  /* Use flex to center the h1 */
  justify-content: center;
  width: 100%;
  white-space: nowrap;
  /* one line */
}

.heading-wrapper .home-h1 {
  display: inline-flex;
  /* Use flexbox for robust alignment */
  align-items: baseline;
  /* Align children to their baseline */
  gap: 0.35ch;
  /* Space out the parts */
  margin: 0;
  /* remove default h1 margins */
  text-transform: uppercase;
  /* keep casing via CSS (measurer matches) */
  font-weight: 600;
  letter-spacing: 0;
  /* keep tracking consistent with measurer */
  line-height: 0.95;
  font-size: clamp(20px, 5vw, 60px);
  /* Even smaller font size */
}

/* This rule is no longer needed with flexbox */

/* Ensure the rotating word inherits identical metrics */
.rotator-word.home-h1 {
  font-weight: 600;
  letter-spacing: 0;
  line-height: 0.95;
  font-size: clamp(20px, 5vw, 60px);
  /* Even smaller font size */
}

/* Hyphenation/word-break safety for rotator */
.rotator-word,
.rotator-measure {
  -webkit-hyphens: none;
  hyphens: none;
  word-break: keep-all;
  white-space: nowrap;
}



/* ===== Recent Work Section - Align all columns to same height ===== */
.creations-grid .creations-even-column,
.creations-grid .creations-odd-column {
  margin-top: 0 !important;
  padding-top: 0 !important;
  align-self: start !important;
}

/* Target 4th column specifically - pull up to show both videos */
.creations-grid>.creations-even-column:nth-child(4),
.creations-grid> :nth-child(4) {
  margin-top: -600px !important;
  align-self: start !important;
}

/* Keep offset reasonable on mobile */
@media screen and (max-width: 767px) {
  .creations-even-column {
    margin-top: 0 !important;
  }
}


/* === CTA del hero: violeta con luz vertical (sistema 2026-07-31 v2) === */
.primary-button,
.primary-button.large {
  background-color: #6a48f2 !important;
  background-image: linear-gradient(110deg, #8467ff 0%, #9d7bff 28%, #6a48f2 52%, #5d3ce8 74%, #8467ff 100%) !important;
  background-size: 220% 100% !important;
  animation: grad-sheen 7s ease-in-out infinite;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 8px 26px rgba(104, 72, 242, 0.35);
}

.primary-button .primary-button-text { color: #fff !important; }

.primary-button .primary-button-fill-circle { background-color: #7d5cff !important; }

.primary-button:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 10px 32px rgba(104, 72, 242, 0.52); }

/* textos gradiente del hero (rotator + AI Speed span): violeta shimmer */
.gradient-text,
.rotator-word.gradient-text {
  background-image: linear-gradient(110deg, #9d7bff 0%, #cdb8ff 30%, #e2a6ff 50%, #9d7bff 80%) !important;
  background-size: 220% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  animation: grad-sheen 7s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) { .gradient-text { animation: none; } }


/* === Fondo del hero: EXACTO al template (blobs solidos + blur 200px del
   wrapper que los funde en wash) — solo se agrega hue-rotate DENTRO del mismo
   filter para correr magenta->violeta. El blur NUNCA se pierde. === */
.hero-section .gradient-background-wrapper {
  filter: blur(200px) hue-rotate(-24deg) saturate(0.95);
  animation: hero-hue 16s ease-in-out infinite alternate;
}

@keyframes hero-hue {
  from { filter: blur(200px) hue-rotate(-19deg) saturate(0.97); }
  to { filter: blur(200px) hue-rotate(-30deg) saturate(0.92); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-section .gradient-background-wrapper {
    animation: none;
    filter: blur(200px) hue-rotate(-24deg) saturate(0.95);
  }
}