@font-face {
  font-family: 'Pixel Drive';
  src: url('../fonts/Pixel_Drive.woff2') format('woff2');
}

@font-face {
  font-family: 'Easy Pixel';
  src: url('../fonts/Easy_Pixel.woff2') format('woff2');
}

@font-face {
  font-family: 'Retro Byte';
  src: url('../fonts/Retro_Byte.woff2') format('woff2');
}




.method-title,
.method-day h3,
.day1-title {
  font-weight: normal;
}

/* Reusable purple gradient for text — top to bottom */
.purple-gradient-text {
  background: linear-gradient(to bottom, #a12e95, #9290ec);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.purple-gradient-text-per-word .purple-gradient-text {
  display: inline-block;
}

.nav-link {
  font-family: 'Pixel Drive', sans-serif;
  color: #134896;
  font-size: 1.1rem;
}

.hero-text p {
  font-family: 'Easy Pixel', sans-serif;
  font-size: clamp(3.5rem, 4.375vw, 7rem);
  line-height: 1.1;
}

.dblclick-hint p {
  font-family: 'Retro Byte', sans-serif;
  font-size: clamp(1.5rem, 1.875vw, 3rem);
}

.contact-page .dblclick-hint {
  right: 32px;
}



/* Here we write about background image stuff*/

body {
  margin: 0;
  padding: 0;
}

.hero {
  position: relative;
  overflow: hidden;
  background-color: #000000; /* pick a color that matches your image's edges/tone — swap this to whatever fits your design */
}

.hero-image {
  width: 100%;
  display: block;
  margin-top: 112px; /* matches the nav bar's height, so it now sits below the fixed nav instead of underneath it */
  --img-offset: 0px;
  transform: translateY(var(--img-offset));
  will-change: transform;
}

.hero-text {
  position: absolute;
  top: 70px; /* 112px clears the blue gap above the image (matches the nav height), +40px padding so it's not flush against the top edge */
  left: 40px;
    max-width: clamp(700px, 54.7vw, 1100px);/* keeps the paragraph from stretching edge-to-edge */
  --scroll-offset: 0px;
  transform: translateY(var(--scroll-offset));
  color: white;
  text-align: left;
  will-change: transform;
}

.dblclick-hint {
  position: fixed;
  top: 130px; /* clears the fixed nav so it doesn't collide with its own right-side links/button */
  right: 24px;
  z-index: 500; /* above normal page content, below the nav (1000) and Yoda (9999) */
  color: #333;
  font-size: 0.85rem;
  --dbl-offset: 0px;
  transform: translateY(var(--dbl-offset));
  will-change: transform;
}


.contact-tagline {
  position: absolute;
  top: 1550px;
  right: 110px;
  z-index: 500;
  --tagline-offset: 0px;
  transform: translateY(var(--tagline-offset));
  will-change: transform;
}

.contact-tagline p {
  font-family: 'Retro Byte', sans-serif;
  font-size: clamp(1.5rem, 1.875vw, 3rem);
}



/* Here the background image stuff ends */



.blop-wrapper {
  position: absolute;
  left: clamp(-75px, -3.9vw, -50px);
   top: clamp(450px, 35.2vw, 675px);
  width: clamp(560px, 43.75vw, 900px);
  z-index: 2;
  --blop-offset: 0px;
  transform: translateY(var(--blop-offset));
  will-change: transform, opacity;
}

.blop-anim {
  display: block;
  width: 100%;
  aspect-ratio: 500 / 163; /* matches one cell of the sprite sheet */
  background-image: url('../sprites/blop/blop-sheet.png');
  background-size: 1600% 1000%; /* 16 columns x 10 rows */
  background-repeat: no-repeat;
  image-rendering: pixelated; /* keeps it crisp instead of blurry when scaled up */
  filter: drop-shadow(0 20px 15px rgba(0, 0, 0, 0.3));
}

.blop-text {
  position: absolute;
  top: 11%;   /* tune these 4 to sit the text inside your shape */
  left: 30%;
  width: 70%;
  text-align: left;
  text-indent: 22px;
  opacity: 0;
  transition: opacity 500ms ease;
  pointer-events: none;
  font-family: 'Pixel Drive', sans-serif;
    font-size: clamp(23px, 1.8vw, 37px);
  line-height: 1.4;
  color: #134896;
}

.blop-text.visible {
  opacity: 1;
}




@font-face {
  font-family: 'Determination';
  src: url('../fonts/determination.woff2') format('woff2');
}

/* ---------- Our Method section ---------- */

.method {
  position: relative;
  background: #66d9ff;
  padding: clamp(40px, 3.1vw, 60px) 40px 80px;
  overflow: hidden;
  box-sizing: border-box;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.method-title {
  font-family: 'Determination', sans-serif;
  font-size: clamp(2.25rem, 2.8vw, 4rem);
  margin: 0 0 clamp(70px, 5.5vw, 105px);
  --method-title-offset: -60px;
  transform: translateY(var(--method-title-offset));
  will-change: transform;
}

.method-days {
  display: flex;
  justify-content: space-between;
  gap: clamp(40px, 3.1vw, 60px);
  flex-wrap: wrap;

  opacity: 0;
  transition: opacity 700ms ease;
}

.method-days.in-view {
  opacity: 1;
}

.method-day {
  flex: 1;
  min-width: 220px;
}

.method-day h3 {
  font-family: 'Easy Pixel', sans-serif;
  font-size: clamp(1.35rem, 1.7vw, 2rem);
  margin: 0 0 clamp(12px, 0.94vw, 18px);
  text-align: center;
  max-width: clamp(260px, 20.3vw, 380px);
  margin-left: auto;
  margin-right: auto;
}

.method-day p {
  font-family: 'Easy Pixel', sans-serif;
  font-size: clamp(0.9rem, 1.1vw, 1.25rem);
  line-height: 1.4;
  margin: 0;
  max-width: clamp(260px, 20.3vw, 380px);
  margin-left: auto;
  margin-right: auto;
}


@font-face {
  font-family: 'Matrix Script';
  src: url('../fonts/Matrix_Script.woff2') format('woff2');
}

/* ---------- Day 1 section ---------- */

.day1-diagram {
  opacity: 0;
  transition: opacity 700ms ease;
}

.day1-diagram.in-view {
  opacity: 1;
}

.day1 {
  background: #66d9ff;
  padding: 80px 40px clamp(100px, 7.8vw, 150px);
  box-sizing: border-box;
}

.day1-title {
  font-family: 'Matrix Script', cursive;
  font-size: clamp(2.5rem, 3.125vw, 4.5rem);
  margin: 0 0 clamp(60px, 4.7vw, 90px) clamp(60px, 4.7vw, 90px);
}

.day1-diagram {
  display: block;
  width: 100%;
  height: auto;
  max-width: clamp(630px, 49.2vw, 1260px);
  margin: 0 auto;
}

.day1-title,
.day2-title,
.day3-title {
  font-weight: normal;
}

/* ---------- Day 2 section ---------- */

.day2 {
  background: #66d9ff;
  padding: clamp(80px, 6.25vw, 120px) 40px clamp(100px, 7.8vw, 150px);
  box-sizing: border-box;
}

.day2-title {
  font-family: 'Matrix Script', cursive;
  font-size: clamp(2.5rem, 3.125vw, 4.5rem);
  margin: 0 0 clamp(-45px, -2.34vw, -30px) clamp(60px, 4.7vw, 90px);
}

.day2-diagram {
  display: block;
  width: 100%;
  height: auto;
  max-width: clamp(900px, 70.3vw, 1620px);
  margin: 0 auto;
}




/* ---------- Day 3 section ---------- */

.day3 {
  background: #66d9ff;
  padding: 80px 40px clamp(120px, 9.4vw, 180px);
  box-sizing: border-box;
}

.day3-title {
  font-family: 'Matrix Script', cursive;
  font-size: clamp(2.5rem, 3.125vw, 4.5rem);
  margin: 0 0 clamp(80px, 6.25vw, 120px) clamp(60px, 4.7vw, 90px);
}

.day3-text {
  font-family: 'Matrix Script', cursive;
  font-size: clamp(1.26rem, 1.575vw, 2rem);
  color: #a12e95;
  max-width: clamp(720px, 56.25vw, 1170px);
    margin: 0 auto clamp(140px, 10.9vw, 210px);
  line-height: 1.5;
  text-align: left;

  opacity: 0;
  transition: opacity 700ms ease;
}

.day3-text.in-view {
  opacity: 1;
}


@media (max-width: 768px) {
  .day1-title,
  .day2-title {
    margin-left: 0;
    margin-bottom: 48px;
  }

  .day3-title {
    margin-left: 0;
  }
}


/* ---------- Closing section ---------- */

.closing {
  position: relative;
  min-height: 100vh;
  background-image: url('../images/meteor-animation.gif');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-sizing: border-box;
  padding: 80px 40px;
}

.closing-text {
  margin-top: clamp(50px, 3.9vw, 75px);
}

.closing-text p {
  font-family: 'Determination', sans-serif;
  font-weight: normal;
  font-size: clamp(2.6rem, 3.25vw, 3.9rem);
  line-height: 1.3;
  max-width: 100%;
  margin: 0 0 clamp(50px, 3.9vw, 75px);
}

/* Here we write about the nav bar */

html {
  scroll-behavior: smooth;
}

#our-method {
    scroll-margin-top: -60px;
}

.closing-text {
  scroll-margin-top: 112px;
}


nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #66d9ff;
  padding: 1rem 2rem;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  z-index: 1000;
}



