/* =========================================================
   Welcome / Guest Invitation — Emerald & Gold theme
   Full-bleed, full-viewport layout (no centered card)
   Palette:
     --ink            #16241C  near-black green, used on light UI (search field)
     --emerald-deep   #0B2E22  page / stage background
     --emerald-mid    #164A38  gradients / panels
     --gold           #D2A44C  primary accent
     --gold-pale      #F3DFAF  soft gold highlight, body text on dark
     --ivory          #FBF6EA  headline text on dark, light surfaces
     --maroon         #7A2331  CTA depth accent
   Type:
     Display (EN)  : 'Cormorant Garamond' + 'Great Vibes' (script accent)
     Display (KM)  : 'Moul'
     Body (EN)     : 'EB Garamond'
     Body (KM)     : 'Hanuman'
   ========================================================= */

:root{
  --ink: #16241C;
  --emerald-deep: #0B2E22;
  --emerald-mid: #164A38;
  --emerald-soft: #1F5F49;
  --gold: #D2A44C;
  --gold-bright: #E9C275;
  --gold-pale: #F3DFAF;
  --ivory: #FBF6EA;
  --maroon: #7A2331;
  --plaque-ink: #5B3D14; /* warm engraved-brown text color for the gold nameplate */

  --font-display-en: 'Cormorant Garamond', serif;
  --font-script-en: 'Great Vibes', cursive;
  --font-display-km: 'Moul', serif;
  --font-body-en: 'EB Garamond', serif;
  --font-body-km: 'Hanuman', serif;

  --content-w: 480px;
  --radius: 6px;
}

*{ box-sizing: border-box; }

html, body{
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--emerald-deep);
  color: var(--ivory);
  font-family: var(--font-body-en);
}

html[lang="km"] body{ font-family: var(--font-body-km); }

body{
  position: relative;
  overflow-x: hidden;
  min-height: 100vh;
  min-height: 100dvh;
}

/* subtle repeating lattice, evokes woven silk / krama pattern */
body::before{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
/*  opacity: 0.05;*/
  background-image:
    linear-gradient(45deg, var(--gold) 1px, transparent 1px),
    linear-gradient(-45deg, var(--gold) 1px, transparent 1px);
  background-size: 34px 34px;
  z-index: 0;
}

/* floating gold motes */
.motes{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
.motes span{
  position: absolute;
  bottom: -10px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold-pale);
  opacity: 0;
  animation: rise 11s linear infinite;
}
.motes span:nth-child(1){ left: 8%;  animation-delay: 0s;   animation-duration: 13s; }
.motes span:nth-child(2){ left: 22%; animation-delay: 2.4s; animation-duration: 10s; width:3px; height:3px; }
.motes span:nth-child(3){ left: 41%; animation-delay: 4.8s; animation-duration: 15s; }
.motes span:nth-child(4){ left: 63%; animation-delay: 1.2s; animation-duration: 12s; width:4px; height:4px; }
.motes span:nth-child(5){ left: 78%; animation-delay: 6s;   animation-duration: 14s; }
.motes span:nth-child(6){ left: 90%; animation-delay: 3.6s; animation-duration: 11s; width:3px; height:3px; }

@keyframes rise{
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: 0.55; }
  90%  { opacity: 0.35; }
  100% { transform: translateY(-100vh) translateX(18px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce){
  .motes span{ animation: none; opacity: 0; }
}

/* ---------- Language bar ---------- */
.lang-bar{
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 30;
  display: flex;
  gap: 6px;
  background: rgba(11,46,34,0.55);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(210,164,76,0.35);
  border-radius: 999px;
  padding: 4px;
}
.lang-btn{
  text-decoration: none;
  color: var(--gold-pale);
  font-family: var(--font-body-en);
  font-size: 13px;
  letter-spacing: 0.06em;
  padding: 6px 14px;
  border-radius: 999px;
  transition: background 0.25s ease, color 0.25s ease;
}
.lang-btn:hover{ background: rgba(210,164,76,0.15); }
.lang-btn.active{
  background: var(--gold);
  color: var(--emerald-deep);
  font-weight: 600;
}

/* ---------- Music control ---------- */
.music-control{
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 30;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--emerald-mid);
  border: 1px solid var(--gold);
  color: var(--gold-pale);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
  transition: transform 0.25s ease, background 0.25s ease;
}
.music-control:hover{ transform: scale(1.07); background: var(--emerald-soft); }
.music-control i{ font-size: 16px; }
.music-control.spinning i{ animation: spin 3.2s linear infinite; }
@keyframes spin{ to{ transform: rotate(360deg); } }

