Cosmetics Hero with Floating Product and Glass Card

<!-- Main Hero Content -->
<div class="flex-grow w-full h-full z-10 relative">
  <!-- Giant Typography -->
  <div class="absolute top-[15%] left-0 w-full text-center pointer-events-none select-none z-0">
    <h1
      class="hero-heading text-[21vw] leading-none font-semibold tracking-tighter text-white/80 mix-blend-overlay opacity-0">
      AETHER
    </h1>
  </div>

  <!-- Horizontal Grid Line -->
  <div class="hero-line absolute top-[42%] left-0 w-full h-[1px] bg-white/20 z-10 origin-center"></div>

  <!-- Floating Product Image (Center, Tilted) -->
  <div class="hero-product z-20 md:w-80 lg:w-96 group cursor-pointer w-56 absolute top-[45%] left-1/2">
    <div class="relative">
      <img src="https://images.unsplash.com/photo-1620916566398-39f1143ab7be?q=80&amp;w=1887&amp;auto=format&amp;fit=crop" alt="Lumina Repair peptide serum standing on soft white fabric" class="grayscale-[10%] contrast-110 w-full h-auto z-10 relative drop-shadow-[0_30px_80px_rgba(0,0,0,0.6)]">
      <!-- Subtle indicator circle/target under bottle -->
      <div
        class="absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-1/4 w-full h-full border border-white/20 rounded-full scale-y-[0.3] opacity-0 group-hover:opacity-100 transition-opacity duration-500">
      </div>
      <div
        class="absolute -bottom-10 left-1/2 -translate-x-1/2 w-[1px] h-20 bg-gradient-to-b from-white/50 to-transparent opacity-50">
      </div>
    </div>
  </div>

  <!-- Left Text Content (desktop / tablet) -->
  <div class="hero-left hidden md:block max-w-xs absolute top-[55%] left-8 md:left-16 opacity-0">
    <p class="leading-relaxed uppercase text-xs font-medium text-neutral-200 tracking-widest">
      We believe that skincare is not just a routine; it's a journey towards
      confidence, vitality, and self-expression.
    </p>
  </div>

  <!-- Left Text Content (mobile only, below image) -->
  <p class="md:hidden px-8 mt-auto mb-40 text-[11px] leading-relaxed text-neutral-200 uppercase tracking-widest">
    Skincare is a journey towards confidence, vitality, and self-expression.
  </p>

  <!-- Right Glass Card -->
  <div
    class="hero-card absolute bottom-6 left-4 right-4 md:bottom-12 md:right-16 md:left-auto z-30 w-auto md:w-full md:max-w-sm opacity-0">
    <div
      class="glass-card rounded-lg p-6 md:p-8 text-white backdrop-blur-xl bg-white/10 border border-white/20 rounded-2xl p-8 shadow-[0_8px_32px_rgba(0,0,0,0.15)]">
      <div class="flex flex-col md:flex-row md:justify-between md:items-center gap-4 mb-8">
        <div class="">
          <h3 class="text-lg font-medium tracking-tight">
            Lumina Repair
          </h3>
          <p class="text-sm text-neutral-300 font-light mt-1">Complex 8% Peptide Serum
            <span class="text-orange-400 font-medium ml-2 text-[10px] uppercase tracking-wider">[30% OFF]</span>
          </p>
        </div>
        <button type="button" class="border border-white/80 px-6 py-2 rounded-full text-xs font-medium hover:bg-white hover:text-black transition-all duration-300 whitespace-nowrap">Shop Sale</button>
      </div>

      <div class="w-full h-[1px] bg-gradient-to-r from-white/0 via-white/20 to-white/0 mb-4"></div>

      <div class="flex justify-between items-center text-[10px] md:text-xs text-neutral-300 font-medium tracking-wide">
        <span class="flex items-center gap-1.5">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-3.5 h-3.5 stroke-[1.5]">
              <path d="M20 6 9 17l-5-5"></path>
            </svg>
            Sulfate free
          </span>
        <span class="flex items-center gap-1.5">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-3.5 h-3.5 stroke-[1.5]">
              <path d="M20 6 9 17l-5-5"></path>
            </svg>
            Paraben free
          </span>
        <span class="flex items-center gap-1.5">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-3.5 h-3.5 stroke-[1.5]">
              <path d="M20 6 9 17l-5-5"></path>
            </svg>
            Silicone free
          </span>
      </div>
    </div>
  </div>
