/* ===========================================================
   Coterie landing page — dark "studio" treatment
   (awwwards-toolkit adapted to the Coterie brand blue, scoped
   under wg- prefixed classes so nothing collides with coterie.css,
   which the rest of the site — login/signup/app — still uses as-is)
=========================================================== */

.wg-root {
  /* OnlyFans-style light palette — same tokens as coterie.css (white surface,
     #00aff0 brand blue, ink text). The landing matches the app, not a dark theme. */
  --wg-bg: #ffffff;
  --wg-bg-2: #f4f9fc;
  --wg-fg: #12181f;
  --wg-fg-dim: #6d7885;
  --wg-accent: #00aff0;
  --wg-accent-2: #ff4d67;
  --wg-line: rgba(18, 24, 31, 0.1);
  --wg-ease: cubic-bezier(0.16, 1, 0.3, 1);

  background: var(--wg-bg);
  color: var(--wg-fg);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  position: relative;
  overflow-x: clip;
}
/* hide the native pointer ONLY once the custom cursor is actually running */
.wg-cursor-on .wg-root { cursor: none; }
@media (max-width: 860px) {
  .wg-cursor-on .wg-root { cursor: auto; }
}
.wg-root a { color: inherit; text-decoration: none; }
/* Reveal targets are visible by default (no-JS / fail-safe); hidden ONLY while
   the enhancement layer is live so GSAP can animate them in on scroll. */
