/* =========================================================
   SPACE VANTA
   THEME 1.0

   MODULE:
   Empty State

   VERSION:
   1.2

   PURPOSE:
   - Search Empty State
   - Favorites Empty State
   - Discovery Recommendation

   VISUAL DIRECTION:
   - Accessible Premium
   - Editorial
   - Spatial
   - Discovery
   - Restrained Interaction

   LAYOUT UPDATE:
   - Refined Empty State hierarchy
   - Product recommendation discovery layer
   - Random recommendation candidate visibility
   - Mobile spacing optimization
   - Backward-compatible recommendation classes
   ========================================================= */


/* =========================================================
   EMPTY STATE BASE
   ========================================================= */

.sv-empty-state {
  width:
    100%;

  box-sizing:
    border-box;
}


.sv-empty-state__inner {
  width:
    100%;

  max-width:
    1160px;

  margin:
    0 auto;

  padding:
    clamp(72px, 8vw, 112px) clamp(24px, 4vw, 48px) clamp(80px, 9vw, 124px);

  box-sizing:
    border-box;

  text-align:
    center;
}


/* =========================================================
   VISUAL
   ========================================================= */

.sv-empty-state-visual {
  margin:
    0 auto 30px;
}


.sv-empty-state-visual__abstract {
  position:
    relative;

  width:
    92px;

  height:
    92px;

  margin:
    0 auto;

  color:
    rgba(40, 40, 40, 0.56);
}


/* =========================================================
   VISUAL CORE
   ========================================================= */

.sv-empty-state-visual__core {
  position:
    absolute;

  top:
    50%;

  left:
    50%;

  width:
    16px;

  height:
    16px;

  border:
    1px solid currentColor;

  border-radius:
    50%;

  transform:
    translate(-50%, -50%);

  overflow:
    hidden;
}


/* =========================================================
   VISUAL RINGS
   ========================================================= */

.sv-empty-state-visual__ring {
  position:
    absolute;

  top:
    50%;

  left:
    50%;

  border:
    1px solid currentColor;

  border-radius:
    50%;

  transform:
    translate(-50%, -50%);

  overflow:
    hidden;
}


.sv-empty-state-visual__ring--one {
  width:
    56px;

  height:
    56px;
}


.sv-empty-state-visual__ring--two {
  width:
    86px;

  height:
    86px;
}


/* =========================================================
   VISUAL ORBITS
   ========================================================= */

.sv-empty-state-visual__orbit {
  position:
    absolute;

  top:
    50%;

  left:
    50%;

  width:
    6px;

  height:
    6px;

  border-radius:
    50%;

  background:
    currentColor;

  transform-origin:
    center;
}


.sv-empty-state-visual__orbit--one {
  transform:
    translate(-50%, -50%) translateX(40px);
}


.sv-empty-state-visual__orbit--two {
  transform:
    translate(-50%, -50%) translateX(-40px);
}


/* =========================================================
   VISUAL REFLECTION
   ========================================================= */

.sv-empty-state-visual__abstract::after {
  content:
    "";

  position:
    absolute;

  top:
    -20%;

  left:
    -55%;

  width:
    16%;

  height:
    140%;

  pointer-events:
    none;

  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.02) 22%,
      rgba(205, 230, 255, 0.06) 38%,
      rgba(255, 255, 255, 0.20) 48%,
      rgba(220, 240, 255, 0.14) 52%,
      rgba(105, 170, 245, 0.045) 62%,
      rgba(255, 255, 255, 0.01) 80%,
      transparent 100%);

  filter:
    blur(2px);

  transform:
    skewX(-17deg);

  opacity:
    0;

  z-index:
    5;
}


.sv-empty-state-visual__abstract.is-reflecting::after {
  opacity:
    1;

  animation:
    sv-empty-state-visual-reflection 1900ms cubic-bezier(0.25, 0.1, 0.25, 1) 1;
}


/* =========================================================
   CONTENT
   ========================================================= */

.sv-empty-state-content {
  width:
    100%;

  max-width:
    760px;

  margin:
    0 auto;
}


