/* =====================================================
   CocaineAutistTrader — fully psyoperated stylesheet
   ===================================================== */

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

html, body {
  font-family: 'Comic Neue', 'Comic Sans MS', system-ui, sans-serif;
  color: #fff;
  overflow-x: hidden;
  background: #000;
}

/* фон вынесен в отдельный фиксированный слой,
   чтобы hue-rotate не перерисовывал весь контент при скролле */
.bg-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url('assets/bg.png');
  background-size: cover;
  background-position: center;
  will-change: filter;
  animation: bg-trip 12s linear infinite;
}

@keyframes bg-trip {
  0%   { filter: hue-rotate(0deg)   saturate(1.4) contrast(1.05); }
  25%  { filter: hue-rotate(90deg)  saturate(1.7) contrast(1.1);  }
  50%  { filter: hue-rotate(180deg) saturate(2.0) contrast(1.15); }
  75%  { filter: hue-rotate(270deg) saturate(1.7) contrast(1.1);  }
  100% { filter: hue-rotate(360deg) saturate(1.4) contrast(1.05); }
}

/* ------- overlays ------- */

.trip-overlay {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,0,200,0.25), transparent 40%),
    radial-gradient(circle at 80% 60%, rgba(0,255,180,0.25), transparent 40%),
    radial-gradient(circle at 50% 80%, rgba(255,255,0,0.18), transparent 50%);
  opacity: .7;
  will-change: opacity, transform;
  animation: trip-pulse 6s ease-in-out infinite;
}

@keyframes trip-pulse {
  0%, 100% { opacity: .55; transform: scale(1); }
  50%      { opacity: .9;  transform: scale(1.04); }
}

.scanlines {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 2;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0.18) 0px,
    rgba(0,0,0,0.18) 1px,
    transparent 1px,
    transparent 3px
  );
  opacity: .5;
}

.noise {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 3;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 200px 200px;
  opacity: .08;
}

/* ------- floating words ------- */

.floating-words { position: fixed; inset: 0; pointer-events: none; z-index: 4; }

.floating-words span {
  position: absolute;
  left: var(--x); top: var(--y);
  transform: rotate(var(--r));
  font-family: 'Permanent Marker', cursive;
  font-size: clamp(20px, 3vw, 42px);
  color: #ff00d4;
  text-shadow:
    0 0 8px #fff,
    0 0 18px #00ffea,
    2px 2px 0 #000,
    -2px -2px 0 #fffb00;
  animation: word-bob 4s ease-in-out infinite, word-hue 6s linear infinite;
  animation-delay: var(--d);
  white-space: nowrap;
  letter-spacing: 2px;
}

@keyframes word-bob {
  0%, 100% { transform: rotate(var(--r)) translateY(0) scale(1); opacity: .85; }
  50%      { transform: rotate(calc(var(--r) * -1.3)) translateY(-14px) scale(1.08); opacity: 1; }
}
@keyframes word-hue { 0%{filter:hue-rotate(0)} 100%{filter:hue-rotate(360deg)} }

/* ------- HERO ------- */

.hero {
  position: relative;
  z-index: 10;
  min-height: 100vh;
  padding: 30px 20px 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
}

