/* -------------------------------------
   GATE OVERLAY (final, single copy)
------------------------------------- */
#email-gate {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 999;
  background: rgba(0,0,0,0.35);
  animation: fadeInGate 300ms ease forwards;
  isolation: isolate; /* keep stacking clean */
}

/* ensure all children use border-box */
#email-gate,
#email-gate *,
#email-gate *::before,
#email-gate *::after {
  box-sizing: border-box;
}

#email-gate .visually-hidden {
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden; clip: rect(1px,1px,1px,1px);
  white-space: nowrap;
}

#email-gate .gate-title {
  font-family: 'Cinzel', serif;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: #f6e8dc;
  opacity: 0.9;
  margin-bottom: 20px;
}

#email-gate .gate-headline {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.5rem, 2vw + 1rem, 2.4rem);
  line-height: 1.25;
  color: #fceee3;
  text-align: center;
  max-width: 56ch;
  margin: 0 auto 24px;
  padding: 0 12px;
}

#email-gate .gate-sub {
  font-size: 1rem;
  color: #fceee3;
  opacity: 0.9;
  text-align: center;
  max-width: 60ch;
  margin: 0 auto 28px;
  padding: 0 12px;
}

#gate-form {
  background: rgba(26, 17, 16, 0.92);
  backdrop-filter: blur(2px);
  padding: 28px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
  width: min(680px, 92vw);
  margin: 0 auto;
}

.form-row { display: grid; grid-template-columns: 1fr; gap: 12px; }

#gate-email {
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid #3b2b28;
  background: #1f1514;
  color: #fceee3;
  width: 100%;
  outline: none;
}
#gate-email::placeholder { color: #c9b7aa; opacity: 0.8; }
#gate-email:focus { border-color: #e1b382; box-shadow: 0 0 0 3px rgba(225,179,130,0.25); }

.btn-primary, .btn-secondary {
  padding: 12px 18px;
  border-radius: 10px;
  font-weight: 700;
  border: none;
  cursor: pointer;
}
.btn-primary { background-color: #e1b382; color: #1a1110; }
.btn-primary:hover { filter: brightness(0.95); }

.btn-secondary {
  background: transparent;
  color: #e1b382;
  border: 1px solid #e1b382;
  margin-top: 18px;
}
.btn-secondary:hover { background: rgba(225,179,130,0.1); }

.gate-post {
  font-size: 0.9rem;
  color: #d9cabe;
  text-align: center;
  margin-top: 10px;
}

/* hide gate if JS sets html.loaded (in addition to JS remove) */
html.loaded #email-gate { display: none; }

@media (min-width: 640px) {
  .form-row { grid-template-columns: 1fr auto; align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  #email-gate { animation: none; }
}

@keyframes fadeInGate { from { opacity: 0 } to { opacity: 1 } }

/* -------------------------------------
   GATE EMBERS (namespaced)
------------------------------------- */
#gate-embers { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.gate-content { position: relative; z-index: 1; }

.g-ember {
  position: absolute;
  width: 2px; height: 2px;
  background: #d19b69;
  border-radius: 50%;
  opacity: 0;
  animation: g-ember-drift 8s ease-in forwards;
  box-shadow: 0 0 6px #d19b69aa;
}

@keyframes g-ember-drift {
  0%   { transform: translateY(0) translateX(0) scale(1); opacity: 0; }
  10%  { opacity: 1; }
  50%  { transform: translateY(-40vh) translateX(-5vw) scale(0.9); opacity: 0.8; }
  90%  { opacity: 0.1; }
  100% { transform: translateY(-100vh) translateX(5vw) scale(0.7); opacity: 0; }
}

/* fade gate ember layer during handoff (JS toggles .fade-out) */
#gate-embers.fade-out { transition: opacity 400ms ease; opacity: 0; }


/* -------------------------------------
   SITE SHOW/HIDE + GLOBALS
------------------------------------- */
:root { color-scheme: dark; } /* hint to UA */
#site { display: none; }
html.loaded #site { display: block; }

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  text-align: center;
  padding: 2rem;
  margin-top: 1.5rem;
  font-family: "Segoe UI", sans-serif;
  background-color: #1a1110;
  color: #fceee3;
}

/* Background fade-in once loaded */
#background {
  position: fixed;
  inset: 0;
  background-image: url("Background-final.JPG");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  z-index: -1;
  opacity: 0;
  transition: opacity 1.5s ease-in;
}
body.loaded #background { opacity: 1; }

/* Ember particles */
.ember {
  position: absolute;
  width: 2px; height: 2px;
  background: #d19b69;
  border-radius: 50%;
  opacity: 0;
  animation: ember-drift 8s ease-in forwards;
  box-shadow: 0 0 6px #d19b69aa;
}
@keyframes ember-drift {
  0%   { transform: translateY(0) translateX(0) scale(1);   opacity: 0; }
  10%  { opacity: 1; }
  50%  { transform: translateY(-40vh) translateX(-5vw) scale(0.9); opacity: 0.8; }
  90%  { opacity: 0.1; }
  100% { transform: translateY(-100vh) translateX(5vw) scale(0.7); opacity: 0; }
}

