/* =========================================================
   Mizunara Studio Design System
   Story Component
   css/components/story.css
   Version 1.1

   Glass Performance Pass
========================================================= */


/* =========================================================
   WRAPPER DEL BUILDER

   El Builder genera:
   .ms-component.ms-story

   Dentro se carga:
   section.ms-story

   Estas reglas evitan aplicar dos veces el espaciado.
========================================================= */

.ms-component[data-component="story"] {
  display: block;

  width: 100%;
  min-height: 0;

  margin: 0;
  padding: 0;

  overflow: visible;

  background: transparent;
}


.ms-component[data-component="story"] > .ms-story {
  width: 100%;
}


/* =========================================================
   VARIABLES
========================================================= */

.ms-component[data-component="story"] {
  --story-primary:
    var(
      --ms-color-primary,
      #c8a46b
    );

  --story-primary-dark:
    var(
      --ms-color-primary-dark,
      #8f6d35
    );

  --story-text:
    var(
      --ms-color-text,
      #342b25
    );

  --story-muted:
    var(
      --ms-color-muted,
      rgba(52, 43, 37, 0.68)
    );

  --story-surface:
    rgba(255, 255, 255, 0.62);

  --story-surface-strong:
    rgba(255, 255, 255, 0.8);

  --story-border:
    rgba(255, 255, 255, 0.56);

  --story-line:
    rgba(200, 164, 107, 0.46);

  --story-shadow:
    0 28px 80px
      rgba(48, 36, 28, 0.13),
    0 8px 26px
      rgba(48, 36, 28, 0.06);

  --story-radius:
    var(
      --ms-radius-xl,
      28px
    );
}


/* =========================================================
   SECCIÓN
========================================================= */

.ms-component[data-component="story"]
.ms-story {
  position: relative;

  isolation: isolate;

  width: 100%;

  padding:
    var(
      --ms-section-padding,
      clamp(5rem, 10vw, 8rem)
    )
    0;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 8% 14%,
      rgba(200, 164, 107, 0.08),
      transparent 30%
    ),
    radial-gradient(
      circle at 92% 82%,
      rgba(221, 193, 168, 0.13),
      transparent 34%
    );
}


/* =========================================================
   ORBES DECORATIVOS

   Sin filter: blur().
   El degradado radial ya genera la suavidad.
========================================================= */

.ms-component[data-component="story"]
.ms-story-orb {
  position: absolute;

  z-index: -1;

  border-radius: 50%;

  pointer-events: none;
}


.ms-component[data-component="story"]
.ms-story-orb--left {
  top: 10%;

  left: -150px;

  width: 340px;

  height: 340px;

  background:
    radial-gradient(
      circle,
      rgba(200, 164, 107, 0.12) 0%,
      rgba(200, 164, 107, 0.055) 38%,
      rgba(200, 164, 107, 0.018) 58%,
      transparent 74%
    );
}


.ms-component[data-component="story"]
.ms-story-orb--right {
  right: -170px;

  bottom: 7%;

  width: 390px;

  height: 390px;

  background:
    radial-gradient(
      circle,
      rgba(220, 190, 171, 0.15) 0%,
      rgba(220, 190, 171, 0.065) 40%,
      rgba(220, 190, 171, 0.02) 60%,
      transparent 74%
    );
}


/* =========================================================
   ENCABEZADO
========================================================= */

.ms-component[data-component="story"]
.ms-story-header {
  width:
    min(
      92%,
      760px
    );

  margin:
    0
    auto
    clamp(
      3.5rem,
      7vw,
      5.5rem
    );

  text-align: center;
}


.ms-component[data-component="story"]
.ms-story-header
.ms-section-description {
  max-width: 690px;

  margin-inline: auto;

  color:
    var(--story-muted);

  line-height:
    1.85;

  text-wrap:
    balance;
}


/* =========================================================
   LISTA / LÍNEA DE TIEMPO
========================================================= */

