/* ============ CHUCKSQUATCH · SWAMP NEON ============ */

:root {
  --ink: #08060d;
  --ink-2: #0d0a16;
  --uv: #8b2fff;
  --uv-deep: #4a17b8;
  --pink: #ff2e9e;
  --pink-hot: #ff5cb8;
  --swamp: #3dff8a;
  --cup: #e23b3b;
  --bone: #f2ede4;
  --bone-dim: rgba(242, 237, 228, 0.55);
  --anton: 'Anton', sans-serif;
  --script: 'Yellowtail', cursive;
  --grot: 'Space Grotesk', sans-serif;
}

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

html { scroll-behavior: auto; }

body {
  background: var(--ink);
  color: var(--bone);
  font-family: var(--grot);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  cursor: default;
}

.mono {
  font-family: var(--grot);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* ---------- preloader ---------- */
#preloader {
  position: fixed; inset: 0; z-index: 100;
  background: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.2rem;
  transition: opacity 0.7s ease, visibility 0.7s;
}
#preloader.done { opacity: 0; visibility: hidden; }
.pre-word {
  font-family: var(--anton);
  font-size: clamp(2rem, 6vw, 4.5rem);
  letter-spacing: 0.04em;
  color: var(--pink);
  text-shadow: 0 0 12px rgba(255, 46, 158, 0.8), 0 0 48px rgba(255, 46, 158, 0.45);
}
.pre-word .off { color: #241129; text-shadow: none; }
.pre-sub {
  font-family: var(--grot); font-size: 0.65rem; letter-spacing: 0.35em;
  color: var(--bone-dim);
}

/* ---------- fixed layers ---------- */
#scene {
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  z-index: 0; display: block;
}
.grain {
  position: fixed; inset: -50%; z-index: 3; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.06;
  animation: grainShift 0.9s steps(3) infinite;
}
@keyframes grainShift {
  0% { transform: translate(0, 0); }
  33% { transform: translate(-2%, 1%); }
  66% { transform: translate(1%, -2%); }
  100% { transform: translate(0, 0); }
}
.vignette {
  position: fixed; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(4, 3, 8, 0.75) 100%);
}
#cursorGlow {
  position: fixed; top: 0; left: 0; z-index: 4; pointer-events: none;
  width: 340px; height: 340px; border-radius: 50%;
  background: radial-gradient(circle, rgba(139, 47, 255, 0.14) 0%, transparent 65%);
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
}

/* ---------- header ---------- */
.site-head {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.4rem 2rem;
  mix-blend-mode: normal;
}
.head-mark {
  font-family: var(--anton); font-size: 1.05rem; letter-spacing: 0.06em;
  color: var(--bone);
}
.head-mark span { color: var(--pink); text-shadow: 0 0 14px rgba(255, 46, 158, 0.7); }
.head-meta { display: flex; gap: 0.5rem; }
.chip {
  font-family: var(--grot); font-weight: 600; font-size: 0.62rem;
  letter-spacing: 0.18em; padding: 0.35rem 0.7rem;
  border: 1px solid rgba(242, 237, 228, 0.25); border-radius: 999px;
  color: var(--bone-dim);
}
.chip-pink {
  border-color: rgba(255, 46, 158, 0.6); color: var(--pink-hot);
  box-shadow: 0 0 12px rgba(255, 46, 158, 0.25) inset, 0 0 10px rgba(255, 46, 158, 0.2);
}

/* ---------- content sections ---------- */
main { position: relative; z-index: 10; }
section { position: relative; }

