/* ============================================================
   OMNIS — Age Gate (+18) · "El Umbral"
   Pantalla nocturna; números grabados DD·MM·AAAA en Cinzel oro;
   al confirmar, blur-dissolve que revela el loader (noche→amanecer).
   ============================================================ */
.agegate{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(120% 90% at 50% 16%, #0b0f14 0%, #07090d 46%, #050609 100%);
  color:var(--cream);
  text-align:center;
  padding:6vh 24px;
  overflow:hidden;
  opacity:1;
  transition:opacity .9s ease, filter .9s ease, transform 1.1s cubic-bezier(.7,0,.2,1);
}

/* fondo: grabado del valle/pueblo de Sóller (Mallorca), muy sutil, en tono noche+oro */
.agegate__photo{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:url("loader/bg.jpg") center 44% / cover no-repeat;
  filter:invert(1) brightness(1.65) contrast(1.05) sepia(.55) saturate(1.7) hue-rotate(-6deg);
  opacity:.45;
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 18%, #000 88%, transparent 100%);
          mask-image:linear-gradient(180deg, transparent 0, #000 18%, #000 88%, transparent 100%);
}

/* textura ondulada (alas OMNIS) · oro tenue · en loop · por encima del grabado */
.agegate__texture{position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.12}
.agegate__texture svg{width:100%; height:100%; display:block; filter:url(#omnisWaveGate)}
.agegate__texture svg path{fill:var(--gold) !important}

/* viñeta (por encima de textura y grabado) */
.agegate::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(82% 82% at 50% 44%, transparent 50%, rgba(0,0,0,.62));
}

.agegate__inner{position:relative; z-index:3; max-width:760px; width:100%}

/* logo real OMNIS */
.agegate__logo{display:block; width:clamp(152px,17vw,208px); height:auto; margin:0 auto 1.5em; opacity:.96}

.agegate__eyebrow{
  display:block;
  font-family:'Jost',sans-serif; font-weight:400;
  font-size:11px; letter-spacing:.44em; text-transform:uppercase;
  color:var(--gold); opacity:.85;
}
.agegate__title{
  font-family:'Cinzel',serif; font-weight:500;
  font-size:clamp(26px,4.6vw,48px); letter-spacing:.06em;
  color:var(--cream); margin:.55em 0 .12em;
}
.agegate__sub{
  font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:clamp(15px,2.1vw,21px); color:rgba(239,231,214,.64);
  margin-bottom:clamp(30px,5.5vh,56px);
}

/* ---- números grabados DD · MM · AAAA ---- */
.agegate__date{
  display:flex; align-items:flex-end; justify-content:center;
  gap:clamp(10px,2.4vw,26px);
}
.agegate__field{position:relative; display:flex; flex-direction:column; align-items:center; gap:12px}
.agegate__field > label{
  font-family:'Jost',sans-serif; font-size:10px; letter-spacing:.36em;
  text-transform:uppercase; color:rgba(198,163,106,.58);
}
.agegate__field input{
  width:var(--w,2.6em);              /* em: holgura real para los glifos de Cinzel (sin recortes) */
  background:transparent; border:0; outline:0; padding:0;
  font-family:'Cinzel',serif; font-weight:600;
  font-size:clamp(28px,5vw,50px); line-height:1; text-align:center; letter-spacing:0;
  color:transparent;
  background-image:linear-gradient(180deg,#f7ead0 0%,#e0c489 30%,#c6a36a 60%,#9c7c45 100%);
  -webkit-background-clip:text; background-clip:text;
  caret-color:var(--gold-2);
  /* relieve die-stamped (oscuro abajo + luz arriba = grabado en relieve) */
  filter:drop-shadow(0 1.5px 0.5px rgba(0,0,0,.55)) drop-shadow(0 -1px 0 rgba(247,234,208,.16));
  transition:transform .26s ease;
}
.agegate__field--year input{--w:4.4em}
/* recoil al "sellar" cada dígito */
.agegate__field input.is-stamp{animation:ageStamp .26s ease}
@keyframes ageStamp{0%{transform:scale(1.16)}55%{transform:scale(.965)}100%{transform:scale(1)}}
.agegate__field input::placeholder{-webkit-text-fill-color:rgba(239,231,214,.15); color:rgba(239,231,214,.15); transition:opacity .2s ease}
/* al hacer clic/enfocar, el placeholder (DD/MM/AAAA) desaparece */
.agegate__field input:focus::placeholder{-webkit-text-fill-color:transparent; color:transparent; opacity:0}
/* base grabada bajo cada campo (se enciende al enfocar) */
.agegate__field::after{
  content:""; height:2px; width:100%; border-radius:2px; margin-top:2px;
  background:linear-gradient(90deg,transparent,rgba(198,163,106,.42),transparent);
  transition:background .35s ease, box-shadow .35s ease;
}
.agegate__field.is-focus::after{
  background:linear-gradient(90deg,transparent,var(--gold-2),transparent);
  box-shadow:0 0 18px rgba(231,210,166,.55);
}
.agegate__sep{
  font-family:'Cinzel',serif; font-size:clamp(28px,6vw,58px);
  color:rgba(198,163,106,.34); align-self:center; padding-bottom:.18em;
}

/* ---- CTA ---- */
.agegate__cta{
  margin-top:clamp(32px,5.5vh,56px);
  font-family:'Jost',sans-serif; font-weight:500;
  font-size:13px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold-2);
  padding:16px 46px; border:1px solid rgba(198,163,106,.5);
  background:linear-gradient(180deg,rgba(198,163,106,.07),rgba(198,163,106,.02));
  border-radius:2px; cursor:pointer;
  transition:color .4s ease, background .4s ease, border-color .4s ease, opacity .4s ease, transform .4s ease;
}
.agegate__cta:hover:not(:disabled){
  color:#0a0d11; border-color:var(--gold-2);
  background:linear-gradient(180deg,var(--gold-2),var(--gold));
  transform:translateY(-1px);
}
.agegate__cta:disabled{opacity:.3; cursor:not-allowed}

.agegate__error{
  min-height:16px; margin-top:18px;
  font-family:'Jost',sans-serif; font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:#d98b6a; opacity:0; transition:opacity .3s ease;
}
.agegate.is-error .agegate__error{opacity:1}
.agegate.is-error .agegate__date{opacity:1; transform:none; animation:ageShake .42s}
@keyframes ageShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-9px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}

.agegate__legal{
  margin-top:clamp(24px,4vh,40px);
  font-family:'Jost',sans-serif; font-weight:300; font-size:11px;
  letter-spacing:.05em; color:rgba(239,231,214,.4); line-height:1.8;
}
.agegate__legal b{color:rgba(239,231,214,.62); font-weight:400}

/* tagline en dorado, un poco más abajo */
.agegate__tagline{
  margin-top:clamp(20px,3.4vh,34px);
  font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:clamp(16px,2.1vw,21px); letter-spacing:.03em;
  color:var(--gold-2);
  text-shadow:0 1px 14px rgba(198,163,106,.22);
}

/* entrada escalonada */
.agegate__inner > *{opacity:0; transform:translateY(18px); animation:ageIn .9s cubic-bezier(.22,1,.36,1) forwards}
.agegate__inner > *:nth-child(1){animation-delay:.18s}
.agegate__inner > *:nth-child(2){animation-delay:.30s}
.agegate__inner > *:nth-child(3){animation-delay:.42s}
.agegate__inner > *:nth-child(4){animation-delay:.56s}
.agegate__inner > *:nth-child(5){animation-delay:.70s}
.agegate__inner > *:nth-child(6){animation-delay:.82s}
.agegate__inner > *:nth-child(7){animation-delay:.92s}
.agegate__inner > *:nth-child(8){animation-delay:1.02s}
@keyframes ageIn{to{opacity:1; transform:none}}
/* tras la entrada: hijos estables y visibles (sin depender de la animación) */
.agegate.is-ready .agegate__inner > *{opacity:1; transform:none; animation:none}
/* el shake de error debe seguir funcionando estando ya "ready" */
.agegate.is-ready.is-error .agegate__date{animation:ageShake .42s}

/* SALIDA: blur-dissolve + brillo creciente → la noche se aclara hacia el loader crema */
.agegate.is-leaving{opacity:0; filter:blur(24px) brightness(1.9); transform:scale(1.06); pointer-events:none}

@media(prefers-reduced-motion:reduce){
  .agegate__inner > *{animation:none; opacity:1; transform:none}
  .agegate__field input.is-stamp{animation:none}
  .agegate.is-leaving{filter:none}
}
@media(max-width:560px){
  .agegate__sep{display:none}
  .agegate__date{gap:9px}
  .agegate__field input{font-size:clamp(21px,6.2vw,30px)}
  .agegate__title{font-size:clamp(22px,6.4vw,34px)}
  .agegate__logo{width:clamp(132px,38vw,168px)}
}