nav.nav-scrolled {
  background-color: transparent;
}

.logo-fade-wrap {
  position: relative;
  display: inline-block;
  height: 80px;
  aspect-ratio: 1193 / 400; /* matches the logo image's real proportions, so this box has an actual width to center by */
  --logo-cut: -20%;
}

.logo-fade-wrap img {
  position: absolute;
  top: 10px;
  left: -5px;
  height: 80px;
  display: block;
}

.logo-sharp {
  -webkit-mask-image: linear-gradient(to top, transparent var(--logo-cut), black calc(var(--logo-cut) + 2%));
  mask-image: linear-gradient(to top, transparent var(--logo-cut), black calc(var(--logo-cut) + 2%));
}

.logo-blurred {
  filter: blur(6px);
  -webkit-mask-image: linear-gradient(to top, transparent calc(var(--logo-cut) - 18%), black var(--logo-cut), transparent calc(var(--logo-cut) + 18%));
  mask-image: linear-gradient(to top, transparent calc(var(--logo-cut) - 18%), black var(--logo-cut), transparent calc(var(--logo-cut) + 18%));
}

.logo-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.logo-anim {
  position: relative;
  height: 120px;
  width: 120px;
}

.logo-anim-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0;
  transition: opacity 60ms linear;
}

.logo-anim-layer.visible {
  opacity: 1;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav-right a {
    text-decoration: none;
  font-size: 0.95rem;
}

.nav-right a:hover {
  color: #aaa;
}

.nav-right .cta-button {
  display: block;
  width: 145px;
  height: 72.5px;
  background-image: url('../images/button.svg');
  background-size: contain;
  background-repeat: no-repeat;
  margin-left: 1rem;
  margin-right: 0.5rem;
}

.nav-right .cta-button:active {
  background-image: url('../images/button-pressed.svg');
}


@media (max-width: 768px) {
  .logo-left {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  

  .logo-center {
    position: static;
    transform: none;
    margin-left: -32px;
    margin-top: -16px;
  }
}


/* ---------- Hamburger toggle (mobile only) ---------- */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 20px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 1100;
}

.nav-toggle span {
  display: block;
  width: 100%;
  height: 3px;
  background: #134896;
  border-radius: 2px;
  transition: transform 250ms ease, opacity 250ms ease;
}

.nav-toggle.open span:nth-child(1) {
  transform: translateY(8.5px) rotate(45deg);
}
.nav-toggle.open span:nth-child(2) {
  opacity: 0;
}
.nav-toggle.open span:nth-child(3) {
  transform: translateY(-8.5px) rotate(-45deg);
}

.nav-contact-link {
  display: none;
}

@media (max-width: 768px) {
  .nav-toggle {
    display: flex;
  }

  .nav-right {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #66d9ff;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 300ms ease;
  }

  .nav-right.open {
    max-height: 300px;
  }

  .nav-right a.nav-link {
    padding: 16px 24px;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
  }

  .nav-right .cta-button {
    display: none;
  }

  .nav-contact-link {
    display: block;
  }
}

/* nav bar end */

/* media stuff - for mobile and tablet, we want to make sure the hero image and text are responsive */

@media (max-width: 768px) {
  .hero-image {
    height: calc(100vh - 112px);
    object-fit: cover;
    object-position: left center;
  }

  .hero {
    background-color: #66d9ff;
  }

  .blop-wrapper {
    left: -40px;
    top: 450px; /* tune this to move it further up/down */
    width: 380px; /* bumped up a bit from 320px, the desktop clamp() bottoms out at 560px which is still too big for a phone screen */
    z-index: 5; /* extra headroom above .method's content */
  }

  .blop-text {
    font-size: 16px;
    text-indent: 12px;
  }
}

@media (max-width: 768px) {
  body:not(.contact-page) .dblclick-hint {
    display: none;
  }

  #follower {
    opacity: 0;
    transition: opacity 200ms ease;
  }

  #follower.touched {
    opacity: 1;
  }
}