.ms-component[data-component="story"]
.ms-story-list {
  position: relative;

  display: grid;

  width:
    min(
      92%,
      1160px
    );

  margin-inline: auto;

  gap:
    clamp(
      2rem,
      4.5rem,
      3.4rem
    );
}


.ms-component[data-component="story"]
.ms-story-list[hidden] {
  display:
    none !important;
}


/* =========================================================
   LÍNEA VERTICAL CENTRAL
========================================================= */

.ms-component[data-component="story"]
.ms-story--alternating
.ms-story-list::before {
  content: "";

  position: absolute;

  top: 1rem;

  bottom: 1rem;

  left: 50%;

  width: 1px;

  transform:
    translateX(-50%);

  background:
    linear-gradient(
      180deg,
      transparent,
      var(--story-line) 8%,
      var(--story-line) 92%,
      transparent
    );

  pointer-events: none;
}


/* =========================================================
   MOMENTO
========================================================= */

.ms-component[data-component="story"]
.ms-story-item {
  position: relative;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    70px
    minmax(0, 1fr);

  align-items: center;

  width: 100%;

  min-width: 0;

  opacity: 0;

  transform:
    translateY(32px);

  transition:
    opacity
      0.85s
      var(
        --ms-ease-luxury,
        ease
      ),
    transform
      0.9s
      var(
        --ms-ease-luxury,
        ease
      );
}


.ms-component[data-component="story"]
.ms-story-item.is-visible {
  opacity: 1;

  transform:
    translateY(0);

  transition-delay:
    calc(
      var(--story-item-index, 0) *
      110ms
    );
}


/* =========================================================
   POSICIONES ALTERNADAS
========================================================= */

.ms-component[data-component="story"]
.ms-story-item--left
.ms-story-card {
  grid-column: 1;
}


.ms-component[data-component="story"]
.ms-story-item--left
.ms-story-marker {
  grid-column: 2;
}


.ms-component[data-component="story"]
.ms-story-item--right
.ms-story-marker {
  grid-column: 2;
}


.ms-component[data-component="story"]
.ms-story-item--right
.ms-story-card {
  grid-column: 3;
}


.ms-component[data-component="story"]
.ms-story-item--center
.ms-story-marker {
  display: none;
}


.ms-component[data-component="story"]
.ms-story-item--center
.ms-story-card {
  grid-column:
    1 / -1;

  width:
    min(
      100%,
      760px
    );

  margin-inline:
    auto;
}


/* =========================================================
   MARCADOR CENTRAL
   LIGHT GLASS — SIN backdrop-filter
========================================================= */

.ms-component[data-component="story"]
.ms-story-marker {
  position: relative;

  z-index: 4;

  display: grid;

  place-items: center;

  width: 36px;

  height: 36px;

  margin-inline:
    auto;

  border:
    1px solid
    rgba(
      200,
      164,
      107,
      0.42
    );

  border-radius:
    50%;

  background:
    rgba(
      250,
      247,
      242,
      0.96
    );

  box-shadow:
    0 8px 24px
      rgba(
        48,
        36,
        28,
        0.1
      ),
    0 0 0 7px
      rgba(
        200,
        164,
        107,
        0.07
      ),
    inset 0 1px 0
      rgba(
        255,
        255,
        255,
        0.8
      );

  /*
    SIN backdrop-filter.

    Cada momento puede tener un marcador,
    por lo que evitamos una capa gráfica
    adicional por cada elemento.
  */
}


.ms-component[data-component="story"]
.ms-story-marker span {
  display: block;

  width: 9px;

  height: 9px;

  border-radius:
    50%;

  background:
    linear-gradient(
      135deg,
      #e8d2a7,
      var(--story-primary-dark)
    );

  box-shadow:
    0 0 14px
    rgba(
      200,
      164,
      107,
      0.5
    );
}


/* =========================================================
   CONECTORES HORIZONTALES
========================================================= */

