/* =========================================
   FIG TIN — Animated Jewelry Hero
   Clean responsive version
   ========================================= */

/* Main hero container */
.ft-float-hero {
  position: relative;
  width: 100%;
  height: clamp(480px, 58vw, 760px);
  overflow: hidden;
  background: #062b35;
  container-type: inline-size;
  isolation: isolate;
}

/* Autumn background */
.ft-float-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;

  background-image: url("hero-animation/hero-autumn.webp");
  background-size: cover;
  background-position: center 78%;
  background-repeat: no-repeat;
}

/* Shared movement */
.ft-float-piece {
  position: absolute;
  left: 0;
  width: 10%;
  overflow: hidden;
  opacity: 1;
  pointer-events: none;

  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));

  animation: figtin-fly 50s linear infinite;
  will-change: left;
}

/* Jewelry image base */
.ft-float-piece img {
  position: absolute;
  display: block;
  max-width: none;
  height: auto;
}

/* 1 — Original necklace */
.ft-float-piece--left {
  top: 3%;
  aspect-ratio: 1272 / 1436;
  animation-delay: -10s;
}

.ft-float-piece--left img {
  width: 141.5%;
  left: -26.1%;
  top: -50.4%;
}

/* 2 — Original earrings */
.ft-float-piece--top {
  top: 1%;
  aspect-ratio: 436 / 348;
  animation-delay: -20s;
}

.ft-float-piece--top img {
  width: 412.8%;
  left: -150.5%;
  top: -349.4%;
}

/* 3 — Original charm */
.ft-float-piece--right {
  top: 5%;
  aspect-ratio: 788 / 608;
  animation-delay: -30s;
}

.ft-float-piece--right img {
  width: 228.4%;
  left: -56.35%;
  top: -173%;
}

/* 4 — Ivory and black charm */
.ft-float-piece--fourth {
  top: -3%;
  width: 8%;
  aspect-ratio: 2 / 3;
  animation-delay: -40s;
}

.ft-float-piece--fourth img {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 5 — Green beads and buttons */
.ft-float-piece--fifth {
  top: -6%;
  width: 11%;
  aspect-ratio: 2 / 3;
  animation-delay: 0s;
}

.ft-float-piece--fifth img {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Jewelry movement */
@keyframes figtin-fly {
  from {
    left: -25%;
  }

  to {
    left: 105%;
  }
}

/* =========================================
   MOBILE — up to 767px
   ========================================= */

@media (max-width: 767px) {

  .ft-float-hero {
  height: 78vh;
  min-height: 480px;
  }

  /*
   * Horizontal framing adjustment.
   * 42% moves the visible subject toward
   * the right compared with 58%.
   */
  .ft-float-stage {
    background-size: cover;
  background-position: 53% 78%;
  /* Jewelry sizing on mobile */}

  .ft-float-piece {
    width: 22%;
  }

  .ft-float-piece--left {
    top: 8%;
  }

  .ft-float-piece--top {
    top: 3%;
  }

  .ft-float-piece--right {
    top: 10%;
  }

  .ft-float-piece--fourth {
    width: 16%;
    top: 0%;
  }

  .ft-float-piece--fifth {
    width: 19%;
    top: -5%;
  }
}

/* =========================================
   ACCESSIBILITY
   ========================================= */

@media (prefers-reduced-motion: reduce) {
  .ft-float-piece {
    animation: none;
    left: -30%;
    will-change: auto;
  }
}