/* Typography + main */
main { text-align: center; padding: 6rem 2rem 2rem; max-width: 800px; margin: 0 auto; }
h1 {
  margin-top: 1rem;
  font-family: 'Cinzel', serif;
  font-size: 3rem;
  font-weight: 700;
  text-align: center;
  color: #fceee3;
  text-shadow:
    0 0 10px rgba(255, 236, 210, 0.6),
    0 0 20px rgba(255, 156, 110, 0.4);
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInTitle 1.8s ease-out 1.2s forwards;
}
@keyframes fadeInTitle { to { opacity: 1; transform: translateY(0); } }
body.loaded h1 { animation: fadeInTitle 1.8s ease-out 1.2s forwards; }

main p {
  opacity: 0;
  transform: translateY(10px);
  animation: fadeInTagline 1.5s ease-out 1.6s forwards;
}
@keyframes fadeInTagline { to { opacity: 1; transform: translateY(0); } }

/* Links */
a {
  display: inline-block;
  margin: 1rem;
  padding: 0.75rem 1.5rem;
  background-color: #e1b382;
  color: #1a1110;
  text-decoration: none;
  font-weight: bold;
  border-radius: 6px;
  transition: background-color 0.2s ease;
}
a:hover { background-color: #c68a56; }

/* Top nav */
.nav-buttons {
  position: fixed;
  top: 2rem; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 1.5rem;
  z-index: 10;
}
.nav-link {
  opacity: 0;
  transform: scale(0.8);
  filter: blur(2px);
  animation: fadeSmoke 0.8s ease forwards;
}
.nav-link:nth-child(1) { animation-delay: 0.2s; }
.nav-link:nth-child(2) { animation-delay: 0.4s; }
.nav-link:nth-child(3) { animation-delay: 0.6s; }
.nav-link:nth-child(4) { animation-delay: 0.8s; }
@keyframes fadeSmoke { to { opacity: 1; transform: scale(1); filter: blur(0); } }

#nav-bar { position: fixed; top: 20px; left: 20px; z-index: 1000; text-align: left; }
#hamburger {
  display: none;
  font-size: 24px;
  padding: 10px 14px;
  background-color: rgba(0,0,0,0.7);
  color: white; border: none; border-radius: 6px;
  cursor: pointer; transition: opacity 0.3s;
}
#hamburger:hover { opacity: 0.8; }

.nav-buttons { display: flex; flex-direction: row; gap: 10px; margin-top: 10px; }
#nav-bar.collapsed #hamburger { display: inline-block; }
#nav-bar.collapsed .nav-buttons { display: none; }
#nav-bar.expanded .nav-buttons {
  display: flex; flex-direction: column; background: rgba(0,0,0,0.9);
  padding: 10px; border-radius: 8px; margin-top: 10px; gap: 10px; align-items: flex-start;
  animation: slideIn 0.3s ease-out;
}
#nav-bar.expanded #hamburger {
  opacity: 0.3; transition: opacity 0.3s; pointer-events: auto; z-index: 1001; position: relative;
}
.nav-buttons a {
  display: block; padding: 0.4rem 0.6rem; background-color: #d19b69; color: black;
  text-align: center; border-radius: 0.5rem; font-weight: bold; text-decoration: none;
  transition: background-color 0.3s, box-shadow 0.3s; min-width: 120px;
}
.nav-buttons a:hover { background-color: #e2b07c; box-shadow: 0 0 8px #d19b69aa; }
@keyframes slideIn { from { transform: translateX(-10px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* Sections */
.main-wrapper { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 70vh; text-align: center; }

#subscribe {
  width: 100%;
  text-align: center;
  padding: 2rem 1rem 4rem;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInSub 1.4s ease-out 2s forwards;
}
#subscribe form { display: inline-block; margin-top: 1rem; }
#subscribe input[type="email"] { padding: 0.5rem; width: 250px; max-width: 100%; }
#subscribe input[type="submit"] {
  margin-top: 1rem; padding: 0.5rem 1rem; background-color: #e1b382; color: #1a1110;
  border: none; border-radius: 6px; font-weight: bold; cursor: pointer;
}
@keyframes fadeInSub { to { opacity: 1; transform: translateY(0); } }

.hidden-section {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.2s ease-out, transform 1.2s ease-out;
  padding: 4rem 2rem;
  max-width: 800px; margin: 0 auto; text-align: center;
}
#about {
  max-width: 700px; margin: 4rem auto; padding: 2rem; text-align: center;
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}
body.loaded #about { opacity: 1; transform: translateY(0); }
#about h3 { font-family: 'Cinzel', serif; font-size: 2.5rem; margin-bottom: 1rem; color: #fceee3; }
#about p { font-size: 1rem; line-height: 1.6; color: #fceee3; margin-bottom: 1rem; }
#about a { color: #1a1110; }

/* What-is-this helper */
#what-is-this { opacity: 0; transform: translateY(20px); transition: all 0.6s ease; }
#what-is-this.visible { opacity: 1; transform: translateY(0); }

/* -------------------------------------
   Accessibility and motion prefs
------------------------------------- */
/* visible focus for a11y */
:where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid #e1b382;
  outline-offset: 3px;
  border-radius: 6px;
}

/* Respect motion prefs for site & gate */
@media (prefers-reduced-motion: reduce) {
  .ember, .g-ember { animation: none !important; opacity: 0.4; }
  h1, main p, #subscribe, .nav-link { animation: none !important; }
  * { transition: none !important; }
}

/* iOS Safari: background-attachment: fixed fallback */
@supports (-webkit-touch-callout: none) {
  #background { background-attachment: scroll; }
}