.ms-component[data-component="story"]
.ms-story-item--left
.ms-story-marker::before,

.ms-component[data-component="story"]
.ms-story-item--right
.ms-story-marker::after {
  content: "";

  position: absolute;

  top: 50%;

  width: 36px;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(
        200,
        164,
        107,
        0.58
      )
    );
}


.ms-component[data-component="story"]
.ms-story-item--left
.ms-story-marker::before {
  right: 100%;

  transform:
    translateY(-50%);
}


.ms-component[data-component="story"]
.ms-story-item--right
.ms-story-marker::after {
  left: 100%;

  transform:
    translateY(-50%)
    scaleX(-1);
}


/* =========================================================
   TARJETA
   LIGHT GLASS

   IMPORTANTE:
   Story puede renderizar muchas tarjetas.
   Por rendimiento, ninguna usa backdrop-filter.
========================================================= */

.ms-component[data-component="story"]
.ms-story-card {
  position: relative;

  isolation: isolate;

  display: flex;

  flex-direction: column;

  min-width: 0;

  overflow: hidden;

  border:
    1px solid
    var(--story-border);

  border-radius:
    var(--story-radius);

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.76),
      rgba(255, 255, 255, 0.48)
    );

  box-shadow:
    var(--story-shadow),
    inset 0 1px 0
      rgba(
        255,
        255,
        255,
        0.68
      );

  transition:
    transform
      280ms ease,
    box-shadow
      280ms ease,
    border-color
      280ms ease;
}


.ms-component[data-component="story"]
.ms-story-card:hover {
  transform:
    translateY(-5px);

  border-color:
    rgba(
      200,
      164,
      107,
      0.35
    );

  box-shadow:
    0 36px 96px
      rgba(
        48,
        36,
        28,
        0.17
      ),
    0 12px 34px
      rgba(
        48,
        36,
        28,
        0.08
      ),
    inset 0 1px 0
      rgba(
        255,
        255,
        255,
        0.74
      );
}


/* =========================================================
   BRILLO INTERIOR
========================================================= */

.ms-component[data-component="story"]
.ms-story-card::before {
  content: "";

  position: absolute;

  inset: 0;

  z-index: -1;

  background:
    radial-gradient(
      circle at 15% 8%,
      rgba(
        255,
        255,
        255,
        0.48
      ),
      transparent 34%
    ),
    linear-gradient(
      125deg,
      transparent 18%,
      rgba(
        255,
        255,
        255,
        0.17
      ) 48%,
      transparent 76%
    );

  pointer-events: none;
}


/* =========================================================
   LÍNEA DORADA INFERIOR
========================================================= */

.ms-component[data-component="story"]
.ms-story-card::after {
  content: "";

  position: absolute;

  left: 50%;

  bottom: 0;

  width: 38%;

  height: 1px;

  transform:
    translateX(-50%);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(
        200,
        164,
        107,
        0.8
      ),
      transparent
    );

  pointer-events:
    none;
}


/* =========================================================
   IMAGEN
========================================================= */

.ms-component[data-component="story"]
.ms-story-media {
  position: relative;

  width: 100%;

  aspect-ratio:
    16 / 10;

  overflow: hidden;

  background:
    linear-gradient(
      135deg,
      rgba(
        237,
        227,
        214,
        0.95
      ),
      rgba(
        216,
        202,
        185,
        0.92
      )
    );
}


.ms-component[data-component="story"]
.ms-story-media[hidden] {
  display:
    none !important;
}


.ms-component[data-component="story"]
.ms-story-media img {
  display: block;

  width: 100%;

  height: 100%;

  object-fit: cover;

  opacity: 0;

  transform:
    scale(1.06);

  transition:
    opacity
      650ms ease,
    transform
      1.1s
      var(
        --ms-ease-luxury,
        ease
      );
}


.ms-component[data-component="story"]
.ms-story-media.is-loaded
img {
  opacity: 1;

  transform:
    scale(1);
}


