/* =========================================================
   Mizunara Studio
   Welcome Experience
   css/welcome.css
   Version 1.2

   Startup Stability
   Real Loading State
   Reliable Spinner
========================================================= */


/* =========================================================
   BLOQUEO DE PÁGINA
========================================================= */

body.ms-welcome-active {
  overflow: hidden;
}


/* =========================================================
   OVERLAY
========================================================= */

.ms-welcome {
  position: fixed;

  inset: 0;

  z-index: 10000;

  display: flex;

  align-items: center;

  justify-content: center;

  min-height: 100vh;

  min-height: 100dvh;

  padding:
    max(
      1.5rem,
      env(safe-area-inset-top)
    )
    max(
      1.25rem,
      env(safe-area-inset-right)
    )
    max(
      1.5rem,
      env(safe-area-inset-bottom)
    )
    max(
      1.25rem,
      env(safe-area-inset-left)
    );

  overflow: hidden;

  background:
    radial-gradient(
      circle at 18% 15%,
      rgba(
        200,
        164,
        107,
        0.13
      ),
      transparent 32%
    ),
    radial-gradient(
      circle at 82% 78%,
      rgba(
        200,
        164,
        107,
        0.1
      ),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      #fbf6ef 0%,
      #f7efe5 48%,
      #fffaf4 100%
    );

  opacity: 1;

  visibility: visible;

  transition:
    opacity 0.6s ease,
    visibility 0.6s ease;
}


/* =========================================================
   DECORACIÓN
========================================================= */

.ms-welcome::before,
.ms-welcome::after {
  content: "";

  position: absolute;

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

  border-radius: 50%;

  pointer-events: none;
}


.ms-welcome::before {
  width: 420px;

  height: 420px;

  top: -210px;

  right: -150px;
}


.ms-welcome::after {
  width: 340px;

  height: 340px;

  left: -170px;

  bottom: -170px;
}


/* =========================================================
   TRANSICIÓN DE SALIDA
========================================================= */

.ms-welcome.is-opening {
  opacity: 0;

  visibility: hidden;

  pointer-events: none;
}


/* =========================================================
   TARJETA

   True Glass:
   Welcome es una superficie protagonista,
   por lo que conserva backdrop-filter real.
========================================================= */

