/* =========================================================
   Mizunara Studio Design System
   Hero Engine v2.5
   Luxury Wedding Experience

   Transparent Glass + Compact Date Pass
========================================================= */


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

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

  width: 100%;
  min-height: 0;

  margin: 0;
  padding: 0;

  overflow: visible;

  background: transparent;

  text-align: initial;
}


.ms-component[data-component="hero"]::after {
  content: none;
}


/* =========================================================
   HERO BASE
========================================================= */

.ms-hero {
  position: relative;

  isolation: isolate;

  display: grid;

  place-items: center;

  width: 100%;

  min-height: 100svh;

  margin: 0;

  padding:
    clamp(5rem, 10vw, 8rem)
    0;

  overflow: hidden;

  text-align: center;

  background:
    var(--ms-color-bg);
}


/* =========================================================
   BACKGROUND
========================================================= */

.ms-hero-bg {
  position: absolute;

  inset: -4%;

  z-index: -5;

  overflow: hidden;

  background:
    #ebe1d5;
}


.ms-hero-bg img,
.ms-hero-bg video {
  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center;

  transform:
    scale(1.08);

  filter:
    saturate(0.94)
    contrast(0.99);

  transition:
    transform
      1.8s
      var(--ms-ease-luxury),
    filter
      1.2s ease;
}


.ms-hero.ms-loaded
.ms-hero-bg img,
.ms-hero.ms-loaded
.ms-hero-bg video {
  transform:
    scale(1);
}


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

.ms-hero-overlay {
  position: absolute;

  inset: 0;

  z-index: -4;

  background:
    linear-gradient(
      180deg,
      rgba(25, 18, 13, 0.045) 0%,
      rgba(36, 24, 16, 0.012) 30%,
      rgba(251, 246, 238, 0.025) 68%,
      rgba(251, 246, 238, 0.06) 100%
    ),
    radial-gradient(
      circle at 50% 38%,
      rgba(255, 255, 255, 0.01) 0%,
      rgba(21, 14, 10, 0.035) 100%
    );

  pointer-events:
    none;
}


/* =========================================================
   VIÑETA EDITORIAL
========================================================= */

.ms-hero::after {
  content: "";

  position: absolute;

  inset: 0;

  z-index: -3;

  background:
    radial-gradient(
      ellipse at center,
      transparent 62%,
      rgba(35, 24, 17, 0.025) 100%
    );

  pointer-events:
    none;
}


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

.ms-hero > .ms-container {
  position: relative;

  z-index: 3;

  width: 100%;
}


.ms-hero-inner {
  position: relative;

  display: flex;

  justify-content:
    flex-end;

  align-items:
    center;

  width:
    min(
      94%,
      1280px
    );

  margin-inline:
    auto;
}


/* =========================================================
   PREMIUM TRANSPARENT GLASS CARD
========================================================= */