</div>
</section>
<div class="bg-neutral-950 border-y border-white/10 text-white relative z-20">
  <div class="max-w-7xl mx-auto px-6 py-4 flex flex-col md:flex-row items-center justify-between gap-4 md:gap-8">
    <div class="flex items-center gap-3">
      <span class="relative flex h-2 w-2">
        <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-orange-500 opacity-75"></span>
      <span class="relative inline-flex rounded-full h-2 w-2 bg-orange-600"></span>
      </span>
      <p class="text-xs md:text-sm font-medium tracking-wide text-neutral-300">
        <span class="text-white font-bold uppercase tracking-widest mr-2">Black Friday</span>
        Event is live. Enjoy 30% off sitewide.
      </p>
    </div>
    <div class="flex items-center gap-6">
      <span class="hidden md:block text-[10px] font-mono text-neutral-500 uppercase tracking-widest">Use Code: <span class="text-white">AETHER30</span></span>
      <a href="#shop"
        class="text-[10px] font-bold uppercase tracking-widest border border-white/20 px-6 py-2 rounded-full hover:bg-white hover:text-black transition-all duration-300">
        Shop Access
      </a>
    </div>
  </div>
</div>

<style class="">
  /* Intro + float animations inspired by the Dribbble shot */

  .hero-heading {
    animation: heroHeadingIn 1s ease-out 0.1s forwards;
  }

  .hero-line {
    opacity: 0;
    transform: scaleX(0);
    animation: heroLineIn 0.9s ease-out 0.4s forwards;
  }

  .hero-product {
    opacity: 0;
    /* two animations: intro, then subtle float loop */
    animation:
      heroProductIn 1s cubic-bezier(0.22, 0.85, 0.25, 1) 0.2s forwards,
      heroProductFloat 6s ease-in-out 1.2s infinite;
    transform-origin: center center;
    will-change: transform;
  }

  .hero-card {
    animation: heroCardIn 0.9s ease-out 0.6s forwards;
  }

  .hero-left {
    animation: heroTextIn 0.8s ease-out 0.7s forwards;
  }

  @keyframes heroHeadingIn {
    from {
      opacity: 0;
      transform: translateY(40px) scale(1.08);
    }

    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  @keyframes heroLineIn {
    from {
      opacity: 0;
      transform: scaleX(0);
    }

    to {
      opacity: 1;
      transform: scaleX(1);
    }
  }

  @keyframes heroProductIn {
    from {
      opacity: 0;
      transform: translate(-50%, 20%) scale(0.9) rotate(-16deg);
    }

    to {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1) rotate(-8deg);
    }
  }

  @keyframes heroProductFloat {

    0%,
    100% {
      transform: translate(-50%, -50%) scale(1) rotate(-8deg);
    }

    50% {
      transform: translate(-50%, -56%) scale(1.02) rotate(-6deg);
    }
  }

  @keyframes heroCardIn {
    from {
      opacity: 0;
      transform: translateY(40px) translateX(10px);
    }

    to {
      opacity: 1;
      transform: translateY(0) translateX(0);
    }
  }

  @keyframes heroTextIn {
    from {
      opacity: 0;
      transform: translateY(20px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Optional: respect reduced motion preferences */
  @media (prefers-reduced-motion: reduce) {

    .hero-heading,
    .hero-line,
    .hero-product,
    .hero-card,
    .hero-left {
      animation: none !important;
      opacity: 1 !important;
      transform: none !important;
    }

    .hero-product {
      transform: translate(-50%, -50%) rotate(-8deg) !important;
    }
  }

  .glass-card {
    /* translucent white base with a subtle gradient */
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.18),
        rgba(255, 255, 255, 0.04));
    border: 1px solid rgba(255, 255, 255, 0.22);

    /* strong blur to sell the glass effect */
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);

    /* a bit of depth */
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);

    /* soft corners (your Tailwind rounded-lg still applies) */
    position: relative;
  }

  /* Light highlight edge on top for extra “glass” feeling */
  .glass-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border-top: 1px solid rgba(255, 255, 255, 0.45);
    border-left: 1px solid rgba(255, 255, 255, 0.25);
    opacity: 0.6;
    pointer-events: none;
  }

  /* Fallback if backdrop-filter isn't supported */
  @supports not ((backdrop-filter: blur(10px))) {
    .glass-card {
      background: rgba(20, 20, 20, 0.9);
      box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7);
    }
  }
</style>