.ms-welcome-card {
  position: relative;

  z-index: 1;

  width:
    min(
      92%,
      520px
    );

  padding:
    clamp(
      2rem,
      4vh,
      2.7rem
    )
    clamp(
      1.6rem,
      4vw,
      3rem
    );

  text-align: center;

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

  border-radius:
    clamp(
      28px,
      5vw,
      40px
    );

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

  backdrop-filter:
    blur(22px);

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

  box-shadow:
    0 24px 70px
      rgba(
        66,
        47,
        30,
        0.1
      ),
    inset 0 1px 0
      rgba(
        255,
        255,
        255,
        0.9
      );

  opacity: 0;

  transform:
    translateY(18px)
    scale(0.985);

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


/* =========================================================
   ENTRADA DE TARJETA
========================================================= */

.ms-welcome.is-ready
.ms-welcome-card {
  opacity: 1;

  transform:
    translateY(0)
    scale(1);
}


/* =========================================================
   BRAND
========================================================= */

.ms-welcome-brand {
  margin:
    0 0 1.25rem;

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

  font-size:
    0.68rem;

  font-weight:
    600;

  letter-spacing:
    0.34em;

  text-transform:
    uppercase;

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


/* =========================================================
   KICKER
========================================================= */

.ms-welcome-kicker {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 0.8rem;

  margin-bottom:
    0.8rem;

  font-size:
    0.7rem;

  font-weight:
    600;

  letter-spacing:
    0.2em;

  text-transform: uppercase;

  color:
    var(--ms-color-primary);
}


.ms-welcome-kicker::before,
.ms-welcome-kicker::after {
  content: "";

  width: 32px;

  height: 1px;

  background:
    rgba(
      200,
      164,
      107,
      0.45
    );
}


/* =========================================================
   NOMBRES
========================================================= */

.ms-welcome-names {
  margin: 0;

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

  font-size:
    clamp(
      3.4rem,
      6vw,
      4.6rem
    );

  font-weight: 400;

  line-height: 0.96;

  color:
    var(--ms-color-text);
}


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

.ms-welcome-date {
  margin:
    1.2rem 0 0;

  font-size: 0.78rem;

  font-weight: 600;

  letter-spacing: 0.18em;

  text-transform: uppercase;

  color:
    var(--ms-color-primary-dark);
}


/* =========================================================
   DIVISOR
========================================================= */

.ms-welcome-divider {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 0.8rem;

  margin:
    1.4rem auto
    1.25rem;

  color:
    var(--ms-color-primary);
}


.ms-welcome-divider::before,
.ms-welcome-divider::after {
  content: "";

  width: 46px;

  height: 1px;

  background:
    rgba(
      200,
      164,
      107,
      0.35
    );
}


.ms-welcome-divider span {
  display: block;

  width: 6px;

  height: 6px;

  border:
    1px solid
    currentColor;

  transform:
    rotate(45deg);
}


/* =========================================================
   MÚSICA
========================================================= */

.ms-welcome-music {
  margin-bottom:
    1.3rem;
}


.ms-welcome-music-icon {
  display: flex;

  align-items: center;

  justify-content: center;

  width: 54px;

  height: 54px;

  margin:
    0 auto
    0.75rem;

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

  border-radius: 50%;

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

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

  box-shadow:
    0 10px 30px
    rgba(
      200,
      164,
      107,
      0.12
    );
}


.ms-welcome-music-icon svg {
  width: 24px;

  height: 24px;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.4;

  stroke-linecap: round;

  stroke-linejoin: round;
}


.ms-welcome-music-title {
  margin:
    0 0 0.3rem;

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

  font-size: 1.15rem;

  font-weight: 500;

  color:
    var(--ms-color-text);
}


.ms-welcome-music-text {
  max-width: 360px;

  margin:
    0 auto;

  font-size: 0.88rem;

  line-height: 1.7;

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


/* =========================================================
   BOTÓN
========================================================= */

.ms-welcome-open {
  position: relative;

  width:
    min(
      100%,
      300px
    );

  min-height:
    50px;

  display:
    inline-flex;

  align-items: center;

  justify-content: center;

  gap:
    0.65rem;

  padding:
    0.9rem
    1.6rem;

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

  border-radius:
    999px;

  background:
    linear-gradient(
      135deg,
      #e6c986,
      #b88d43
    );

  color:
    #ffffff;

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

  font-size: 0.78rem;

  font-weight: 700;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  cursor: pointer;

  box-shadow:
    0 14px 30px
    rgba(
      166,
      125,
      55,
      0.2
    );

  overflow: hidden;

  -webkit-tap-highlight-color:
    transparent;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    opacity 0.25s ease;
}


/* =========================================================
   BOTÓN — HOVER
========================================================= */

@media (hover: hover) {

  .ms-welcome-open:not(:disabled):hover {
    transform:
      translateY(-2px);

    box-shadow:
      0 18px 36px
      rgba(
        166,
        125,
        55,
        0.26
      );
  }

}


.ms-welcome-open:not(:disabled):active {
  transform:
    translateY(0)
    scale(0.985);
}


/* =========================================================
   BOTÓN — DISABLED
========================================================= */

.ms-welcome-open:disabled {
  cursor:
    wait;
}


/* =========================================================
   BOTÓN — LOADING
========================================================= */

.ms-welcome-open.is-loading {
  opacity:
    0.82;

  cursor:
    wait;

  box-shadow:
    0 10px 26px
    rgba(
      166,
      125,
      55,
      0.14
    );
}


/* =========================================================
   LOADER

   El spinner no utiliza scale ni ninguna otra
   transformación adicional.

   Su única transformación es rotate().
   Esto evita conflictos de animación.
========================================================= */

.ms-welcome-button-loader {
  position: absolute;

  top: 50%;

  left: 50%;

  width:
    20px;

  height:
    20px;

  margin:
    -10px
    0
    0
    -10px;

  border:
    2px solid
    rgba(
      255,
      255,
      255,
      0.3
    );

  border-top-color:
    #ffffff;

  border-right-color:
    rgba(
      255,
      255,
      255,
      0.78
    );

  border-radius:
    50%;

  opacity:
    0;

  visibility:
    hidden;

  pointer-events:
    none;

  transform:
    rotate(0deg);

  transition:
    opacity 180ms ease,
    visibility 180ms ease;
}


/* =========================================================
   LOADER ACTIVO
========================================================= */

.ms-welcome-open.is-loading
.ms-welcome-button-loader {
  opacity:
    1;

  visibility:
    visible;

  animation:
    msWelcomeButtonSpin
    0.8s
    linear
    infinite;
}


/* =========================================================
   TEXTO DEL BOTÓN
========================================================= */

.ms-welcome-button-label {
  display:
    inline-block;

  opacity:
    1;

  visibility:
    visible;

  transform:
    translateY(0);

  transition:
    opacity 220ms ease,
    transform 220ms ease,
    visibility 220ms ease;
}


/* =========================================================
   TEXTO OCULTO DURANTE CARGA
========================================================= */

.ms-welcome-open.is-loading
.ms-welcome-button-label {
  opacity:
    0;

  visibility:
    hidden;

  transform:
    translateY(3px);
}


/* =========================================================
   BOTÓN — READY
========================================================= */

.ms-welcome-open.is-ready {
  opacity:
    1;

  cursor:
    pointer;
}


.ms-welcome-open.is-ready
.ms-welcome-button-loader {
  opacity:
    0;

  visibility:
    hidden;

  animation:
    none;
}


.ms-welcome-open.is-ready
.ms-welcome-button-label {
  opacity:
    1;

  visibility:
    visible;

  transform:
    translateY(0);
}


/* =========================================================
   BOTÓN — OPENING
========================================================= */

.ms-welcome-open.is-opening {
  pointer-events:
    none;

  opacity:
    0.78;
}


/* =========================================================
   SVG ORIGINAL DEL BOTÓN
========================================================= */

.ms-welcome-open svg {
  width: 18px;

  height: 18px;

  fill: none;

  stroke:
    currentColor;

  stroke-width:
    1.7;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}


/* =========================================================
   AYUDA
========================================================= */

.ms-welcome-hint {
  margin:
    0.75rem 0 0;

  font-size:
    0.72rem;

  letter-spacing:
    0.06em;

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


/* =========================================================
   TABLET / ESCRITORIO
========================================================= */

@media (min-width: 681px) {

  .ms-welcome-names {
    max-width:
      100%;

    margin-inline:
      auto;

    white-space:
      nowrap;

    font-size:
      clamp(
        3.2rem,
        4.4vw,
        3.9rem
      );
  }

}


/* =========================================================
   MÓVIL / PANTALLA ESTRECHA
========================================================= */

@media (max-width: 680px) {

  .ms-welcome {
    align-items:
      center;

    padding:
      max(
        1rem,
        env(safe-area-inset-top)
      )
      1rem
      max(
        1rem,
        env(safe-area-inset-bottom)
      );
  }


  .ms-welcome-card {
    width:
      min(
        94%,
        430px
      );

    padding:
      2rem
      clamp(
        1.2rem,
        5vw,
        1.6rem
      );

    border-radius:
      30px;
  }


  .ms-welcome-kicker {
    margin-bottom:
      1rem;
  }


  .ms-welcome-names {
    white-space:
      normal;

    font-size:
      clamp(
        3rem,
        10vw,
        4.15rem
      );

    line-height:
      0.96;
  }


  .ms-welcome-date {
    margin-top:
      1.35rem;
  }


  .ms-welcome-divider {
    margin:
      1.35rem auto
      1.2rem;
  }


  .ms-welcome-music {
    margin-bottom:
      1.2rem;
  }


  .ms-welcome-music-icon {
    width:
      50px;

    height:
      50px;
  }


  .ms-welcome-music-text {
    font-size:
      0.82rem;
  }


  .ms-welcome-open {
    min-height:
      50px;
  }

}


/* =========================================================
   TELÉFONOS
========================================================= */

@media (max-width: 480px) {

  .ms-welcome-card {
    padding:
      1.85rem
      1.15rem;
  }


  .ms-welcome-brand {
    margin-bottom:
      1.15rem;
  }


  .ms-welcome-kicker {
    margin-bottom:
      0.9rem;
  }


  .ms-welcome-names {
    font-size:
      clamp(
        3rem,
        14vw,
        3.65rem
      );
  }


  .ms-welcome-date {
    margin-top:
      1.25rem;
  }


  .ms-welcome-music {
    margin-bottom:
      1.2rem;
  }


  .ms-welcome-hint {
    margin-top:
      0.7rem;
  }

}


/* =========================================================
   LOADER ANIMATION
========================================================= */

@keyframes msWelcomeButtonSpin {

  from {
    transform:
      rotate(0deg);
  }


  to {
    transform:
      rotate(360deg);
  }

}


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

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

  .ms-welcome,
  .ms-welcome-card,
  .ms-welcome-open,
  .ms-welcome-button-label {
    transition:
      none !important;
  }


  /*
    El loader es un indicador funcional de estado.

    En movimiento reducido no desaparece ni queda
    congelado: simplemente gira más lentamente.
  */

  .ms-welcome-open.is-loading
  .ms-welcome-button-loader {
    animation:
      msWelcomeButtonSpin
      1.4s
      linear
      infinite !important;
  }

}