/* ═══════════════════════════════════════════════════════════════════════════
   How U Shine — Custom CSS
   Custom component classes, atmosphere, motion. Layered on top of Tailwind.
   Design tokens live in the Tailwind config in index.html.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --ease-editorial: cubic-bezier(0.16, 1, 0.3, 1);
  --outline-soft: 212, 194, 194;        /* #D4C2C2 rgba parts */
  --blush: 123, 84, 85;                  /* #7B5455 rgba parts */
  --gold: 212, 175, 55;                  /* #D4AF37 rgba parts */
}

/* ─── 1. Vellum-paper texture overlay (signature atmosphere) ────────────── */

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

::selection {
  background: rgba(var(--gold), 0.30);
  color: #775A19;
}

/* ─── 2. Signature treatment: gold-italic emphasis word ─────────────────── */

.emphasis-gold {
  font-family: "Noto Serif", serif;
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(135deg, #FFDEA5 0%, #D4AF37 45%, #775A19 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 1px 0 rgba(var(--gold), 0.10);
  font-variation-settings: "opsz" 32;
}

/* ─── 3. Buttons / gradients ────────────────────────────────────────────── */

.gold-gradient {
  background: linear-gradient(135deg, #FFDEA5 0%, #D4AF37 50%, #775A19 100%);
  color: #261900;
  transition: transform 200ms var(--ease-editorial);
}
.gold-gradient:hover { transform: scale(0.96); }

.btn-ghost {
  background: transparent;
  color: #1A1C1A;
  border: 1px solid rgba(var(--outline-soft), 0.30);
  transition: background-color 300ms var(--ease-editorial), border-color 300ms var(--ease-editorial);
}
.btn-ghost:hover {
  background: #F4F3F1;
  border-color: rgba(var(--outline-soft), 0.50);
}

/* ─── 4. Shadows (ambient blush, not Material) ──────────────────────────── */

.editorial-shadow {
  box-shadow: 0 10px 40px rgba(var(--blush), 0.06);
}

/* ─── 5. Nav (glass header) ─────────────────────────────────────────────── */

.glass-nav {
  background: rgba(250, 249, 246, 0.80);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(var(--outline-soft), 0.10);
}

/* ─── 6. Editorial reveal frame (hero portrait mat) ─────────────────────── */

.editorial-reveal-frame {
  background: #F4F3F1;
  padding: 1rem;
  position: relative;
}
.editorial-reveal-frame img {
  display: block;
  width: 100%;
  height: auto;
  filter: grayscale(1);
  transition: filter 700ms var(--ease-editorial);
}
.editorial-reveal-frame:hover img { filter: grayscale(0); }

/* Asymmetry move #1 — mat overruns the right column's baseline */
@media (min-width: 768px) {
  .editorial-reveal-frame.mat-overrun {
    margin-bottom: -24px;
  }
}

/* ─── 6b. Leadership authority visuals (editorial gallery row) ──────────── */

.leadership-frame {
  background: #FFFFFF;
  padding: 0.75rem;
}
.leadership-frame img {
  filter: grayscale(1);
  transition:
    filter 700ms var(--ease-editorial),
    transform 1000ms var(--ease-editorial);
}
.leadership-frame:hover img {
  filter: grayscale(0);
  transform: scale(1.03);
}

/* ─── 7. Faded background word (rendered via CSS pseudo so axe ignores it) ─ */

[data-bg-word]::before {
  content: attr(data-bg-word);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 2rem;
  font-family: "Noto Serif", serif;
  font-weight: 700;
  font-size: clamp(12rem, 30vw, 30rem);
  line-height: 0.85;
  letter-spacing: -0.02em;
  color: #1A1C1A;
  opacity: 0.03;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
}

/* ─── 8. Shimmer-gold background plate ──────────────────────────────────── */

.shimmer-gold {
  background:
    radial-gradient(ellipse at 20% 30%, rgba(255, 222, 165, 0.18), transparent 55%),
    radial-gradient(ellipse at 80% 70%, rgba(212, 175, 55, 0.12), transparent 60%),
    linear-gradient(180deg, #FAF9F6 0%, #F4F3F1 100%);
}

/* ─── 9. Parallax background ────────────────────────────────────────────── */

.parallax-bg {
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  filter: brightness(0.75);
}
@media (max-width: 768px) {
  .parallax-bg { background-attachment: scroll; }
}

/* ─── 10. Decorative gold divider (Foundation section) ──────────────────── */

.gold-divider {
  display: inline-block;
  width: 3rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, #D4AF37, transparent);
  vertical-align: middle;
}

/* ─── 11. Card hover lift (Transformation, Core Offerings) ──────────────── */

.lift-on-hover {
  transition: transform 500ms var(--ease-editorial);
}
.lift-on-hover:hover {
  transform: translateY(-4px);
}

/* ─── 12. Material Symbols sizing helper ────────────────────────────────── */

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

/* ─── 13. Scroll-triggered reveals (driven by app.js IntersectionObserver) ─ */

[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 700ms var(--ease-editorial),
    transform 700ms var(--ease-editorial);
  transition-delay: var(--delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* ─── 14. Hero page-load sequence (CSS-driven, no JS dependency) ────────── */

.hero-anim {
  opacity: 0;
  animation: hero-fade-up 600ms var(--ease-editorial) forwards;
  animation-delay: var(--hero-delay, 0ms);
  will-change: opacity, transform;
}
.hero-anim-slide {
  opacity: 0;
  animation: hero-slide-in 600ms var(--ease-editorial) forwards;
  animation-delay: var(--hero-delay, 0ms);
  will-change: opacity, transform;
}

@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0);   }
}
@keyframes hero-slide-in {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0);    }
}

