/* ════════════════════════════════════════════════════════════════
   TAGGIFY — Design System Tokens & Global Styles
   Visual Identity: Sowieso Wero Neo-Brutalist Blueprint
   ════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

:root {
    /* ── Wero Palette ── */
    --ink:          #1D1C1C;
    --ink-soft:     #3A3939;
    --canvas:       #F5F0E8;
    --yellow:       #FFF48D;
    --yellow-dark:  #C4A800;
    --yellow-mid:   #FFE916;
    --lime:         #C9E265;
    --coral:        #FF8B6A;
    --pink-blob:    #FFBDBD;
    --white:        #FFFFFF;
    --black:        #000000;

    /* ── Legacy aliases ── */
    --bg-cream:         var(--canvas);
    --bg-black:         var(--ink);
    --bg-footer:        var(--ink);
    --text-dark:        var(--ink);
    --text-light:       var(--white);
    --text-muted:       #4A4544;
    --text-muted-light: #C8C6C4;
    --primary:          var(--yellow-dark);
    --primary-light:    var(--yellow);
    --secondary:        var(--lime);

    /* ── Typography — single font ── */
    --font-primary:   'Space Grotesk', sans-serif;
    --font-secondary: 'Space Grotesk', sans-serif;
    --font-impact:    'Space Grotesk', sans-serif;

    /* ── Type Scale ── */
    --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem;
    --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem;
    --text-3xl: 2rem; --text-4xl: 2.5rem; --text-5xl: 3rem;
    --text-6xl: 3.5rem; --text-7xl: 4.5rem;
    --text-hero: clamp(3.5rem, 9vw, 9rem);

    /* ── Spacing ── */
    --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem;
    --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem;
    --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem;
    --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem;

    /* ── Borders ── */
    --border-ink:   1.5px solid var(--ink);
    --border-ink-2: 2px solid var(--ink);
    --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px;
    --radius-xl: 28px; --radius-pill: 50px; --radius-circle: 50%;

    /* ── Hard Offset Shadows (signature Wero) ── */
    --shadow-hard-sm:     4px 4px 0 var(--ink);
    --shadow-hard-md:     6px 6px 0 var(--ink);
    --shadow-hard-lg:     8px 8px 0 var(--ink);
    --shadow-hard-xl:     10px 10px 0 var(--ink);
    --shadow-hard-yellow: 6px 6px 0 var(--yellow-dark);

    /* ── Easing ── */
    --ease-smooth:      cubic-bezier(0.25,0.1,0.25,1);
    --ease-bounce:      cubic-bezier(0.34,1.56,0.64,1);
    --ease-out-expo:    cubic-bezier(0.19,1,0.22,1);
    --ease-quint-inout: cubic-bezier(0.83,0,0.17,1);

    --duration-fast:   0.2s;
    --duration-normal: 0.3s;
    --duration-slow:   0.5s;
    --duration-slower: 0.8s;

    /* ── Layout ── */
    --container-max:     1400px;
    --container-padding: 80px;
    --nav-height:        80px;
    --section-padding-y: 120px;
}

/* ── Reset ── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box }
html { font-size:16px; -webkit-font-smoothing:antialiased; }
body {
    font-family: var(--font-primary);
    font-weight: 400;
    line-height: 1.6;
    color: var(--ink);
    background: var(--canvas);
    overflow-x: hidden;
    position: relative;
}
body.is-transitioning { overflow: hidden }
img,video,svg { max-width:100%; display:block }
a { text-decoration:none; color:inherit; transition:color var(--duration-normal) var(--ease-smooth) }
ul,ol { list-style:none }
button,input,textarea,select { font:inherit; color:inherit; border:none; outline:none; background:none }
button { cursor:pointer }
::selection { background:var(--yellow); color:var(--ink) }

/* ── Layout ── */
.container { max-width:var(--container-max); margin:0 auto; padding-left:var(--container-padding); padding-right:var(--container-padding) }
.section { padding:var(--section-padding-y) 0; position:relative; overflow:hidden }
.section--cream { background:var(--canvas); color:var(--ink) }
.section--black { background:var(--ink); color:var(--white) }
.section--dark  { background:var(--ink); color:var(--white) }

