/* ==========================================================
   BLACK LOTUS SHOW — Private Invitation
   Design tokens
   ========================================================== */

:root{
  --black-0:#050505;
  --black-1:#0A0A0A;
  --black-2:#111111;
  --black-3:#191919;

  --white-off:#ECECEC;

  --grey-1:#777777;
  --grey-2:#3A3A3A;

  --red:#f70100;
  --red-deep:#960100;

  --ease-out:cubic-bezier(.16,.84,.44,1);
  --ease-in-out:cubic-bezier(.45,0,.15,1);
}


/* ==========================================================
   Global
   ========================================================== */

*{
  box-sizing:border-box;
}


/*
   IMPORTANTE:
   Todo elemento que tenga el atributo "hidden"
   permanece completamente oculto.
*/
[hidden]{
  display:none !important;
}


html,
body{
  margin:0;
  min-height:100%;

  background:var(--black-0);
  color:var(--white-off);

  font-family:
    'Inter',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    sans-serif;

  -webkit-font-smoothing:antialiased;

  overflow-x:hidden;
  overscroll-behavior:none;
}


button{
  font-family:inherit;
  -webkit-tap-highlight-color:transparent;
}


/* ==========================================================
   APP
   ========================================================== */

#app{
  position:relative;

  width:100%;

  min-height:100vh;
  min-height:100dvh;

  background:var(--black-0);

  display:flex;
  align-items:center;
  justify-content:center;

  padding:
    clamp(16px, 3.5vh, 48px)
    clamp(20px, 7vw, 56px);
}


/* ==========================================================
   Sound button
   ========================================================== */

.sound-toggle{
  position:absolute;

  top:max(20px, env(safe-area-inset-top));
  right:max(20px, env(safe-area-inset-right));

  width:38px;
  height:38px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:none;
  border:none;

  color:var(--grey-2);

  cursor:pointer;

  opacity:0;

  transition:
    opacity 1s var(--ease-out) 1.6s,
    color .4s;

  z-index:5;
}


#app.is-ready .sound-toggle{
  opacity:1;
}


.sound-toggle:hover,
.sound-toggle:focus-visible{
  color:var(--grey-1);
}


.sound-toggle[aria-pressed="true"]{
  color:var(--red);
}


.sound-toggle svg{
  width:20px;
  height:20px;
}


.sound-wave{
  transition:opacity .3s;
}


.sound-toggle[aria-pressed="false"] .sound-wave{
  opacity:.25;
}


/* ==========================================================
   Scene
   ========================================================== */

.scene{
  display:flex;
  flex-direction:column;

  align-items:center;

  text-align:center;

  width:100%;
  max-width:420px;
}


/* ==========================================================
   Owl
   ========================================================== */

.owl-wrap{
  position:relative;

  width:min(78vw, 300px);

  aspect-ratio:1 / 1;

  margin-bottom:2.6vh;

  flex:none;
  overflow:visible;

  transition:
    width 2.2s var(--ease-out),
    margin-bottom 2.2s var(--ease-out);
}


/* Búho revelado: el doble de grande */
.owl-wrap.is-revealed{
  width:min(80vw, 340px);
  margin-bottom:2vh;
}


.owl-layer{
  position:absolute;

  inset:0;

  width:100%;
  height:100%;

  object-fit:contain;

  display:block;

  user-select:none;

  -webkit-user-drag:none;
}


/* ==========================================================
   Owl eyes
   - más centrados
   - 200% más grandes al inicio
   ========================================================== */

.owl-layer-eyes{
  opacity:0;

  transform:translateY(10%) scale(2);
  transform-origin:center center;

  filter:
    drop-shadow(0 0 8px rgba(247,1,0,.85))
    drop-shadow(0 0 22px rgba(247,1,0,.32));

  transition:
    opacity 2.1s var(--ease-out) .15s,
    transform 2.2s var(--ease-out);
}


.owl-wrap.is-in .owl-layer-eyes{
  opacity:1;
}


.owl-wrap.is-breathing .owl-layer-eyes{
  animation:
    eyesBreathe
    4.6s
    ease-in-out
    infinite;
}


/* Al revelarse el búho, los ojos vuelven a encajar con él */
.owl-wrap.is-revealed .owl-layer-eyes{
  transform:translateY(0) scale(1);
}


@keyframes eyesBreathe{

  0%,
  100%{
    opacity:.88;
    transform:translateY(10%) scale(2);
  }

  50%{
    opacity:1;
    transform:translateY(10%) scale(2.05);
  }

}


/* ==========================================================
   Full owl
   ========================================================== */