.wg-root [data-reveal] { opacity: 1; transform: none; }
.wg-js:not(.wg-fallback) .wg-root [data-reveal] { opacity: 0; transform: translateY(40px); }
.wg-fallback .wg-root [data-reveal] { opacity: 1 !important; transform: none !important; }
.wg-root a:focus-visible,
.wg-root button:focus-visible {
  outline: 2px solid var(--wg-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* grain — static, no blend-mode. A fixed mix-blend-mode layer must recomposite
   every scroll frame (content blends through it as it scrolls under), which is a
   real scroll-jank source; a plain low-opacity texture reads the same here. */
.wg-grain {
  position: fixed; inset: 0; z-index: 40; pointer-events: none;
  opacity: 0.03; /* barely-there paper texture on white */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* cursor */
.wg-cursor {
  position: fixed; top: 0; left: 0; width: 8px; height: 8px; border-radius: 50%;
  background: var(--wg-fg); pointer-events: none; z-index: 60;
  transform: translate(-50%, -50%); mix-blend-mode: difference;
  transition: width .25s var(--wg-ease), height .25s var(--wg-ease), opacity .2s;
}
.wg-cursor-ring {
  position: fixed; top: 0; left: 0; width: 36px; height: 36px; border: 1px solid var(--wg-fg);
  border-radius: 50%; pointer-events: none; z-index: 59;
  transform: translate(-50%, -50%); mix-blend-mode: difference;
  transition: width .3s var(--wg-ease), height .3s var(--wg-ease);
}
.wg-cursor.is-hover { width: 4px; height: 4px; }
.wg-cursor-ring.is-hover { width: 72px; height: 72px; }
@media (max-width: 860px) { .wg-cursor, .wg-cursor-ring { display: none; } }

/* preloader */
.wg-preloader {
  position: fixed; inset: 0; z-index: 100; background: var(--wg-bg);
  display: none; align-items: flex-end; justify-content: space-between; padding: 32px 28px;
  transition: transform .8s var(--wg-ease);
}
/* Only cover the page while JS is actively enhancing — never for no-JS / fail-safe. */
.wg-js:not(.wg-ready):not(.wg-fallback) .wg-preloader { display: flex; }
.wg-preloader__label { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--wg-fg-dim); }
.wg-preloader__count { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--wg-fg); }
.wg-preloader.is-done { transform: translateY(-100%); }

/* nav */
.wg-nav {
  position: relative; z-index: 30; display: flex; align-items: center; justify-content: space-between;
  padding: 22px 28px; gap: 20px;
}
.wg-nav .logo { color: var(--wg-fg); flex-shrink: 0; }
.wg-nav .logo .mark { background: var(--wg-accent); }
.wg-nav__links { display: flex; gap: 26px; margin-right: auto; margin-left: 48px; }
.wg-nav__links a { font-size: 14px; color: var(--wg-fg-dim); transition: color .2s; }
.wg-nav__links a:hover { color: var(--wg-fg); }
.wg-nav__actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.wg-nav .btn-outline { border-color: var(--wg-accent); color: var(--wg-accent); }
.wg-nav .btn-outline:hover { background: #e8f7fe; }
.wg-nav .btn-blue { background: var(--wg-accent); }
.wg-nav .btn-blue:hover { background: #0099d6; }
.wg-nav__burger {
  display: none;
  flex-direction: column; justify-content: center; gap: 5px;
  width: 34px; height: 34px; background: none; border: none; cursor: pointer; padding: 0;
}
.wg-nav__burger span { display: block; width: 100%; height: 1.5px; background: var(--wg-fg); transition: transform .25s var(--wg-ease), opacity .2s; }
.wg-nav__burger.is-open span:first-child { transform: translateY(3.25px) rotate(45deg); }
.wg-nav__burger.is-open span:last-child { transform: translateY(-3.25px) rotate(-45deg); }
.wg-nav__mobile {
  display: none;
  flex-direction: column;
  position: relative; z-index: 29;
  padding: 0 28px;
  max-height: 0; overflow: hidden;
  transition: max-height .3s var(--wg-ease);
}
.wg-nav__mobile.is-open { max-height: 160px; padding-bottom: 18px; }
.wg-nav__mobile a { padding: 10px 0; font-size: 15px; color: var(--wg-fg-dim); border-top: 1px solid var(--wg-line); }
.wg-nav__mobile a:hover { color: var(--wg-fg); }
@media (max-width: 700px) {
  .wg-nav__links { display: none; }
  .wg-nav__burger { display: flex; }
  .wg-nav__mobile { display: flex; }
}

/* hero */
.wg-hero { position: relative; min-height: 88vh; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.wg-hero__gl {
  position: absolute; inset: 0; z-index: 0;
  /* Fallback shown when WebGL is unavailable/blocked — the canvas paints over
     this when it initialises. Light, airy OnlyFans-blue wash on white. */
  background:
    radial-gradient(120% 85% at 18% 8%, rgba(0, 175, 240, 0.14), transparent 58%),
    radial-gradient(95% 75% at 92% 24%, rgba(0, 175, 240, 0.07), transparent 55%),
    var(--wg-bg-2);
}
.wg-hero__gl canvas { width: 100%; height: 100%; display: block; }
.wg-hero__content { position: relative; z-index: 2; padding: 0 28px 72px; max-width: 1100px; }
.wg-hero__eyebrow { font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: var(--wg-fg-dim); margin-bottom: 22px; overflow: hidden; }
.wg-hero__title { font-size: clamp(2.05rem, 8vw, 5.6rem); line-height: .98; font-weight: 800; letter-spacing: -.03em; overflow: hidden; max-width: min(15ch, 100%); }
.wg-hero__title .line { display: block; overflow: hidden; }
.wg-hero__title .line span { display: inline-block; transform: translateY(110%); will-change: transform; }
.wg-hero__sub { margin-top: 22px; font-size: 17px; color: var(--wg-fg-dim); max-width: min(42ch, 100%); }
.wg-hero__cta { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; position: relative; z-index: 2; }
.wg-hero__cta .btn-blue { background: var(--wg-accent); }
.wg-hero__cta .btn-blue:hover { background: #0099d6; }
.wg-hero__cta .btn-soft { background: #eef1f4; color: var(--wg-fg); }
.wg-hero__cta .btn-soft:hover { background: #e4e8ec; }
.wg-hero__trust { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 28px; }
.wg-hero__trust .i { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--wg-fg-dim); }
.wg-hero__trust .i b { color: var(--wg-accent); }
.wg-hero__scroll-cue {
  position: absolute; right: 28px; bottom: 40px; z-index: 2; font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--wg-fg-dim); display: flex; align-items: center; gap: 10px;
}
.wg-hero__scroll-cue .stick { width: 1px; height: 36px; background: var(--wg-line); position: relative; overflow: hidden; }
.wg-hero__scroll-cue .stick::after {
  content: ""; position: absolute; top: -100%; left: 0; right: 0; height: 100%; background: var(--wg-fg);
  animation: wg-cue-drip 1.8s var(--wg-ease) infinite;
}
@keyframes wg-cue-drip { 0% { top: -100%; } 60%, 100% { top: 100%; } }

/* manifesto */
.wg-manifesto { padding-top: 140px; padding-bottom: 140px; padding-left: 28px; padding-right: 28px; max-width: 1240px; margin: 0 auto; }
.wg-manifesto p { font-size: clamp(1.4rem, 3.4vw, 2.6rem); line-height: 1.3; letter-spacing: -.01em; }
.wg-manifesto .word { color: var(--wg-fg-dim); }
.wg-manifesto .word.is-lit { color: var(--wg-fg); }
.wg-manifesto .word.is-lit.accent { color: var(--wg-accent); }
.wg-manifesto__cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 44px; }
.wg-manifesto__cta span { font-size: 13px; color: var(--wg-fg-dim); }

/* section chrome */
.wg-section-head { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 26px; margin-bottom: 48px; border-bottom: 1px solid var(--wg-line); }
.wg-section-head .idx { font-size: 12px; color: var(--wg-fg-dim); }
.wg-section-head h2 { font-size: clamp(1.5rem, 3.2vw, 2.2rem); font-weight: 700; letter-spacing: -.02em; }

/* distortion grid ("meet the creators") */
.wg-grid-showcase { padding-top: 100px; padding-bottom: 100px; padding-left: 28px; padding-right: 28px; max-width: 1240px; margin: 0 auto; }
.wg-distort-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 860px) { .wg-distort-grid { grid-template-columns: 1fr; } }
.wg-distort-item { position: relative; aspect-ratio: 4/5; overflow: hidden; border-radius: 18px; background: #eef1f4; background-size: cover; transition: transform .35s var(--wg-ease), box-shadow .35s var(--wg-ease); }
/* Flat 2-stop CSS gradients read as empty/placeholder-ish on their own — this
   layers soft light/dark blobs on top (mix-blend-mode, so it reads correctly
   over ANY of the card's gradient colors) for the depth a photo would give,
   with zero JS/canvas cost. */
.wg-distort-item::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(38% 42% at 22% 26%, rgba(255,255,255,.4), transparent 60%),
    radial-gradient(46% 50% at 80% 68%, rgba(0,0,0,.28), transparent 65%),
    radial-gradient(30% 32% at 68% 15%, rgba(255,255,255,.22), transparent 60%);
  mix-blend-mode: overlay;
  pointer-events: none;
}
.wg-distort-item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.4)); pointer-events: none; }
.wg-distort-item:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(20,30,45,.16); }
.wg-distort-item canvas { width: 100%; height: 100%; display: block; }
.wg-distort-item .cap { position: absolute; left: 18px; bottom: 16px; z-index: 2; }
.wg-distort-item .cap .nm { font-size: 14px; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 5px; }
.wg-distort-item .cap .hd { font-size: 12px; color: rgba(255,255,255,.75); margin-top: 2px; }
.wg-distort-item .price { position: absolute; top: 16px; right: 16px; z-index: 2; font-size: 12px; font-weight: 800; background: rgba(0,0,0,.4); backdrop-filter: blur(6px); color: #fff; padding: 6px 12px; border-radius: 40px; }

/* marquee */
/* An infinitely-scrolling row always has a word straddling each edge at any
   given instant — that's the technique, not a bug — but a hard clip there
   reads as broken. Fading it out at the edges makes the crop look intentional. */
.wg-marquee {
  border-top: 1px solid var(--wg-line); border-bottom: 1px solid var(--wg-line); padding: 24px 0; overflow: hidden; white-space: nowrap;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.wg-marquee__track { display: inline-flex; gap: 44px; will-change: transform; animation: wg-marquee-scroll 24s linear infinite; }
.wg-marquee:hover .wg-marquee__track { animation-play-state: paused; }
@keyframes wg-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.wg-marquee__track span { font-size: clamp(1.1rem, 2.4vw, 1.7rem); letter-spacing: -.01em; color: var(--wg-fg-dim); }
.wg-marquee__track span.accent { color: var(--wg-accent); }

/* pinned gallery */
/* Native horizontal swipe row (was a ScrollTrigger-pinned track). No pin, no
   per-frame transform — just overflow-x scroll + snap. Fast and jank-free. */
.wg-gallery-pin { position: relative; padding: 44px 0 8px; }
.wg-gallery-track {
  display: flex; align-items: stretch; gap: 20px; padding: 4px 28px 20px;
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch; scrollbar-width: thin;
  scrollbar-color: var(--wg-line) transparent;
}
.wg-gallery-track::-webkit-scrollbar { height: 6px; }
.wg-gallery-track::-webkit-scrollbar-thumb { background: var(--wg-line); border-radius: 40px; }
.wg-gallery-track .card { cursor: pointer;
  position: relative; width: min(78vw, 320px); height: 440px; overflow: hidden; border-radius: 20px;
  flex-shrink: 0; background-size: cover; scroll-snap-align: center;
  transition: transform .35s var(--wg-ease), box-shadow .35s var(--wg-ease);
}
.wg-gallery-track .card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(20,30,45,.16); }
.wg-gallery-track .card::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(38% 42% at 78% 22%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(48% 52% at 20% 72%, rgba(0,0,0,.26), transparent 65%);
  mix-blend-mode: overlay;
  pointer-events: none;
}
.wg-gallery-track .card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.4)); pointer-events: none; }
.wg-gallery-track .card .num { position: absolute; top: 18px; left: 18px; font-size: 11px; color: rgba(255,255,255,.7); z-index: 2; }
.wg-gallery-track .card .info { position: absolute; left: 18px; bottom: 16px; z-index: 2; }
.wg-gallery-track .card .info .nm { font-size: 14px; font-weight: 700; color: #fff; }
.wg-gallery-track .card .info .hd { font-size: 12px; color: rgba(255,255,255,.75); margin-top: 2px; }

/* cta */
.wg-cta { padding-top: 160px; padding-bottom: 100px; padding-left: 28px; padding-right: 28px; text-align: center; }
.wg-cta h2 { font-size: clamp(2rem, 6vw, 4.4rem); font-weight: 800; letter-spacing: -.03em; margin-bottom: 32px; }
.wg-cta .btn-blue { background: var(--wg-accent); padding: 17px 36px; }
.wg-cta .btn-blue:hover { background: #0099d6; }
.wg-trustbar { display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; margin-top: 28px; }
.wg-trustbar span { font-size: 12.5px; color: var(--wg-fg-dim); }

.wg-agebar { position: relative; z-index: 2; text-align: center; font-size: 12px; color: var(--wg-fg-dim); padding: 20px; border-top: 1px solid var(--wg-line); }

/* Continuous autoplay decoration (grain shift, infinite marquee, scroll-cue drip) —
   exactly the class of motion prefers-reduced-motion exists to suppress. The JS
   entrance/reveal animations are gated in home.js; this covers pure-CSS loops. */
@media (prefers-reduced-motion: reduce) {
  .wg-grain { animation: none; }
  .wg-marquee__track { animation: none; }
  .wg-hero__scroll-cue .stick::after { animation: none; }
}