/* =========================================================
   Mizunara Studio Design System
   Components
   countdown.css
   Version 2.5

   Stable Single Row Responsive Layout
   Glass Performance + Ambient Motion
========================================================= */


/* =========================================================
   SECTION
========================================================= */

.ms-countdown-section {
  position: relative;

  /*
    El countdown necesita menos espacio inferior que
    una sección convencional para mantener continuidad
    visual con la siguiente sección.
  */

  padding-block:
    clamp(3rem, 5vw, 4.5rem)
    clamp(2.25rem, 3.5vw, 3rem);
}


/* =========================================================
   CONTAINER

   IMPORTANTE:
   El countdown estándar permanece siempre en una sola fila.

   El tamaño de las tarjetas se adapta al espacio disponible
   en lugar de permitir el patrón 3 + 1.
========================================================= */

.ms-countdown {
  display: flex;

  justify-content: center;

  align-items: center;

  flex-wrap: nowrap;

  width: 100%;

  gap:
    clamp(
      0.55rem,
      2vw,
      1.5rem
    );
}


/* =========================================================
   ITEM
========================================================= */

.ms-countdown-item {
  position: relative;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  flex:
    0 1 120px;

  width:
    120px;

  max-width:
    120px;

  min-width:
    0;

  min-height:
    130px;

  padding:
    1.5rem;

  translate:
    0 0;

  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease,
    background-color 0.35s ease;
}


.ms-countdown-item:hover {
  transform:
    translateY(-3px)
    scale(1.025);
}


/* =========================================================
   NUMBER
========================================================= */

.ms-countdown-number {
  color:
    var(--ms-color-primary);

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

  font-size:
    clamp(
      2.8rem,
      6vw,
      4rem
    );

  font-weight:
    700;

  line-height:
    1;
}


/* =========================================================
   LABEL
========================================================= */

.ms-countdown-label {
  margin-top:
    0.75rem;

  color:
    var(--ms-color-muted);

  font-size:
    0.8rem;

  font-weight:
    600;

  line-height:
    1;

  letter-spacing:
    0.12em;

  text-transform:
    uppercase;

  white-space:
    nowrap;
}


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

   Conservamos la apariencia de cristal mediante
   transparencia, borde, sombra e inset.

   Evitamos cuatro capas simultáneas de blur.
========================================================= */

.ms-countdown-glass
.ms-countdown-item {
  background:
    linear-gradient(
      145deg,
      rgba(
        255,
        255,
        255,
        0.76
      ),
      rgba(
        255,
        255,
        255,
        0.5
      )
    );

  border:
    var(--ms-border-soft);

  border-radius:
    var(--ms-radius-lg);

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

  backdrop-filter:
    none;

  -webkit-backdrop-filter:
    none;
}


.ms-countdown-glass
.ms-countdown-item:hover {
  background:
    linear-gradient(
      145deg,
      rgba(
        255,
        255,
        255,
        0.86
      ),
      rgba(
        255,
        255,
        255,
        0.6
      )
    );

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

  box-shadow:
    var(--ms-shadow-lg),
    inset 0 1px 0
      rgba(
        255,
        255,
        255,
        0.74
      );
}


/* =========================================================
   LUXURY
========================================================= */

.ms-countdown-luxury
.ms-countdown-item {
  background:
    linear-gradient(
      135deg,
      rgba(
        255,
        255,
        255,
        0.82
      ),
      rgba(
        255,
        255,
        255,
        0.55
      )
    );

  border:
    var(--ms-border-gold);

  box-shadow:
    var(--ms-shadow-gold);

  backdrop-filter:
    none;

  -webkit-backdrop-filter:
    none;
}


.ms-countdown-luxury
.ms-countdown-number {
  color:
    var(--ms-color-primary-dark);
}


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

.ms-countdown-minimal
.ms-countdown-item {
  background:
    transparent;

  border:
    none;

  border-bottom:
    2px solid
    rgba(
      200,
      164,
      107,
      0.3
    );

  border-radius:
    0;

  box-shadow:
    none;

  backdrop-filter:
    none;

  -webkit-backdrop-filter:
    none;
}


.ms-countdown-minimal
.ms-countdown-item:hover {
  border-color:
    var(--ms-color-primary);
}


/* =========================================================
   DARK
========================================================= */

.ms-countdown-dark
.ms-countdown-item {
  background:
    rgba(
      20,
      20,
      20,
      0.82
    );

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

  backdrop-filter:
    none;

  -webkit-backdrop-filter:
    none;
}


.ms-countdown-dark
.ms-countdown-number {
  color:
    #ffffff;
}


.ms-countdown-dark
.ms-countdown-label {
  color:
    rgba(
      255,
      255,
      255,
      0.7
    );
}


/* =========================================================
   SACRED
========================================================= */

.ms-countdown-sacred
.ms-countdown-item {
  background:
    #ffffff;

  border:
    1px solid
    rgba(
      214,
      196,
      150,
      0.4
    );

  box-shadow:
    0 8px 25px
    rgba(
      0,
      0,
      0,
      0.05
    );

  backdrop-filter:
    none;

  -webkit-backdrop-filter:
    none;
}