/* =========================================================
   EYEBROW
   ========================================================= */

.sv-empty-state__eyebrow {
  margin:
    0 0 15px;

  font-size:
    10px;

  font-weight:
    500;

  line-height:
    1.4;

  letter-spacing:
    0.20em;

  text-transform:
    uppercase;

  opacity:
    0.52;
}


/* =========================================================
   TITLE
   ========================================================= */

.sv-empty-state__title {
  max-width:
    760px;

  margin:
    0 auto 18px;

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

  font-weight:
    500;

  line-height:
    0.98;

  letter-spacing:
    -0.045em;

  text-wrap:
    balance;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.sv-empty-state__description {
  max-width:
    500px;

  margin:
    0 auto 30px;

  font-size:
    14px;

  line-height:
    1.65;

  letter-spacing:
    -0.005em;

  opacity:
    0.62;
}


/* =========================================================
   ACTION
   ========================================================= */

.sv-empty-state-action {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    18px;

  margin:
    0 auto;

  padding:
    0;

  text-align:
    center;
}


/* =========================================================
   PRIMARY ACTION
   ========================================================= */

.sv-empty-state-action__primary {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    42px;

  padding:
    0 18px;

  border:
    1px solid rgba(0, 0, 0, 0.18);

  border-radius:
    999px;

  background:
    rgba(255, 255, 255, 0.42);

  color:
    inherit;

  font-size:
    9px;

  line-height:
    1;

  letter-spacing:
    0.15em;

  font-weight:
    600;

  text-transform:
    uppercase;

  cursor:
    pointer;

  backdrop-filter:
    blur(8px);

  -webkit-backdrop-filter:
    blur(8px);

  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.3s ease,
    background 0.3s ease,
    box-shadow 0.35s ease;
}


.sv-empty-state-action__primary:hover {
  transform:
    translateY(-2px);

  border-color:
    rgba(72, 126, 177, 0.46);

  background:
    rgba(255, 255, 255, 0.72);

  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.055);
}


.sv-empty-state-action__primary:focus-visible {
  outline:
    2px solid rgba(72, 126, 177, 0.42);

  outline-offset:
    3px;
}


/* =========================================================
   SECONDARY ACTION
   ========================================================= */

.sv-empty-state-action__secondary {
  position:
    relative;

  display:
    inline-flex;

  align-items:
    center;

  min-height:
    42px;

  color:
    inherit;

  text-decoration:
    none;

  font-size:
    10px;

  line-height:
    1;

  letter-spacing:
    0.05em;

  opacity:
    0.56;

  transition:
    opacity 0.3s ease,
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}


/*
 * Keep the original pseudo-element arrow.
 *
 * If the updated Action block also contains
 * .sv-empty-state-action__secondary-arrow,
 * that span is hidden below to prevent
 * duplicate arrows.
 */

.sv-empty-state-action__secondary::after {
  content:
    "↗";

  margin-left:
    6px;

  font-size:
    12px;

  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}


.sv-empty-state-action__secondary-arrow {
  display:
    none;
}


.sv-empty-state-action__secondary:hover {
  opacity:
    0.92;

  transform:
    translateY(-1px);
}


.sv-empty-state-action__secondary:hover::after {
  transform:
    translate(2px, -2px);
}


/* =========================================================
   RECOMMENDATION LAYER
   ========================================================= */

.sv-empty-state-recommendation {
  position:
    relative;

  width:
    100%;

  max-width:
    980px;

  margin:
    48px auto 0;

  padding:
    28px;

  box-sizing:
    border-box;

  background:
    rgba(255, 255, 255, 0.72);

  border:
    1px solid rgba(0, 0, 0, 0.075);

  box-shadow:
    0 16px 42px rgba(0, 0, 0, 0.045);

  opacity:
    0;

  visibility:
    hidden;

  pointer-events:
    none;

  transform:
    translateY(-10px);

  transition:
    opacity 260ms ease,
    visibility 260ms ease,
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1);

  backdrop-filter:
    blur(14px);

  -webkit-backdrop-filter:
    blur(14px);
}


