/* ============================================================
   ALMARA DESIGN — Access Gate (Coming Soon / Login)
   Hides the entire site behind a password until authenticated.
   Auth is stored in sessionStorage → cleared when the browser
   window/tab is closed (asked again on a fresh window).
   ============================================================ */

/* While locked: freeze scroll and hide every real page element.
   Only the gate overlay (#almara-gate) is allowed to show.      */
html.almara-locked,
html.almara-locked body {
  overflow: hidden !important;
  height: 100% !important;
}
html.almara-locked body > *:not(#almara-gate) {
  display: none !important;
}
/* Hide the custom cursor / any injected helpers while locked */
html.almara-locked #customCursor { display: none !important; }

/* ── Overlay ──────────────────────────────────── */
#almara-gate {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: #F8F6F2;
  color: #2A2622;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}
[data-theme="dark"] #almara-gate {
  background: #121110;
  color: #EDE8E0;
}

#almara-gate .gate__inner {
  width: 100%;
  max-width: 440px;
  text-align: center;
  animation: gateFade .7s ease both;
}
@keyframes gateFade {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Logo (bursts in like an explosion) ───────── */
#almara-gate .gate__logo-wrap {
  position: relative;
  width: 170px;
  margin: 0 auto 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Expanding shockwave rings */
#almara-gate .gate__logo-wrap::before,
#almara-gate .gate__logo-wrap::after {
  content: '';
  position: absolute;
  width: 150px; height: 150px;
  border-radius: 50%;
  border: 2px solid #B8956A;
  transform: scale(.15);
  opacity: 0;
  pointer-events: none;
}
#almara-gate .gate__logo-wrap::before { animation: gateShock 1s ease-out .35s forwards; }
#almara-gate .gate__logo-wrap::after  { animation: gateShock 1.1s ease-out .5s forwards; }
@keyframes gateShock {
  0%   { transform: scale(.15); opacity: .55; }
  100% { transform: scale(2.6); opacity: 0; }
}

#almara-gate .gate__logo {
  width: 170px;
  height: auto;
  display: block;
  opacity: 0;
  transform: scale(.15);
  filter: blur(12px);
  animation: gateBurst 1.1s cubic-bezier(.18,.85,.25,1) .2s forwards;
}
@keyframes gateBurst {
  0%   { opacity: 0; transform: scale(.15); filter: blur(12px); }
  50%  { opacity: 1; transform: scale(1.14); filter: blur(0); }
  70%  { transform: scale(.96); }
  100% { opacity: 1; transform: scale(1); filter: blur(0) drop-shadow(0 0 20px rgba(184,149,106,.4)); }
}
@media (prefers-reduced-motion: reduce) {
  #almara-gate .gate__logo { animation: gateFade .5s both; transform: none; filter: none; opacity: 1; }
  #almara-gate .gate__logo-wrap::before,
  #almara-gate .gate__logo-wrap::after { display: none; }
}
#almara-gate .gate__logo--light { display: block; }
#almara-gate .gate__logo--dark  { display: none; }
[data-theme="dark"] #almara-gate .gate__logo--light { display: none; }
[data-theme="dark"] #almara-gate .gate__logo--dark  { display: block; }

/* ── Texts ────────────────────────────────────── */
#almara-gate .gate__eyebrow {
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: #B8956A;
  margin: 0 0 14px;
}
#almara-gate .gate__title {
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-size: clamp(2rem, 6vw, 2.9rem);
  font-weight: 500;
  line-height: 1.1;
  margin: 0 0 16px;
}
#almara-gate .gate__msg {
  font-size: 15px;
  line-height: 1.7;
  opacity: .78;
  margin: 0 auto 32px;
  max-width: 360px;
}

/* ── Form ─────────────────────────────────────── */
#almara-gate .gate__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 320px;
  margin: 0 auto;
}
#almara-gate .gate__input {
  width: 100%;
  padding: 14px 16px;
  font-size: 15px;
  letter-spacing: .04em;
  color: inherit;
  background: transparent;
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 2px;
  outline: none;
  transition: border-color .25s ease;
  text-align: center;
}
[data-theme="dark"] #almara-gate .gate__input {
  border-color: rgba(255,255,255,.2);
}
#almara-gate .gate__input:focus { border-color: #B8956A; }
#almara-gate .gate__input::placeholder { color: currentColor; opacity: .45; }

#almara-gate .gate__btn {
  width: 100%;
  padding: 14px 16px;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
  color: #fff;
  background: #B8956A;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: background .25s ease, transform .15s ease;
}
#almara-gate .gate__btn:hover { background: #a37f55; }
#almara-gate .gate__btn:active { transform: scale(.985); }
#almara-gate .gate__btn[disabled] { opacity: .6; cursor: default; }

#almara-gate .gate__error {
  min-height: 18px;
  font-size: 13px;
  color: #c0392b;
  margin-top: 4px;
  opacity: 0;
  transition: opacity .2s ease;
}
#almara-gate .gate__error.show { opacity: 1; }
[data-theme="dark"] #almara-gate .gate__error { color: #e98b7f; }

#almara-gate.gate--shake .gate__form { animation: gateShake .4s; }
@keyframes gateShake {
  10%,90% { transform: translateX(-1px); }
  20%,80% { transform: translateX(2px); }
  30%,50%,70% { transform: translateX(-5px); }
  40%,60% { transform: translateX(5px); }
}

#almara-gate .gate__foot {
  margin-top: 34px;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: .4;
}