/* Glamora marketing site — elevated luxury design system (layered on Tailwind) */

:root {
  --ivory: #faf7f2;
  --ivory-2: #f4ece0;
  --ink: #16121b;
  --ink-2: #2a2433;
  --gold: #c9a24b;
  --gold-light: #e3c778;
  --gold-dark: #a8862f;
  --rose: #e8b4b8;
  --shadow-gold: 0 24px 60px -18px rgba(201, 162, 75, .45);
  --shadow-soft: 0 18px 50px -22px rgba(22, 18, 27, .28);
}

html { scroll-padding-top: 5.5rem; }
body { -webkit-font-smoothing: antialiased; }
::selection { background: rgba(201, 162, 75, .28); }

/* ---- Nav underline ---- */
.nav-link { position: relative; transition: color .2s; }
.nav-link:hover { color: var(--gold-dark); }
.nav-link::after {
  content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--gold), var(--gold-light)); transition: width .3s ease;
}
.nav-link:hover::after { width: 100%; }
.mobile-link { padding: .45rem 0; }

/* ---- Gradient / display type ---- */
.text-gradient-gold {
  background: linear-gradient(100deg, var(--gold-dark), var(--gold), var(--gold-light));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.eyebrow { text-transform: uppercase; letter-spacing: .32em; font-size: .72rem; font-weight: 600; }

/* ---- Buttons ---- */
.btn-gold {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: linear-gradient(120deg, var(--gold-dark), var(--gold)); color: #fff; font-weight: 600;
  border-radius: 999px; padding: .8rem 2rem; box-shadow: 0 12px 26px -10px rgba(201, 162, 75, .6);
  transition: transform .25s ease, box-shadow .25s ease;
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -10px rgba(201, 162, 75, .7); }
.btn-gold::after {
  content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent); transition: left .6s;
}
.btn-gold:hover::after { left: 130%; }
.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: 999px;
  padding: .8rem 2rem; font-weight: 600; border: 1px solid rgba(22, 18, 27, .18); transition: all .25s ease;
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold-dark); transform: translateY(-2px); }
.dark .btn-ghost { border-color: rgba(255, 255, 255, .22); }
.dark .btn-ghost:hover { color: var(--gold-light); }

/* ---- Glass + cards ---- */
.glass {
  background: rgba(255, 255, 255, .6); backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .5); box-shadow: var(--shadow-soft);
}
.dark .glass { background: rgba(30, 26, 36, .55); border-color: rgba(255, 255, 255, .08); }

.card {
  background: #fff; border: 1px solid rgba(22, 18, 27, .06); border-radius: 1.25rem;
  box-shadow: 0 10px 30px -20px rgba(22, 18, 27, .35); transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.dark .card { background: var(--ink-2); border-color: rgba(255, 255, 255, .08); }
.card-hover:hover { transform: translateY(-8px); box-shadow: var(--shadow-gold); border-color: rgba(201, 162, 75, .4); }

/* Gradient hairline border on hover */
.ring-gold-hover { position: relative; }
.ring-gold-hover::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; opacity: 0; transition: opacity .35s;
  background: linear-gradient(120deg, var(--gold), var(--rose)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.ring-gold-hover:hover::before { opacity: 1; }

/* Icon chip */
.chip-icon {
  width: 3.5rem; height: 3.5rem; border-radius: 1rem; display: grid; place-items: center; font-size: 1.6rem;
  background: linear-gradient(135deg, rgba(201, 162, 75, .16), rgba(232, 180, 184, .22)); color: var(--gold-dark);
}
.dark .chip-icon { color: var(--gold-light); }

/* ---- Form ---- */
.form-input {
  width: 100%; margin-top: .4rem; border-radius: .7rem; background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18); padding: .7rem 1rem; color: #fff; outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.form-input::placeholder { color: rgba(255, 255, 255, .45); }
.form-input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201, 162, 75, .18); }
.form-input option { color: #16121b; }

/* ---- Scroll reveal + stagger ---- */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.visible { opacity: 1; transform: none; }

/* ---- Header ---- */
#header { transition: box-shadow .3s, background .3s, backdrop-filter .3s; }
#header.scrolled { box-shadow: 0 10px 34px -16px rgba(22, 18, 27, .22); }

/* ---- Animated aurora blobs ---- */
@keyframes float-slow { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(20px,-24px) scale(1.08); } }
.aurora { animation: float-slow 14s ease-in-out infinite; }
.aurora.delay { animation-duration: 18s; animation-delay: -6s; }

/* ---- Brand marquee ---- */
.marquee { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee__track { display: inline-flex; gap: 3.5rem; white-space: nowrap; animation: marquee 26s linear infinite; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---- Section divider ---- */
.divider-orn { display: flex; align-items: center; justify-content: center; gap: .75rem; color: var(--gold); }
.divider-orn::before, .divider-orn::after { content: ""; height: 1px; width: 3rem; background: linear-gradient(90deg, transparent, var(--gold)); }
.divider-orn::after { background: linear-gradient(90deg, var(--gold), transparent); }

/* ---- Gallery hover overlay ---- */
.gallery-item { position: relative; overflow: hidden; }
.gallery-item .cap {
  position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity .35s;
  background: linear-gradient(0deg, rgba(22, 18, 27, .55), rgba(22, 18, 27, .1)); color: #fff; font-weight: 600;
}
.gallery-item:hover .cap { opacity: 1; }
.gallery-item img, .gallery-item .art { transition: transform .5s ease; }
.gallery-item:hover img, .gallery-item:hover .art { transform: scale(1.08); }

/* ---- Utility ---- */
.lift { transition: transform .3s ease, box-shadow .3s ease; }
.lift:hover { transform: translateY(-6px); box-shadow: var(--shadow-gold); }
.avatar-ring { background: linear-gradient(135deg, var(--gold), var(--rose)); padding: 2px; border-radius: 999px; }