/* ─── 15. Mobile nav (slide-down panel) ─────────────────────────────────── */

.mobile-menu {
  position: fixed;
  top: 5rem;
  left: 0;
  right: 0;
  background: rgba(250, 249, 246, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(var(--outline-soft), 0.10);
  padding: 1.5rem;
  z-index: 49;
  display: none;
}
.mobile-menu.is-open { display: block; }

/* ─── 16. Decorative blur orbs (hero ambience) ──────────────────────────── */

.orb {
  position: absolute;
  border-radius: 9999px;
  pointer-events: none;
  filter: blur(60px);
}
.orb-blush  { background: rgba(var(--blush), 0.05); }
.orb-gold   { background: rgba(var(--gold),  0.20); filter: blur(80px); }

/* ─── 16b. Contact form fields (Contact page) ───────────────────────────── */

.contact-input {
  width: 100%;
  background: #FFFFFF;
  border: 1px solid rgba(var(--outline-soft), 0.45);
  border-radius: 0.25rem;
  padding: 0.75rem 1rem;
  font-family: "Public Sans", sans-serif;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #1A1C1A;
  transition:
    border-color 250ms var(--ease-editorial),
    box-shadow 250ms var(--ease-editorial);
}
.contact-input::placeholder { color: rgba(26, 28, 26, 0.4); }
.contact-input:focus {
  outline: none;
  border-color: #D4AF37;
  box-shadow: 0 0 0 3px rgba(var(--gold), 0.18);
}
/* Reserve space so layout doesn't jump while the captcha widget loads */
.cf-turnstile-holder { min-height: 65px; }

/* ─── 17. Reduced motion override ───────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
  .hero-anim, .hero-anim-slide {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .editorial-reveal-frame img,
  .leadership-frame img { filter: grayscale(0) !important; transform: none !important; }
  .parallax-bg { background-attachment: scroll; }
  .gold-marquee__track { animation: none !important; transform: translateX(0) !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE VIP COLLECTIVE — "The Invitation" editorial lookbook treatment
   A distinctive layer used only on vip.html. Built on the same gold/ink/cream
   tokens; mirrors the engraved bracelet nameplates in a jewelry-house voice.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Rotated margin label (editorial spine text) */
.vip-vlabel {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  letter-spacing: 0.42em;
  text-indent: 0.42em;
}

/* Oversized faint section index numeral */
.vip-index {
  font-family: "Noto Serif", serif;
  font-style: italic;
  line-height: 0.8;
  color: rgba(var(--gold), 0.20);
  user-select: none;
}

/* Diamond divider:  ——  ◆  —— */
.diamond-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
}
.diamond-rule::before,
.diamond-rule::after {
  content: "";
  height: 1px;
  width: clamp(2rem, 9vw, 5rem);
  background: linear-gradient(90deg, transparent, rgba(var(--gold), 0.75), transparent);
}
.diamond-gem {
  width: 7px;
  height: 7px;
  flex: none;
  transform: rotate(45deg);
  background: linear-gradient(135deg, #FFE9B8 0%, #D4AF37 55%, #9C7A22 100%);
  box-shadow: 0 0 9px rgba(var(--gold), 0.45);
}

/* Engraved metallic nameplate — the digital echo of the bracelet bar */
.engrave-plate {
  position: relative;
  display: inline-block;
  border-radius: 9999px;
  padding: 0.95rem 1.5rem;
  text-align: center;
  border: 1px solid rgba(120, 90, 25, 0.40);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 24%),
    linear-gradient(145deg, #F4DFA0 0%, #E4C56E 27%, #C9A23E 52%, #ECD491 74%, #BE9633 100%);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.70),
    inset 0 -3px 5px rgba(120, 90, 25, 0.45),
    0 10px 26px rgba(var(--blush), 0.12);
}
.engrave-plate__text {
  font-family: "Public Sans", sans-serif;
  font-weight: 700;
  letter-spacing: 0.40em;
  text-indent: 0.40em;
  color: #5A4514;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55), 0 -1px 0 rgba(50, 36, 8, 0.30);
}

/* Editorial drop cap */
.drop-cap::first-letter {
  font-family: "Noto Serif", serif;
  font-style: italic;
  font-size: 3.7em;
  line-height: 0.72;
  float: left;
  margin: 0.06em 0.10em 0 0;
  background: linear-gradient(135deg, #E7C766 0%, #9C7A22 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #B8932B;
}

/* Slow gold marquee band — bracelet-cord wrap */
.gold-marquee {
  overflow: hidden;
  white-space: nowrap;
  background: linear-gradient(90deg, #16140F 0%, #221F18 50%, #16140F 100%);
  border-top: 1px solid rgba(var(--gold), 0.30);
  border-bottom: 1px solid rgba(var(--gold), 0.30);
}
.gold-marquee__track {
  display: inline-flex;
  align-items: center;
  gap: 2.25rem;
  padding: 0.85rem 1.1rem;
  animation: vip-marquee 34s linear infinite;
  will-change: transform;
}
.gold-marquee__item {
  font-family: "Public Sans", sans-serif;
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  background: linear-gradient(180deg, #FFE9B8 0%, #D4AF37 55%, #9C7A22 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.gold-marquee__gem {
  width: 6px;
  height: 6px;
  flex: none;
  transform: rotate(45deg);
  background: linear-gradient(135deg, #FFE9B8, #D4AF37);
}
@keyframes vip-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Hero double gold hairline mat — "the invitation frame" */
.vip-hero-frame {
  position: absolute;
  inset: 1.15rem;
  z-index: 20;
  pointer-events: none;
  border: 1px solid rgba(255, 222, 165, 0.55);
}
.vip-hero-frame::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(255, 222, 165, 0.22);
}
@media (min-width: 768px) {
  .vip-hero-frame { inset: 1.75rem; }
}

/* Hero edge blur — a duplicate of the photo, sharp center, out-of-focus edges */
.vip-hero-blur {
  filter: blur(11px);
  transform: scale(1.08);            /* hides the soft transparent border blur creates */
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 76% 78% at 50% 42%, transparent 40%, #000 80%);
          mask-image: radial-gradient(ellipse 76% 78% at 50% 42%, transparent 40%, #000 80%);
}

/* Offering card hairline + index */
.vip-offer-num {
  font-family: "Noto Serif", serif;
  font-style: italic;
  color: rgba(var(--gold), 0.60);
}
.vip-hairline {
  height: 1px;
  background: linear-gradient(90deg, rgba(var(--gold), 0.6), transparent);
}

/* Scroll cue */
.vip-scrollcue {
  width: 1px;
  height: 3.5rem;
  background: linear-gradient(180deg, rgba(255, 222, 165, 0.7), transparent);
  position: relative;
  overflow: hidden;
}
.vip-scrollcue::after {
  content: "";
  position: absolute;
  top: -40%;
  left: 0;
  width: 1px;
  height: 40%;
  background: #FFDEA5;
  animation: vip-scrollcue 2.4s var(--ease-editorial) infinite;
}
@keyframes vip-scrollcue {
  0%   { transform: translateY(0); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: translateY(360%); opacity: 0; }
}