.ms-component[data-component="story"]
.ms-story-card:hover
.ms-story-media.is-loaded
img {
  transform:
    scale(1.035);
}


.ms-component[data-component="story"]
.ms-story-media-overlay {
  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(35, 24, 17, 0.04),
      rgba(35, 24, 17, 0.08) 68%,
      rgba(250, 247, 242, 0.28)
    );

  pointer-events:
    none;
}


/* =========================================================
   CONTENIDO DE TARJETA
========================================================= */

.ms-component[data-component="story"]
.ms-story-content {
  display: flex;

  flex-direction:
    column;

  padding:
    clamp(
      1.5rem,
      4vw,
      2.4rem
    );

  text-align:
    left;
}


/* =========================================================
   FECHA
========================================================= */

.ms-component[data-component="story"]
.ms-story-date {
  display: block;

  margin-bottom:
    0.65rem;

  color:
    var(--story-primary-dark);

  font-size:
    0.72rem;

  font-weight:
    700;

  letter-spacing:
    0.15em;

  text-transform:
    uppercase;
}


.ms-component[data-component="story"]
.ms-story-date[hidden] {
  display:
    none !important;
}


/* =========================================================
   ETIQUETA
========================================================= */

.ms-component[data-component="story"]
.ms-story-label {
  display:
    inline-flex;

  align-items:
    center;

  width:
    fit-content;

  margin-bottom:
    1rem;

  padding:
    0.4rem
    0.85rem;

  border:
    1px solid
    rgba(
      200,
      164,
      107,
      0.24
    );

  border-radius:
    var(
      --ms-radius-full,
      999px
    );

  color:
    var(--story-primary-dark);

  background:
    rgba(
      200,
      164,
      107,
      0.08
    );

  font-size:
    0.65rem;

  font-weight:
    650;

  letter-spacing:
    0.13em;

  text-transform:
    uppercase;
}


.ms-component[data-component="story"]
.ms-story-label[hidden] {
  display:
    none !important;
}


/* =========================================================
   TÍTULO DEL MOMENTO
========================================================= */

.ms-component[data-component="story"]
.ms-story-item-title {
  margin:
    0
    0
    0.9rem;

  color:
    var(--story-text);

  font-family:
    var(
      --ms-font-title,
      serif
    );

  font-size:
    clamp(
      1.65rem,
      3vw,
      2.35rem
    );

  font-weight:
    500;

  line-height:
    1.12;

  text-wrap:
    balance;
}


.ms-component[data-component="story"]
.ms-story-item-title[hidden] {
  display:
    none !important;
}


/* =========================================================
   DESCRIPCIÓN
========================================================= */

.ms-component[data-component="story"]
.ms-story-item-description {
  margin: 0;

  color:
    var(--story-muted);

  font-family:
    var(
      --ms-font-body,
      inherit
    );

  font-size:
    clamp(
      0.92rem,
      1.5vw,
      1rem
    );

  line-height:
    1.8;

  text-wrap:
    pretty;
}


.ms-component[data-component="story"]
.ms-story-item-description[hidden] {
  display:
    none !important;
}


/* =========================================================
   FRASE DESTACADA
========================================================= */

.ms-component[data-component="story"]
.ms-story-quote {
  position: relative;

  margin:
    1.4rem
    0
    0;

  padding:
    1.15rem
    1.2rem
    1.15rem
    1.4rem;

  border-left:
    2px solid
    rgba(
      200,
      164,
      107,
      0.72
    );

  border-radius:
    0
    var(
      --ms-radius-md,
      12px
    )
    var(
      --ms-radius-md,
      12px
    )
    0;

  color:
    var(--story-primary-dark);

  background:
    rgba(
      200,
      164,
      107,
      0.07
    );

  font-family:
    var(
      --ms-font-title,
      serif
    );

  font-size:
    clamp(
      0.95rem,
      1.8vw,
      1.08rem
    );

  font-style:
    italic;

  line-height:
    1.65;
}


