/*
Theme Name: FLWLESS
Theme URI: https://flwless.com.au
Description: FLWLESS — Real-time visualisation for real-world projects.
Version: 2.0
Author: FLWLESS
*/

/* ============================================================
   TOKENS — Two-tone: near-black + off-white, warm clay accent
   ============================================================ */

:root {
  /* Surface */
  --c-bg:         #0e0d0c;   /* near-black, very slightly warm */
  --c-bg-2:       #161513;   /* subtle card/raised surface */
  --c-bg-3:       #1d1b19;   /* hover / lighter raised */

  /* Ink */
  --c-ink:        #f0ede8;   /* warm off-white — body text */
  --c-ink-2:      #a09890;   /* muted secondary text */
  --c-ink-3:      #5c564f;   /* very muted / disabled */

  /* Accent — warm clay */
  --c-accent:     #c8b49a;   /* warm sand */
  --c-accent-dim: #7a6855;   /* darker tone of accent */

  /* Lines */
  --c-line:       rgba(240, 237, 232, 0.08);
  --c-line-2:     rgba(240, 237, 232, 0.14);

  /* Typography */
  --font-head:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Spacing */
  --sp-xs:  8px;
  --sp-sm:  16px;
  --sp-md:  24px;
  --sp-lg:  40px;
  --sp-xl:  72px;
  --sp-2xl: 120px;

  /* Layout */
  --max-w: 1360px;
  --pad-x: clamp(20px, 4vw, 72px);
}

/* ============================================================
   RESET + BASE
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
  border: 0;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  letter-spacing: 0.01em;
  overflow-x: hidden;
}

img, video, svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  cursor: pointer;
  font-family: inherit;
  background: none;
  color: inherit;
}

ul, ol { list-style: none; }

/* ============================================================
   TYPOGRAPHY SCALE
   ============================================================ */

.t-display {
  font-family: var(--font-head);
  font-size: clamp(3.6rem, 9vw, 9rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 0.92;
  text-transform: uppercase;
}

.t-h1 {
  font-family: var(--font-head);
  font-size: clamp(2.4rem, 5vw, 5.2rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 0.95;
  text-transform: uppercase;
}

.t-h2 {
  font-family: var(--font-head);
  font-size: clamp(1.4rem, 2.4vw, 2.4rem);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.t-label {
  font-family: var(--font-head);
  font-size: clamp(0.65rem, 1vw, 0.75rem);
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-ink-2);
}

.t-body {
  font-size: clamp(0.92rem, 1.1vw, 1.05rem);
  line-height: 1.72;
  color: var(--c-ink-2);
}

/* ============================================================
   LAYOUT UTILITY
   ============================================================ */

.shell {
  width: 100%;
  max-width: var(--max-w);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}

.shell--bleed {
  width: 100%;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}

/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 28px;
  font-family: var(--font-head);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border: 1px solid transparent;
  transition: background 220ms ease, color 220ms ease, border-color 220ms ease;
  white-space: nowrap;
  cursor: pointer;
}

.btn--primary {
  background: var(--c-ink);
  color: var(--c-bg);
  border-color: var(--c-ink);
}

.btn--primary:hover {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-bg);
}

.btn--ghost {
  background: transparent;
  color: var(--c-ink);
  border-color: var(--c-line-2);
}

.btn--ghost:hover {
  border-color: var(--c-ink);
}

/* ============================================================
   DIVIDER
   ============================================================ */

.rule {
  width: 100%;
  height: 1px;
  background: var(--c-line);
}

/* ============================================================
   EYEBROW / LABEL ROW
   ============================================================ */

.eyebrow-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}

.eyebrow-row::before {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background: var(--c-accent);
  flex-shrink: 0;
}

/* Legacy compat — keep existing class names working */
.section-title   { font-family: var(--font-head); }
.section-content { font-family: var(--font-body); }
.section-subtitle{ font-family: var(--font-head); }

/* ============================================================
   GLOBE CANVAS
   ============================================================ */

#globe-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;            /* behind everything */
  pointer-events: none;  /* never intercepts clicks */
  display: block;
  opacity: 0.5;
}

/* Sections sit above the canvas */
#Navigation {
  z-index: 900;
}

/* Hero is fully transparent — globe shows through video area */
.hero {
  position: relative;
  z-index: 1;
}

/* Content sections: semi-transparent so globe glows through behind them.
   The canvas renders the globe centred on the viewport, so as you scroll
   different sections the globe is always faintly visible behind the content. */
.about,
.sectors,
.environment,
.work,
.contact,
.footer-bar {
  position: relative;
  z-index: 1;
  background: rgba(14, 13, 12, 0.55);
  backdrop-filter: blur(0px);   /* no blur — keep globe crisp behind */
}

/* ============================================================
   NAVIGATION (base positioning — detail in navigation.css)
   ============================================================ */

#Navigation {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
}

body { padding-top: 0; }  /* hero goes full-bleed under nav */


/* ============================================================
   SCROLL ANIMATIONS
   ============================================================ */

/* --- Fade up (default) --- */
[data-anim] {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity  700ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

[data-anim].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Fade only (no movement) --- */
[data-anim="fade"] {
  opacity: 0;
  transform: none;
  transition: opacity 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

[data-anim="fade"].is-visible {
  opacity: 1;
}

/* --- Slide from left --- */
[data-anim="slide-left"] {
  opacity: 0;
  transform: translateX(-28px);
  transition:
    opacity  700ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

[data-anim="slide-left"].is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* --- Title clip reveal --- */
[data-anim="clip"] {
  opacity: 1;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

[data-anim="clip"].is-visible {
  clip-path: inset(0 0% 0 0);
}

/* --- Stagger delay helpers --- */
[data-delay="1"] { transition-delay: 80ms;  }
[data-delay="2"] { transition-delay: 160ms; }
[data-delay="3"] { transition-delay: 240ms; }
[data-delay="4"] { transition-delay: 320ms; }
[data-delay="5"] { transition-delay: 400ms; }
[data-delay="6"] { transition-delay: 480ms; }

/* Reduce motion: skip all transforms, just fade */
@media (prefers-reduced-motion: reduce) {
  [data-anim],
  [data-anim="fade"],
  [data-anim="slide-left"],
  [data-anim="clip"] {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition: none;
  }
}