/* ═══════════════════════════════════════════════════════════════════════════
   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;
  }
}

/* ─── 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); }

/* ─── 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 { filter: grayscale(0) !important; }
  .parallax-bg { background-attachment: scroll; }
}