.ms-countdown-sacred
.ms-countdown-number {
  color:
    #b8954b;
}


/* =========================================================
   KIDS
========================================================= */

.ms-countdown-kids
.ms-countdown-item {
  background:
    #ffffff;

  border-radius:
    26px;

  box-shadow:
    0 12px 30px
    rgba(
      0,
      0,
      0,
      0.08
    );

  backdrop-filter:
    none;

  -webkit-backdrop-filter:
    none;
}


.ms-countdown-kids
.ms-countdown-number {
  color:
    #ff8b00;
}


.ms-countdown-kids
.ms-countdown-label {
  color:
    #666666;
}


/* =========================================================
   CIRCLE
========================================================= */

.ms-countdown-circles
.ms-countdown-item {
  flex:
    0 0 130px;

  width:
    130px;

  max-width:
    130px;

  height:
    130px;

  min-height:
    130px;

  border-radius:
    50%;
}


/* =========================================================
   INLINE
========================================================= */

.ms-countdown-inline {
  gap:
    2rem;
}


.ms-countdown-inline
.ms-countdown-item {
  flex:
    0 1 auto;

  width:
    auto;

  max-width:
    none;

  min-height:
    auto;

  padding:
    0;

  background:
    none;

  border:
    none;

  box-shadow:
    none;

  backdrop-filter:
    none;

  -webkit-backdrop-filter:
    none;
}


.ms-countdown-inline
.ms-countdown-number {
  font-size:
    3rem;
}


.ms-countdown-inline
.ms-countdown-label {
  margin-top:
    0.3rem;
}


/* =========================================================
   VERTICAL
========================================================= */

.ms-countdown-vertical {
  flex-direction:
    column;

  flex-wrap:
    nowrap;
}


.ms-countdown-vertical
.ms-countdown-item {
  flex:
    0 0 auto;

  width:
    220px;

  max-width:
    220px;
}


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

.ms-countdown-sm
.ms-countdown-item {
  flex:
    0 1 90px;

  width:
    90px;

  max-width:
    90px;

  min-height:
    100px;

  padding:
    1rem;
}


.ms-countdown-sm
.ms-countdown-number {
  font-size:
    2rem;
}


.ms-countdown-sm
.ms-countdown-label {
  font-size:
    0.72rem;
}


/* =========================================================
   LARGE

   La variante grande conserva su presencia visual,
   pero ahora puede contraerse si el viewport lo requiere.
========================================================= */

.ms-countdown-lg
.ms-countdown-item {
  flex:
    1 1 150px;

  width:
    auto;

  max-width:
    150px;

  min-width:
    0;

  min-height:
    160px;
}


.ms-countdown-lg
.ms-countdown-number {
  font-size:
    4.5rem;
}


/* =========================================================
   AMBIENT MOTION

   Recuperamos movimiento ambiental sin volver
   a introducir backdrop-filter.

   Usamos "translate" en vez de animar "transform"
   para que la flotación pueda convivir con hover.
========================================================= */

.ms-countdown-animated
.ms-countdown-item {
  animation:
    msCountdownFloat
    4s
    ease-in-out
    infinite;
}


.ms-countdown-animated
.ms-countdown-item:nth-child(2) {
  animation-delay:
    0.25s;
}


.ms-countdown-animated
.ms-countdown-item:nth-child(3) {
  animation-delay:
    0.5s;
}


.ms-countdown-animated
.ms-countdown-item:nth-child(4) {
  animation-delay:
    0.75s;
}


/* =========================================================
   GLOW
========================================================= */

.ms-countdown-glow
.ms-countdown-number {
  text-shadow:
    0 0 18px
    rgba(
      200,
      164,
      107,
      0.35
    );
}


/* =========================================================
   DIVIDER
========================================================= */

.ms-countdown-divider
.ms-countdown-item::after {
  content:
    ":";

  position:
    absolute;

  top:
    50%;

  right:
    -18px;

  transform:
    translateY(-50%);

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

  font-size:
    2rem;
}


.ms-countdown-divider
.ms-countdown-item:last-child::after {
  display:
    none;
}


/* =========================================================
   HOVER SCALE
========================================================= */

.ms-countdown-scale
.ms-countdown-item:hover {
  transform:
    translateY(-4px)
    scale(1.05);
}


/* =========================================================
   LAPTOP / TABLET

   Las cuatro tarjetas siguen en una sola fila.
========================================================= */