/* ── Typography ── */
.heading-hero {
    font-family: var(--font-primary);
    font-size: var(--text-hero);
    font-weight: 700;
    line-height: 1.0;
    letter-spacing: -1px;
    text-transform: uppercase;
}
.heading-section {
    font-family: var(--font-primary);
    font-size: clamp(2rem,4vw,var(--text-6xl));
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.5px;
}
.heading-sub {
    font-family: var(--font-primary);
    font-size: clamp(1.25rem,2vw,var(--text-2xl));
    font-weight: 600;
    line-height: 1.3;
}
.text-body { font-family:var(--font-primary); font-size:var(--text-lg); line-height:1.7; color:var(--text-muted) }
.text-body--light { color:var(--text-muted-light) }

.text-accent        { color:var(--ink) }
.section--black .text-accent { color:var(--yellow) }
.text-accent-yellow { color:var(--yellow-dark) }
.text-secondary     { color:var(--lime) }
.stroke-text {
    font-family: var(--font-primary);
    font-weight: 700;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--ink);
    text-transform: uppercase;
}

/* ════════════════════════════════════════════════════════════════
   WERO ANIMATION SYSTEM
   ════════════════════════════════════════════════════════════════ */

[data-reveal] {
    opacity:0;
    transform:translateY(30px);
    transition: transform 1.6s var(--ease-out-expo), opacity 1.6s var(--ease-out-expo);
}
[data-reveal].--revealed { opacity:1; transform:none }

[data-title-reveal] .line { display:block; opacity:0; transform:translateY(30px) }

[data-subtitle-reveal] > span { display:inline-block; opacity:0; transform:translateY(10px) }

/* Word-bg pill highlight (signature Wero) */
.word-container { display:inline-block; padding:0 8px; position:relative }
.word-bg {
    position:absolute; top:-2px; left:-4px;
    width:calc(100% + 8px); height:calc(100% + 4px);
    border:var(--border-ink); border-radius:6px; z-index:-1;
    transform:scaleX(0); transform-origin:left center;
    transition:transform 0.8s var(--ease-out-expo);
}
.word-bg.--revealed { transform:scaleX(1) }
.word-bg.yellow { background-color:var(--yellow) }
.word-bg.lime   { background-color:var(--lime) }
.word-bg.coral  { background-color:var(--coral) }
.word-bg.pink   { background-color:var(--pink-blob) }

.icon-flip { opacity:0; transform:rotateX(180deg); transform-style:preserve-3d }
.icon-flip.--revealed { opacity:1; transform:rotateX(0); transition:all 0.8s var(--ease-out-expo) }

/* ── Mesh Canvas ── */
#meshCanvas {
    position:fixed; top:0; left:0; width:100%; height:100%;
    z-index:-2; pointer-events:none;
}

/* ── Film grain ── */
body::before {
    content:''; position:fixed; top:0; left:0; width:100%; height:100%;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
    pointer-events:none; z-index:9998; opacity:0.25;
}

/* ── Page transition ── */
.page-transition-overlay {
    position:fixed; top:0; left:0; width:100%; height:100%;
    background:var(--yellow); z-index:99999;
    transform:scaleY(0); transform-origin:bottom; pointer-events:none;
}

/* ── Scroll progress ── */
.scroll-progress { position:fixed; bottom:30px; right:30px; width:56px; height:56px; z-index:9990; cursor:pointer; opacity:0; transition:opacity var(--duration-normal) var(--ease-smooth) }
.scroll-progress.visible { opacity:1 }
.scroll-progress svg { width:100%; height:100%; transform:rotate(-90deg) }
.scroll-progress__bg  { fill:none; stroke:rgba(29,28,28,0.15); stroke-width:3 }
.scroll-progress__bar { fill:none; stroke:var(--ink); stroke-width:3; stroke-linecap:round; stroke-dasharray:157; stroke-dashoffset:157; transition:stroke-dashoffset 0.1s linear }
.scroll-progress__text { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-family:var(--font-primary); font-weight:700; font-size:11px; color:var(--ink) }

