/* Animated Image Grid Animations */
@keyframes slideUp {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50%);
  }
}

@keyframes slideDown {
  0% {
    transform: translateY(-50%);
  }
  100% {
    transform: translateY(0);
  }
}

.animate-slide-up {
  animation: slideUp 30s linear infinite;
}

.animate-slide-down {
  animation: slideDown 30s linear infinite;
}

.animate-slide-up-slow {
  animation: slideUp 45s linear infinite;
}

.animate-slide-down-slow {
  animation: slideDown 45s linear infinite;
}

.animate-slide-up-fast {
  animation: slideUp 20s linear infinite;
}

.animate-slide-down-fast {
  animation: slideDown 20s linear infinite;
}

/* Gradient hover transitions */
.hover-gradient-transition {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.hover-gradient-transition::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.hover-gradient-transition:hover::before {
  opacity: 1;
}

/* Text gradient hover effect */
.text-gradient-hover {
  position: relative;
  z-index: 1;
}

.text-gradient-hover .hover-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.text-gradient-hover:hover .hover-text {
  opacity: 1;
}

.text-gradient-hover:hover .default-text {
  opacity: 0;
}

/* Gradient border hover effect */
.gradient-border-hover {
  position: relative;
  z-index: 1;
}

.gradient-border-hover::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: inherit;
}

.gradient-border-hover:hover::before {
  opacity: 1;
}

/* Add hover effect styles */
.hover-elevate {
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.hover-elevate:hover {
  transform: translateY(calc(-4px * var(--hover-intensity, 1)));
  box-shadow: 0 calc(10px * var(--hover-intensity, 1))
    calc(20px * var(--hover-intensity, 1)) rgba(0, 0, 0, 0.1);
}

.hover-scale {
  transition: transform 0.3s ease;
}

.hover-scale:hover {
  transform: scale(calc(1 + (0.1 * var(--hover-intensity, 1))));
}

.hover-glow {
  transition: box-shadow 0.3s ease;
}

.hover-glow:hover {
  box-shadow: 0 0 calc(15px * var(--hover-intensity, 1))
    rgba(124, 58, 237, calc(0.5 * var(--hover-intensity, 1)));
}

.hover-tilt {
  transition: transform 0.3s ease;
}

.hover-tilt:hover {
  transform: perspective(1000px) rotateX(calc(5deg * var(--hover-intensity, 1)))
    rotateY(calc(5deg * var(--hover-intensity, 1)));
}

/* Animation keyframes */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideDown {
  from {
    transform: translateY(-30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideLeft {
  from {
    transform: translateX(30px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideRight {
  from {
    transform: translateX(-30px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes zoomIn {
  from {
    transform: scale(0.5);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes zoomOut {
  from {
    transform: scale(1.5);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes flipX {
  from {
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
  to {
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
}

@keyframes flipY {
  from {
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
  to {
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }
}

@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-20px);
  }
  60% {
    transform: translateY(-10px);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-5px);
  }
  20%,
  40%,
  60%,
  80% {
    transform: translateX(5px);
  }
}

@keyframes swing {
  20% {
    transform: rotate(15deg);
  }
  40% {
    transform: rotate(-10deg);
  }
  60% {
    transform: rotate(5deg);
  }
  80% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes tada {
  0% {
    transform: scale(1);
  }
  10%,
  20% {
    transform: scale(0.9) rotate(-3deg);
  }
  30%,
  50%,
  70%,
  90% {
    transform: scale(1.1) rotate(3deg);
  }
  40%,
  60%,
  80% {
    transform: scale(1.1) rotate(-3deg);
  }
  100% {
    transform: scale(1) rotate(0);
  }
}

@keyframes wobble {
  0% {
    transform: translateX(0%);
  }
  15% {
    transform: translateX(-25%) rotate(-5deg);
  }
  30% {
    transform: translateX(20%) rotate(3deg);
  }
  45% {
    transform: translateX(-15%) rotate(-3deg);
  }
  60% {
    transform: translateX(10%) rotate(2deg);
  }
  75% {
    transform: translateX(-5%) rotate(-1deg);
  }
  100% {
    transform: translateX(0%);
  }
}

@keyframes jello {
  0%,
  11.1%,
  100% {
    transform: none;
  }
  22.2% {
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }
  33.3% {
    transform: skewX(6.25deg) skewY(6.25deg);
  }
  44.4% {
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }
  55.5% {
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }
  66.6% {
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }
  77.7% {
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }
  88.8% {
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}

@keyframes heartBeat {
  0% {
    transform: scale(1);
  }
  14% {
    transform: scale(1.3);
  }
  28% {
    transform: scale(1);
  }
  42% {
    transform: scale(1.3);
  }
  70% {
    transform: scale(1);
  }
}

@keyframes rubberBand {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scaleX(1.25) scaleY(0.75);
  }
  40% {
    transform: scaleX(0.75) scaleY(1.25);
  }
  50% {
    transform: scaleX(1.15) scaleY(0.85);
  }
  65% {
    transform: scaleX(0.95) scaleY(1.05);
  }
  75% {
    transform: scaleX(1.05) scaleY(0.95);
  }
  100% {
    transform: scale(1);
  }
}

/* ==============================================================
   Text Element Spacing Reset for Builder
   ============================================================== */

/* Reset margins but preserve padding for text elements to prevent thin line appearance */
.editable-content,
.text-element,
.heading-element {
  /* Ensure minimum height to prevent thin lines */
  min-height: 1.2em;
  
  /* Let element settings control margins and padding - no aggressive resets */
}

/* Additional reset for SectionRenderer preview mode */
.section-container .text-element,
.section-container .heading-element,
.section-container .editable-content {
  min-height: 1.2em;
  
  /* Let element settings control spacing - no aggressive resets */
}

/* Force reset for any contentEditable elements */
[contenteditable="true"] {
  min-height: 1.2em;
  
  /* Let element settings control spacing - no aggressive resets */
}

/* Browser-specific resets - removed aggressive margin resets */

/* ==============================================================
   Font Loading Optimization for Snapshot Generation
   ============================================================== */

/* Optimize font loading to prevent excessive requests during snapshots */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap; /* Use system fonts until Inter loads */
  src: url("https://fonts.gstatic.com/s/inter/v19/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2")
    format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
    U+FFFD;
}

/* Force system fonts for snapshot containers to avoid font loading */
[data-snapshot="true"] {
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif !important;
}

[data-snapshot="true"] * {
  font-family: inherit !important;
}

/* Preload Inter font for better performance */
.builder-container::before {
  content: "";
  font-family:
    "Inter",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}