/* =========================================================
   Baby Yoda cursor companion — drop this into your stylesheet.
   Self-contained: uses its own class/id names (#follower, .scaler,
   .sprite, .trail-dot, .star-pop) that are unlikely to collide with
   anything else on your site. If you already use any of those names
   for something else, rename them here AND in cursor-companion.js
   (same names appear in a couple of places there via
   document.getElementById / querySelector).
   ========================================================= */

/* ---------- The follower ---------- */
#follower {
  position: fixed;
  top: 0;
  left: 0;
  width: 56px;
  height: 56px;
  margin-left: -28px;
  margin-top: -28px;
  cursor: grab;
  z-index: 9999; /* bump this if your site has its own high-z-index UI (modals, nav, etc.) that should sit above it */
  will-change: transform;
  transform: translate(-100px, -100px); /* off-screen until first move */
}

/* .scaler carries ONLY scale (+ a little spin while blasting off),
   kept separate from #follower's translate so the two can animate on
   completely different timelines — that's what lets the "drift a
   couple cm away" be slow while the "shrink to nothing" is fast. */
#follower .scaler {
  width: 100%;
  height: 100%;
  transform: scale(1);
  transform-origin: 50% 50%;
  opacity: 1;
}

#follower .sprite {
  position: relative;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.0));
  transform-origin: 50% 50%;
}