/* ---------- Full-screen stage (replaces the old centered card) ---------- */
.stage{
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 90px 24px 70px;
  background:
    radial-gradient(circle at 20% 8%, rgba(210,164,76,0.14), transparent 45%),
    radial-gradient(circle at 84% 90%, rgba(210,164,76,0.10), transparent 50%),
    linear-gradient(160deg, var(--emerald-deep) 0%, #103527 50%, var(--emerald-deep) 100%);
  overflow: hidden;
  animation: stageIn 1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes stageIn{
  from{ opacity: 0; }
  to  { opacity: 1; }
}

.stage-inner{
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--content-w);
  animation: contentIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}

@keyframes contentIn{
  from{ opacity: 0; transform: translateY(18px); }
  to  { opacity: 1; transform: translateY(0); }
}

/* ornamental corner flourishes, pinned to the viewport — signature element */
.corner{
  position: fixed;
  width: 64px;
  height: 64px;
  color: var(--gold);
  opacity: 0.9;
  pointer-events: none;
  z-index: 3;
}
.corner svg{ width: 100%; height: 100%; display: block; }
.corner.tl{ top: 16px; left: 16px; }
.corner.tr{ top: 16px; right: 16px; transform: rotate(90deg); }
.corner.br{ bottom: 16px; right: 16px; transform: rotate(180deg); }
.corner.bl{ bottom: 16px; left: 16px; transform: rotate(270deg); }

/* full-bleed background monogram image, kept subtle behind content */
.stage-bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
  z-index: 0;
}

/* ---------- Invitation copy ---------- */
.save-date{
  text-align: center;
/*  margin: 0 0 10px;*/
  margin-top: 0%;
  font-family: var(--font-body-en);
  font-size: 28px;
/*  letter-spacing: 0.28em;*/
  text-transform: uppercase;
/*  color: var(--gold-pale);*/
  color: rgb(249, 175, 89);
  text-shadow: rgb(0, 0, 0) 1px 2px 4px; 
}
html[lang="km"] .save-date{ font-family: var(--font-body-km); letter-spacing: 0.01em; text-transform: none; font-size: 32px;}

.couple-names{
  text-align: center;
  margin: 4px 0 12px;
  font-family: var(--font-display-en);
  font-weight: 500;
  font-size: clamp(28px, 5vw, 28px);
  line-height: 1.12;
/*  color: var(--ivory);*/
/*  text-shadow: 0 2px 10px rgba(0,0,0,0.35);*/
  text-shadow: rgb(0, 0, 0) 1px 2px 4px;
  color: rgb(249, 175, 89);
  margin-bottom: 80%;
}
html[lang="km"] .couple-names{ font-family: var(--font-display-km); font-weight: 400; font-size: clamp(26px, 7vw, 42px); }

.couple-names .ampersand{
  display: inline-block;
  margin: 0 12px;
  font-family: var(--font-script-en);
  font-size: 18px;
/*  color: var(--gold);*/
  vertical-align: -0.08em;
  color: rgb(249, 175, 89);
}

.section-title{
  text-align: center;
  margin: 4px auto 34px;
  max-width: 360px;
  margin-top: 30%;
  color: rgb(249, 175, 89);
  text-shadow: rgb(0, 0, 0) 1px 2px 4px;
}

