/*
================================================

Space Vanta Theme 1.0

Module:
Bundle Hero Brand Extension

File:
public/brand/bundle/hero.css

Version:
3.2

Responsibility:
Bundle Hero Brand Typography / Visual Expression

Depends on:
public/bundle-template/bundle-hero.css

================================================
*/


/* =================================================
   1. Hero Title
================================================= */

.sv-bundle-hero__title {
  position: relative;

  margin: 0;

  font-family:
    var(--sv-font-bundle,
      var(--sv-font-brand));

  font-size: clamp(46px, 4.7vw, 72px);

  font-weight: 600;

  line-height: 0.98;

  letter-spacing: -0.035em;

  color:
    var(--sv-color-text, #111);

  text-wrap: balance;
}


/* =================================================
   2. Desktop Title
================================================= */

@media (min-width: 769px) {

  .sv-bundle-hero__title {
    /*
     * Title begins at the exact top of the
     * Hero media.
     *
     * No vertical offset is introduced.
     */
    white-space: nowrap;
  }

}


/* =================================================
   3. Title Accent
================================================= */

.sv-bundle-hero__title::after {
  content: "";

  display: block;

  width: 52px;
  height: 1px;

  margin-top: 17px;

  background:
    linear-gradient(90deg,
      rgba(139, 146, 155, 0.9),
      rgba(205, 209, 214, 0.58),
      transparent);
}


/* =================================================
   4. Hero Description
================================================= */

.sv-bundle-hero__description {
  max-width: 410px;

  margin-top: 19px;

  font-family:
    var(--sv-font-ui,
      var(--sv-font-brand));

  font-size: 14px;

  font-weight: 400;

  line-height: 1.72;

  letter-spacing: 0.005em;

  color:
    rgba(17, 17, 17, 0.66);
}


/* =================================================
   5. Spatial Image Frame
================================================= */

.sv-bundle-hero__media {
  position: relative;

  /*
   * Slightly softened asymmetric corners.
   *
   * This avoids the feeling of a conventional
   * rectangular product image.
   */
  border-radius:
    24px 10px 24px 10px;

  background:
    linear-gradient(135deg,
      #f8f9fa 0%,
      #dfe2e6 42%,
      #f4f5f6 72%,
      #c9ced4 100%);

  border: 1px solid rgba(143, 149, 157, 0.52);

  box-shadow:
    0 16px 34px rgba(25, 30, 36, 0.10),

    0 3px 8px rgba(25, 30, 36, 0.06),

    inset 0 1px 0 rgba(255, 255, 255, 0.88),

    inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}


/* =================================================
   6. Spatial Frame Inner Reflection
================================================= */

.sv-bundle-hero__media::before {
  content: "";

  position: absolute;

  inset: 0;

  z-index: 2;

  pointer-events: none;

  border-radius:
    24px 10px 24px 10px;

  background:
    linear-gradient(132deg,
      rgba(255, 255, 255, 0.28),
      transparent 28%,
      transparent 68%,
      rgba(76, 101, 128, 0.07));

  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.42);
}


/* =================================================
   7. Spatial Cold Reflection
================================================= */

.sv-bundle-hero__media::after {
  content: "";

  position: absolute;

  inset: 0;

  z-index: 3;

  pointer-events: none;

  border-radius:
    24px 10px 24px 10px;

  background:
    linear-gradient(116deg,
      transparent 0%,
      transparent 56%,
      rgba(74, 104, 138, 0.055) 78%,
      rgba(67, 92, 122, 0.085) 100%);

  mix-blend-mode: multiply;

  opacity: 0.8;
}


/* =================================================
   8. Main Image
================================================= */

.sv-bundle-hero__image {
  position: relative;

  z-index: 1;

  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  /*
   * The image itself follows the same
   * spatial corner language as the frame.
   */
  border-radius:
    24px 10px 24px 10px;

  opacity: 1;

  transform: scale(1);

  transition:
    opacity 180ms ease,
    transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}


/* =================================================
   9. Image Hover
================================================= */

@media (hover: hover) and (pointer: fine) {

  .sv-bundle-hero__media:hover .sv-bundle-hero__image {

    transform: scale(1.012);
  }

}


/* =================================================
   10. Image Switching
================================================= */

.sv-bundle-hero__image.is-switching {
  opacity: 0.72;
}


/* =================================================
   11. Feature Navigation
================================================= */

.sv-bundle-hero__feature {
  border-radius: 50%;

  opacity: 0.62;

  transition:
    opacity 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
}


/* =================================================
   12. Feature Image
================================================= */

.sv-bundle-hero__feature-image {
  border: 1px solid rgba(153, 159, 167, 0.48);

  box-shadow:
    0 4px 12px rgba(20, 25, 32, 0.08),

    inset 0 1px 0 rgba(255, 255, 255, 0.65);
}


/* =================================================
   13. Feature Hover
================================================= */

@media (hover: hover) and (pointer: fine) {

  .sv-bundle-hero__feature:hover {

    opacity: 0.92;

    transform:
      translateY(-1px);
  }

}


/* =================================================
   14. Active Feature
================================================= */

.sv-bundle-hero__feature.is-active {

  opacity: 1;

  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.92),

    0 0 0 2px rgba(93, 118, 148, 0.24),

    0 6px 18px rgba(48, 69, 94, 0.12);
}


