/* ==========================================================================
   ZACK SCHMID DOT COM — loud maximalist styles
   ========================================================================== */

:root {
  --bg-0:        #06001a;
  --bg-1:        #10003a;
  --hot-pink:    #ffac2f;
  --electric:    #7cf9ff;
  --gold:        #ffd93d;
  --lime:        #b6ff3d;
  --slop-bg:     #1a0033;
  --slop-bg-alt: #22083f;
  --slop-ink:    #f4ecff;
  --slop-muted:  #c6b3e8;
  --slop-line:   rgba(255, 47, 214, .35);
  --title-size:  clamp(3rem, 11vw, 8rem);
  --shadow-glow: 0 0 24px rgba(255, 206, 47, 0.8), 0 0 60px rgba(124, 249, 255, .6);
  --font-loud:   'Bungee', 'Impact', system-ui, sans-serif;
  --font-shade:  'Bungee Shade', 'Impact', system-ui, sans-serif;
  --font-retro:  'Press Start 2P', 'Impact', monospace;
  --font-body:   'Segoe UI', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--bg-0);
  color: var(--slop-ink);
  font-family: var(--font-body);
  overflow-x: hidden;
}

/* Page background: animated conic aurora */
body::before {
  content: "";
  position: fixed;
  inset: -10vmax;
  background:
    radial-gradient(60vmax 60vmax at 20% 10%, rgba(255, 47, 214, .35), transparent 60%),
    radial-gradient(50vmax 50vmax at 80% 90%, rgba(124, 249, 255, .30), transparent 60%),
    radial-gradient(40vmax 40vmax at 50% 50%, rgba(182, 255, 61, .18), transparent 60%),
    var(--bg-1);
  filter: blur(20px) saturate(140%);
  z-index: -1;
  animation: drift 20s ease-in-out infinite alternate;
}

@keyframes drift {
  from { transform: rotate(-2deg) scale(1); }
  to   { transform: rotate(2deg) scale(1.05); }
}

/* ==========================================================================
   PAGE (revealed after intro)
   ========================================================================== */

.page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 3rem 1.5rem 4rem;
  opacity: 0;
  transition: opacity .8s ease;
}

.page.page--visible { opacity: 1; }

.page-header {
  text-align: center;
  padding: 2rem 0 1rem;
}

.page-title {
  font-family: var(--font-loud);
  font-size: var(--title-size);
  margin: 0;
  letter-spacing: .04em;
  line-height: .95;
  text-transform: uppercase;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .25em;
  color: #fff;
  text-shadow: var(--shadow-glow);
}