@media (max-width: 900px) {

  .ms-countdown-section {
    padding-block:
      2.75rem
      1.75rem;
  }


  .ms-countdown {
    gap:
      clamp(
        0.65rem,
        1.4vw,
        1rem
      );
  }


  .ms-countdown-item {
    flex:
      0 1 118px;

    width:
      auto;

    max-width:
      118px;

    min-width:
      0;

    min-height:
      110px;

    padding:
      1rem;
  }


  .ms-countdown-number {
    font-size:
      clamp(
        2.3rem,
        5vw,
        3.3rem
      );
  }


  .ms-countdown-label {
    letter-spacing:
      0.1em;
  }


  .ms-countdown-lg
  .ms-countdown-item {
    flex:
      1 1 118px;

    width:
      auto;

    max-width:
      118px;

    min-height:
      130px;
  }


  .ms-countdown-lg
  .ms-countdown-number {
    font-size:
      clamp(
        2.6rem,
        5vw,
        3.6rem
      );
  }


  /* Variantes especiales */

  .ms-countdown-inline
  .ms-countdown-item {
    flex:
      0 1 auto;

    width:
      auto;

    max-width:
      none;

    min-height:
      auto;
  }


  .ms-countdown-vertical
  .ms-countdown-item {
    flex:
      0 0 auto;

    width:
      220px;

    max-width:
      220px;
  }


  .ms-countdown-circles
  .ms-countdown-item {
    flex:
      0 0 110px;

    width:
      110px;

    max-width:
      110px;

    height:
      110px;

    min-height:
      110px;
  }


  .ms-countdown-sm
  .ms-countdown-item {
    flex:
      0 1 82px;

    width:
      82px;

    max-width:
      82px;

    min-height:
      92px;
  }

}


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

   Cuatro tarjetas compactas en una sola fila.
========================================================= */

@media (max-width: 600px) {

  .ms-countdown-section {
    padding-block:
      2.25rem
      1.15rem;
  }


  .ms-countdown {
    width:
      100%;

    gap:
      clamp(
        0.35rem,
        2vw,
        0.55rem
      );
  }


  .ms-countdown-item {
    flex:
      1 1 25%;

    width:
      auto;

    max-width:
      82px;

    min-width:
      0;

    min-height:
      82px;

    padding:
      0.75rem
      0.35rem;
  }


  .ms-countdown-number {
    font-size:
      clamp(
        1.7rem,
        8vw,
        2.25rem
      );
  }


  .ms-countdown-label {
    margin-top:
      0.5rem;

    font-size:
      0.58rem;

    letter-spacing:
      0.08em;

    white-space:
      nowrap;
  }


  .ms-countdown-lg
  .ms-countdown-item {
    flex:
      1 1 25%;

    width:
      auto;

    max-width:
      82px;

    min-width:
      0;

    min-height:
      92px;

    padding:
      0.75rem
      0.35rem;
  }


  .ms-countdown-lg
  .ms-countdown-number {
    font-size:
      clamp(
        1.8rem,
        8vw,
        2.4rem
      );
  }


  /* Variantes especiales */

  .ms-countdown-inline {
    gap:
      1rem;
  }


  .ms-countdown-inline
  .ms-countdown-item {
    flex:
      0 1 auto;

    width:
      auto;

    max-width:
      none;

    min-height:
      auto;

    padding:
      0;
  }


  .ms-countdown-inline
  .ms-countdown-number {
    font-size:
      2rem;
  }


  .ms-countdown-vertical
  .ms-countdown-item {
    flex:
      0 0 auto;

    width:
      200px;

    max-width:
      200px;
  }


  .ms-countdown-circles
  .ms-countdown-item {
    flex:
      1 1 25%;

    width:
      auto;

    max-width:
      76px;

    height:
      76px;

    min-height:
      76px;

    padding:
      0.35rem;
  }


  .ms-countdown-sm
  .ms-countdown-item {
    flex:
      1 1 25%;

    width:
      auto;

    max-width:
      72px;

    min-height:
      78px;

    padding:
      0.6rem
      0.25rem;
  }

}


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

@media (max-width: 380px) {

  .ms-countdown {
    gap:
      0.3rem;
  }


  .ms-countdown-item,
  .ms-countdown-lg
  .ms-countdown-item {
    flex:
      1 1 25%;

    max-width:
      72px;

    min-height:
      76px;

    padding:
      0.6rem
      0.25rem;
  }


  .ms-countdown-number,
  .ms-countdown-lg
  .ms-countdown-number {
    font-size:
      1.65rem;
  }


  .ms-countdown-label {
    font-size:
      0.54rem;

    letter-spacing:
      0.06em;
  }


  .ms-countdown-inline
  .ms-countdown-item {
    max-width:
      none;
  }


  .ms-countdown-vertical
  .ms-countdown-item {
    width:
      190px;

    max-width:
      190px;
  }


  .ms-countdown-circles
  .ms-countdown-item {
    max-width:
      68px;

    height:
      68px;

    min-height:
      68px;
  }

}


/* =========================================================
   FLOAT ANIMATION
========================================================= */

@keyframes msCountdownFloat {

  0%,
  100% {
    translate:
      0 0;
  }


  50% {
    translate:
      0 -8px;
  }

}


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

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

  .ms-countdown-item {
    animation:
      none !important;

    transition:
      none !important;

    transform:
      none !important;

    translate:
      none !important;
  }

}