/*
 * sg-hero.css
 * Sunčana Gaillot — Hero section styles
 * Add via Salient > Theme Options > Custom CSS
 * OR paste into Appearance > Customise > Additional CSS
 *
 * ── COLOUR TOKENS ─────────────────────────────────────
 *   Dark background:   #0A0B12
 *   Teal (on dark):    #00E5CC
 *   Teal (on white):   #009E8E  (AA accessible)
 *   Coral accent:      #E8705A
 *   Off-white text:    #EEE8DC
 *   Paper background:  #F9F9F7
 *
 * ── FONTS USED ────────────────────────────────────────
 *   DM Sans       — https://fonts.google.com/specimen/DM+Sans
 *   DM Mono       — https://fonts.google.com/specimen/DM+Mono
 *   Playfair Display — https://fonts.google.com/specimen/Playfair+Display
 *
 *   Import URL (add to Salient > Theme Options > Google Fonts
 *   OR paste this @import at the top of your Additional CSS):
 *
 *   @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&family=DM+Mono:wght@300;400;500&family=Playfair+Display:ital,wght@1,400;1,500&display=swap');
 * ──────────────────────────────────────────────────────

/* ═══════════════════════════════════════════════════════════
   SALIENT / WPBAKERY FULL-HEIGHT HERO FIX
   ═══════════════════════════════════════════════════════════ */

/* 1. Force the row itself — override any Salient inline style */
#sg-hero,
body #sg-hero,
.vc_row#sg-hero,
.vc_row-fluid#sg-hero {
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: none !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* 2. Every inner WPBakery wrapper: stretch to fill */
#sg-hero .vc_row-fluid,
#sg-hero .vc_col-sm-12,
#sg-hero .vc_col-md-12,
#sg-hero [class*="vc_col-"],
#sg-hero .wpb_column,
#sg-hero .vc_column-inner,
#sg-hero .wpb_wrapper {
  height: 100% !important;
  min-height: 100% !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
}

/* 3. Canvas fills the full hero height */
#sg-hero #sg-bg,
#sg-bg {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* 4. Content wrapper: push everything to the bottom */
#sg-hero .sg-hero-content,
.sg-hero-content {
  position: relative !important;
  z-index: 2 !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  padding: 100px 48px 64px !important;  /* top = nav height clearance */
  width: 100% !important;
  max-width: 100% !important;
  text-align: left !important;
  box-sizing: border-box !important;
}

 */

/* ── HERO WRAPPER ─────────────────────────────────────
   Applied to a Full-Width Row in WPBakery.
   Set the row background to #0A0B12 in the row settings,
   then add id="sg-hero" via the row's Custom CSS ID field.
*/
/* Force the WPBakery row to full viewport height */
#sg-hero,
#sg-hero .vc_row-fluid,
#sg-hero .wpb_column,
#sg-hero .vc_column-inner {
  min-height: 100vh !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

#sg-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: #0A0B12;
  overflow: hidden;
}

/* Remove Salient's default row padding/margin that squashes height */
#sg-hero > .vc_row {
  min-height: 100vh !important;
}

/* Kill any WPBakery centering on the column content */
#sg-hero .wpb_column,
#sg-hero .vc_column-inner,
#sg-hero .wpb_wrapper {
  text-align: left !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  height: 100% !important;
  padding: 0 !important;
}

/* Canvas — absolute, fills the hero row */
#sg-bg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
  display: block;
}

/* Noise texture overlay */
#sg-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  opacity: 0.4;
}

/* Content wrapper — sits above canvas */
.sg-hero-content {
  position: relative;
  z-index: 2;
  padding: 0 48px 64px;
  width: 100%;
  text-align: left !important;  /* override any Salient centering */
  max-width: 100% !important;
}

/* ── NAME ─────────────────────────────────────────────
   Font: DM Sans Light (300) + Playfair Display Italic for "Gaillot"
   Size: fluid — 56px → 148px
   Colour: #EEE8DC (off-white)
*/
.sg-hero-name {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(56px, 9.5vw, 148px);
  font-weight: 300;
  line-height: 0.88;
  letter-spacing: -0.03em;
  color: #EEE8DC;
  margin-bottom: 40px;
  text-align: left !important;
}

