/* =========================================================
   VEXEN COMPONENTS
   ========================================================= */


/* =========================================================
   HEADER — SHOP
   Figma:
   Default  →  260 × 32
   Variant2 →  260 × 42

   While hovering
   Smart Animate
   Gentle
   800ms

   Hover:
   - text turns red
   - text moves 10px down
   ========================================================= */

.Shop {
  transition: color 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

.Shop > div {
  transition:
    color 800ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

.Shop:hover > div {
  color: #C63436;
  transform: translateY(10px);
}

.About {
  transition: color 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

.About > div {
  transition:
    color 800ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

.About:hover > div {
  color: #C63436;
  transform: translateY(10px);
}

/* =========================================================
   SHOP PAGE HEADER
   ========================================================= */

.ShopNavLink {
  transition:
    color 800ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ShopNavLink:hover {
  color: #C63436;
  transform: translateY(10px);
}

.ShopNavLink.ShopNavActive {
  transition:
    color 800ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ShopNavLink.ShopNavActive:hover {
  color: #C63436;
  transform: translateY(10px);
}

/* =========================================================
   SWORD TEE PAGE HEADER
   ========================================================= */

.SwordProductNavLink {
  transition:
    color 800ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

.SwordProductNavLink:hover {
  color: #C63436;
  transform: translateY(10px);
}

.SwordProductCartText {
  transition:
    color 800ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

.SwordProductCart:hover .SwordProductCartText {
  color: #C63436;
  transform: translateY(10px);
}


/* HOVER — ICON */

.SwordProductCartIcon {
  transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

.SwordProductCart:hover .SwordProductCartIcon {
  transform: translateY(10px) rotate(-6deg);
}

/* =========================================================
   HEADER — CART
   ========================================================= */

.Cart {
  transition: color 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

.Cart > div {
  transition:
    color 800ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

.Cart:hover > div {
  color: #C63436;
  transform: translateY(10px);
}

.Cart .ShoppingBasket {
  transform-origin: center;
  transition:
    transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

.Cart .ShoppingBasket .Vector {
  transition:
    background 800ms cubic-bezier(0.22, 1, 0.36, 1);
}


/* HOVER — ICON */

.Cart:hover .ShoppingBasket {
  transform: translateY(10px) rotate(-6deg);
}

/* =========================================================
   HEADER — SHOPCART
   ========================================================= */

.ShopCart {
  transition:
    color 800ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ShopCart:hover {
  color: #C63436;
  transform: translateY(10px);
}


/* HOVER — ICON */

.ShoppingBasket {

  transition:

    transform 800ms cubic-bezier(0.22, 1, 0.36, 1);

}

.ShopCart:hover .ShoppingBasket {
  transform: translateY(10px) rotate(-6deg);
}

/* =========================================================
   LANDING — PRE-ORDER BUTTON HOVER
   Figma:
   Default → Variant2
   While hovering → Smart Animate → Gentle → 800ms

   Applies ONLY to the Hero and Product buttons.
   The Final CTA button is intentionally untouched.
   ========================================================= */

@media (min-width: 768px) {

  .Hero .Button .Rectangle,
  .Product .Button .Rectangle {
    transition:
      width 800ms cubic-bezier(0.22, 1, 0.36, 1),
      left 800ms cubic-bezier(0.22, 1, 0.36, 1),
      background-color 800ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .Hero .Button .button-text,
  .Product .Button .button-text {
    transition:
      color 800ms cubic-bezier(0.22, 1, 0.36, 1),
      transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
  }

    .Hero .Button:hover .Rectangle,
  .Product .Button:hover .Rectangle {
    width: 343px;
    left: -54px;
    background-color: #7F1F1E;
  }

  .Hero .Button::after,
  .Product .Button::after {
    content: "";
    position: absolute;
    width: 30px;
    height: 30px;
    right: 18px;
    top: 50%;
    z-index: 3;
    background: url("../../images/arrow.svg") center / contain no-repeat;
    opacity: 0;
    transform: translate(-15px, -50%) rotate(180deg);
    transition:
      opacity 800ms cubic-bezier(0.22, 1, 0.36, 1),
      transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
  }

  .Hero .Button:hover .button-text,
  .Product .Button:hover .button-text {
    color: #F2F2F0;
    transform: translateX(-45px);
  }

  .Hero .Button:hover::after,
  .Product .Button:hover::after {
    opacity: 1;
    transform: translate(0, -50%) rotate(180deg);
  }
}

/* =========================================================
   LANDING - CTA BUTTON — EXPAND BOTH SIDES
   ========================================================= */

@media (min-width: 768px) {

  .FinalCta .Button .Rectangle {
    transition:
      width 800ms cubic-bezier(0.22, 1, 0.36, 1),
      left 800ms cubic-bezier(0.22, 1, 0.36, 1),
      background-color 800ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .FinalCta .Button .button-text {
    transition:
      color 800ms cubic-bezier(0.22, 1, 0.36, 1),
      transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
  }

    .FinalCta .Button:hover .Rectangle {
    width: 500px;
    left: -53px;
    background-color: #7F1F1E;
  }
  
  .FinalCta .Button::after {
    content: "";
    position: absolute;
    width: 38px;
    height: 38px;
    left: 350px;
    top: 50%;
    z-index: 3;
    background: url("../../images/arrow.svg") center / contain no-repeat;
    opacity: 0;
    transform: translate(-15px, -50%) rotate(180deg);
    transition:
      opacity 800ms cubic-bezier(0.22, 1, 0.36, 1),
      transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
  }

  .FinalCta .Button:hover .button-text {
    color: #F2F2F0;
    transform: translateX(-10px);
  }

  .FinalCta .Button:hover::after {
    opacity: 1;
    transform: translate(0, -50%) rotate(180deg);
  }

}

/* =========================================================
   SHOP.HTML - PREORDER BUTTON — EXPAND BOTH SIDES
   ========================================================= */

@media (min-width: 768px) {

  .ShopPreorderButton {
    transition:
      width 800ms cubic-bezier(0.22, 1, 0.36, 1),
      left 800ms cubic-bezier(0.22, 1, 0.36, 1),
      background-color 800ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .ShopPreorderButton span {
    transition:
      color 800ms cubic-bezier(0.22, 1, 0.36, 1),
      transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .ShopPreorderButton::after {
    content: "";
    position: absolute;
    width: 38px;
    height: 38px;
    left: 400px;
    top: 50%;
    z-index: 3;
    background: url("../../images/arrow.svg") center / contain no-repeat;
    opacity: 0;
    transform: translate(-100px, -50%) rotate(180deg);
    transition:
      opacity 800ms cubic-bezier(0.22, 1, 0.36, 1),
      transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
  }

  .ShopPreorderButton:hover {
    width: 500px;
    left: 365px;
    background-color: #7F1F1E;
  }

  .ShopPreorderButton:hover span {
    color: #F2F2F0;
    transform: translateX(-30px);
  }

  .ShopPreorderButton:hover::after {
    opacity: 1;
    transform: translate(0, -50%) rotate(180deg);
  }

}

/* =========================================================
   SWORD TEE — ADD TO CART
   EXPAND BOTH SIDES
   Stable hover: the clickable element itself does NOT move.
   Only the visual background expands, so the cursor never
   leaves/re-enters the hover target during the animation.
   ========================================================= */

@media (min-width: 768px) {

  .SwordProductAddButton {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: #0A0A0A;
    overflow: visible;

    transition:
      color 800ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* Expanding visual background */
  .SwordProductAddButton::before {
    content: "";
    position: absolute;

    width: 100%;
    height: 100%;
    left: 0;
    top: 0;

    z-index: 0;

    background: #E8E8E8;
    border-radius: inherit;

    transition:
      width 800ms cubic-bezier(0.22, 1, 0.36, 1),
      left 800ms cubic-bezier(0.22, 1, 0.36, 1),
      background-color 800ms cubic-bezier(0.22, 1, 0.36, 1);

    pointer-events: none;
  }

  .SwordProductAddButton span {
    position: relative;
    z-index: 2;

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

  /* Left-pointing Arrow */
  .SwordProductAddButton::after {
    content: "";
    position: absolute;

    width: 38px;
    height: 38px;

    left: 350px;
    top: 50%;

    z-index: 3;

    background: url("../../images/arrow.svg") center / contain no-repeat;

    opacity: 0;

    transform:
      translate(-15px, -50%)
      rotate(180deg);

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

    pointer-events: none;
  }

  /* HOVER — expand visually in both directions */
  .SwordProductAddButton:hover::before {
    width: 500px;
    left: -53px;
    background-color: #7F1F1E;
  }

  .SwordProductAddButton:hover span {
    color: #F2F2F0;
    transform: translateX(-30px);
  }

  .SwordProductAddButton:hover::after {
    opacity: 1;
    transform:
      translate(0, -50%)
      rotate(180deg);
  }

}