.gname{
  text-align: center;
  font-family: var(--font-display-en);
  font-style: italic;
  font-size: clamp(20px, 4.4vw, 25px);
/*  color: var(--plaque-ink);*/
/*  text-shadow: 0 1px 0 rgba(255,255,255,0.35);*/
text-shadow: rgb(0, 0, 0) 1px 2px 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 220 / 45;
  margin: 0 auto 38px;
  margin-top: 0%;
 /* padding: 0 15%;*/
  background-image: url('/../assets/images/name-frame-kbach.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  color: rgb(249, 175, 89);
}
html[lang="km"] .gname{ font-family: var(--font-display-km); font-style: normal; font-size: clamp(17px, 4vw, 18px); }


.wedding-date {
    font-size: 22px;
    letter-spacing: 2px;
    margin-top: 30px;
    text-align: center;
}

.card-cta-wrap{ text-align: center; margin-top:10%; }

.invite-cta{
/*  display: inline-flex;*/
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: var(--font-body-en);
  font-size: 15px;
  letter-spacing: 0.05em;
/*  color: var(--ivory);*/
  background: linear-gradient(135deg, var(--maroon), #5c1a24);
  border: 1px solid var(--gold);
  padding: 15px 36px;
  border-radius: 999px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  box-shadow: 0 10px 28px rgba(0,0,0,0.4);
  margin-top: 2%;
  color: rgb(249, 175, 89);
}
html[lang="km"] .invite-cta{ font-family: var(--font-body-km); }
.invite-cta i{ color: var(--gold-pale); }
.invite-cta:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(0,0,0,0.5);
  background: linear-gradient(135deg, #8a2836, var(--maroon));
}
.invite-cta:focus-visible{
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
}

/* ---------- Not found state ---------- */
.notfound-overlay{ text-align: center; }
.notfound-overlay .nf-icon{
  width: 54px;
  height: 54px;
  margin: 0 auto 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(210,164,76,0.10);
  border: 1px solid rgba(210,164,76,0.4);
  color: var(--gold-pale);
  font-size: 20px;
}
.notfound-overlay h2{
  font-family: var(--font-display-en);
  font-size: clamp(24px, 5vw, 30px);
  color: var(--ivory);
  margin: 0 0 10px;
}
.notfound-overlay p{
  font-family: var(--font-body-en);
  font-size: 15px;
  color: var(--gold-pale);
  opacity: 0.85;
  margin: 0 0 26px;
  line-height: 1.55;
}
.nf-back{
  display: inline-block;
  text-decoration: none;
  color: var(--ivory);
  border: 1px solid var(--gold);
  border-radius: 999px;
  padding: 12px 28px;
  font-size: 14px;
  letter-spacing: 0.04em;
  transition: background 0.2s ease, color 0.2s ease;
}
.nf-back:hover{ background: var(--gold); color: var(--emerald-deep); }

/* ---------- Guest lookup / prompt ---------- */
.prompt-overlay{
  width: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.prompt-heading{
  text-align: center;
  font-family: var(--font-display-en);
  font-size: clamp(28px, 6vw, 36px);
  color: var(--ivory);
  margin: 0 0 6px;
}
html[lang="km"] .prompt-heading{ font-family: var(--font-display-km); font-size: clamp(22px, 5vw, 27px); }
.prompt-sub{
  text-align: center;
  font-size: 14px;
  color: var(--gold-pale);
  opacity: 0.8;
  margin: 0 0 26px;
}

.search-field{
  position: relative;
  margin-bottom: 16px;
  flex: 0 0 auto;
}
.search-field i{
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gold);
  font-size: 14px;
}
#nameSearch{
  width: 100%;
  padding: 14px 18px 14px 44px;
  border-radius: 999px;
  border: 1px solid rgba(210,164,76,0.4);
  background: rgba(251,246,234,0.96);
  font-family: var(--font-body-en);
  font-size: 15px;
  color: var(--ink);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
#nameSearch:focus{
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(210,164,76,0.3), 0 8px 24px rgba(0,0,0,0.25);
}

.prompt-no-result{
  display: none;
  text-align: center;
  font-size: 13.5px;
  color: var(--gold-pale);
  opacity: 0.75;
  padding: 10px 0 4px;
}
.prompt-no-result.show{ display: block; }

.prompt-results{
  list-style: none;
  margin: 0;
  padding: 6px;
  max-height: min(52vh, 460px);
  overflow-y: auto;
  border-radius: 16px;
  background: rgba(251,246,234,0.08);
  border: 1px solid rgba(210,164,76,0.25);
  backdrop-filter: blur(8px);
}
.prompt-results::-webkit-scrollbar{ width: 6px; }
.prompt-results::-webkit-scrollbar-thumb{ background: rgba(210,164,76,0.5); border-radius: 4px; }

.prompt-result-item{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 10px;
  border-bottom: 1px solid rgba(251,246,234,0.08);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
}
.prompt-result-item:last-child{ border-bottom: none; }
.prompt-result-item:hover{ background: rgba(210,164,76,0.14); transform: translateX(2px); }

.result-avatar{
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--emerald-deep);
  font-family: var(--font-display-en);
  font-weight: 700;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.result-info{ flex: 1 1 auto; min-width: 0; }
.result-name{
  font-size: 15px;
  color: var(--ivory);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.result-sub{
  font-size: 12px;
  color: var(--gold-pale);
  opacity: 0.75;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}
.result-arrow{ color: var(--gold); font-size: 12px; flex: 0 0 auto; }

.side-tag{
  display: inline-block;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  padding: 1px 8px;
  border-radius: 999px;
}
.tag-bride{ background: rgba(122,35,49,0.30); color: #f0b9c2; }
.tag-groom{ background: rgba(31,95,73,0.35); color: #b7e6cf; }
.tag-both{ background: rgba(210,164,76,0.24); color: var(--gold-pale); }

/* ---------- Door-opening transition ---------- */
.door-transition{
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  opacity: 0;
  pointer-events: none;
  perspective: 2000px;
  perspective-origin: 50% 50%;
  transition: opacity 0.4s ease;
  background: #04140E; /* dark threshold behind the doors, sells the depth */
}
.door-transition.active{ opacity: 1; pointer-events: auto; }

/* soft ellipse of light on the "floor", grounds the doors in space */
.door-floor{
  position: absolute;
  bottom: 6%;
  left: 50%;
  width: 65%;
  height: 70px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.55), transparent 72%);
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 1s ease 0.15s;
}
.door-transition.active .door-floor{ opacity: 0.7; }

.door-glow{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: radial-gradient(circle, var(--gold-pale) 0%, rgba(243,223,175,0.32) 35%, transparent 70%);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: width 1.1s ease 0.1s, height 1.1s ease 0.1s, opacity 1.1s ease 0.1s;
}
.door-transition.active .door-glow{
  width: 160vmax;
  height: 160vmax;
  opacity: 0.5;
}

.door-panel{
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(135deg, var(--emerald-mid) 0%, var(--emerald-deep) 100%);
  box-shadow:
    inset 0 0 70px rgba(210,164,76,0.12),
    0 0 60px rgba(0,0,0,0.5);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  transform: rotateY(0deg);
}
.door-panel.left{
  left: 0;
  transform-origin: left center;
  border-right: 1px solid rgba(210,164,76,0.6);
  justify-content: flex-end;
}
.door-panel.right{
  right: 0;
  transform-origin: right center;
  border-left: 1px solid rgba(210,164,76,0.6);
  justify-content: flex-start;
}

/* the door's side edge — this is what actually reads as "3D" rather than a flat card flipping */
.door-panel::before{
  content: "";
  position: absolute;
  top: 0;
  width: 22px;
  height: 100%;
  background: linear-gradient(90deg, rgba(0,0,0,0.65), rgba(0,0,0,0.05));
}
.door-panel.left::before{
  right: -22px;
  transform-origin: left center;
  transform: rotateY(90deg);
}
.door-panel.right::before{
  left: -22px;
  transform-origin: right center;
  transform: rotateY(-90deg);
}

/* self-shadowing as the face turns away from the light */
.door-panel::after{
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  transition: opacity 1s ease;
}
.door-transition.active .door-panel::after{ opacity: 0.32; }

.door-transition.active .door-panel.left{
  animation: swingLeft 1s cubic-bezier(0.24, 0.6, 0.32, 1) forwards;
}
.door-transition.active .door-panel.right{
  animation: swingRight 1s cubic-bezier(0.24, 0.6, 0.32, 1) forwards;
  animation-delay: 0.05s;
}

@keyframes swingLeft{
  0%   { transform: rotateY(0deg); }
  58%  { transform: rotateY(-114deg); }
  100% { transform: rotateY(-100deg); }
}
@keyframes swingRight{
  0%   { transform: rotateY(0deg); }
  58%  { transform: rotateY(114deg); }
  100% { transform: rotateY(100deg); }
}

.door-emblem{
  width: 34px;
  height: 120px;
  margin: 0 -1px;
  color: var(--gold);
  opacity: 0.9;
}
.door-emblem svg{ width: 100%; height: 100%; display: block; }

/* the stage itself recedes, as if stepping through the doorway */
.stage{ transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.9s ease; }
.stage.receding{ transform: scale(0.94); opacity: 0.3; }

@media (prefers-reduced-motion: reduce){
  .door-panel.left,
  .door-panel.right{ animation: none !important; transform: rotateY(0deg) !important; }
  .door-transition.active .door-panel{ opacity: 0; transition: opacity 0.25s ease; }
  .door-glow{ transition: opacity 0.2s ease; }
  .stage.receding{ transition: opacity 0.3s ease; transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 640px){
  .stage{ padding: 84px 20px 64px; }
  .lang-bar{ top: 12px; right: 12px; }
  .music-control{ bottom: 16px; right: 16px; width: 40px; height: 40px; }
  .corner{ width: 44px; height: 44px; top: 10px; }
  .corner.tl, .corner.tr{ top: 10px; }
  .corner.tl, .corner.bl{ left: 10px; }
  .corner.tr, .corner.br{ right: 10px; }
  .corner.br, .corner.bl{ bottom: 10px; }
  .gname{ margin-bottom: 28px; }
  .invite-cta{ width: 100%; justify-content: center; padding: 15px 20px; }
  .prompt-results{ max-height: min(56vh, 420px); }
}

@media (max-width: 380px){
  .stage{ padding: 76px 16px 56px; }
  .couple-names .ampersand{ margin: 0 6px; }
}

@media (max-width: 480px){
  .stage{ padding: 76px 16px 56px; }
  .couple-names .ampersand{ margin: 0 6px; }
  .save-date{ font-size: 28px;}
}

@media (min-width: 1100px){
  .stage-inner{ max-width: 560px; }
}

@media (max-height: 560px) and (orientation: landscape){
  .stage{ padding: 70px 24px 40px; justify-content: flex-start; }
  .corner{ display: none; }
}