/* =================================================
   15. Hero CTA
================================================= */

.sv-bundle-hero__button {
  position: relative;

  min-height: 46px;

  padding:
    0 20px 0 22px;

  gap: 12px;

  overflow: hidden;

  isolation: isolate;

  border: 1px solid transparent;

  border-radius: 999px;

  /*
   * Default state:
   * visibly metallic.
   *
   * Silver / white / gray remain dominant.
   */
  background:
    linear-gradient(135deg,
      #ffffff 0%,
      #e6e8eb 22%,
      #b9bec5 48%,
      #eef0f2 70%,
      #c7cbd0 100%) padding-box,

    linear-gradient(135deg,
      #9da4ac 0%,
      #f9fafb 24%,
      #8f969e 53%,
      #ffffff 74%,
      #a2a8b0 100%) border-box;

  color: #191c20;

  font-family:
    var(--sv-font-ui,
      var(--sv-font-brand));

  font-size: 11px;

  font-weight: 600;

  line-height: 1;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  /*
   * Stronger metallic depth in resting state.
   */
  box-shadow:
    0 7px 16px rgba(28, 34, 40, 0.10),

    0 2px 5px rgba(28, 34, 40, 0.08),

    inset 0 1px 0 rgba(255, 255, 255, 0.96),

    inset 0 -1px 0 rgba(117, 123, 131, 0.24);

  transform:
    translateY(0);

  transition:
    color 360ms ease,
    background 520ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 420ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}


/* =================================================
   16. CTA Metallic Highlight
================================================= */

.sv-bundle-hero__button::before {
  content: "";

  position: absolute;

  inset: 0;

  z-index: -1;

  pointer-events: none;

  background:
    linear-gradient(108deg,
      transparent 12%,
      rgba(255, 255, 255, 0.18) 34%,
      rgba(255, 255, 255, 0.72) 48%,
      rgba(255, 255, 255, 0.12) 63%,
      transparent 82%);

  transform:
    translateX(-125%);

  transition:
    transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
}


/* =================================================
   17. CTA Cold Blue Layer
================================================= */

.sv-bundle-hero__button::after {

  content: "";

  position: absolute;

  inset: 0;

  z-index: -2;

  pointer-events: none;

  border-radius: inherit;

  /*
   * The blue layer is intentionally translucent.
   *
   * It does NOT replace the metallic surface.
   */
  background:
    linear-gradient(118deg,
      rgba(205, 211, 219, 0.05),
      rgba(98, 122, 150, 0.24) 46%,
      rgba(38, 62, 89, 0.52) 100%);

  opacity: 0;

  transform:
    translateX(-14%);

  transition:
    opacity 520ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}


/* =================================================
   18. CTA Arrow
================================================= */

.sv-bundle-hero__button span {
  position: relative;

  z-index: 2;
}


/* =================================================
   19. CTA Hover
================================================= */

@media (hover: hover) and (pointer: fine) {

  .sv-bundle-hero__button:hover {

    /*
     * The metallic base remains visible.
     * Cold blue becomes a surface transition.
     */
    color: #f8fafc;

    background:
      linear-gradient(135deg,
        #f2f4f6 0%,
        #d4d9df 20%,
        #aeb8c4 42%,
        #7e91a7 68%,
        #aeb9c5 100%) padding-box,

      linear-gradient(135deg,
        #ffffff 0%,
        #aeb9c5 30%,
        #4f6781 66%,
        #dce1e6 100%) border-box;

    box-shadow:
      0 15px 30px rgba(35, 57, 80, 0.19),

      0 5px 12px rgba(35, 57, 80, 0.12),

      inset 0 1px 0 rgba(255, 255, 255, 0.78),

      inset 0 -1px 0 rgba(48, 69, 91, 0.22);

    transform:
      translateY(-3px);
  }


  .sv-bundle-hero__button:hover::before {

    transform:
      translateX(125%);
  }


  .sv-bundle-hero__button:hover::after {

    opacity: 1;

    transform:
      translateX(0);
  }

}


/* =================================================
   20. Mobile Typography
================================================= */

@media (max-width: 768px) {

  .sv-bundle-hero__title {

    font-size:
      clamp(40px, 11vw, 58px);

    line-height: 1;

    letter-spacing: -0.03em;

    white-space: normal;
  }


  .sv-bundle-hero__title::after {

    margin-top: 14px;
  }


  .sv-bundle-hero__description {

    max-width: 100%;

    font-size: 14px;

    line-height: 1.68;
  }


  .sv-bundle-hero__button {

    min-height: 46px;

    padding:
      0 18px 0 20px;
  }


  .sv-bundle-hero__media {

    border-radius:
      20px 8px 20px 8px;
  }


  .sv-bundle-hero__media::before,
  .sv-bundle-hero__media::after,
  .sv-bundle-hero__image {

    border-radius:
      20px 8px 20px 8px;
  }

}


/* =================================================
   21. Reduced Motion
================================================= */

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

  .sv-bundle-hero__image,
  .sv-bundle-hero__feature,
  .sv-bundle-hero__button,
  .sv-bundle-hero__button::before,
  .sv-bundle-hero__button::after {

    transition: none;
  }

}