.ms-component[data-component="story"]
.ms-story-quote[hidden] {
  display:
    none !important;
}


/* =========================================================
   LAYOUT STACKED
========================================================= */

.ms-component[data-component="story"]
.ms-story--stacked
.ms-story-list {
  width:
    min(
      92%,
      820px
    );
}


.ms-component[data-component="story"]
.ms-story--stacked
.ms-story-list::before {
  content:
    none;
}


.ms-component[data-component="story"]
.ms-story--stacked
.ms-story-item {
  grid-template-columns:
    1fr;
}


.ms-component[data-component="story"]
.ms-story--stacked
.ms-story-marker {
  display:
    none;
}


.ms-component[data-component="story"]
.ms-story--stacked
.ms-story-card {
  grid-column: 1;

  width: 100%;
}


/* =========================================================
   VARIANTE PREMIUM

   LIGHT GLASS:
   sin blur real.
========================================================= */

.ms-component[data-component="story"]
.ms-story--premium
.ms-story-card {
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.78),
      rgba(255, 255, 255, 0.50)
    );
}


/* =========================================================
   VARIANTE GLASS

   Glass visual simulado mediante:
   - transparencia
   - borde
   - inset highlight
   - sombra

   Sin backdrop-filter.
========================================================= */

.ms-component[data-component="story"]
.ms-story--glass
.ms-story-card {
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.7),
      rgba(255, 255, 255, 0.38)
    );

  border-color:
    rgba(
      255,
      255,
      255,
      0.62
    );

  box-shadow:
    0 30px 86px
      rgba(
        48,
        36,
        28,
        0.13
      ),
    0 8px 26px
      rgba(
        48,
        36,
        28,
        0.06
      ),
    inset 0 1px 0
      rgba(
        255,
        255,
        255,
        0.74
      );
}


/* =========================================================
   VARIANTE MINIMAL

   También sin backdrop-filter.
========================================================= */

.ms-component[data-component="story"]
.ms-story--minimal
.ms-story-card {
  border-color:
    rgba(
      200,
      164,
      107,
      0.18
    );

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

  box-shadow:
    0 18px 48px
      rgba(
        48,
        36,
        28,
        0.08
      ),
    inset 0 1px 0
      rgba(
        255,
        255,
        255,
        0.55
      );
}


.ms-component[data-component="story"]
.ms-story--minimal
.ms-story-card::before {
  opacity:
    0.45;
}


/* =========================================================
   ESTADO
========================================================= */

.ms-component[data-component="story"]
.ms-story-status {
  width:
    min(
      90%,
      720px
    );

  margin:
    2rem
    auto
    0;

  padding:
    1rem
    1.2rem;

  border:
    1px solid
    rgba(
      200,
      164,
      107,
      0.24
    );

  border-radius:
    var(
      --ms-radius-lg,
      16px
    );

  color:
    var(--story-primary-dark);

  background:
    rgba(
      200,
      164,
      107,
      0.08
    );

  font-size:
    0.86rem;

  font-weight:
    550;

  line-height:
    1.55;

  text-align:
    center;
}


.ms-component[data-component="story"]
.ms-story-status[hidden] {
  display:
    none !important;
}


.ms-component[data-component="story"]
.ms-story-status.is-error {
  border-color:
    rgba(
      163,
      75,
      75,
      0.25
    );

  color:
    #a34b4b;

  background:
    rgba(
      163,
      75,
      75,
      0.08
    );
}


.ms-component[data-component="story"]
.ms-story-status.is-success {
  border-color:
    rgba(
      85,
      116,
      93,
      0.25
    );

  color:
    #55745d;

  background:
    rgba(
      85,
      116,
      93,
      0.09
    );
}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 900px) {

  .ms-component[data-component="story"]
  .ms-story {
    padding:
      clamp(
        4.5rem,
        9vw,
        6rem
      )
      0;
  }


  .ms-component[data-component="story"]
  .ms-story-list {
    width:
      94%;
  }


  .ms-component[data-component="story"]
  .ms-story-item {
    grid-template-columns:
      minmax(0, 1fr)
      56px
      minmax(0, 1fr);
  }


  .ms-component[data-component="story"]
  .ms-story-content {
    padding:
      clamp(
        1.35rem,
        3vw,
        1.9rem
      );
  }

}