.ms-hero-card {
  position: relative;

  isolation: isolate;

  width:
    min(
      50vw,
      650px
    );

  margin: 0;

  padding:
    clamp(
      2.2rem,
      3.6vw,
      3.25rem
    )
    clamp(
      2rem,
      3.8vw,
      3.4rem
    );

  overflow: hidden;

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

  border-radius:
    clamp(
      1.8rem,
      3vw,
      2.6rem
    );

  /*
    Cristal transparente neutro.

    Conservamos la identidad dorada y
    marfil de Boda Luxury 01 mientras
    dejamos que la fotografía tenga
    mayor protagonismo.
  */

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

  /*
    Eliminamos el blur para que la imagen
    conserve detalle detrás de la tarjeta.
  */

  backdrop-filter:
    none;

  -webkit-backdrop-filter:
    none;

  box-shadow:
    0 12px 30px
      rgba(
        45,
        36,
        29,
        0.08
      ),
    inset 0 1px 0
      rgba(
        255,
        255,
        255,
        0.12
      );

  opacity: 0;

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

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


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

.ms-hero.ms-visible
.ms-hero-card {
  opacity: 1;

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


/* =========================================================
   REFLEJO INTERIOR
========================================================= */

.ms-hero-card::before {
  content: none;
}


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

.ms-hero-card::after {
  content: "";

  position: absolute;

  left: 50%;

  bottom: 0;

  width: 42%;

  height: 1px;

  transform:
    translateX(-50%);

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

  pointer-events:
    none;
}


/* =========================================================
   STAGGERED ENTRANCE
========================================================= */

.ms-hero-kicker,
.ms-hero-title,
.ms-hero-subtitle,
.ms-hero-date,
.ms-hero-actions {
  opacity: 0;

  transform:
    translateY(20px);

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


.ms-hero.ms-visible
.ms-hero-kicker {
  opacity: 1;

  transform:
    translateY(0);

  transition-delay:
    0.18s;
}


.ms-hero.ms-visible
.ms-hero-title {
  opacity: 1;

  transform:
    translateY(0);

  transition-delay:
    0.34s;
}


.ms-hero.ms-visible
.ms-hero-subtitle {
  opacity: 1;

  transform:
    translateY(0);

  transition-delay:
    0.5s;
}


.ms-hero.ms-visible
.ms-hero-date {
  opacity: 1;

  transform:
    translateY(0);

  transition-delay:
    0.64s;
}


.ms-hero.ms-visible
.ms-hero-actions {
  opacity: 1;

  transform:
    translateY(0);

  transition-delay:
    0.78s;
}


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

.ms-hero-kicker {
  display: flex;

  align-items: center;

  justify-content: center;

  width:
    fit-content;

  max-width:
    100%;

  gap:
    0.7rem;

  margin:
    0
    auto
    var(--ms-space-lg);

  color:
    #8f6d35;

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

  font-size:
    clamp(
      0.72rem,
      1.5vw,
      0.84rem
    );

  font-weight:
    600;

  letter-spacing:
    0.22em;

  text-transform:
    uppercase;
}


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

  width: 28px;

  height: 1px;

  flex-shrink: 0;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--ms-color-primary)
    );
}


.ms-hero-kicker::after {
  transform:
    scaleX(-1);
}


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

.ms-hero-title {
  margin: 0;

  color:
    #2d241d;

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

  font-size:
    clamp(
      3rem,
      6vw,
      5.4rem
    );

  font-weight:
    500;

  line-height:
    0.9;

  letter-spacing:
    -0.035em;

  text-wrap:
    balance;
}


.ms-hero-title > span:first-child {
  display: block;
}


/* =========================================================
   SCRIPT / SEGUNDO NOMBRE
========================================================= */

.ms-hero-script {
  display: block;

  margin-top:
    clamp(
      0.15rem,
      0.8vw,
      0.45rem
    );

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

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

  font-size:
    clamp(
      3.5rem,
      7vw,
      6.2rem
    );

  font-weight:
    400;

  line-height:
    0.84;

  text-shadow:
    0 10px 32px
    rgba(
      143,
      109,
      53,
      0.2
    );
}


/* =========================================================
   SUBTITLE
========================================================= */

.ms-hero-subtitle {
  max-width:
    480px;

  margin:
    clamp(
      1.4rem,
      3vw,
      2rem
    )
    auto
    1.05rem;

  color:
    rgba(
      45,
      36,
      29,
      0.82
    );

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

  font-size:
    clamp(
      0.98rem,
      2vw,
      1.15rem
    );

  font-weight:
    400;

  line-height:
    1.9;

  text-wrap:
    balance;
}


/* =========================================================
   DATE
========================================================= */

.ms-hero-date {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    0.85rem;

  margin-bottom:
    1.05rem;

  color:
    #705328;

  font-size:
    clamp(
      0.75rem,
      1.5vw,
      0.9rem
    );

  font-weight:
    700;

  letter-spacing:
    0.18em;

  text-transform:
    uppercase;
}