.socials { display: flex; gap: 14px; }
.socials .ico {
  width: 46px; height: 46px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #ff00aa, #00fff7);
  border: 3px solid #fff;
  box-shadow: 0 0 12px #ff00d4, inset 0 0 10px #fff;
  transition: transform .2s;
}
.socials .ico:hover { transform: scale(1.2) rotate(15deg); }
.socials .ico svg { width: 22px; height: 22px; fill: #000; }

/* logo */
.logo {
  font-family: 'Bungee Shade', 'Bungee Spice', cursive;
  font-size: clamp(48px, 11vw, 160px);
  line-height: .85;
  letter-spacing: 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
  margin-top: 6px;
}

.logo .word {
  display: inline-block;
  background: linear-gradient(90deg, #ff0080, #ffea00, #00ffae, #00d0ff, #c800ff, #ff0080);
  background-size: 400% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 3px #000;
  text-shadow:
    6px 6px 0 #000,
    8px 8px 0 #fff,
    10px 10px 30px rgba(255,0,200,.7);
  animation: rainbow-slide 4s linear infinite, wobble 3.4s ease-in-out infinite;
}
.logo .w1 { animation-delay: 0s,   0s; }
.logo .w2 { animation-delay: -1.2s, -.4s; transform: rotate(-2deg); }
.logo .w3 { animation-delay: -2.4s, -.8s; transform: rotate(1.5deg); }

@keyframes rainbow-slide {
  0%   { background-position: 0% 50%; }
  100% { background-position: 400% 50%; }
}
@keyframes wobble {
  0%,100% { transform: translate(0,0) rotate(0); }
  25%     { transform: translate(-4px,2px) rotate(-1.5deg); }
  50%     { transform: translate(3px,-3px) rotate(1.8deg); }
  75%     { transform: translate(-2px,3px) rotate(-1deg); }
}

/* tagline / glitch */
.tagline {
  font-family: 'Permanent Marker', cursive;
  font-size: clamp(16px, 2.4vw, 28px);
  color: #fffb00;
  text-shadow: 2px 2px 0 #ff00aa, -2px -2px 0 #00fff7;
  max-width: 800px;
}

.glitch {
  position: relative;
  display: inline-block;
}
.glitch::before, .glitch::after {
  content: attr(data-text);
  position: absolute; left: 0; top: 0;
  width: 100%; overflow: hidden;
}
.glitch::before {
  color: #ff0080;
  transform: translate(-3px, 0);
  clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
  animation: glitch1 2s infinite linear alternate-reverse;
}
.glitch::after {
  color: #00fff7;
  transform: translate(3px, 0);
  clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
  animation: glitch2 2.2s infinite linear alternate-reverse;
}
@keyframes glitch1 { 0%{transform:translate(-3px,0)} 20%{transform:translate(2px,-1px)} 40%{transform:translate(-4px,1px)} 60%{transform:translate(1px,2px)} 80%{transform:translate(-2px,-2px)} 100%{transform:translate(3px,1px)} }
@keyframes glitch2 { 0%{transform:translate(3px,0)} 25%{transform:translate(-2px,2px)} 50%{transform:translate(4px,-1px)} 75%{transform:translate(-3px,-2px)} 100%{transform:translate(2px,2px)} }

/* CA button */
.ca-btn {
  display: inline-block;
  padding: 16px 28px;
  background: linear-gradient(90deg, #ff00aa, #fffb00, #00ffae, #00d4ff, #ff00aa);
  background-size: 400% 100%;
  color: #000;
  font-family: 'Permanent Marker', cursive;
  font-size: clamp(14px, 1.8vw, 22px);
  border: 4px solid #fff;
  border-radius: 999px;
  box-shadow: 0 0 25px #ff00d4, 0 0 60px #00fff7, inset 0 0 12px #fff;
  text-decoration: none;
  letter-spacing: 1.5px;
  word-break: break-all;
  max-width: 92vw;
  animation: rainbow-slide 5s linear infinite, ca-shake 6s ease-in-out infinite;
  transition: transform .2s;
}
.ca-btn:hover { transform: scale(1.05) rotate(-2deg); }

@keyframes ca-shake {
  0%,100% { transform: rotate(-1deg); }
  50%     { transform: rotate(1deg); }
}

/* trader cat */
.trader-cat {
  width: clamp(220px, 32vw, 420px);
  height: auto;
  filter: drop-shadow(0 0 25px #ff00d4) drop-shadow(0 0 45px #00fff7);
}

.trader-cat.shake { animation: cat-shake 1.6s ease-in-out infinite, hue-cycle 7s linear infinite; }
.trader-cat.float { animation: cat-float 4.5s ease-in-out infinite, hue-cycle 9s linear infinite; }
.trader-cat.spin-slow { animation: cat-spin 12s linear infinite, hue-cycle 6s linear infinite; }

@keyframes cat-shake {
  0%,100% { transform: translate(0,0) rotate(-3deg) scale(1); }
  20%     { transform: translate(-6px,3px) rotate(2deg) scale(1.02); }
  40%     { transform: translate(8px,-4px) rotate(-2deg) scale(1.04); }
  60%     { transform: translate(-4px,4px) rotate(3deg) scale(1.02); }
  80%     { transform: translate(5px,-2px) rotate(-1deg) scale(1.03); }
}
@keyframes cat-float {
  0%,100% { transform: translateY(0) rotate(-2deg); }
  50%     { transform: translateY(-22px) rotate(2deg); }
}
@keyframes cat-spin {
  0%   { transform: rotate(0); }
  100% { transform: rotate(360deg); }
}
@keyframes hue-cycle { 0%{filter: drop-shadow(0 0 25px #ff00d4) drop-shadow(0 0 45px #00fff7) hue-rotate(0)} 100%{filter: drop-shadow(0 0 25px #ff00d4) drop-shadow(0 0 45px #00fff7) hue-rotate(360deg)} }

/* ------- STORY SECTIONS ------- */

.story {
  position: relative;
  z-index: 10;
  padding: 80px 24px;
}
.story.alt { background: rgba(0,0,0,0.35); }

.story-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 40px;
  align-items: center;
}
.story-grid.reverse { grid-template-columns: 1.2fr 1fr; }
.story-grid.reverse .story-img-wrap { order: 2; }
.story-grid.reverse .story-text     { order: 1; }

.story-img-wrap {
  position: relative;
  display: grid; place-items: center;
  min-height: 380px;
}
.story-img-wrap.small { min-height: 320px; }

.halo {
  position: absolute;
  width: 80%; aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #ff00d4, #fffb00, #00fff7, #c800ff, #ff00d4);
  filter: blur(40px);
  opacity: .55;
  animation: spin-slow 14s linear infinite;
  z-index: -1;
}
@keyframes spin-slow { to { transform: rotate(360deg); } }

.ring {
  position: absolute;
  border-radius: 50%;
  border: 4px dashed #fffb00;
  animation: spin-slow 10s linear infinite;
}
.ring.r1 { width: 70%;  aspect-ratio:1; border-color: #ff00d4; }
.ring.r2 { width: 90%;  aspect-ratio:1; border-color: #00fff7; animation-direction: reverse; animation-duration: 14s; }
.ring.r3 { width: 110%; aspect-ratio:1; border-color: #fffb00; animation-duration: 18s; border-style: dotted; }

.story-text h2 {
  font-family: 'Rubik Wet Paint', 'Permanent Marker', cursive;
  font-size: clamp(20px, 2.8vw, 38px);
  line-height: 1.25;
  margin-bottom: 24px;
}

.warp {
  color: #fff;
  text-shadow:
    3px 3px 0 #ff00aa,
    -3px -3px 0 #00fff7,
    0 0 18px #fffb00;
  animation: warp 3s ease-in-out infinite;
}
@keyframes warp {
  0%,100% { transform: skew(0,0); letter-spacing: 0; }
  50%     { transform: skew(-2deg, 1deg); letter-spacing: 1px; }
}

.rainbow {
  background: linear-gradient(90deg, #ff0080, #ff8a00, #fffb00, #00ffae, #00d4ff, #c800ff, #ff0080);
  background-size: 400% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1.5px #000;
  animation: rainbow-slide 4s linear infinite;
}

.cta {
  display: inline-block;
  padding: 16px 30px;
  font-family: 'Bungee Shade', cursive;
  font-size: clamp(16px, 2vw, 26px);
  color: #000;
  background: linear-gradient(90deg, #fffb00, #00ffae);
  border: 4px solid #fff;
  border-radius: 16px;
  text-decoration: none;
  letter-spacing: 2px;
  box-shadow: 0 0 18px #fffb00, 0 0 40px #00fff7, 8px 8px 0 #000;
  transition: transform .2s, box-shadow .2s;
}
.cta:hover {
  transform: translate(-4px,-4px) rotate(-2deg);
  box-shadow: 0 0 25px #fff, 12px 12px 0 #000;
}
.cta.pink {
  background: linear-gradient(90deg, #ff00aa, #c800ff);
  color: #fff;
  text-shadow: 2px 2px 0 #000;
}

/* ------- HOW TO BUY ------- */

.how-to-buy {
  position: relative;
  z-index: 10;
  padding: 80px 24px;
}

.big-title {
  font-family: 'Rubik Glitch', 'Bungee Shade', cursive;
  text-align: center;
  font-size: clamp(40px, 7vw, 96px);
  margin-bottom: 50px;
  background: linear-gradient(90deg, #00fff7, #fffb00, #ff00aa, #c800ff, #00fff7);
  background-size: 400% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 2px #000;
  text-shadow: 6px 6px 0 #000, 9px 9px 30px #ff00d4;
  animation: rainbow-slide 4s linear infinite, wobble 4s ease-in-out infinite;
}

.steps {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  gap: 28px;
}

.step {
  position: relative;
  padding: 24px 28px 28px;
  border: 4px solid #fff;
  border-radius: 22px;
  background: rgba(0,0,0,0.65);
  font-family: 'Comic Neue', sans-serif;
  font-weight: 700;
  font-size: clamp(15px, 1.5vw, 19px);
  color: #fff;
  box-shadow: 8px 8px 0 #000, 0 0 24px rgba(255,0,212,.4);
  transition: transform .25s ease, box-shadow .25s ease;
}
.step:hover {
  transform: translate(-6px,-6px) rotate(-1deg);
  box-shadow: 14px 14px 0 #000, 0 0 40px #fffb00;
}
.step span {
  display: block;
  font-family: 'Bungee Spice', 'Bungee Shade', cursive;
  font-size: clamp(20px, 2.4vw, 32px);
  margin-bottom: 8px;
  letter-spacing: 1px;
  text-shadow: 3px 3px 0 #000;
}

.step.s1 { border-color: #ff00aa; }
.step.s2 { border-color: #00fff7; }
.step.s3 { border-color: #fffb00; }
.step.s4 { border-color: #00ffae; }

/* ------- MARQUEE ------- */

.marquee-section {
  position: relative;
  z-index: 10;
  background: #000;
  border-top: 4px solid #ff00d4;
  border-bottom: 4px solid #00fff7;
  overflow: hidden;
  padding: 18px 0;
}
.marquee {
  display: flex;
  gap: 50px;
  white-space: nowrap;
  animation: marquee 22s linear infinite;
}
.marquee span {
  font-family: 'Bungee Shade', cursive;
  font-size: clamp(22px, 3vw, 40px);
  background: linear-gradient(90deg, #ff00aa, #fffb00, #00fff7, #c800ff, #ff00aa);
  background-size: 400% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rainbow-slide 4s linear infinite;
}
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ------- FOOTER ------- */

.foot {
  position: relative;
  z-index: 10;
  padding: 60px 24px 80px;
  text-align: center;
}
.foot-title {
  font-family: 'Bungee Shade', cursive;
  font-size: clamp(28px, 5vw, 60px);
  background: linear-gradient(90deg, #ff00aa, #fffb00, #00fff7);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1.5px #000;
  animation: rainbow-slide 4s linear infinite;
  margin-bottom: 14px;
}
.disclaimer {
  font-family: 'Permanent Marker', cursive;
  color: #fff;
  text-shadow: 2px 2px 0 #ff00aa;
  font-size: clamp(13px, 1.4vw, 18px);
  opacity: .9;
}

/* ------- responsive ------- */

@media (max-width: 800px) {
  .story-grid, .story-grid.reverse {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .story-grid.reverse .story-img-wrap { order: 1; }
  .story-grid.reverse .story-text     { order: 2; }
  .story-img-wrap { min-height: 320px; }
  .floating-words span { font-size: 18px; }
  .logo { font-size: clamp(40px, 14vw, 90px); }
}