.sv-empty-state-recommendation.is-active {
  opacity:
    1;

  visibility:
    visible;

  pointer-events:
    auto;

  transform:
    translateY(0);
}


/* =========================================================
   RECOMMENDATION NOTCH
   ========================================================= */

.sv-empty-state-recommendation::before {
  content:
    "";

  position:
    absolute;

  top:
    -6px;

  left:
    50%;

  width:
    12px;

  height:
    12px;

  background:
    rgba(255, 255, 255, 0.88);

  border-left:
    1px solid rgba(0, 0, 0, 0.075);

  border-top:
    1px solid rgba(0, 0, 0, 0.075);

  transform:
    translateX(-50%) rotate(45deg);

  z-index:
    1;
}


/* =========================================================
   RECOMMENDATION HEADING
   ========================================================= */

.sv-empty-state-recommendation__heading {
  display:
    flex;

  align-items:
    center;

  gap:
    14px;

  margin:
    0 0 24px;

  font-size:
    9px;

  line-height:
    1;

  letter-spacing:
    0.20em;

  font-weight:
    500;

  text-transform:
    uppercase;

  opacity:
    0.58;
}


/*
 * Support both:
 *
 * 1. Existing heading text-only structure
 * 2. Optional heading line structure
 */

.sv-empty-state-recommendation__heading-line {
  flex:
    1;

  height:
    1px;

  background:
    currentColor;

  opacity:
    0.16;
}


.sv-empty-state-recommendation__heading-text {
  flex:
    0 0 auto;
}


/* =========================================================
   RECOMMENDATION LIST / POOL
   ========================================================= */

/*
 * New recommendation block uses __list.
 *
 * Existing implementation used __pool.
 * Both remain supported.
 */

.sv-empty-state-recommendation__list,
.sv-empty-state-recommendation__pool {
  display:
    grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap:
    16px;
}


/* =========================================================
   RECOMMENDATION CARD
   ========================================================= */

.sv-empty-state-recommendation__item {
  position:
    relative;

  display:
    none;

  min-width:
    0;

  overflow:
    hidden;

  border:
    1px solid rgba(0, 0, 0, 0.08);

  background:
    rgba(250, 251, 252, 0.88);

  color:
    inherit;

  text-decoration:
    none;

  box-shadow:
    0 3px 12px rgba(0, 0, 0, 0.025);

  transform:
    translateY(0);

  transition:
    transform 380ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 320ms ease,
    box-shadow 380ms ease;
}


/*
 * JS controls which cards are visible.
 */

.sv-empty-state-recommendation__item.is-selected {
  display:
    block;
}


.sv-empty-state-recommendation__item:hover {
  transform:
    translateY(-4px);

  border-color:
    rgba(72, 126, 177, 0.28);

  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.055),
    0 0 18px rgba(72, 126, 177, 0.035);
}


/* =========================================================
   CARD REFLECTION
   ========================================================= */

.sv-empty-state-recommendation__item::after {
  content:
    "";

  position:
    absolute;

  top:
    -15%;

  left:
    -35%;

  width:
    18%;

  height:
    130%;

  pointer-events:
    none;

  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.015) 20%,
      rgba(190, 225, 255, 0.06) 38%,
      rgba(255, 255, 255, 0.22) 48%,
      rgba(225, 242, 255, 0.16) 52%,
      rgba(135, 190, 255, 0.055) 62%,
      rgba(255, 255, 255, 0.012) 80%,
      transparent 100%);

  filter:
    blur(3px);

  transform:
    skewX(-17deg);

  opacity:
    0;

  z-index:
    3;
}


.sv-empty-state-recommendation__item:hover::after {
  opacity:
    1;

  animation:
    sv-empty-state-card-reflection 1300ms cubic-bezier(0.25, 0.1, 0.25, 1) 1;
}


/* =========================================================
   PRODUCT IMAGE
   ========================================================= */

.sv-empty-state-recommendation__image {
  position:
    relative;

  width:
    100%;

  aspect-ratio:
    1 / 1;

  overflow:
    hidden;

  background:
    #f5f6f7;
}