/* Salient sometimes wraps text in <p> — reset those too */
#sg-hero p,
#sg-hero h1,
#sg-hero h2 {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Each line clipped for slide-up entrance */
.sg-hero-name .sg-line {
  display: block;
  overflow: hidden;
}
.sg-hero-name .sg-line span {
  display: block;
  transform: translateY(110%);
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
/* "Gaillot" in Playfair italic teal */
.sg-hero-name em {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 400;
  color: #00E5CC;
}
/* Triggered by JS */
.sg-hero-name .sg-line.sg-line-in span {
  transform: translateY(0);
}

/* ── ROLE & SUBTITLE ROW ──────────────────────────────*/
.sg-hero-meta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

/* Titles block fades in */
.sg-hero-titles {
  opacity: 0;
  transition: opacity 0.7s 0.5s ease;
}
.sg-hero-titles.sg-fade-in { opacity: 1; }

/* "CREATIVE TECHNOLOGIST & SENIOR MOTION DESIGNER"
   Font: DM Mono 400
   Size: 11px
   Tracking: 0.18em
   Colour: #00E5CC (teal)
*/
.sg-hero-title-line {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #00E5CC;
  margin-bottom: 6px;
  line-height: 1.5;
}

/* "15 years at the intersection..."
   Font: DM Sans Light (300)
   Size: fluid 13px → 16px
   Colour: rgba(238,232,220,.45) — dimmed off-white
*/
.sg-hero-role-line {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(13px, 1.3vw, 16px);
  font-weight: 300;
  color: rgba(238, 232, 220, 0.45);
  line-height: 1.6;
  max-width: 420px;
}

/* ── SCROLL INDICATOR ─────────────────────────────────*/
.sg-hero-scroll {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(238, 232, 220, 0.35);
  opacity: 0;
  transition: opacity 0.7s 0.9s ease;
}
.sg-hero-scroll.sg-fade-in { opacity: 1; }

.sg-scroll-line {
  width: 48px;
  height: 1px;
  background: #00E5CC;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.8s 1.1s ease;
}
.sg-scroll-line.sg-scroll-line-in { transform: scaleX(1); }

/* ── MOBILE ───────────────────────────────────────────*/
@media (max-width: 768px) {
  .sg-hero-content {
    padding: 0 24px 48px;
  }
  .sg-hero-name {
    margin-bottom: 28px;
  }
  .sg-hero-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
}

/* ── BODY / SECTION TYPOGRAPHY (white sections) ───────
   Reference values — apply these in WPBakery text elements
   or in your child theme stylesheet.
*/

/* Section labels  e.g. "Studio / Practice", "Selected Work"
   Font: DM Mono 400 · 11px · tracking 0.2em · #009E8E
*/
.sg-label {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #009E8E;
}

/* Large about / intro text
   Font: DM Sans 300 · clamp(24px,2.8vw,40px) · #0A0B12
*/
.sg-body-large {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(24px, 2.8vw, 40px);
  font-weight: 300;
  line-height: 1.32;
  letter-spacing: -0.02em;
  color: #0A0B12;
}
.sg-body-large em {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  color: #009E8E;
}

/* Standard body / descriptions
   Font: DM Sans 300 · 14px · rgba(10,11,18,.55)
*/
.sg-body {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(10, 11, 18, 0.55);
}

/* Project / card titles
   Font: DM Sans 300 · clamp(22px,3vw,42px) · #0A0B12
*/
.sg-card-title {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(22px, 3vw, 42px);
  font-weight: 300;
  letter-spacing: -0.02em;
  color: #0A0B12;
  line-height: 1.1;
}

/* Small mono metadata (tags, years, keys)
   Font: DM Mono 400 · 11px · tracking 0.15em
*/
.sg-meta {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(10, 11, 18, 0.3);
}