.owl-layer-full{
  opacity:0;

  transform:scale(1.06);

  filter:
    drop-shadow(
      0 0 24px
      rgba(247,1,0,.14)
    );

  transition:
    opacity 2.2s var(--ease-out),
    transform 2.2s var(--ease-out);
}


.owl-wrap.is-revealed .owl-layer-full{
  opacity:1;
  transform:scale(1);
}


/* ==========================================================
   Text slot
   Intro / invitation / form share same position
   ========================================================== */

.text-slot{
  display:grid;

  width:100%;
}


.text-slot > *{
  grid-area:1 / 1;

  display:flex;
  flex-direction:column;

  align-items:center;
  justify-content:flex-start;

  width:100%;
}


/* ==========================================================
   Intro
   ========================================================== */

.intro-text{
  transition:
    opacity .6s var(--ease-in-out);
}


.intro-text.is-hidden{
  opacity:0;
  pointer-events:none;
}


/* ==========================================================
   Invitation
   ========================================================== */

.invite-copy{
  pointer-events:none;

  gap:0;

  transition:
    opacity .6s var(--ease-in-out);
}


.invite-copy.is-active{
  pointer-events:auto;
}


.invite-copy.is-hidden{
  opacity:0;
  pointer-events:none;
}


/* ==========================================================
   Intro text
   ========================================================== */

.intro-kicker{
  margin:0;

  font-size:11px;
  font-weight:300;

  letter-spacing:.42em;
  text-indent:.42em;

  line-height:2.1;

  opacity:0;

  transition:
    opacity 1.3s var(--ease-out) 1.5s;
}


#app.is-ready .intro-kicker{
  opacity:1;
}


.intro-kicker span{
  display:block;
  color:var(--white-off);
}


.intro-kicker span.dim{
  color:var(--grey-1);
  font-weight:200;
}


/* ==========================================================
   ENTER button
   ========================================================== */

.enter-btn{
  margin-top:44px;

  background:none;

  border:
    1px solid
    var(--grey-2);

  color:var(--white-off);

  font-size:11px;
  font-weight:300;

  letter-spacing:.38em;
  text-indent:.38em;

  padding:
    16px
    40px;

  cursor:pointer;

  opacity:0;

  transition:
    opacity 1s var(--ease-out) 2.3s,
    border-color .5s,
    color .5s,
    transform .5s var(--ease-out);
}


#app.is-ready .enter-btn{
  opacity:1;

  animation:
    enterPulse
    3.4s
    ease-in-out
    3.3s
    infinite;
}


.enter-btn:hover,
.enter-btn:focus-visible{
  border-color:var(--red);
  color:var(--white-off);
}


.enter-btn:active{
  transform:scale(.97);
}


@keyframes enterPulse{

  0%,
  100%{
    border-color:var(--grey-2);
  }

  50%{
    border-color:var(--grey-1);
  }

}


/* ==========================================================
   Invitation line animations
   ========================================================== */

