/* ============================================================
   DRIFT CREATIVE — style.css
   Global variables, fonts, resets, and base styles
   ============================================================ */

/* ─── GOOGLE FONTS ─── */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow+Condensed:ital,wght@0,300;0,400;0,700;0,900;1,300;1,700&family=Barlow:wght@300;400;500&display=swap');

/* ─── BRAND VARIABLES ─── */
:root {
  /* Colours */
  --white:    #FFFFFF;
  --black:    #0A0A0A;   /* Pitch — dominant base, warmer than pure black */
  --electric: #FF3D00;   /* Electric — CTAs, accents, section numbers */
  --lime:     #CAFF00;   /* Charge — Creative submark, stripe accents */
  --mid:      #F0EDE6;   /* Warm Off-White — breathing room */
  --grey:     #888888;   /* Secondary text, labels */

  /* Rules / Borders */
  --rule:        2px solid var(--black);
  --rule-thin:   1px solid rgba(255, 255, 255, 0.1);   /* on dark backgrounds */
  --rule-subtle: 1px solid #eeeeee;                    /* on light backgrounds */

  /* Typography */
  --font-display:    'Bebas Neue', sans-serif;
  --font-condensed:  'Barlow Condensed', sans-serif;
  --font-body:       'Barlow', sans-serif;

  /* Font sizes — fluid scale */
  --fs-hero:    clamp(100px, 14vw, 180px);
  --fs-display: clamp(60px,  8vw,  110px);
  --fs-h1:      clamp(40px,  6vw,  80px);
  --fs-h2:      clamp(28px,  4vw,  52px);
  --fs-h3:      28px;
  --fs-label:   12px;
  --fs-body:    16px;
  --fs-small:   14px;
  --fs-micro:   11px;

  /* Letter spacing */
  --ls-tight:   -0.02em;
  --ls-normal:   0.02em;
  --ls-wide:     0.05em;
  --ls-wider:    0.2em;
  --ls-widest:   0.3em;

  /* Spacing */
  --gutter:   40px;
  --section-v: 80px;

  /* Transitions */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --transition: 0.2s ease;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--white);
  color: var(--black);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

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

ul,
ol {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font: inherit;
}

/* ─── BASE TYPOGRAPHY ─── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400;   /* Bebas Neue is single weight */
  line-height: 0.9;
  letter-spacing: var(--ls-normal);
}

p {
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.8;
  color: #444;
}

/* ─── UTILITY CLASSES ─── */

/* Layout */
.container {
  width: 100%;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* Text styles */
.text-display {
  font-family: var(--font-display);
  letter-spacing: var(--ls-normal);
  line-height: 0.9;
}

.text-condensed {
  font-family: var(--font-condensed);
  text-transform: uppercase;
}

.text-label {
  font-family: var(--font-condensed);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--grey);
}

.text-electric { color: var(--electric); }
.text-lime     { color: var(--lime); }
.text-grey     { color: var(--grey); }
.text-white    { color: var(--white); }
.text-black    { color: var(--black); }

/* Outline text effect (used in hero taglines) */
.text-outline {
  -webkit-text-stroke: 2px currentColor;
  color: transparent;
}

/* Backgrounds */
.bg-black    { background-color: var(--black); }
.bg-electric { background-color: var(--electric); }
.bg-lime     { background-color: var(--lime); }
.bg-mid      { background-color: var(--mid); }
.bg-white    { background-color: var(--white); }

/* Borders */
.border-rule   { border: var(--rule); }
.border-top    { border-top: var(--rule); }
.border-bottom { border-bottom: var(--rule); }
.border-left   { border-left: var(--rule); }
.border-right  { border-right: var(--rule); }

/* Decorative lime stripe (used at top of dark panels) */
.stripe-lime {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: var(--lime);
}

/* Section header — numbered section titles */
.section-header {
  border-bottom: var(--rule);
  padding: 20px var(--gutter);
  display: flex;
  align-items: baseline;
  gap: 24px;
}

.section-header .sh-num {
  font-family: var(--font-display);
  font-size: 48px;
  color: var(--electric);
  line-height: 1;
}

.section-header .sh-title {
  font-family: var(--font-condensed);
  font-weight: 900;
  font-size: var(--fs-h3);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}

.section-header .sh-desc {
  margin-left: auto;
  font-family: var(--font-condensed);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--grey);
}

/* App label (used above mockups and content blocks) */
.app-label {
  font-family: var(--font-condensed);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.app-label::before {
  content: '';
  width: 20px;
  height: 2px;
  background: var(--electric);
  display: inline-block;
  flex-shrink: 0;
}

/* ─── ANIMATIONS ─── */
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ─── SCROLL REVEAL UTILITY ─────────────────────────────────
 * Add data-reveal to any element. main.js IntersectionObserver
 * adds .is-visible when the element enters the viewport.
 * ─────────────────────────────────────────────────────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.65s ease,
    transform 0.65s var(--ease-out-expo);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ─── TAGLINE SECTION ─── */
/* Electric orange full-bleed CTA band on the homepage */

.section-tagline {
  background: var(--electric);
  padding: var(--section-v) var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  border-bottom: var(--rule);
}

.tagline-headline {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  color: var(--white);
  line-height: 0.9;
  letter-spacing: var(--ls-normal);
}

.tagline-outline {
  -webkit-text-stroke: 2px var(--white);
  color: transparent;
}

.tagline-copy {
  font-family: var(--font-condensed);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 32px;
  max-width: 400px;
}

/* ─── RESPONSIVE BREAKPOINTS ─── */
/* Mobile:  < 480px  */
/* Tablet:  480px – 767px */
/* Desktop: ≥ 768px */

@media (max-width: 768px) {
  :root {
    --gutter: 20px;
    --section-v: 48px;
  }

  .section-header {
    flex-wrap: wrap;
  }

  .section-header .sh-desc {
    margin-left: 0;
    width: 100%;
  }

  /* Tagline: stack headline above copy on tablet/mobile */
  .section-tagline {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .tagline-copy {
    max-width: 100%;
    margin-bottom: 24px;
  }
}

@media (max-width: 480px) {
  :root {
    --gutter: 16px;
    --section-v: 40px;
  }

  /* Tighten section-header numbers on very small screens */
  .section-header {
    padding: 14px var(--gutter);
    gap: 16px;
  }

  .section-header .sh-num {
    font-size: 36px;
  }

  /* Tagline: reduce gap at 480px */
  .section-tagline {
    gap: 24px;
  }
}