/* ── Misc ── */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important}}
.will-animate { will-change:transform,opacity }
.word-reveal  { display:inline-block; transition:opacity 0.1s }
.network-card,.team-card,.cs-card { transform-style:preserve-3d }


/* ── Top Floating Logo (Wero Scroll Behavior) ── */
.top-logo { 
    position: fixed; top: var(--space-8); left: 50%; z-index: 1000; 
    transform: translateX(-50%) scale(1);
    background: transparent;
    padding: 12px 24px; display: flex; align-items: center; gap: 16px;
    border-radius: var(--radius-pill);
    border: 1.5px solid transparent;
    box-shadow: none;
    transition: all 0.3s var(--ease-out-expo);
    transform-origin: top center;
}
.top-logo.scrolled {
    transform: translateX(-50%) scale(0.85) translateY(-14px);
    background: var(--yellow);
    border: 1.5px solid var(--ink);
    box-shadow: 2px 2px 0 var(--ink);
}
.top-logo.scrolled:hover { transform: translateX(-50%) scale(0.85) translate(2px, 2px); box-shadow: none; }
.header__logo { font-size: 1.5rem; font-weight: 800; color: var(--ink); text-decoration: none; letter-spacing: -0.5px; transition: color 0.3s; }
.header__logo span { color: var(--ink); }
.top-logo.scrolled .header__logo span { color: var(--ink); }




.top-logo__menu {
    background: transparent; border: none; font-size: 1.25rem; color: var(--ink);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    padding: 0; outline: none; transition: transform 0.2s;
}
.top-logo__menu:hover { transform: scale(1.1); }
.top-logo.scrolled .top-logo__menu { color: var(--ink); }


/* ── PRELOADER INTRO SCENE ── */
.intro-screen {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
  background: var(--yellow); z-index: 99999;
  display: flex; align-items: center; justify-content: center;
}
.intro-layer {
  position: absolute;
  font-family: var(--font-primary); font-size: clamp(4rem, 10vw, 8rem);
  font-weight: 800; letter-spacing: -2px; color: transparent;
  -webkit-text-stroke: 1.5px var(--ink);
  transform-origin: center center;
}
.intro-layer span { color: transparent; -webkit-text-stroke: 1.5px var(--ink); }
.intro-layer--front { color: var(--ink); -webkit-text-stroke: 0; }
.intro-layer--front span { color: var(--ink); -webkit-text-stroke: 0; }

/* ── Morph Curtain (case-studies entry) ── */
#morphCurtain {
    display: block;                /* always in DOM, hidden by GSAP after entry */
    will-change: transform;
}
/* Page transition overlay — GSAP controls geometry; CSS only sets base state */
#pageTransition {
    position: fixed;
    background: var(--yellow);
    z-index: 99999;
    pointer-events: none;
    opacity: 0;                    /* hidden at rest; GSAP sets opacity:1 on morph */
    left: 0; top: 0;
    width: 100vw; height: 100vh;
    transform: scaleY(0);
    transform-origin: bottom;
}

/* ── Logo Image Styles ── */
/* Intro layers: show logo image instead of text */
.intro-logo-img {
  display: block;
  width: clamp(340px, 58vw, 760px);
  height: auto;
  /* Logo has white bg — mix-blend removes it on yellow intro screen */
  mix-blend-mode: multiply;
}
.intro-layer--front .intro-logo-img {
  /* Front layer: full opacity, no blend needed on the final morph layer */
  mix-blend-mode: normal;
  filter: none;
}

/* Header pill logo */
.header-logo-img {
  display: block;
  height: 60px;
  width: auto;
  mix-blend-mode: multiply; /* white bg disappears on cream/yellow bg */
}
.top-logo.scrolled .header-logo-img {
  mix-blend-mode: multiply;
}

/* Footer logo */
.footer-logo-img {
  display: block;
  height: 46px;
  width: auto;
  filter: brightness(0) invert(1); /* white on dark footer bg */
}

/* Network card anchor reset */
a.network-card {
  display: block;
  color: inherit;
  text-decoration: none;
}
a.network-card:hover {
  transform: translate(4px, 4px);
  box-shadow: none;
}