/* =================================================================
   WELL & GOOD STORIES — DESIGN SYSTEM
   A gold / black / ivory palette built for a premium wedding
   photography & filmmaking studio. Tailwind handles layout utilities;
   this file holds brand tokens, type, and the motion vocabulary.
   ================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Jost:wght@300;400;500;600&display=swap');

:root {
  /* --- Brand palette (edit here to re-theme the whole site) --- */
  --wgs-black:        #0a0906;   /* deep cinematic black */
  --wgs-charcoal:     #16130f;   /* card / section background */
  --wgs-charcoal-2:   #1f1b15;   /* elevated surface */
  --wgs-gold:         #c6a15b;   /* primary gold accent */
  --wgs-gold-light:   #e6cd94;   /* gold hover / highlight */
  --wgs-gold-deep:    #9c7a3d;   /* pressed / shadowed gold */
  --wgs-ivory:        #f8f4ea;   /* light surface / reversed text */
  --wgs-beige:        #ddc9a3;   /* warm secondary neutral */
  --wgs-muted:        #b9ae9b;   /* muted body text on dark */
  --wgs-muted-dark:   #6b6255;   /* muted body text on light */

  --font-display: 'Cormorant Garamond', serif;
  --font-body: 'Jost', sans-serif;

  --ease-luxury: cubic-bezier(0.16, 1, 0.3, 1);
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--wgs-black);
  color: var(--wgs-ivory);
  font-family: var(--font-body);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------------- Typography ---------------- */
.font-display { font-family: var(--font-display); }
.font-body    { font-family: var(--font-body); }

h1, h2, h3, h4,
.display-type {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.05;
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--wgs-gold);
}

.text-gold   { color: var(--wgs-gold); }
.text-ivory  { color: var(--wgs-ivory); }
.text-muted  { color: var(--wgs-muted); }
.bg-wgs-black    { background-color: var(--wgs-black); }
.bg-wgs-charcoal { background-color: var(--wgs-charcoal); }
.bg-wgs-ivory    { background-color: var(--wgs-ivory); }
.border-gold     { border-color: var(--wgs-gold); }

/* ---------------- Signature: the gold thread ----------------
   A hairline that "stitches" through the site — hand-drawn on
   scroll — echoing a filmstrip / thread running through the story. */
.gold-thread {
  width: 100%;
  height: 1px;
  overflow: visible;
}
.gold-thread path {
  stroke: var(--wgs-gold);
  stroke-width: 1;
  fill: none;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  vector-effect: non-scaling-stroke;
}

/* ---------------- Buttons ---------------- */
.btn-gold {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background-color: var(--wgs-gold);
  color: var(--wgs-black);
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.78rem;
  padding: 0.95rem 2.1rem;
  border-radius: 2px;
  transition: background-color 0.4s var(--ease-luxury), transform 0.4s var(--ease-luxury), letter-spacing 0.4s;
}
.btn-gold:hover {
  background-color: var(--wgs-gold-light);
  letter-spacing: 0.14em;
  transform: translateY(-1px);
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  border: 1px solid var(--wgs-gold);
  color: var(--wgs-ivory);
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.78rem;
  padding: 0.9rem 2rem;
  border-radius: 2px;
  transition: background-color 0.4s var(--ease-luxury), color 0.4s var(--ease-luxury);
}
.btn-outline:hover {
  background-color: var(--wgs-gold);
  color: var(--wgs-black);
}

/* ---------------- Glass / elevated cards ---------------- */
.glass-card {
  background: rgba(246, 240, 224, 0.045);
  border: 1px solid rgba(198, 161, 91, 0.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.card-hover {
  transition: transform 0.6s var(--ease-luxury), border-color 0.6s var(--ease-luxury), box-shadow 0.6s var(--ease-luxury);
}
.card-hover:hover {
  transform: translateY(-6px);
  border-color: var(--wgs-gold);
  box-shadow: 0 30px 60px -25px rgba(198, 161, 91, 0.25);
}

/* ---------------- Film-grain / cinematic overlay ---------------- */
.grain-overlay {
  pointer-events: none;
  position: absolute;
  inset: 0;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.vignette::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,0.6) 100%);
}

/* ---------------- Reusable GSAP animation hooks -----------------
   These classes carry NO animation by default — GSAP (main.js)
   sets the initial state via JS and animates on scroll/load.
   Extend freely: add a new class here + a matching GSAP tween. */
.reveal-up      { will-change: transform, opacity; }
.reveal-fade    { will-change: opacity; }
.reveal-mask    { overflow: hidden; }
.reveal-mask > * { will-change: transform; }
.reveal-scale   { will-change: transform, opacity; }
.parallax-el    { will-change: transform; }
.pin-section    { position: relative; }

/* ---------------- Nav ---------------- */
#site-nav {
  transition: background-color 0.5s var(--ease-luxury), padding 0.5s var(--ease-luxury), box-shadow 0.5s var(--ease-luxury);
}
#site-nav.nav-scrolled {
  background-color: rgba(10, 9, 6, 0.86);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(198,161,91,0.15);
}
.nav-link {
  position: relative;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.78rem;
  font-weight: 500;
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0%;
  height: 1px;
  background: var(--wgs-gold);
  transition: width 0.4s var(--ease-luxury);
}
.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}
.nav-link.active {
  color: var(--wgs-gold);
}