/* HERO */
.hero {
  height: 100vh;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  text-align: left;
  padding: 0 1.5rem 0 clamp(1.5rem, 7vw, 9rem);
}
.hero-eyebrow { color: var(--bone-dim); margin-bottom: 1.6rem; }
.hero-title {
  font-family: var(--anton);
  font-size: clamp(3.8rem, 12.5vw, 12.5rem);
  line-height: 0.88;
  letter-spacing: 0.01em;
  color: var(--bone);
  text-shadow: 0 0 60px rgba(139, 47, 255, 0.35);
}
.hero-title .line { display: block; overflow: hidden; }
.hero-title .chars { display: inline-block; }
.hero-script {
  font-family: var(--script);
  font-size: clamp(2rem, 5.5vw, 4.2rem);
  color: var(--pink-hot);
  margin-top: -0.55em;
  margin-left: clamp(2rem, 12vw, 14rem);
  transform: rotate(-4deg);
  text-shadow:
    0 0 8px rgba(255, 46, 158, 0.9),
    0 0 24px rgba(255, 46, 158, 0.65),
    0 0 70px rgba(255, 46, 158, 0.4);
  position: relative; z-index: 2;
}
.hero-sub {
  margin-top: 2.2rem;
  font-weight: 300; font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  line-height: 1.7; color: var(--bone-dim);
}
.scroll-cue {
  position: absolute; bottom: 2.2rem; left: 50%; transform: translateX(-50%);
  color: var(--bone-dim); display: flex; flex-direction: column; align-items: center; gap: 0.7rem;
}
.cue-line {
  width: 1px; height: 46px;
  background: linear-gradient(to bottom, var(--pink), transparent);
  animation: cuePulse 1.8s ease-in-out infinite;
}
@keyframes cuePulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

/* SIGHTING */
.sighting { height: 260vh; }
.sighting-pin {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.palms {
  position: absolute; bottom: -4%; width: 46vmin; opacity: 0.9; z-index: 1;
  pointer-events: none;
}
.palms img {
  width: 100%; display: block;
  filter: drop-shadow(0 0 30px rgba(139, 47, 255, 0.25));
}
.palms-l { left: -8%; }
.palms-r { right: -10%; transform: scaleX(-1); }
.sight-label {
  position: absolute; top: 12vh; left: 50%; transform: translateX(-50%);
  color: var(--swamp);
  text-shadow: 0 0 12px rgba(61, 255, 138, 0.6);
  white-space: nowrap;
}
/* margin (not transform) so GSAP's transform animation doesn't clobber the offset */
.mascot-wrap {
  position: relative; z-index: 2; width: min(48vmin, 460px);
  margin-right: 12vw;
}
/* PHASE D.2 — scene-adjacent imagery carries the world's grade.
   The film grain and the vignette are fixed layers at z-index 3, and the whole document sits
   at z-index 10, so the mascot cutout and the tee photograph were the only two things on the
   page exempt from the treatment every other pixel gets — which is exactly why they read as
   stickers on the scene rather than things inside it.  Both overlays reuse the GLOBAL grain
   source and opacity (0.06) and the global vignette's own stops; nothing about the shipped
   grain discipline changes.  Body type stays clean on purpose.
   The mascot's overlays are masked by the cutout's own alpha, so the treatment stops where
   the figure does instead of painting a rectangle over the swamp. */
.mascot-wrap::before,
.mascot-wrap::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  -webkit-mask-image: url("../assets/mascot-1800-v2.png");
  mask-image: url("../assets/mascot-1800-v2.png");
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
/* the horizon colour (#151f30 — the scene's one atmosphere) creeping up from the ground */
.mascot-wrap::before {
  background: linear-gradient(to top, rgba(21, 31, 48, 0.45) 0%, rgba(21, 31, 48, 0.12) 26%, transparent 48%);
}
.mascot-wrap::after,
.tee-card::after {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 300px 300px;
  opacity: 0.06;
  animation: grainShift 0.9s steps(3) infinite;
}
.tee-card::before,
.tee-card::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
}
.tee-card::before {
  background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(4, 3, 8, 0.75) 100%);
}
.mascot { width: 100%; display: block; position: relative; z-index: 2;
  filter: drop-shadow(0 0 24px rgba(139, 47, 255, 0.35)) drop-shadow(0 0 90px rgba(255, 46, 158, 0.22));
}
.mascot-glow {
  position: absolute; inset: -18%; z-index: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(139, 47, 255, 0.32) 0%, rgba(255, 46, 158, 0.12) 45%, transparent 70%);
  filter: blur(8px);
}
.sight-copy {
  position: absolute; z-index: 3;
  right: clamp(1.5rem, 7vw, 9rem); bottom: 14vh;
  max-width: 340px; text-align: left;
}
.stamp { color: var(--pink-hot); margin-bottom: 0.9rem; text-shadow: 0 0 10px rgba(255, 46, 158, 0.5); }
.sight-h {
  font-family: var(--anton); font-size: clamp(2.2rem, 4.6vw, 4rem);
  line-height: 0.95; margin-bottom: 1rem; color: var(--bone);
}
.sight-copy p { font-weight: 300; line-height: 1.75; color: var(--bone-dim); font-size: 0.98rem; }