.line{
  opacity:0;

  transform:
    translateY(12px);

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


.line.is-in{
  opacity:1;
  transform:translateY(0);
}


/* ==========================================================
   Poetic text
   ========================================================== */

.line-poetic{
  margin:
    0
    0
    1.6vh;

  font-family:
    'Cormorant Garamond',
    Georgia,
    serif;

  font-style:italic;
  font-weight:400;

  font-size:16px;
  line-height:1.5;

  letter-spacing:.005em;

  color:var(--white-off);

  max-width:29ch;
}


/* ==========================================================
   Presentación label
   ========================================================== */

.line-presenta{
  margin:
    0
    0
    1vh;

  font-size:12px;
  font-weight:300;

  letter-spacing:.32em;
  text-indent:.32em;

  color:var(--grey-1);
}


/* ==========================================================
   Black Lotus wordmark
   ========================================================== */

.wordmark{
  width:min(56vw, 220px);

  height:auto;

  margin:
    0
    0
    1.2vh;

  display:block;
}


/* ==========================================================
   Red divider
   ========================================================== */

.divider{
  width:1px;
  height:20px;

  background:
    linear-gradient(
      180deg,
      transparent,
      var(--red) 40%,
      var(--red) 60%,
      transparent
    );

  opacity:0;

  margin:
    .2vh
    0
    1vh;
}


.divider.is-in{
  opacity:.85;
}


/* ==========================================================
   Event facts
   ========================================================== */

.facts{
  display:flex;
  flex-direction:column;

  gap:.6vh;
}


.fact{
  margin:0;

  font-size:14px;
  font-weight:300;

  letter-spacing:.2em;
  text-indent:.2em;

  color:var(--white-off);

  font-variant-numeric:
    tabular-nums;
}


/* ==========================================================
   Confirm attendance button
   ========================================================== */

.cta-secondary{
  margin-top:1.8vh;

  background:none;

  border:none;

  border-bottom:
    1px solid
    var(--grey-2);

  color:var(--grey-1);

  font-size:11px;
  font-weight:400;

  letter-spacing:.3em;
  text-indent:.3em;

  padding:
    9px
    2px
    10px;

  cursor:pointer;

  transition:
    color .45s,
    border-color .45s;
}


.cta-secondary:hover,
.cta-secondary:focus-visible{
  color:var(--white-off);

  border-color:var(--red);
}


/* ==========================================================
   RSVP FORM STAGE
   ========================================================== */

.form-stage{
  opacity:0;

  pointer-events:none;

  justify-content:center;

  transition:
    opacity .7s var(--ease-in-out);

  width:100%;
  max-width:320px;
}


.form-stage.is-active{
  opacity:1;

  pointer-events:auto;
}


/* ==========================================================
   RSVP title
   ========================================================== */

.form-title{
  margin:
    0
    0
    3.2vh;

  font-size:11px;
  font-weight:400;

  letter-spacing:.4em;
  text-indent:.4em;

  color:var(--grey-1);
}


/* ==========================================================
   RSVP form
   ========================================================== */

.rsvp-form{
  display:flex;
  flex-direction:column;

  gap:22px;

  width:100%;
}


/* ==========================================================
   Form fields
   ========================================================== */

.field{
  position:relative;

  padding-top:18px;
}


.field input{
  width:100%;

  background:transparent;

  border:none;

  border-bottom:
    1px solid
    var(--grey-2);

  color:var(--white-off);

  font-family:
    'Inter',
    sans-serif;

  font-size:15px;
  font-weight:300;

  padding:
    8px
    0;

  outline:none;

  transition:
    border-color .35s;
}


.field input:focus{
  border-color:var(--red);
}


.field input:invalid{
  box-shadow:none;
}


/* ---------- Floating labels ---------- */

.field label{
  position:absolute;

  left:0;
  top:26px;

  font-size:15px;
  font-weight:300;

  color:var(--grey-1);

  pointer-events:none;

  transition:
    top .25s var(--ease-out),
    font-size .25s var(--ease-out),
    letter-spacing .25s var(--ease-out),
    color .25s var(--ease-out);
}


.field input:focus + label,
.field input:not(:placeholder-shown) + label{

  top:0;

  font-size:10px;

  letter-spacing:.18em;

  color:var(--grey-1);
}


.field input:focus + label{
  color:var(--red);
}


/* ==========================================================
   Honeypot anti-spam
   ========================================================== */

.hp-field{
  position:absolute;

  left:-9999px;
  top:auto;

  width:1px;
  height:1px;

  overflow:hidden;
}


/* ==========================================================
   Form error
   ========================================================== */

.form-error{
  margin:0;

  font-size:12px;

  color:var(--red);

  text-align:center;
}


/* ==========================================================
   Submit
   ========================================================== */

.form-submit{
  margin-top:10px;

  background:none;

  border:
    1px solid
    var(--grey-2);

  color:var(--white-off);

  font-size:11px;
  font-weight:300;

  letter-spacing:.38em;
  text-indent:.38em;

  padding:
    15px
    0;

  cursor:pointer;

  transition:
    opacity .3s,
    border-color .4s,
    color .4s;
}


.form-submit:hover,
.form-submit:focus-visible{
  border-color:var(--red);
}


.form-submit:disabled{
  opacity:.45;
  cursor:default;
}


/* ==========================================================
   Success message
   ========================================================== */

.form-success{
  display:flex;
  flex-direction:column;

  align-items:center;

  gap:10px;

  text-align:center;
}


.form-success-mark{
  width:44px;
  height:44px;

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

  border-radius:50%;

  display:flex;

  align-items:center;
  justify-content:center;

  color:var(--red);

  font-size:18px;

  margin-bottom:6px;
}


.form-success p{
  margin:0;

  font-size:16px;
  font-weight:300;

  color:var(--white-off);
}


.form-success-sub{
  font-size:13px !important;

  color:
    var(--grey-1)
    !important;
}


/* ==========================================================
   Desktop adaptation
   ========================================================== */

@media (min-width:720px){

  .owl-wrap{
    width:320px;
  }

  /* Doble de grande también en desktop */
  .owl-wrap.is-revealed{
    width:340px;
  }

  .sound-toggle{
    top:28px;
    right:28px;
  }

}


/* ==========================================================
   Reduced motion
   ========================================================== */

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

  *,
  *::before,
  *::after{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
    transition-delay:0s !important;
    animation-iteration-count:1 !important;
  }

}