/* ---------------- Marquee (Instagram-style strip) ---------------- */
.marquee-track {
  display: flex;
  width: max-content;
  will-change: transform;
}

/* ---------------- Custom scrollbar ---------------- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--wgs-black); }
::-webkit-scrollbar-thumb { background: var(--wgs-gold-deep); border-radius: 4px; }

/* ---------------- Whatsapp float button ---------------- */
.whatsapp-float {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 40;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  transition: transform 0.35s var(--ease-luxury);
}
.whatsapp-float:hover { transform: scale(1.08); }

/* ---------------- Utility: aspect frames for gallery ---------------- */
.frame {
  position: relative;
  overflow: hidden;
  background-color: var(--wgs-charcoal);
}
.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease-luxury), filter 1.1s var(--ease-luxury);
}
.frame:hover img {
  transform: scale(1.08);
}
.frame-caption {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 1.25rem;
  background: linear-gradient(180deg, transparent 40%, rgba(10,9,6,0.85) 100%);
  opacity: 0;
  transition: opacity 0.5s var(--ease-luxury);
}
.frame:hover .frame-caption { opacity: 1; }

@media (max-width: 768px) {
  .frame-caption { opacity: 1; background: linear-gradient(180deg, transparent 55%, rgba(10,9,6,0.9) 100%); }
}



/* ---------------- Scroll hero (pinned 3-phase reveal) ---------------- */
.wgs-hero-scroll { position: relative; width: 100%; height: 100svh; overflow: hidden; }

.wgs-hero-scroll .hero-foreground-content,
.wgs-hero-scroll .hero-background-content,
.wgs-hero-scroll .hero-outro-content {
  position: absolute; inset: 0; width: 100%; height: 100%;
  transform-origin: center center;
}

.wgs-hero-scroll .hero-foreground-content {
  background: var(--wgs-black);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  will-change: clip-path, transform;
  z-index: 2;
}
.wgs-hero-scroll .hero-foreground-img { position: absolute; inset: 0; }
.wgs-hero-scroll .hero-foreground-img img { width: 100%; height: 100%; object-fit: cover; }

.wgs-hero-scroll .hero-foreground-header {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: min(95%, 1400px); padding: 2rem 1.5rem; text-align: center; z-index: 2;
}

.wgs-hero-scroll .hero-overlay { position: absolute; inset: 0; opacity: 0; will-change: opacity; }
.wgs-hero-scroll .hero-overlay-dark { background: var(--wgs-black); }
.wgs-hero-scroll .hero-overlay-gold { background: var(--wgs-gold); mix-blend-mode: multiply; }

/* --- FIX: background content now uses a strict two-track grid instead of
   plain flex, so each half is hard-capped at 50% no matter how long the
   copy is. box-sizing + min-width:0 stop content from forcing overflow. */
.wgs-hero-scroll .hero-background-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--wgs-ivory);
  z-index: 0;
  box-sizing: border-box;
}
.wgs-hero-scroll .hero-bg-col {
  min-width: 0;              /* <-- the actual fix: allow the column to shrink */
  display: flex;
  align-items: center;
  padding: 3rem;
  box-sizing: border-box;
  overflow: hidden;          /* safety net: never let copy bleed into the other column */
}
.wgs-hero-scroll .hero-bg-col:nth-child(2) { justify-content: flex-end; }

.wgs-hero-scroll .hero-copy {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  width: 100%;
  max-width: 60ch;           /* character-based cap reads better than a raw % */
  will-change: transform;
}
.wgs-hero-scroll .hero-copy h3 { color: var(--wgs-gold-deep); }
.wgs-hero-scroll .hero-copy p { color: var(--wgs-muted-dark); font-weight: 300; }

.wgs-hero-scroll .hero-outro-content { display: flex; z-index: 1; }
.wgs-hero-scroll .hero-outro-img { flex: 1; min-width: 0; will-change: clip-path; position: relative; overflow: hidden; }
.wgs-hero-scroll .hero-outro-img img { width: 100%; height: 100%; object-fit: cover; }
.wgs-hero-scroll .hero-outro-img-top { clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); }
.wgs-hero-scroll .hero-outro-img-bottom { clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); }

.wgs-hero-scroll .hero-outro-header {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(60%, 900px); text-align: center; z-index: 2;
  /* FIX: hidden until JS reveals it at phase 4, instead of always-on */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease-luxury);
}
.wgs-hero-scroll .hero-outro-header.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.wgs-hero-scroll .line { position: relative; will-change: transform; overflow: hidden; }

/* --- FIX: mobile now genuinely stacks instead of staying side-by-side --- */
@media (max-width: 1000px) {
  .wgs-hero-scroll .hero-background-content {
    grid-template-columns: 1fr;   /* single column */
    grid-template-rows: 1fr 1fr;
    overflow-y: auto;
  }
  .wgs-hero-scroll .hero-bg-col { padding: 1.5rem 1.75rem; margin-top: 0; }
  .wgs-hero-scroll .hero-bg-col:nth-child(2) { justify-content: flex-start; }
  .wgs-hero-scroll .hero-copy { max-width: 100%; }
  .wgs-hero-scroll .hero-outro-header { width: 100%; padding: 0 1.25rem; }
}