/* TEE */
.tee { height: 280vh; }
.tee-pin {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3vh;
}
.tee-title {
  font-family: var(--anton);
  font-size: clamp(3rem, 9.5vw, 9rem);
  letter-spacing: 0.01em; line-height: 1; color: var(--bone);
  text-align: center;
}
.tee-title span { color: transparent; -webkit-text-stroke: 1.5px rgba(242, 237, 228, 0.5); }
.tee-stage {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(1.5rem, 5vw, 5rem);
  flex-wrap: wrap;
}
.tee-card {
  width: min(38vmin, 360px);
  border-radius: 14px; overflow: hidden;
  transform-style: preserve-3d;
  box-shadow:
    0 40px 90px rgba(0, 0, 0, 0.65),
    0 0 60px rgba(139, 47, 255, 0.22),
    0 0 120px rgba(255, 46, 158, 0.12);
  position: relative;
  will-change: transform;
}
.tee-card img { width: 100%; display: block; }
.tee-card-sheen {
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(242, 237, 228, 0.1) 48%, transparent 62%);
  transform: translateX(-120%);
  pointer-events: none;
}
.tee-stats { list-style: none; display: flex; flex-direction: column; gap: 1.5rem; }
.tee-stats li { display: flex; align-items: baseline; gap: 1rem; }
.stat-n { color: var(--pink); text-shadow: 0 0 10px rgba(255, 46, 158, 0.5); }
.stat-t {
  font-family: var(--anton); font-size: clamp(1rem, 1.9vw, 1.5rem);
  line-height: 1.1; letter-spacing: 0.03em; color: var(--bone);
}
.stat-t.big {
  font-size: clamp(3rem, 6vw, 5.2rem); color: var(--swamp);
  text-shadow: 0 0 18px rgba(61, 255, 138, 0.55), 0 0 60px rgba(61, 255, 138, 0.3);
}
.stat-price .stat-n { font-size: 1.4rem; color: var(--swamp); text-shadow: 0 0 10px rgba(61, 255, 138, 0.5); }

/* FABRIC / RAIN */
.fabric { height: 140vh; }
#rainCanvas {
  position: sticky; top: 0; width: 100vw; height: 100vh; display: block;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
}
/* the copy has to be pinned for the SAME window the canvas is pinned for.  Absolutely
   positioned at the section's top, it scrolled away under the header while the panel stayed:
   by 50% of the section the headline was cropped by the viewport top and sitting under the
   fixed mark. */
.fabric-copy {
  position: sticky; top: 0; margin-top: -100vh; height: 100vh; width: 100%;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end;
  padding: 0 clamp(1.5rem, 7vw, 9rem) 12vh;
  pointer-events: none;
}
.fabric-copy h2 {
  font-family: var(--anton); font-size: clamp(2.6rem, 7vw, 6.5rem);
  line-height: 0.95; color: var(--bone);
  text-shadow: 0 4px 40px rgba(4, 3, 8, 0.9);
}
.fabric-copy h2 em {
  font-style: normal; color: var(--pink-hot);
  text-shadow: 0 0 14px rgba(255, 46, 158, 0.8), 0 0 50px rgba(255, 46, 158, 0.5);
}
.fabric-copy p { margin-top: 1.2rem; color: var(--bone-dim); }