.ms-hero-date::before,
.ms-hero-date::after {
  content: "";

  width:
    clamp(
      30px,
      6vw,
      64px
    );

  height: 1px;

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


.ms-hero-date::after {
  transform:
    scaleX(-1);
}


/* =========================================================
   ACTIONS
========================================================= */

.ms-hero-actions {
  display: flex;

  flex-wrap: wrap;

  justify-content:
    center;

  gap:
    var(--ms-space-md);
}


/* =========================================================
   BOTONES ESPECÍFICOS DEL HERO
========================================================= */

.ms-hero-actions
.ms-btn {
  min-width:
    210px;

  min-height:
    52px;

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

  font-size:
    0.76rem;

  letter-spacing:
    0.13em;
}


/* =========================================================
   BOTÓN GLASS DEL HERO
========================================================= */

.ms-hero-actions
.ms-btn-glass {
  border:
    1px solid
    rgba(
      200,
      164,
      107,
      0.32
    );

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

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

  box-shadow:
    0 12px 30px
      rgba(
        45,
        36,
        29,
        0.08
      ),
    inset 0 1px 0
      rgba(
        255,
        255,
        255,
        0.46
      );
}


.ms-hero-actions
.ms-btn-glass:hover {
  background:
    rgba(
      255,
      255,
      255,
      0.44
    );

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


/* =========================================================
   DECORATIVE ORBS
========================================================= */

.ms-hero-orb {
  position: absolute;

  z-index: 1;

  border-radius:
    50%;

  filter:
    blur(3px);

  opacity:
    0.72;

  pointer-events:
    none;

  animation:
    msHeroOrbFloat
    8s
    ease-in-out
    infinite;
}


.ms-hero-orb.one {
  top: 6%;

  left: -8%;

  width:
    clamp(
      150px,
      26vw,
      320px
    );

  aspect-ratio:
    1;

  background:
    radial-gradient(
      circle,
      rgba(
        243,
        220,
        190,
        0.32
      ),
      rgba(
        200,
        164,
        107,
        0.04
      ) 68%,
      transparent 72%
    );
}


.ms-hero-orb.two {
  right:
    -10%;

  bottom:
    7%;

  width:
    clamp(
      180px,
      30vw,
      380px
    );

  aspect-ratio:
    1;

  background:
    radial-gradient(
      circle,
      rgba(
        242,
        217,
        200,
        0.28
      ),
      rgba(
        200,
        164,
        107,
        0.04
      ) 68%,
      transparent 72%
    );

  animation-delay:
    -3.5s;
}


/* =========================================================
   FLOWERS
========================================================= */

.ms-hero-flower {
  position: absolute;

  z-index: 2;

  width:
    min(
      28vw,
      260px
    );

  opacity: 0;

  filter:
    drop-shadow(
      0 18px 32px
      rgba(
        45,
        36,
        29,
        0.14
      )
    );

  pointer-events:
    none;

  transition:
    opacity
      1.2s ease,
    transform
      1.4s
      var(--ms-ease-luxury);
}


.ms-hero-flower.top-left {
  top:
    -1rem;

  left:
    -2rem;

  transform:
    translate(
      -24px,
      -24px
    )
    rotate(-8deg);
}


.ms-hero-flower.bottom-right {
  right:
    -2rem;

  bottom:
    -2rem;

  width:
    min(
      34vw,
      330px
    );

  transform:
    translate(
      28px,
      28px
    )
    rotate(8deg);
}


.ms-hero.ms-visible
.ms-hero-flower {
  opacity:
    0.78;

  transform:
    translate(
      0,
      0
    )
    rotate(0);
}


/* =========================================================
   SCROLL INDICATOR
========================================================= */

.ms-scroll-indicator {
  position: absolute;

  left: 50%;

  bottom:
    clamp(
      14px,
      2.2vh,
      24px
    );

  z-index: 8;

  display: flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    0.45rem;

  min-width:
    92px;

  padding:
    0.55rem
    0.85rem
    0.6rem;

  transform:
    translateX(-50%);

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

  border-radius:
    999px;

  background:
    rgba(
      35,
      28,
      22,
      0.30
    );

  color:
    rgba(
      255,
      255,
      255,
      0.94
    );

  box-shadow:
    0 8px 24px
      rgba(
        0,
        0,
        0,
        0.13
      ),
    inset 0 1px 0
      rgba(
        255,
        255,
        255,
        0.16
      );

  font-size:
    0.65rem;

  font-weight:
    700;

  letter-spacing:
    0.18em;

  text-transform:
    uppercase;

  cursor:
    pointer;

  user-select:
    none;

  opacity:
    0;

  transition:
    opacity
      0.8s ease 1.1s,
    background-color
      0.25s ease,
    transform
      0.25s ease,
    border-color
      0.25s ease;
}


.ms-hero.ms-visible
.ms-scroll-indicator {
  opacity:
    1;
}


.ms-scroll-indicator:hover {
  background:
    rgba(
      35,
      28,
      22,
      0.40
    );

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

  transform:
    translateX(-50%)
    translateY(-2px);
}


.ms-scroll-indicator span {
  font-size:
    0.62rem;

  font-weight:
    600;

  letter-spacing:
    0.22em;

  text-transform:
    uppercase;

  line-height:
    1;

  text-shadow:
    0 1px 6px
    rgba(
      0,
      0,
      0,
      0.24
    );
}


.ms-scroll-indicator svg {
  width:
    15px;

  height:
    15px;

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

  filter:
    drop-shadow(
      0 2px 5px
      rgba(
        0,
        0,
        0,
        0.2
      )
    );

  animation:
    msHeroScrollHint
    1.8s
    ease-in-out
    infinite;
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes msHeroScrollHint {

  0%,
  100% {
    transform:
      translateY(0);

    opacity:
      0.7;
  }


  50% {
    transform:
      translateY(5px);

    opacity:
      1;
  }

}


@keyframes msHeroOrbFloat {

  0%,
  100% {
    transform:
      translate3d(
        0,
        0,
        0
      )
      scale(1);
  }


  50% {
    transform:
      translate3d(
        0,
        -14px,
        0
      )
      scale(1.04);
  }

}


/* =========================================================
   BUTTON PRESSED
========================================================= */

.ms-hero-actions
.ms-btn.is-pressed {
  transform:
    translateY(-1px)
    scale(0.97);
}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 1101px) {

  .ms-hero-inner {
    width:
      min(
        92%,
        1220px
      );

    justify-content:
      flex-end;
  }


  .ms-hero-card {
    width:
      min(
        50vw,
        650px
      );
  }

}


/* =========================================================
   TABLET
   761px – 1100px
========================================================= */

@media
  (min-width: 761px)
  and
  (max-width: 1100px) {

  .ms-hero {
    min-height:
      100svh;

    padding:
      5rem
      0
      6.5rem;
  }


  .ms-hero-inner {
    width:
      min(
        94%,
        900px
      );

    justify-content:
      center;
  }


  .ms-hero-card {
    width:
      min(
        78vw,
        700px
      );

    padding:
      2.5rem
      clamp(
        2rem,
        5vw,
        3.25rem
      );

    border-radius:
      2.3rem;
  }


  /*
    Encuadre aprobado para
    Boda Luxury 01 en tablet.
  */

  .ms-hero-bg img,
  .ms-hero-bg video {
    object-position:
      30% center;
  }


  .ms-hero-title {
    font-size:
      clamp(
        3.4rem,
        7vw,
        5rem
      );
  }


  .ms-hero-script {
    font-size:
      clamp(
        4rem,
        8vw,
        5.7rem
      );
  }


  .ms-hero-subtitle {
    max-width:
      520px;

    margin-top:
      1.45rem;

    margin-bottom:
      1rem;
  }


  .ms-hero-date {
    margin-bottom:
      1rem;
  }

}


/* =========================================================
   TABLET HORIZONTAL
========================================================= */

@media
  (min-width: 761px)
  and
  (max-width: 1100px)
  and
  (orientation: landscape) {

  .ms-hero-inner {
    width:
      min(
        94%,
        1100px
      );

    justify-content:
      flex-end;
  }


  .ms-hero-card {
    width:
      min(
        55vw,
        600px
      );
  }


  /*
    Encuadre aprobado para
    Boda Luxury 01 en tablet horizontal.
  */

  .ms-hero-bg img,
  .ms-hero-bg video {
    object-position:
      center center;
  }

}


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

@media (max-width: 760px) {

  .ms-hero {
    min-height:
      100svh;

    padding:
      4.5rem
      0
      6.5rem;
  }


  .ms-hero-bg {
    inset:
      0;
  }


  .ms-hero-inner {
    width:
      100%;

    justify-content:
      center;
  }


  .ms-hero-card {
    width:
      min(
        88%,
        500px
      );

    padding:
      1.85rem
      1.25rem;

    border-radius:
      1.75rem;
  }


  /*
    Encuadre aprobado para
    Boda Luxury 01 en móvil.
  */

  .ms-hero-bg img,
  .ms-hero-bg video {
    object-position:
      28% center;
  }


  .ms-hero-title {
    font-size:
      clamp(
        2.7rem,
        13vw,
        4.4rem
      );
  }


  .ms-hero-script {
    font-size:
      clamp(
        3.1rem,
        15vw,
        5rem
      );
  }


  .ms-hero-subtitle {
    max-width:
      30rem;

    margin-top:
      1.2rem;

    margin-bottom:
      0.85rem;

    font-size:
      0.9rem;

    line-height:
      1.65;
  }


  .ms-hero-date {
    flex-direction:
      column;

    gap:
      0.4rem;

    margin-bottom:
      0.95rem;
  }


  .ms-hero-date::before,
  .ms-hero-date::after {
    width:
      52px;
  }


  .ms-hero-actions {
    flex-direction:
      column;

    align-items:
      stretch;
  }


  .ms-hero-actions
  .ms-btn {
    width:
      100%;

    min-width:
      0;
  }


  .ms-hero-flower {
    width:
      min(
        32vw,
        220px
      );
  }


  .ms-hero-flower.top-left {
    top:
      -1rem;

    left:
      -3.2rem;

    width:
      165px;
  }


  .ms-hero-flower.bottom-right {
    right:
      -3.2rem;

    bottom:
      -1.2rem;

    width:
      205px;
  }


  .ms-scroll-indicator {
    bottom:
      12px;

    min-width:
      86px;

    padding:
      0.5rem
      0.75rem
      0.55rem;
  }


  .ms-scroll-indicator span {
    font-size:
      0.58rem;

    letter-spacing:
      0.2em;
  }


  .ms-scroll-indicator svg {
    width:
      14px;

    height:
      14px;
  }

}


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

@media (max-width: 480px) {

  .ms-scroll-indicator {
    bottom:
      max(
        10px,
        env(safe-area-inset-bottom)
      );

    min-width:
      82px;

    gap:
      0.35rem;

    padding:
      0.48rem
      0.7rem
      0.5rem;

    background:
      rgba(
        35,
        28,
        22,
        0.34
      );
  }


  .ms-scroll-indicator span {
    font-size:
      0.56rem;
  }

}


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

@media (max-width: 380px) {

  .ms-hero-card {
    width:
      92%;

    padding:
      1.7rem
      1rem;
  }


  .ms-hero-title {
    font-size:
      2.8rem;
  }


  .ms-hero-script {
    font-size:
      3.4rem;
  }


  .ms-hero-subtitle {
    font-size:
      0.88rem;
  }

}


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

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

  .ms-hero-bg img,
  .ms-hero-bg video,
  .ms-hero-card,
  .ms-hero-kicker,
  .ms-hero-title,
  .ms-hero-subtitle,
  .ms-hero-date,
  .ms-hero-actions,
  .ms-hero-flower,
  .ms-scroll-indicator,
  .ms-scroll-indicator svg,
  .ms-hero-orb {
    animation:
      none !important;

    transition:
      none !important;

    transform:
      none !important;
  }

}