.sv-empty-state-recommendation__image-element {
  display:
    block;

  width:
    100%;

  height:
    100%;

  object-fit:
    contain;

  object-position:
    center;

  opacity:
    0;

  transform:
    scale(1);

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


/*
 * Image is loaded by JS through data-src
 * only after a product has been selected.
 */

.sv-empty-state-recommendation__item.is-selected .sv-empty-state-recommendation__image-element {
  opacity:
    1;
}


.sv-empty-state-recommendation__item:hover .sv-empty-state-recommendation__image-element {
  transform:
    scale(1.025);
}


/* =========================================================
   IMAGE INDEX
   ========================================================= */

.sv-empty-state-recommendation__image-index {
  position:
    absolute;

  top:
    10px;

  left:
    10px;

  padding:
    5px 7px;

  border:
    1px solid rgba(0, 0, 0, 0.08);

  background:
    rgba(255, 255, 255, 0.72);

  font-size:
    7px;

  line-height:
    1;

  letter-spacing:
    0.15em;

  font-weight:
    500;

  text-transform:
    uppercase;

  opacity:
    0.46;

  backdrop-filter:
    blur(6px);

  -webkit-backdrop-filter:
    blur(6px);

  z-index:
    4;
}


/* =========================================================
   CARD INFORMATION
   ========================================================= */

/*
 * New recommendation block uses __meta.
 *
 * Existing implementation used __information.
 * Both remain visually supported.
 */

.sv-empty-state-recommendation__information {
  position:
    relative;

  padding:
    14px 15px 16px;

  z-index:
    4;
}


.sv-empty-state-recommendation__meta {
  position:
    relative;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

  padding:
    14px 15px 16px;

  z-index:
    4;
}


/* =========================================================
   CARD TITLE
   ========================================================= */

.sv-empty-state-recommendation__title {
  min-height:
    38px;

  padding:
    0;

  font-size:
    13px;

  font-weight:
    500;

  line-height:
    1.45;

  letter-spacing:
    -0.006em;
}


/* =========================================================
   CARD META / PRICE
   ========================================================= */

.sv-empty-state-recommendation__price {
  flex:
    0 0 auto;

  font-size:
    11px;

  line-height:
    1;

  letter-spacing:
    0.01em;

  opacity:
    0.62;
}


/* =========================================================
   CARD ARROW
   ========================================================= */

.sv-empty-state-recommendation__arrow {
  position:
    absolute;

  top:
    12px;

  right:
    12px;

  font-size:
    14px;

  line-height:
    1;

  opacity:
    0.42;

  transition:
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 280ms ease;

  z-index:
    5;
}


.sv-empty-state-recommendation__item:hover .sv-empty-state-recommendation__arrow {
  opacity:
    0.9;

  transform:
    translate(2px, -2px);
}


/* =========================================================
   EMPTY POOL FALLBACK
   ========================================================= */

.sv-empty-state-recommendation__empty {
  display:
    none;

  padding:
    24px 12px;

  text-align:
    center;

  font-size:
    12px;

  line-height:
    1.6;

  opacity:
    0.48;
}


.sv-empty-state-recommendation.is-empty .sv-empty-state-recommendation__empty {
  display:
    block;
}


/*
 * When there are no recommendations,
 * remove the empty grid's visual space.
 */

.sv-empty-state-recommendation.is-empty .sv-empty-state-recommendation__list,

.sv-empty-state-recommendation.is-empty .sv-empty-state-recommendation__pool {
  display:
    none;
}


/* =========================================================
   VISUAL REFLECTION ANIMATION
   ========================================================= */

@keyframes sv-empty-state-visual-reflection {

  0% {
    left:
      -55%;

    opacity:
      0;
  }

  16% {
    opacity:
      0.45;
  }

  50% {
    opacity:
      0.75;
  }

  84% {
    opacity:
      0.45;
  }

  100% {
    left:
      120%;

    opacity:
      0;
  }

}


/* =========================================================
   CARD REFLECTION ANIMATION
   ========================================================= */

@keyframes sv-empty-state-card-reflection {

  0% {
    left:
      -35%;

    opacity:
      0;
  }

  15% {
    opacity:
      0.55;
  }

  50% {
    opacity:
      0.9;
  }

  85% {
    opacity:
      0.55;
  }

  100% {
    left:
      125%;

    opacity:
      0;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 749px) {

  .sv-empty-state__inner {
    max-width:
      100%;

    padding:
      56px 20px 72px;
  }


  /* -------------------------------------------------------
     Mobile Visual
     ------------------------------------------------------- */

  .sv-empty-state-visual {
    margin-bottom:
      24px;
  }


  .sv-empty-state-visual__abstract {
    width:
      78px;

    height:
      78px;
  }


  .sv-empty-state-visual__ring--one {
    width:
      48px;

    height:
      48px;
  }


  .sv-empty-state-visual__ring--two {
    width:
      72px;

    height:
      72px;
  }


  .sv-empty-state-visual__orbit--one {
    transform:
      translate(-50%, -50%) translateX(34px);
  }


  .sv-empty-state-visual__orbit--two {
    transform:
      translate(-50%, -50%) translateX(-34px);
  }


  /* -------------------------------------------------------
     Mobile Content
     ------------------------------------------------------- */

  .sv-empty-state-content {
    max-width:
      100%;

    padding:
      0 4px;
  }


  .sv-empty-state__eyebrow {
    margin-bottom:
      11px;

    font-size:
      9px;

    letter-spacing:
      0.18em;
  }


  .sv-empty-state__title {
    max-width:
      340px;

    margin:
      0 auto 16px;

    font-size:
      clamp(34px, 10.5vw, 46px);

    line-height:
      0.98;

    letter-spacing:
      -0.045em;
  }


  .sv-empty-state__description {
    max-width:
      340px;

    margin:
      0 auto 26px;

    font-size:
      13px;

    line-height:
      1.65;

    opacity:
      0.60;
  }


  /* -------------------------------------------------------
     Mobile Action
     ------------------------------------------------------- */

  .sv-empty-state-action {
    gap:
      14px;

    width:
      100%;

    flex-wrap:
      nowrap;
  }


  .sv-empty-state-action__primary {
    min-height:
      40px;

    padding:
      0 15px;

    font-size:
      8px;

    letter-spacing:
      0.13em;
  }


  .sv-empty-state-action__secondary {
    min-height:
      40px;

    font-size:
      9px;
  }


  /* -------------------------------------------------------
     Mobile Recommendation
     ------------------------------------------------------- */

  .sv-empty-state-recommendation {
    width:
      100%;

    margin-top:
      38px;

    padding:
      22px 16px 18px;

    max-width:
      100%;

    border-radius:
      0;
  }


  .sv-empty-state-recommendation__heading {
    gap:
      10px;

    margin-bottom:
      18px;

    font-size:
      8px;

    letter-spacing:
      0.17em;
  }


  .sv-empty-state-recommendation__list,
  .sv-empty-state-recommendation__pool {
    grid-template-columns:
      1fr;

    gap:
      12px;
  }


  .sv-empty-state-recommendation__item {
    width:
      100%;
  }


  .sv-empty-state-recommendation__image {
    aspect-ratio:
      1 / 1;
  }


  .sv-empty-state-recommendation__information,
  .sv-empty-state-recommendation__meta {
    padding:
      13px 14px 15px;
  }


  .sv-empty-state-recommendation__title {
    min-height:
      0;

    font-size:
      13px;
  }


  .sv-empty-state-recommendation__meta {
    margin-top:
      0;
  }


  .sv-empty-state-recommendation__price {
    font-size:
      10px;
  }


  .sv-empty-state-recommendation__arrow {
    top:
      11px;

    right:
      11px;
  }


  /* -------------------------------------------------------
     Mobile Empty Fallback
     ------------------------------------------------------- */

  .sv-empty-state-recommendation__empty {
    padding:
      20px 8px 4px;

    font-size:
      11px;
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

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

  .sv-empty-state *,
  .sv-empty-state *::before,
  .sv-empty-state *::after {

    transition-duration:
      0.01ms !important;

    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;
  }

}