#follower .sprite-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  image-rendering: pixelated;
  opacity: 0;
  transition: opacity 150ms linear;
}

#follower .sprite-layer.visible {
  opacity: 1;
}



/* ---------- The "twinkle star" that replaces it mid-flight ---------- */
.star-pop {
  position: absolute;
  width: 32px;
  height: 32px;
  margin-left: -16px;
  margin-top: -16px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
  z-index: 9998;
}

.star-pop-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0;
  transition: opacity 40ms linear;
}

.star-pop-layer.visible {
  opacity: 1;
}



/* contact form */

.contact-hero {
  position: relative;
  overflow: hidden;
  background-color: #0C3064;
  min-height: 200vh;
}

.contact-bg {
  width: 100%;
  display: block;
  margin-top: 100px;
  --img-offset: 0px;
  transform: translateY(var(--img-offset));
  will-change: transform;
}

/* -- Yoda power-up -- */

/* Rainbow tile — hidden until Yoda is grabbed once, then loops for
   the rest of the visit */
.contact-rainbow-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  background-image: url('../images/infinite-rainbow.gif');
  background-repeat: repeat;
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.contact-rainbow-bg.revealed {
  opacity: 1;
}


/* Golden gradient text everywhere except the nav (nav-link colors are
   set explicitly so they're untouched by this) */
body.gold-power-up {
  color: #d4af37;
}

/* background-image, not the "background" shorthand — the shorthand
   quietly resets background-clip back to border-box, which is why the
   gradient was showing up as a box instead of clipped to the letters */