/* =========================================================
   RESPONSIVE — MÓVIL
========================================================= */

@media (max-width: 700px) {

  .ms-component[data-component="story"]
  .ms-story {
    padding:
      4.5rem
      0;
  }


  .ms-component[data-component="story"]
  .ms-story-header {
    width:
      90%;

    margin-bottom:
      3rem;
  }


  .ms-component[data-component="story"]
  .ms-story-list {
    width:
      90%;

    gap:
      2.2rem;

    padding-left:
      34px;
  }


  .ms-component[data-component="story"]
  .ms-story--alternating
  .ms-story-list::before {
    left:
      14px;

    transform:
      none;
  }


  .ms-component[data-component="story"]
  .ms-story-item {
    display:
      block;

    width:
      100%;
  }


  .ms-component[data-component="story"]
  .ms-story-marker {
    position:
      absolute;

    top:
      1.7rem;

    left:
      -34px;

    width:
      29px;

    height:
      29px;

    margin:
      0;

    box-shadow:
      0 6px 18px
        rgba(
          48,
          36,
          28,
          0.1
        ),
      0 0 0 5px
        rgba(
          200,
          164,
          107,
          0.07
        ),
      inset 0 1px 0
        rgba(
          255,
          255,
          255,
          0.78
        );
  }


  .ms-component[data-component="story"]
  .ms-story-marker span {
    width:
      7px;

    height:
      7px;
  }


  .ms-component[data-component="story"]
  .ms-story-item--left
  .ms-story-marker::before,

  .ms-component[data-component="story"]
  .ms-story-item--right
  .ms-story-marker::after {
    content:
      none;
  }


  .ms-component[data-component="story"]
  .ms-story-card {
    width:
      100%;

    border-radius:
      1.5rem;
  }


  .ms-component[data-component="story"]
  .ms-story-media {
    aspect-ratio:
      4 / 3;
  }


  .ms-component[data-component="story"]
  .ms-story-content {
    padding:
      1.35rem;
  }


  .ms-component[data-component="story"]
  .ms-story-item-title {
    font-size:
      clamp(
        1.6rem,
        8vw,
        2rem
      );
  }


  .ms-component[data-component="story"]
  .ms-story-quote {
    padding:
      1rem
      1rem
      1rem
      1.15rem;
  }


  .ms-component[data-component="story"]
  .ms-story--stacked
  .ms-story-list {
    padding-left:
      0;
  }

}


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

@media (max-width: 380px) {

  .ms-component[data-component="story"]
  .ms-story-list {
    width:
      92%;

    padding-left:
      30px;
  }


  .ms-component[data-component="story"]
  .ms-story-marker {
    left:
      -30px;
  }


  .ms-component[data-component="story"]
  .ms-story-content {
    padding:
      1.1rem;
  }


  .ms-component[data-component="story"]
  .ms-story-date {
    font-size:
      0.66rem;
  }


  .ms-component[data-component="story"]
  .ms-story-label {
    font-size:
      0.6rem;
  }

}


/* =========================================================
   MOVIMIENTO REDUCIDO
========================================================= */

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

  .ms-component[data-component="story"]
  .ms-story-item,

  .ms-component[data-component="story"]
  .ms-story-card,

  .ms-component[data-component="story"]
  .ms-story-media img {
    animation:
      none !important;

    transition:
      none !important;

    transform:
      none !important;
  }


  .ms-component[data-component="story"]
  .ms-story-item {
    opacity:
      1;
  }


  .ms-component[data-component="story"]
  .ms-story-media img {
    opacity:
      1;
  }

}