"use client";

import { useRef, useEffect, useState } from "react";
import { Reveal } from "@/components/shared/Reveal";
import type { VenueLandingSection } from "@/constants/pages";

type Props = {
  section: VenueLandingSection["whyChoose"];
};

const positions = [
  { x: 6, y: 150 },
  { x: 27.5, y: 40 },
  { x: 50, y: 150 },
  { x: 72.5, y: 40 },
  { x: 95, y: 150 },
];

const DESKTOP_CIRCLE_SIZE = 210;
const DESKTOP_RADIUS = DESKTOP_CIRCLE_SIZE / 2;

export default function WhyChooseWave({ section }: Props) {
  const sectionRef = useRef<HTMLElement>(null);
  const containerRef = useRef<HTMLDivElement>(null);

  const [width, setWidth] = useState(0);

  const [activeLine, setActiveLine] = useState(-1);

  const [chargingIndex, setChargingIndex] = useState(-1);

  const [hasStarted, setHasStarted] = useState(false);

  const [activeCircle, setActiveCircle] = useState(-1);

  useEffect(() => {
    const container = containerRef.current;

    if (!container) return;

    const resize = () => {
      setWidth(container.offsetWidth);
    };

    resize();

    const observer = new ResizeObserver(resize);

    observer.observe(container);

    return () => observer.disconnect();
  }, []);

  useEffect(() => {
    const sectionElement = sectionRef.current;

    if (!sectionElement || hasStarted) return;

    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setHasStarted(true);
        }
      },
      {
        threshold: 0.25,
      }
    );

    observer.observe(sectionElement);

    return () => observer.disconnect();
  }, [hasStarted]);


  useEffect(() => {
    if (!hasStarted || !section?.items?.length) return;

    let cancelled = false;

    const timers: ReturnType<typeof setTimeout>[] = [];

    const INITIAL_DELAY = 500;

    const LINE_DURATION = 900;

    const SPRINKLER_DURATION = 800;

    const GAP_AFTER_SPRINKLER = 250;

    section.items.forEach((_, index) => {

      if (index >= section.items.length - 1) return;

      const sequenceStart =
        INITIAL_DELAY +
        index *
          (LINE_DURATION +
            SPRINKLER_DURATION +
            GAP_AFTER_SPRINKLER);

      const lineTimer = setTimeout(() => {
        if (cancelled) return;

        setActiveLine(index);
      }, sequenceStart);

      timers.push(lineTimer);


      const chargingTimer = setTimeout(() => {
        if (cancelled) return;

        setChargingIndex(index + 1);

        const removeChargingTimer = setTimeout(() => {
          if (cancelled) return;

          setChargingIndex(-1);
        }, SPRINKLER_DURATION);

        timers.push(removeChargingTimer);
      }, sequenceStart + LINE_DURATION);

      timers.push(chargingTimer);
    });

    return () => {
      cancelled = true;

      timers.forEach((timer) => {
        clearTimeout(timer);
      });
    };
  }, [hasStarted, section?.items?.length]);

  const getConnectionGeometry = (
    index: number
  ) => {
    if (index <= 0 || width <= 0) {
      return null;
    }

    const previous = positions[index - 1];
    const current = positions[index];

    const previousCenterX =
      (previous.x / 100) * width;

    const previousCenterY = previous.y;

    const currentCenterX =
      (current.x / 100) * width;

    const currentCenterY = current.y;

    const dx =
      currentCenterX - previousCenterX;

    const dy =
      currentCenterY - previousCenterY;

    const distance = Math.sqrt(
      dx * dx + dy * dy
    );

    if (distance === 0) {
      return null;
    }

    const unitX = dx / distance;
    const unitY = dy / distance;

    const startX =
      previousCenterX +
      unitX * DESKTOP_RADIUS;

    const startY =
      previousCenterY +
      unitY * DESKTOP_RADIUS;

    const connectionX =
      currentCenterX -
      unitX * DESKTOP_RADIUS;

    const connectionY =
      currentCenterY -
      unitY * DESKTOP_RADIUS;


    const lineLength = Math.sqrt(
      Math.pow(
        connectionX - startX,
        2
      ) +
        Math.pow(
          connectionY - startY,
          2
        )
    );


    const angle =
      Math.atan2(dy, dx) *
      (180 / Math.PI);

    const localX =
      connectionX -
      (currentCenterX - DESKTOP_RADIUS);

    const localY =
      connectionY -
      (currentCenterY - DESKTOP_RADIUS);

    return {
      startX,
      startY,
      connectionX,
      connectionY,
      localX,
      localY,
      lineLength,
      angle,
    };
  };

  return (
    <section
      ref={sectionRef}
      className="relative overflow-hidden py-12 md:py-16 px-6 md:px-12"
    >
      <div className="max-w-7xl mx-auto">

        <Reveal>
          <div className="max-w-4xl mx-auto text-center">

            <h2 className="font-serif italic text-3xl md:text-4xl font-light text-espresso">
              {section?.title}
            </h2>

            <div className="flex items-center justify-center gap-4 mt-4">

              <div className="h-0.5 w-20 bg-gradient-to-r from-transparent to-gold" />

              <div className="relative flex items-center justify-center">

                <div className="h-4 w-4 rotate-45 border border-gold bg-gold/20" />

                <div className="absolute h-2 w-2 rotate-45 bg-gold" />

              </div>

              <div className="h-0.5 w-20 bg-gradient-to-l from-transparent to-gold" />

            </div>
          </div>
        </Reveal>


        {/* ==================================================== */}
        {/* DESKTOP WAVE */}
        {/* ==================================================== */}

        <div className="relative hidden px-12 lg:block mt-28 h-[280px]">

          <div
            ref={containerRef}
            className="relative h-[420px]"
          >

            {/* ================================================= */}
            {/* CONNECTING LINES */}
            {/* ================================================= */}

            {width > 0 &&
              positions
                .slice(0, -1)
                .map((_, index) => {

                  const geometry =
                    getConnectionGeometry(
                      index + 1
                    );

                  if (!geometry) {
                    return null;
                  }

                  const {
                    startX,
                    startY,
                    lineLength,
                    angle,
                  } = geometry;

                  const isActive =
                    activeLine >= index;

                  return (
                    <div
                      key={index}
                      className="
                        absolute
                        origin-left
                      "
                      style={{
                        left: `${startX}px`,
                        top: `${startY}px`,
                        width: `${lineLength}px`,
                        height: "2px",

                        transform: `
                          rotate(${angle}deg)
                          scaleX(
                            ${isActive ? 1 : 0}
                          )
                        `,

                        transformOrigin:
                          "left center",

                        background:
                          "linear-gradient(to right, rgba(201,164,90,.15), #C9A45A, rgba(201,164,90,.95))",

                        transition:
                          "transform 1200ms cubic-bezier(0.65, 0, 0.35, 1)",

                        zIndex: 5,
                      }}
                    >

                      {/* Moving energy tip */}

                      <div
                        className={`
                          absolute
                          right-[-3px]
                          top-1/2

                          h-[6px]
                          w-[6px]

                          -translate-y-1/2

                          rounded-full

                          bg-gold

                          shadow-[0_0_8px_rgba(201,164,90,.95)]

                          transition-opacity
                          duration-300

                          ${
                            isActive
                              ? "opacity-100"
                              : "opacity-0"
                          }
                        `}
                      />

                    </div>
                  );
                })}


            {/* ================================================= */}
            {/* DESKTOP CIRCLES */}
            {/* ================================================= */}

            {section?.items.map(
              (item, index) => {

                const isCharging =
                  chargingIndex === index &&
                  index > 0;

                /*
                 * EXACT SAME CONNECTION GEOMETRY
                 * USED BY THE LINE.
                 */

                const connection =
                  width > 0
                    ? getConnectionGeometry(
                        index
                      )
                    : null;

                return (
                  <div
                    key={item}
                    className="
                      absolute
                      -translate-x-1/2
                      -translate-y-1/2
                    "
                    style={{
                      left:
                        `${positions[index].x}%`,

                      top:
                        `${positions[index].y}px`,
                    }}
                  >

                    {/* ======================================= */}
                    {/* CIRCLE */}
                    {/* ======================================= */}

                    <div
                      className="
                        group
                        relative
                        will-change-transform
                        flex
                        h-[210px]
                        w-[210px]

                        items-center
                        justify-center

                        rounded-full

                        border
                        border-gold/40

                        bg-gradient-to-br
                        from-white
                        via-[#FFFCF6]
                        to-[#F7EFE2]

                        shadow-[0_25px_60px_rgba(0,0,0,.08)]

                        overflow-hidden

                        transition-all
                        duration-700

                        hover:-translate-y-3
                        hover:scale-105
                        hover:border-gold

                        hover:shadow-[0_40px_90px_rgba(0,0,0,.15)]
                      "
                    >

                      {/* ===================================== */}
                      {/* CONNECTION SPRINKLER */}
                      {/* ===================================== */}

                      {isCharging &&
                        connection && (
                          <div
                            className="
                              pointer-events-none
                              absolute
                              inset-0
                              z-30
                            "
                          >

                            {/*
                             * IMPORTANT:
                             *
                             * This position is calculated
                             * from the SAME endpoint that
                             * the line uses.
                             */}

                            <div
                              className="
                                absolute
                                w-0
                                h-0
                              "
                              style={{
                                left:
                                  `${connection.localX}px`,

                                top:
                                  `${connection.localY}px`,
                              }}
                            >

                              {/* ================================= */}
                              {/* CONNECTION FLASH */}
                              {/* ================================= */}

                              <span className="connection-flash" />


                              {/* ================================= */}
                              {/* MAIN GOLD PARTICLES */}
                              {/* ================================= */}

                              <span className="sprinkle sprinkle-1" />

                              <span className="sprinkle sprinkle-2" />

                              <span className="sprinkle sprinkle-3" />

                              <span className="sprinkle sprinkle-4" />

                              <span className="sprinkle sprinkle-5" />

                              <span className="sprinkle sprinkle-6" />

                              <span className="sprinkle sprinkle-7" />

                              <span className="sprinkle sprinkle-8" />


                              {/* ================================= */}
                              {/* FINE SPARKLES */}
                              {/* ================================= */}

                              <span className="fine-spark fine-1" />

                              <span className="fine-spark fine-2" />

                              <span className="fine-spark fine-3" />

                              <span className="fine-spark fine-4" />

                            </div>
                          </div>
                        )}


                      {/* ===================================== */}
                      {/* LIGHT SWEEP */}
                      {/* ===================================== */}

                      <div
                        className="
                          pointer-events-none
                          absolute
                          inset-0
                          overflow-hidden
                          rounded-full
                        "
                      >

                        <div
                          className="
                            absolute
                            -left-32
                            top-0

                            h-full
                            w-20

                            skew-x-[-25deg]

                            bg-gradient-to-r
                            from-transparent
                            via-white/80
                            to-transparent

                            translate-x-[-250%]

                            group-hover:translate-x-[520%]

                            transition-transform
                            duration-[1300ms]
                          "
                        />

                      </div>


                      {/* ===================================== */}
                      {/* OUTER GOLD RING */}
                      {/* ===================================== */}

                      <div
                        className="
                          absolute
                          inset-[10px]
                          will-change-transform
                          rounded-full

                          border
                          border-gold/55

                          transition-all
                          duration-500

                          group-hover:scale-[1.03]
                          group-hover:border-gold
                        "
                      />


                      {/* ===================================== */}
                      {/* INNER GOLD RING */}
                      {/* ===================================== */}

                      <div
                        className="
                          absolute
                          inset-[18px]
                          will-change-transform
                          rounded-full

                          border
                          border-gold/15

                          transition-all
                          duration-700

                          group-hover:scale-[1.05]
                        "
                      />


                      {/* ===================================== */}
                      {/* TEXT */}
                      {/* ===================================== */}

                      <div
                        className="
                          relative
                          z-20
                          px-8
                          text-center
                        "
                      >

                        <h3
                          className="
                            font-serif
                            italic
                            text-xl
                            leading-snug
                            text-espresso

                            transition-colors
                            duration-500

                            group-hover:text-gold
                          "
                        >
                          {item}
                        </h3>

                      </div>

                    </div>
                  </div>
                );
              }
            )}

          </div>
        </div>


        {/* ==================================================== */}
        {/* MOBILE */}
        {/* ==================================================== */}

        <div className="relative mt-10 lg:hidden">

          {section?.items.map(
            (item, index) => {

              const isCharging =
                chargingIndex === index &&
                index > 0;

              return (
                <div
                  key={item}

                >

                  <div
                    className="
                      relative
                      flex
                      justify-center
                      mb-14
                    "
                  >

                    {/* ====================================== */}
                    {/* MOBILE CIRCLE */}
                    {/* ====================================== */}

                    <div
                      onPointerDown={() => setActiveCircle(index)}
                      onPointerUp={() => setActiveCircle(-1)}
                      onPointerCancel={() => setActiveCircle(-1)}
                      onMouseEnter={() => setActiveCircle(index)}
                      onMouseLeave={() => setActiveCircle(-1)}
                      className={`
    group
    relative
    will-change-transform
    flex
    items-center
    justify-center
    h-[170px]
    w-[170px]
    rounded-full
    border
    border-gold/40
    bg-gradient-to-br
    from-white
    via-[#FFFCF6]
    to-[#F7EFE2]
    shadow-[0_20px_50px_rgba(0,0,0,.08)]
    overflow-hidden
    transition-all
    duration-700
    hover:scale-105
    hover:border-gold
    ${activeCircle === index ? "z-20" : "z-0"}
  `}
                    >

                      {/* ==================================== */}
                      {/* MOBILE CONNECTION SPARK */}
                      {/* ==================================== */}

                      {isCharging && (
                        <div
                          className="
                            pointer-events-none
                            absolute
                            inset-0
                            z-30
                          "
                        >

                          <div
                            className="
                              absolute
                              left-1/2
                              top-0

                              w-0
                              h-0

                              -translate-x-1/2
                            "
                          >

                            <span className="connection-flash" />

                            <span className="sprinkle sprinkle-1" />

                            <span className="sprinkle sprinkle-2" />

                            <span className="sprinkle sprinkle-3" />

                            <span className="sprinkle sprinkle-4" />

                            <span className="sprinkle sprinkle-5" />

                            <span className="sprinkle sprinkle-6" />

                            <span className="sprinkle sprinkle-7" />

                            <span className="sprinkle sprinkle-8" />

                            <span className="fine-spark fine-1" />

                            <span className="fine-spark fine-2" />

                            <span className="fine-spark fine-3" />

                            <span className="fine-spark fine-4" />

                          </div>
                        </div>
                      )}


                      {/* ==================================== */}
                      {/* LIGHT SWEEP */}
                      {/* ==================================== */}

                      <div
                        className="
                          pointer-events-none
                          absolute
                          inset-0
                          overflow-hidden
                          rounded-full
                        "
                      >

                        <div
                          className="
                            absolute
                            -left-24
                            top-0

                            h-full
                            w-20

                            skew-x-[-25deg]

                            bg-gradient-to-r
                            from-transparent
                            via-white/80
                            to-transparent

                            translate-x-[-250%]

                            group-hover:translate-x-[520%]

                            transition-transform
                            duration-[1300ms]
                          "
                        />

                      </div>


                      {/* ==================================== */}
                      {/* OUTER RING */}
                      {/* ==================================== */}

                      <div
                        className="
                          absolute
                          inset-[10px]
                          will-change-transform
                          rounded-full

                          border
                          border-gold/55

                          transition-all
                          duration-500

                          group-hover:scale-[1.03]
                          group-hover:border-gold
                        "
                      />


                      {/* ==================================== */}
                      {/* INNER RING */}
                      {/* ==================================== */}

                      <div
                        className="
                          absolute
                          inset-[18px]
                          will-change-transform
                          rounded-full

                          border
                          border-gold/15

                          transition-all
                          duration-700

                          group-hover:scale-[1.05]
                        "
                      />


                      {/* ==================================== */}
                      {/* TEXT */}
                      {/* ==================================== */}

                      <div
                        className="
                          relative
                          p-4
                          z-20
                          text-center
                        "
                      >

                        <h3
                          className="
                            font-serif
                            italic
                            text-lg
                            text-espresso

                            transition-colors
                            duration-500

                            group-hover:text-gold
                          "
                        >
                          {item}
                        </h3>

                      </div>

                    </div>


                    {/* ====================================== */}
{/* MOBILE CONNECTOR */}
{/* ====================================== */}

{index !== section.items.length - 1 && (
  <div
    className="
      absolute
      left-1/2
      top-full

      h-14
      w-[2px]

      -translate-x-1/2

      origin-top

      z-10
    "
  >
    <div
      className="
        relative
        h-full
        w-full

        origin-top

        transition-transform
        duration-[1200ms]
        ease-out
      "
      style={{
        transform:
          activeLine >= index
            ? "scaleY(1)"
            : "scaleY(0)",

        background:
          "linear-gradient(to right, rgba(201,164,90,.15), #C9A45A, rgba(201,164,90,.95))",
      }}
    >

      {/* ================================== */}
      {/* MOVING ENERGY TIP */}
      {/* ================================== */}

      <div
        className="
          absolute

          left-1/2
          top-full

          h-[6px]
          w-[6px]

          -translate-x-1/2
          -translate-y-1/2

          rounded-full

          bg-gold

          shadow-[0_0_8px_rgba(201,164,90,.95)]

          transition-opacity
          duration-300
        "
        style={{
          opacity:
            activeLine >= index
              ? 1
              : 0,
        }}
      />

    </div>
  </div>
)}

                  </div>

                </div>
              );
            }
          )}

        </div>

      </div>


      {/* ====================================================== */}
      {/* PREMIUM SPARK / SPRINKLER CSS */}
      {/* ====================================================== */}

      <style jsx>{`

  /*
   * ============================================================
   * SMOOTH GOLDEN ENERGY BURST
   * ============================================================
   */

  @keyframes connectionFlash {

    0% {
      opacity: 0;

      transform:
        translate3d(-50%, -50%, 0)
        scale(.2);
    }

    8% {
      opacity: .25;

      transform:
        translate3d(-50%, -50%, 0)
        scale(.45);
    }

    16% {
      opacity: .55;

      transform:
        translate3d(-50%, -50%, 0)
        scale(.75);
    }

    25% {
      opacity: .85;

      transform:
        translate3d(-50%, -50%, 0)
        scale(1.05);
    }

    36% {
      opacity: 1;

      transform:
        translate3d(-50%, -50%, 0)
        scale(1.3);
    }

    52% {
      opacity: .88;

      transform:
        translate3d(-50%, -50%, 0)
        scale(1.55);
    }

    72% {
      opacity: .48;

      transform:
        translate3d(-50%, -50%, 0)
        scale(1.85);
    }

    100% {
      opacity: 0;

      transform:
        translate3d(-50%, -50%, 0)
        scale(2.25);
    }

  }


  /*
   * ============================================================
   * MAIN GOLDEN ENERGY
   * ============================================================
   */

  .connection-flash {

    position: absolute;

    left: 0;
    top: 0;

    width: 14px;
    height: 14px;

    border-radius: 50%;

    background:
      radial-gradient(
        circle,
        #ffffff 0%,
        #fffdf4 12%,
        #fff5ca 28%,
        #ffe9a5 44%,
        #C9A45A 66%,
        rgba(201,164,90,.45) 82%,
        transparent 100%
      );

    box-shadow:
      0 0 5px rgba(255,255,255,.95),
      0 0 12px rgba(255,250,220,.95),
      0 0 24px rgba(255,235,170,.9),
      0 0 40px rgba(201,164,90,.85),
      0 0 60px rgba(201,164,90,.6),
      0 0 85px rgba(201,164,90,.35);

    will-change:
      transform,
      opacity;

    backface-visibility: hidden;

    animation:
      connectionFlash
      1100ms
      cubic-bezier(.22,.61,.36,1)
      forwards;

  }


  /*
   * ============================================================
   * BRIGHT CORE
   * ============================================================
   */

  .connection-flash::before {

    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    transform:
      translate3d(-50%, -50%, 0);

    background: #ffffff;

    box-shadow:
      0 0 4px #ffffff,
      0 0 10px #ffffff,
      0 0 18px #fff2b8,
      0 0 28px #C9A45A;

  }


  /*
   * ============================================================
   * GOLDEN PARTICLES
   * ============================================================
   */

  .sprinkle {

    position: absolute;

    left: 0;
    top: 0;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
      radial-gradient(
        circle,
        #ffffff 0%,
        #fffbea 20%,
        #ffe9a5 40%,
        #C9A45A 70%,
        transparent 100%
      );

    box-shadow:
      0 0 4px rgba(255,255,255,.95),
      0 0 10px rgba(255,240,185,.9),
      0 0 18px rgba(201,164,90,.85),
      0 0 28px rgba(201,164,90,.4);

    opacity: 0;

    will-change:
      transform,
      opacity;

    backface-visibility: hidden;

    animation-duration: 1350ms;

    animation-timing-function:
      cubic-bezier(.16,.72,.25,1);

    animation-fill-mode: forwards;

  }


  /*
   * ============================================================
   * PARTICLE ASSIGNMENTS
   * ============================================================
   */

  .sprinkle-1 {
    animation-name: sprinkleOne;
  }

  .sprinkle-2 {
    animation-name: sprinkleTwo;
  }

  .sprinkle-3 {
    animation-name: sprinkleThree;
  }

  .sprinkle-4 {
    animation-name: sprinkleFour;
  }

  .sprinkle-5 {
    animation-name: sprinkleFive;
  }

  .sprinkle-6 {
    animation-name: sprinkleSix;
  }

  .sprinkle-7 {
    animation-name: sprinkleSeven;
  }

  .sprinkle-8 {
    animation-name: sprinkleEight;
  }


  /*
   * ============================================================
   * PARTICLE 1
   * ============================================================
   */

  @keyframes sprinkleOne {

    0% {
      opacity: 0;

      transform:
        translate3d(-50%, -50%, 0)
        translate3d(0,0,0)
        scale(.15);
    }

    12% {
      opacity: .25;
    }

    22% {
      opacity: .9;
    }

    42% {
      opacity: 1;
    }

    68% {
      opacity: .65;
    }

    100% {
      opacity: 0;

      transform:
        translate3d(-50%, -50%, 0)
        translate3d(-78px,-88px,0)
        scale(.72);
    }

  }


  /*
   * ============================================================
   * PARTICLE 2
   * ============================================================
   */

  @keyframes sprinkleTwo {

    0% {
      opacity: 0;

      transform:
        translate3d(-50%, -50%, 0)
        translate3d(0,0,0)
        scale(.15);
    }

    12% {
      opacity: .25;
    }

    22% {
      opacity: .9;
    }

    42% {
      opacity: 1;
    }

    68% {
      opacity: .65;
    }

    100% {
      opacity: 0;

      transform:
        translate3d(-50%, -50%, 0)
        translate3d(-38px,-108px,0)
        scale(.72);
    }

  }


  /*
   * ============================================================
   * PARTICLE 3
   * ============================================================
   */

  @keyframes sprinkleThree {

    0% {
      opacity: 0;

      transform:
        translate3d(-50%, -50%, 0)
        translate3d(0,0,0)
        scale(.15);
    }

    12% {
      opacity: .25;
    }

    22% {
      opacity: .9;
    }

    42% {
      opacity: 1;
    }

    68% {
      opacity: .65;
    }

    100% {
      opacity: 0;

      transform:
        translate3d(-50%, -50%, 0)
        translate3d(35px,-102px,0)
        scale(.72);
    }

  }


  /*
   * ============================================================
   * PARTICLE 4
   * ============================================================
   */

  @keyframes sprinkleFour {

    0% {
      opacity: 0;

      transform:
        translate3d(-50%, -50%, 0)
        translate3d(0,0,0)
        scale(.15);
    }

    12% {
      opacity: .25;
    }

    22% {
      opacity: .9;
    }

    42% {
      opacity: 1;
    }

    68% {
      opacity: .65;
    }

    100% {
      opacity: 0;

      transform:
        translate3d(-50%, -50%, 0)
        translate3d(92px,-58px,0)
        scale(.72);
    }

  }


  /*
   * ============================================================
   * PARTICLE 5
   * ============================================================
   */

  @keyframes sprinkleFive {

    0% {
      opacity: 0;

      transform:
        translate3d(-50%, -50%, 0)
        translate3d(0,0,0)
        scale(.15);
    }

    12% {
      opacity: .25;
    }

    22% {
      opacity: .9;
    }

    42% {
      opacity: 1;
    }

    68% {
      opacity: .65;
    }

    100% {
      opacity: 0;

      transform:
        translate3d(-50%, -50%, 0)
        translate3d(88px,55px,0)
        scale(.72);
    }

  }


  /*
   * ============================================================
   * PARTICLE 6
   * ============================================================
   */

  @keyframes sprinkleSix {

    0% {
      opacity: 0;

      transform:
        translate3d(-50%, -50%, 0)
        translate3d(0,0,0)
        scale(.15);
    }

    12% {
      opacity: .25;
    }

    22% {
      opacity: .9;
    }

    42% {
      opacity: 1;
    }

    68% {
      opacity: .65;
    }

    100% {
      opacity: 0;

      transform:
        translate3d(-50%, -50%, 0)
        translate3d(28px,105px,0)
        scale(.72);
    }

  }


  /*
   * ============================================================
   * PARTICLE 7
   * ============================================================
   */

  @keyframes sprinkleSeven {

    0% {
      opacity: 0;

      transform:
        translate3d(-50%, -50%, 0)
        translate3d(0,0,0)
        scale(.15);
    }

    12% {
      opacity: .25;
    }

    22% {
      opacity: .9;
    }

    42% {
      opacity: 1;
    }

    68% {
      opacity: .65;
    }

    100% {
      opacity: 0;

      transform:
        translate3d(-50%, -50%, 0)
        translate3d(-70px,82px,0)
        scale(.72);
    }

  }


  /*
   * ============================================================
   * PARTICLE 8
   * ============================================================
   */

  @keyframes sprinkleEight {

    0% {
      opacity: 0;

      transform:
        translate3d(-50%, -50%, 0)
        translate3d(0,0,0)
        scale(.15);
    }

    12% {
      opacity: .25;
    }

    22% {
      opacity: .9;
    }

    42% {
      opacity: 1;
    }

    68% {
      opacity: .65;
    }

    100% {
      opacity: 0;

      transform:
        translate3d(-50%, -50%, 0)
        translate3d(-92px,25px,0)
        scale(.72);
    }

  }


  /*
   * ============================================================
   * FINE SPARKLES
   * ============================================================
   */

  .fine-spark {

    position: absolute;

    left: 0;
    top: 0;

    width: 3px;
    height: 3px;

    border-radius: 50%;

    background:
      radial-gradient(
        circle,
        #ffffff 0%,
        #fff8dc 35%,
        #C9A45A 75%,
        transparent 100%
      );

    box-shadow:
      0 0 4px rgba(255,255,255,.95),
      0 0 9px rgba(255,245,200,.85),
      0 0 15px rgba(201,164,90,.75);

    opacity: 0;

    will-change:
      transform,
      opacity;

    backface-visibility: hidden;

    animation-duration: 1150ms;

    animation-timing-function:
      cubic-bezier(.16,.72,.25,1);

    animation-fill-mode: forwards;

  }


  .fine-1 {
    animation-name: fineOne;
  }

  .fine-2 {
    animation-name: fineTwo;
  }

  .fine-3 {
    animation-name: fineThree;
  }

  .fine-4 {
    animation-name: fineFour;
  }


  @keyframes fineOne {

    0% {
      opacity: 0;

      transform:
        translate3d(-50%,-50%,0)
        scale(.1);
    }

    15% {
      opacity: .2;
    }

    25% {
      opacity: .85;
    }

    42% {
      opacity: 1;
    }

    70% {
      opacity: .55;
    }

    100% {
      opacity: 0;

      transform:
        translate3d(-50%,-50%,0)
        translate3d(-52px,-70px,0)
        scale(.5);
    }

  }


  @keyframes fineTwo {

    0% {
      opacity: 0;

      transform:
        translate3d(-50%,-50%,0)
        scale(.1);
    }

    15% {
      opacity: .2;
    }

    25% {
      opacity: .85;
    }

    42% {
      opacity: 1;
    }

    70% {
      opacity: .55;
    }

    100% {
      opacity: 0;

      transform:
        translate3d(-50%,-50%,0)
        translate3d(60px,-58px,0)
        scale(.5);
    }

  }


  @keyframes fineThree {

    0% {
      opacity: 0;

      transform:
        translate3d(-50%,-50%,0)
        scale(.1);
    }

    15% {
      opacity: .2;
    }

    25% {
      opacity: .85;
    }

    42% {
      opacity: 1;
    }

    70% {
      opacity: .55;
    }

    100% {
      opacity: 0;

      transform:
        translate3d(-50%,-50%,0)
        translate3d(55px,65px,0)
        scale(.5);
    }

  }


  @keyframes fineFour {

    0% {
      opacity: 0;

      transform:
        translate3d(-50%,-50%,0)
        scale(.1);
    }

    15% {
      opacity: .2;
    }

    25% {
      opacity: .85;
    }

    42% {
      opacity: 1;
    }

    70% {
      opacity: .55;
    }

    100% {
      opacity: 0;

      transform:
        translate3d(-50%,-50%,0)
        translate3d(-62px,58px,0)
        scale(.5);
    }

  }


  /*
   * ============================================================
   * PERFORMANCE
   * ============================================================
   */

  .connection-flash,
  .sprinkle,
  .fine-spark {

    pointer-events: none;

    backface-visibility: hidden;

    transform-style: preserve-3d;

  }


  @media (prefers-reduced-motion: reduce) {

    .connection-flash,
    .sprinkle,
    .fine-spark {
      animation: none;
    }

  }

`}</style>
    </section>
  );
}