body.gold-power-up .purple-gradient-text {
  background-image: linear-gradient(to bottom, #f9e076, #a97a1a);
}

body.gold-power-up .day3-text,
body.gold-power-up .blop-text,
body.gold-power-up .contact-success,
body.gold-power-up .contact-error {
  color: #d4af37;
}

/* Send button — text stays as it was, only the box gradient goes gold
   (this is the one place purple was a background, not text) */
body.gold-power-up .contact-submit {
  background: linear-gradient(to bottom, #f9e076, #a97a1a);
  border-color: #ffffff;
}


.contact-heading {
  position: relative;
  /* no z-index here on purpose — that's what was isolating the lightning
     gif's blend mode and stopping the black from disappearing */
}



.contact-section {
  position: absolute;
  top: 112px;
  left: 0;
  width: 100%;
  min-height: calc(100vh - 112px);
  padding: 40px 24px 40px 64px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
}

.contact-heading {
  font-family: 'Determination', sans-serif;
  font-size: 48px;
  font-weight: normal;
  margin: 0 0 40px;
}

.contact-form {
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  text-align: left;
}

.contact-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.contact-label {
  font-family: 'Easy Pixel', sans-serif;
  font-size: 15px;
  font-weight: normal;
}

.contact-field input,
.contact-field textarea {
  font-family: 'Easy Pixel'; 
  font-size: 16px;
  padding: 12px 14px;
  border: 2px solid #000000;
  border-radius: 0;
  clip-path: polygon(
    0 6px, 6px 6px, 6px 0,
    calc(100% - 6px) 0, calc(100% - 6px) 6px, 100% 6px,
    100% calc(100% - 6px), calc(100% - 6px) calc(100% - 6px), calc(100% - 6px) 100%,
    6px 100%, 6px calc(100% - 6px), 0 calc(100% - 6px)
  );
  box-shadow: inset -3px -3px 0 rgba(0, 0, 0, 0.25);
  resize: vertical;
}

.contact-field input:focus,
.contact-field textarea:focus {
  outline: 2px solid #a12e95;
  border-color: #a12e95;
}

.contact-submit {
  align-self: flex-start;
  background: linear-gradient(to bottom, #a12e95, #9290ec);
  color: white;
  border: 2px solid #000000;
  border-radius: 0;
      clip-path: polygon(
    0 12px, 6px 12px, 6px 6px, 12px 6px, 12px 0,
    calc(100% - 12px) 0, calc(100% - 12px) 6px, calc(100% - 6px) 6px, calc(100% - 6px) 12px, 100% 12px,
    100% calc(100% - 12px), calc(100% - 6px) calc(100% - 12px), calc(100% - 6px) calc(100% - 6px), calc(100% - 12px) calc(100% - 6px), calc(100% - 12px) 100%,
    12px 100%, 12px calc(100% - 6px), 6px calc(100% - 6px), 6px calc(100% - 12px), 0 calc(100% - 12px)
  );
  padding: 14px 32px;
  font-family: 'Easy Pixel', sans-serif;
  font-size: 16px;
  font-weight: normal;
  cursor: pointer;
  transition: opacity 150ms ease;
}

.contact-submit:hover { opacity: 0.85; }
.contact-submit:disabled { opacity: 0.6; cursor: default; }

.contact-message {
  width: 100%;
  max-width: 300px;
  margin-top: 24px;
  margin-left: 90px;
  padding: 20px;
  font-family: 'Easy Pixel', sans-serif;
  font-size: 16px;
  text-align: left;
  border: 2px solid #000000;
  border-radius: 0;
  clip-path: polygon(
    0 6px, 6px 6px, 6px 0,
    calc(100% - 6px) 0, calc(100% - 6px) 6px, 100% 6px,
    100% calc(100% - 6px), calc(100% - 6px) calc(100% - 6px), calc(100% - 6px) 100%,
    6px 100%, 6px calc(100% - 6px), 0 calc(100% - 6px)
  );
  box-shadow: inset -3px -3px 0 rgba(0, 0, 0, 0.25), 4px 4px 0 #000;
  cursor: pointer;
}

.contact-message:active {
  transform: translate(4px, 4px);
  box-shadow: inset 3px 3px 0 rgba(0, 0, 0, 0.25);
}


.contact-success { background: rgba(255,255,255,0.9); color: #1a7a3c; }
.contact-error { background: rgba(255,255,255,0.9); color: #b3261e; }
@media (max-width: 768px) {
  .contact-section { padding: 24px 16px; }
  .contact-heading { font-size: 34px; }

  .contact-bg {
    height: calc(100vh - 112px);
    object-fit: cover;
    object-position: center;
  }
}

/* Nav + page background, scoped to just this page via <body class="contact-page"> */
body.contact-page {
  background: #0C3064;
}

.contact-page nav {
  background: rgba(12, 48, 100, 0);
}

@media (min-width: 769px) {
  .contact-page .logo-anim {
    width: 60px;
    height: 60px;
  }
}

.contact-page .nav-link {
  color: #ffffff;
}

.contact-page .nav-toggle span {
  background: #ffffff;
}




@media (max-width: 768px) {
  .contact-page .nav-right {
    background: transparent;
  }
}

/* ---------- Floating clouds ---------- */
.floating-cloud {
  position: absolute;
  top: 0;
  left: 0;
  width: 140px;
  z-index: 50; /* above page content, below the nav (1000) */
  cursor: pointer;
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform;
}

.floating-yoda {
  position: absolute;
  top: 0;
  left: 0;
  width: 56px;
  height: 56px;
  z-index: 51; /* just above the clouds, still below the nav */
  cursor: pointer;
  user-select: none;
  will-change: transform;
}

.floating-yoda-layer {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  image-rendering: pixelated;
}

@media (max-width: 768px) {
  .floating-cloud {
    width: 100px;
  }

  .floating-yoda {
    width: 65px;
    height: 65px;
  }
}


@media (max-width: 768px) {
  .logo-anim {
    width: 70px;
    height: 70px;
  }
}



.grab-fireworks {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 200;
  pointer-events: none;
  background-image: url('../images/firework.gif');
  background-size: contain;
  
  background-position: center;
  mix-blend-mode: screen;
  filter: contrast(1.6);
  opacity: 0;
  transition: opacity 150ms ease;
}

.grab-fireworks.active {
  opacity: 1;
}