/* DROP
   The marquees used to sit inside a padded static section, which put them near the section's
   TOP: at the drop station they were cropped by the viewport edge and ran under the fixed
   header.  They are pinned and vertically centred now — the same device the sighting and tee
   sections already use — so the type is fully on screen for the whole section, at every
   aspect.  line-height 1.05 also clipped Anton's own ascenders once the velocity skew tilted
   the track; 1.16 with a little block padding holds the glyphs. */
.drop { height: 150vh; }
.drop-pin {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 7vh;
}
.marquee { white-space: nowrap; overflow: visible; width: 100%; }
.marquee .track {
  display: inline-block;
  font-family: var(--anton);
  font-size: clamp(3.4rem, 10vw, 10rem);
  line-height: 1.16;
  padding: 0.04em 0;
  will-change: transform;
}
.m1 .track { color: var(--bone); }
.m2 .track {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(139, 47, 255, 0.8);
  text-shadow: 0 0 30px rgba(139, 47, 255, 0.25);
}
.cup-note {
  display: flex; align-items: center; gap: 0.9rem; justify-content: center;
  color: var(--bone-dim);
  width: fit-content; margin: 0 auto;
  padding: 0.8rem 1.4rem; border-radius: 999px;
  background: rgba(8, 6, 13, 0.6);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(242, 237, 228, 0.08);
}
.cup-note em { color: var(--cup); font-style: normal; }
.cup-dot {
  width: 14px; height: 14px; border-radius: 3px;
  background: var(--cup);
  box-shadow: 0 0 14px rgba(226, 59, 59, 0.8), 0 0 40px rgba(226, 59, 59, 0.4);
}

/* CTA
   The section has to hold its own type at the very end of the document, where the scroll
   stops with the footer on screen: top padding clears the fixed header, bottom padding keeps
   the last line off the footer rule, and the section is tall enough that neither can be
   reached by the type. */
.cta {
  min-height: 96vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 7rem 1.5rem 4rem;
}
.cta-script {
  font-family: var(--script);
  font-size: clamp(2.2rem, 5.5vw, 4.4rem);
  color: var(--swamp);
  transform: rotate(-3deg);
  margin-bottom: -0.4em; position: relative; z-index: 2;
  text-shadow:
    0 0 8px rgba(61, 255, 138, 0.9),
    0 0 26px rgba(61, 255, 138, 0.6),
    0 0 80px rgba(61, 255, 138, 0.35);
}
.cta-title {
  font-family: var(--anton);
  font-size: clamp(3.4rem, 11vw, 11rem);
  line-height: 0.9; color: var(--bone);
  text-shadow: 0 0 80px rgba(139, 47, 255, 0.3);
}
.cta-domain {
  margin-top: 2.4rem; font-size: 0.95rem; letter-spacing: 0.3em;
  color: var(--pink-hot);
  text-shadow: 0 0 12px rgba(255, 46, 158, 0.6);
}
.cta-honest { margin-top: 1rem; font-weight: 300; color: var(--bone-dim); font-size: 0.9rem; }
/* the way home + the one contact route */
.cta-domain a, .cta-honest a, .foot a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
.cta-domain a:hover, .cta-honest a:hover, .foot a:hover { color: var(--bone, #f2ede4); }

/* FOOTER */
.foot {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: 2rem;
  border-top: 1px solid rgba(242, 237, 228, 0.08);
  color: var(--bone-dim);
}
.foot-dim { opacity: 0.5; }

/* ---------- responsive ---------- */
@media (max-width: 760px) {
  .sight-copy { right: 1.5rem; left: 1.5rem; bottom: 6vh; max-width: none; }
  .mascot-wrap { width: 62vmin; margin-top: -10vh; }
  .palms { width: 60vmin; }
  .tee-stage { gap: 1.6rem; }
  .tee-stats { flex-direction: row; flex-wrap: wrap; gap: 1rem 2rem; justify-content: center; }
  #cursorGlow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
  .cue-line { animation: none; }
}