.title-word {
  display: inline-block;
  background: linear-gradient(180deg, #fff 0%, var(--gold) 45%, var(--hot-pink) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 2px rgba(0, 0, 0, .35);
  animation: title-pulse 3.5s ease-in-out infinite;
}

.title-word:nth-child(2) { animation-delay: .3s; }
.title-word:nth-child(3) { animation-delay: .6s; }
.title-word:nth-child(4) { animation-delay: .9s; }

.title-word--dot {
  font-family: var(--font-shade);
  color: var(--electric);
  -webkit-text-stroke: 0;
  background: none;
  text-shadow: 0 0 20px var(--electric);
}

@keyframes title-pulse {
  0%, 100% { transform: translateY(0) rotate(-1deg) scale(1); }
  50%      { transform: translateY(-6px) rotate(1deg) scale(1.03); }
}

.tagline {
  font-family: var(--font-retro);
  font-size: clamp(.7rem, 1.5vw, 1rem);
  color: var(--slop-muted);
  margin: 1.5rem 0 0;
  letter-spacing: .2em;
}

.tagline em {
  color: var(--lime);
  font-style: normal;
  text-shadow: 0 0 12px var(--lime);
}

/* ==========================================================================
   AI SLOP TABLE
   ========================================================================== */

.slop-section { margin-top: 4rem; }

.slop-title {
  font-family: var(--font-loud);
  font-size: clamp(2rem, 6vw, 3.5rem);
  text-align: center;
  margin: 0 0 1.5rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  text-shadow:
    0 0 8px  var(--gold),
    0 0 24px var(--hot-pink),
    0 0 48px var(--electric);
  animation: rainbow 6s linear infinite;
}

@keyframes rainbow {
  0%, 100% { filter: hue-rotate(0deg); }
  50%      { filter: hue-rotate(180deg); }
}

.slop-title-sparkle {
  display: inline-block;
  animation: sparkle 1.5s ease-in-out infinite;
}
.slop-title-sparkle:last-child { animation-delay: .75s; }

@keyframes sparkle {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
  50%      { transform: scale(1.3) rotate(180deg); opacity: .7; }
}

.slop-desc {
  margin: 0 auto 2rem;
  max-width: 760px;
  text-align: center;
  font-family: var(--font-loud);
  font-size: clamp(1.1rem, 2.4vw, 1.6rem);
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 1.1rem 1.4rem;
  border-radius: 999px;
  background-size: 300% 100%;
  color: #fff;
  
  border: 4px dashed #ffff00;
  box-shadow:
    0 0 0 4px #ff0000,
    0 0 30px rgba(255, 0, 0, .8),
    inset 0 0 30px rgba(255, 255, 0, .4);
  animation:
    slop-desc-blaze 10s linear infinite,
    slop-desc-wiggle 1.2s ease-in-out infinite,
    slop-desc-blink .6s steps(2, end) infinite;
}

@keyframes slop-desc-blaze {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

@keyframes slop-desc-wiggle {
  0%, 100% { transform: rotate(-1.5deg) scale(1); }
  50%      { transform: rotate(1.5deg) scale(1.04); }
}

@keyframes slop-desc-blink {
  0% { box-shadow: 0 0 0 4px #ff0000, 0 0 30px rgba(255, 0, 0, .8), inset 0 0 30px rgba(255, 255, 0, .4); }
  100% { box-shadow: 0 0 0 4px #00ffff, 0 0 60px rgba(0, 255, 255, .9), inset 0 0 30px rgba(255, 0, 0, .5); }
}

.slop-desc-text {
  display: inline-block;
  padding: 0 .5rem;
  background: linear-gradient(90deg, #fff 0%, #ff2fd6 25%, #ffd93d 50%, #7cf9ff 75%, #b6ff3d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: slop-desc-rainbow-text 4s linear infinite;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, .6));
}

@keyframes slop-desc-rainbow-text {
  0%   { filter: hue-rotate(0deg)   drop-shadow(0 0 6px rgba(255, 255, 255, .6)); }
  100% { filter: hue-rotate(360deg) drop-shadow(0 0 6px rgba(255, 255, 255, .6)); }
}

.slop-desc-marquee {
  display: inline-block;
  font-size: 1.3em;
  filter: drop-shadow(0 0 8px #ff6a00);
  animation: slop-desc-fire 0.6s ease-in-out infinite;
  vertical-align: middle;
}
.slop-desc-marquee:last-child { animation-delay: .3s; }

@keyframes slop-desc-fire {
  0%, 100% { transform: translateY(0)   scale(1);    opacity: 1;  }
  50%      { transform: translateY(-4px) scale(1.25); opacity: .9; }
}

@media (prefers-reduced-motion: reduce) {
  .slop-desc,
  .slop-desc-text,
  .slop-desc-marquee {
    animation: none;
  }
}

.slop-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: rgba(26, 0, 51, .6);
  border: 2px solid var(--slop-line);
  border-radius: 18px;
  overflow: hidden;
  backdrop-filter: blur(8px);
  box-shadow:
    0 0 0 1px rgba(124, 249, 255, .15),
    0 20px 60px rgba(0, 0, 0, .5),
    inset 0 0 60px rgba(255, 47, 214, .05);
}

.slop-table thead th {
  font-family: var(--font-loud);
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: .15em;
  padding: 1rem 1.25rem;
  text-align: left;
  color: #1a0033;
  background: linear-gradient(90deg, var(--gold), var(--hot-pink), var(--electric));
  background-size: 300% 100%;
  animation: header-slide 8s linear infinite;
  border-bottom: 2px solid rgba(0, 0, 0, .3);
}

@keyframes header-slide {
  from { background-position: 0% 50%; }
  to   { background-position: 300% 50%; }
}

.slop-row { transition: background .25s ease; }

.slop-row:nth-child(even) {
  background: rgba(255, 255, 255, .025);
}

.slop-row:hover {
  background: linear-gradient(90deg,
    rgba(255, 47, 214, .18),
    rgba(124, 249, 255, .12),
    rgba(255, 217, 61, .18));
}

.slop-table td {
  padding: 1.25rem;
  border-bottom: 1px solid var(--slop-line);
  vertical-align: top;
}

.slop-table tbody tr:last-child td { border-bottom: 0; }

.col-thing { width: 38%; }
.col-desc  { width: 62%; }

/* Thing (image + caption) */
.thing-link {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 14px;
  outline: none;
}

.thing-link:focus-visible {
  box-shadow: 0 0 0 3px var(--electric), 0 0 32px var(--electric);
}

.thing {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.thing-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 10px;
  border: 2px solid rgba(255, 255, 255, .15);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
  background: #0a0120;
  transition: transform .3s ease, box-shadow .3s ease, filter .3s ease;
}

.thing-link:hover .thing-img {
  transform: translateY(-4px) scale(1.03) rotate(-1deg);
  box-shadow: 0 12px 40px rgba(255, 47, 214, .55);
  filter: saturate(130%) contrast(110%);
}

.thing-link:hover .thing-caption { color: var(--lime); }

.thing-caption {
  font-family: var(--font-loud);
  font-size: .95rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--electric);
  text-shadow: 0 0 10px rgba(124, 249, 255, .5);
}

/* Description column */
.desc-title {
  font-family: var(--font-loud);
  font-size: 1.3rem;
  margin: 0 0 .5rem;
  color: var(--gold);
  letter-spacing: .05em;
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(255, 217, 61, .5);
}

.desc-body {
  margin: 0;
  line-height: 1.6;
  color: var(--slop-muted);
}

/* Footer */
.page-footer {
  margin-top: 4rem;
  text-align: center;
  font-family: var(--font-retro);
  font-size: .7rem;
  letter-spacing: .15em;
  color: var(--slop-muted);
  opacity: .7;
}


/* ==========================================================================
   INTRO OVERLAY
   ========================================================================== */

.intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #000;
  cursor: pointer;
  transition: opacity .9s ease, visibility .9s;
}

.intro.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.intro-bg { position: absolute; inset: 0; }

.intro-rays {
  position: absolute;
  inset: -100%;
  background: repeating-conic-gradient(
    from 0deg at 50% 50%,
    rgba(0, 149, 248, 0.226) 0deg 7deg,
    rgba(26, 25, 25, 0.3) 7deg 14deg
  );
  mask-image: radial-gradient(circle at 50% 50%, black 4%, rgba(0, 0, 0, .95) 14%, transparent 42%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, black 4%, rgba(0, 0, 0, .95) 14%, transparent 42%);
  animation: rays 18s linear infinite;
  opacity: .85;
  mix-blend-mode: screen;
  will-change: transform;
}

@keyframes rays {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.intro-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(124, 249, 255, .25) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 47, 214, .25) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(circle at center, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(circle at center, black 30%, transparent 75%);
  animation: grid-move 2s linear infinite;
}

@keyframes grid-move {
  to { background-position: 60px 60px, 60px 60px; }
}

.intro-stage {
  position: relative;
  z-index: 2;
  text-align: center;
  perspective: 1000px;
}

.intro-word {
  font-family: var(--font-loud);
  text-transform: uppercase;
  color: #fff;
  opacity: 0;
  transform: scale(.2);
  will-change: opacity, transform;
}

.intro-word--welcome {
  font-size: clamp(4rem, 18vw, 14rem);
  letter-spacing: .1em;
  background: linear-gradient(90deg, var(--gold), var(--hot-pink), var(--electric));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 60px rgba(255, 47, 214, .8);
  -webkit-text-stroke: 3px rgba(0, 0, 0, .3);
}

.intro-word--to {
  font-family: var(--font-retro);
  font-size: clamp(3rem, 10vw, 8rem);
  color: var(--lime);
  text-shadow: 0 0 30px var(--lime), 0 0 60px var(--lime);
  margin: 0 auto;
}

.intro-word--zack {
  display: flex;
  flex-direction: column;
  font-family: var(--font-loud);
  font-size: clamp(2.5rem, 8vw, 7rem);
  letter-spacing: .12em;
  color: #fff;
  text-shadow:
    0 0 20px var(--electric),
    0 0 40px var(--hot-pink),
    0 0 80px var(--gold);
}

.zack-line--dot {
  font-family: var(--font-shade);
  color: var(--gold);
  -webkit-text-stroke: 0;
  text-shadow: 0 0 30px var(--gold);
}

/* word "in" animation */
.intro-word.play-in {
  animation: word-in .9s cubic-bezier(.2, 1.6, .4, 1) forwards;
}

@keyframes word-in {
  0%   { opacity: 0; transform: scale(.1) rotate(-20deg) translateY(60px); filter: blur(30px); }
  60%  { opacity: 1; transform: scale(1.2) rotate(6deg)  translateY(0);    filter: blur(0); }
  100% { opacity: 1; transform: scale(1)   rotate(0deg)  translateY(0); }
}

/* word "out" animation */
.intro-word.play-out {
  animation: word-out .45s cubic-bezier(.5, -.3, .7, .2) forwards;
}

@keyframes word-out {
  to { opacity: 0; transform: scale(3) rotate(20deg); filter: blur(20px); }
}

.intro--shake { animation: shake .35s ease-in-out; }

@keyframes shake {
  0%, 100% { transform: translate(0, 0); }
  20%      { transform: translate(-14px, 6px); }
  40%      { transform: translate(14px, -6px); }
  60%      { transform: translate(-10px, -8px); }
  80%      { transform: translate(10px, 8px); }
}

/* Explosion canvas */
.explosion {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: block;
}

/* Skip button */
.intro-skip {
  position: absolute;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 5;
  background: rgba(0, 0, 0, .5);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 999px;
  padding: .4rem 1rem;
  font-family: var(--font-body);
  font-size: .85rem;
  letter-spacing: .1em;
  cursor: pointer;
  opacity: .6;
  transition: opacity .2s, background .2s;
}
.intro-skip:hover { opacity: 1; background: rgba(0, 0, 0, .8); }

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  .title-word, .slop-title, .intro-rays, .intro-grid, .slop-table thead th,
  .slop-title-sparkle { animation: none !important; }
  .intro-word.play-in,
  .intro-word.play-out { animation-duration: .01s !important; }
  .intro--shake { animation: none !important; }
}

/* Small screens: stack the table */
@media (max-width: 700px) {
  .slop-table thead { display: none; }
  .slop-table, .slop-table tbody, .slop-table tr, .slop-table td { display: block; width: 100%; }
  .slop-table tr { padding: 1rem 0; border-bottom: 1px solid var(--slop-line); }
  .slop-table td.col-thing { padding-bottom: 0; }
  .slop-table td.col-desc  { padding-top: .75rem; }
}