/** Shopify CDN: Minification failed

Line 183:30 Unexpected "{"

**/
/* ==========================================================
   CONTAINER & BASE SETUP
   ========================================================== */

/* Container that holds the scaled scene */
.figgly-hero-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  /* Height is dynamically set by JS to match the scaled scene */
}

/* The Fixed 1470x710 Grid Canvas */
.figgly-hero-scene {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1470px;
  height: 710px;
  transform-origin: center center;
  /* Scaling transform is applied inline via JavaScript */
}

/* Base style for all graphical assets */
.layer {
  position: absolute;
  display: block;
  pointer-events: none; /* Let clicks pass through if needed */
  user-select: none;
  object-fit: contain;
}

/* Full background pattern */
.layer-bg {
  top: 0;
  left: 0;
  z-index: 1;
}

/* Helper for perfectly centering the main text stack */
.center-aligned {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* ==========================================================
   SIMPLE CONTINUOUS LOOPS (Stars)
   ========================================================== */

/* Gentle up and down floating */
.anim-float {
  animation: floatY 4s ease-in-out infinite alternate;
}
@keyframes floatY {
  0% { transform: translateY(0px); }
  100% { transform: translateY(-20px); }
}

.anim-float-left {
  animation: floatY 4s ease-in-out infinite alternate;
}
@keyframes floatY {
  0% { transform: translateX(0px); }
  100% { transform: translateX(-20px); }
}

/* ==========================================================
   ADVANCED TIMED CHOREOGRAPHY (7s Fast Loop)
   ========================================================== */

/* 1. TEXT STACK (7s loop) */
.anim-text-cycle {
  animation: textCycle 7s infinite ease-in-out;
}
@keyframes textCycle {
  0%, 30% { opacity: 1; transform: translate(-50%, -50%); } /* Visible for ~2 seconds */
  35% { opacity: 0; transform: translate(-50%, -50%); }     /* Fade out */
  40% { opacity: 0; transform: translate(-50%, -20%); }     /* Drop down invisibly */
  45%, 100% { opacity: 1; transform: translate(-50%, -50%); } /* Slide up & stay */
}

/* 2. CORNER ELEMENTS (7s loop) */
.anim-corner-tr { animation: cornerTR 7s infinite ease-in-out; }
@keyframes cornerTR {
  0%, 30% { transform: translate(0, 0); }
  35%, 40% { transform: translate(150%, -150%); } /* Up and Right */
  45%, 100% { transform: translate(0, 0); }
}

.anim-corner-bl { animation: cornerBL 7s infinite ease-in-out; }
@keyframes cornerBL {
  0%, 30% { transform: translate(0, 0); }
  35%, 40% { transform: translate(-150%, 150%); } /* Down and Left */
  45%, 100% { transform: translate(0, 0); }
}

.anim-corner-tl { animation: cornerTL 7s infinite ease-in-out; }
@keyframes cornerTL {
  0%, 30% { transform: translate(0, 0); }
  35%, 40% { transform: translate(-150%, -150%); } /* Up and Left */
  45%, 100% { transform: translate(0, 0); }
}

.anim-corner-br { animation: cornerBR 7s infinite ease-in-out; }
@keyframes cornerBR {
  0%, 30% { transform: translate(0, 0); }
  35%, 40% { transform: translate(150%, 150%); } /* Down and Right */
  45%, 100% { transform: translate(0, 0); }
}

/* 3. TINY ASSETS - LEFT SIDE (7s loop) */
.anim-tiny-left { 
  animation: tinySpecialLeft 7s infinite ease-in-out; 
}
@keyframes tinySpecialLeft {
  0%, 30% { transform: translate(0, 0); opacity: 1; }
  
  /* Explode UP and fade out */
  35% { transform: translateY(-150px); opacity: 0; }
  40% { transform: translate(0, 0); opacity: 0; } /* Snap back invisibly */
  45% { transform: translate(0, 0); opacity: 1; } /* Fade in */
  
  /* The Dance: X-Axis -> Diagonal -> Return -> X-Axis */
  55% { transform: translateX(-20px); opacity: 1; }
  65% { transform: translate(-130px, -150px); opacity: 1; } /* Diagonal Up/Left */
  75% { transform: translate(0, 0); opacity: 1; }
  88% { transform: translateX(15px); opacity: 1; }
  100% { transform: translate(0, 0); opacity: 1; }
}

/* 4. TINY ASSETS - RIGHT SIDE (7s loop) */
.anim-tiny-right { 
  animation: tinySpecialRight 7s infinite ease-in-out; 
}
@keyframes tinySpecialRight {
  0%, 30% { transform: translate(0, 0); opacity: 1; }
  
  /* Explode UP and fade out */
  35% { transform: translateY(-150px); opacity: 0; }
  40% { transform: translate(0, 0); opacity: 0; } /* Snap back invisibly */
  45% { transform: translate(0, 0); opacity: 1; } /* Fade in */
  
  /* The Dance: X-Axis -> Diagonal -> Return -> X-Axis */
  55% { transform: translateX(20px); opacity: 1; }
  65% { transform: translate(130px, -90px); opacity: 1; } /* Diagonal Up/Right */
  75% { transform: translate(0, 0); opacity: 1; }
  88% { transform: translateX(-15px); opacity: 1; }
  100% { transform: translate(0, 0); opacity: 1; }
}


/* ==========================================================
   MOBILE RESPONSIVENESS (Matches image_fa5084.jpg)
   ========================================================== */
@media (max-width: 767px) {
  
  /* 1. Stack the central text tightly and override hardcoded inline 'top' pixels */
  img[src*="Asset-10-2x.png"] {
    margin-top: -30px !important;
  }
  img[src*="Asset-5-3x.webp"] {
    top: 50% !important;
    margin-top: -175px !important;
  }
  img[src*="Asset-6-3x.webp"] {
    top: 50% !important;
    margin-top: 20px !important;
  }
  img[src*="Asset-4-3x.webp"] {
    top: 50% !important;
    margin-top: 150px !important;
    margin-left: 0 !important; /* Center the badge */
  }
  img[src*="Asset-2-2x.png"], {
    margin-right: 80px;
  }

  /* 2. Hide side dots that clutter the mobile text */
  img[src*="Asset-14-2x.png"],
  img[src*="Asset-4-2x.png"] {
    display: none !important;
  }

  /* 3. Push the big corner shapes up/down into the new empty portrait space */
  img[src*="Asset-19-2x.png"] { 
    top: 260px !important; left: 40px !important; 
  } /* Pink C (Top Left) */
  
  img[src*="Asset-1-2x.png"] { 
    top: -150px !important; right: 50px !important; 
  } /* Yellow Diamond (Top Right) */
  
  img[src*="Asset-17-2x.png"] { 
    bottom: -180px !important; left: 20px !important; 
  } /* Orange Triangle (Bottom Left) */
  
  img[src*="Asset-9-2x.png"] { 
    top: auto !important; bottom: -160px !important; right: -40px !important; left: auto !important; 
  } /* Blue C (Bottom Right) */
}