/* ════════════════════════════════════════════════════════════════
   snailgrimace 🐌😬 — a vanity domain
   Theme: Grimace-purple × snail-slime-lime × iridescent pearl
   ════════════════════════════════════════════════════════════════ */

/* animatable custom props (for the holographic sweep & card tilt) */
@property --holo-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

:root {
  --void:      #0a0512;
  --void-2:    #140a22;
  --grimace:   #8b5cf6;   /* violet  */
  --grimace-2: #c026d3;   /* fuchsia */
  --slime:     #a3ff12;   /* lime    */
  --slime-2:   #1fe0a0;   /* spring  */
  --pearl:     #22d3ee;   /* cyan    */
  --cream:     #f3eeff;
  --muted:     #9a8fb8;

  --maxw: 1080px;
  --ease: cubic-bezier(.22, 1, .36, 1);

  --pointer-x: 50vw;
  --pointer-y: 50vh;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: "Space Grotesk", system-ui, sans-serif;
  background: var(--void);
  color: var(--cream);
  line-height: 1.5;
  overflow-x: hidden;
  min-height: 100svh;
  position: relative;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.defs { position: absolute; }

/* ─────────────────────────────────────────  LIVING BACKGROUND  ── */
.bg {
  position: fixed;
  inset: -10vmax;
  z-index: -3;
  background:
    radial-gradient(120% 90% at 80% -10%, var(--void-2), transparent 60%),
    radial-gradient(120% 90% at 0% 110%, #0d0820, transparent 55%),
    var(--void);
  overflow: hidden;
}

/* gooey metaballs */
.goo {
  position: absolute;
  inset: 0;
  filter: url(#goo);
  opacity: .85;
}
.blob {
  position: absolute;
  width: 46vmax;
  height: 46vmax;
  border-radius: 50%;
  mix-blend-mode: screen;
  will-change: transform;
}
.b1 { background: radial-gradient(circle at 30% 30%, var(--grimace), transparent 65%);   top: -8%;  left: -6%;  animation: drift1 22s var(--ease) infinite; }
.b2 { background: radial-gradient(circle at 30% 30%, var(--slime),   transparent 62%);   top: 30%;  left: 55%;  animation: drift2 28s var(--ease) infinite; }
.b3 { background: radial-gradient(circle at 30% 30%, var(--grimace-2), transparent 64%); top: 55%;  left: 5%;   animation: drift3 25s var(--ease) infinite; }
.b4 { background: radial-gradient(circle at 30% 30%, var(--pearl),    transparent 66%);  top: -12%; left: 60%;  animation: drift4 31s var(--ease) infinite; }
.b5 { background: radial-gradient(circle at 30% 30%, var(--slime-2),  transparent 64%);  top: 60%;  left: 60%;  animation: drift2 26s var(--ease) infinite reverse; }

@keyframes drift1 { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(18vw,12vh) scale(1.25); } 66% { transform: translate(8vw,28vh) scale(.85); } }
@keyframes drift2 { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(-22vw,10vh) scale(.8); } 66% { transform: translate(-6vw,-14vh) scale(1.3); } }
@keyframes drift3 { 0%,100% { transform: translate(0,0) scale(1.1); } 50% { transform: translate(26vw,-16vh) scale(.75); } }
@keyframes drift4 { 0%,100% { transform: translate(0,0) scale(.9); } 50% { transform: translate(-24vw,22vh) scale(1.2); } }

/* film grain */
.grain {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: .055;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.vignette {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(120% 120% at 50% 40%, transparent 55%, rgba(5,2,12,.7));
}

/* ─────────────────────────────────────────────────  TOPBAR  ──── */
.topbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.6rem clamp(1.2rem, 5vw, 3.5rem);
  flex-wrap: wrap;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: "Unbounded", sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -.02em;
  color: var(--cream);
  text-decoration: none;
}
.wm-text { background: linear-gradient(90deg, var(--slime), var(--pearl), var(--grimace)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wm-emoji { font-size: 1.3rem; filter: drop-shadow(0 0 12px rgba(163,255,18,.45)); }
.topbar-note {
  font-size: .72rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ───────────────────────────────────────────────────  HERO  ──── */
main { position: relative; z-index: 1; }

.hero {
  min-height: 84svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem clamp(1.2rem, 5vw, 3.5rem) 1rem;
}

.eyebrow {
  font-size: clamp(.8rem, 2.4vw, 1rem);
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.2rem;
}

.title {
  font-family: "Unbounded", sans-serif;
  font-weight: 900;
  font-size: clamp(3.2rem, 16vw, 11rem);
  line-height: .92;
  letter-spacing: -.04em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1em;
}
.title .line { display: inline-flex; align-items: center; gap: .18em; }
.amp {
  font-size: .5em;
  font-weight: 400;
  color: var(--muted);
  -webkit-text-stroke: 1px rgba(255,255,255,.18);
}

/* holographic, self-shimmering text */
.holo {
  position: relative;
  background: linear-gradient(
    var(--holo-angle),
    var(--pearl), var(--slime), var(--cream), var(--grimace-2), var(--grimace), var(--pearl)
  );
  background-size: 220% 220%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: holo-spin 8s linear infinite, holo-shift 7s ease-in-out infinite;
  filter: drop-shadow(0 6px 30px rgba(139,92,246,.35));
}
.holo-2 { animation-delay: -3.5s, -2s; }
/* ghost echo behind for depth */
.holo::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  z-index: -1;
  background: inherit;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: blur(18px);
  opacity: .6;
}
@keyframes holo-spin  { to { --holo-angle: 360deg; } }
@keyframes holo-shift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

.title-emoji {
  font-size: .58em;
  display: inline-block;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,.5));
}
.float-slow { animation: bob 6s ease-in-out infinite; }
.float-fast { animation: bob 4.2s ease-in-out infinite .4s; }
@keyframes bob {
  0%,100% { transform: translateY(0) rotate(-4deg); }
  50%     { transform: translateY(-16px) rotate(5deg); }
}

.tagline {
  max-width: 30ch;
  margin: 1.8rem auto 0;
  font-size: clamp(1rem, 2.6vw, 1.35rem);
  font-weight: 300;
  color: #cfc4e8;
}

/* snail trail */
.snail-track {
  width: 100%;
  max-width: 760px;
  margin: 1.4rem auto 0;
}
.snail-svg { width: 100%; height: auto; overflow: visible; }
.trail { filter: drop-shadow(0 0 6px rgba(163,255,18,.5)); }
.trail-glow { opacity: .25; filter: blur(9px); }
.snail-rider { filter: drop-shadow(0 6px 10px rgba(0,0,0,.45)); }

.scrollcue {
  margin-top: 1.6rem;
  font-size: .75rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--muted);
}
.cue-arrow { display: inline-block; animation: bounce 1.8s ease-in-out infinite; }
@keyframes bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* ────────────────────────────────────  SECTION HEADINGS  ─────── */
.section-head { text-align: center; margin-bottom: 2.6rem; }
.section-head h2 {
  font-family: "Unbounded", sans-serif;
  font-weight: 800;
  font-size: clamp(1.8rem, 6vw, 3.2rem);
  letter-spacing: -.03em;
  background: linear-gradient(100deg, var(--cream), var(--slime), var(--pearl));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.section-head p { color: var(--muted); letter-spacing: .12em; margin-top: .4rem; font-size: .95rem; }

/* ───────────────────────────────────────────────  PROJECTS  ─── */
.projects, .who {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(3rem, 9vw, 7rem) clamp(1.2rem, 5vw, 3.5rem);
}

.portals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.4rem;
  perspective: 1100px;
}

.portal {
  --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  min-height: 230px;
  padding: 1.7rem;
  border-radius: 22px;
  text-decoration: none;
  color: var(--cream);
  background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  overflow: hidden;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform .25s var(--ease), border-color .3s, box-shadow .3s;
  box-shadow: 0 20px 50px -30px rgba(0,0,0,.9);
}
/* iridescent rim that lights up on hover */
.portal::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg, var(--accent), transparent 40%, transparent 60%, var(--accent2));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .5;
  transition: opacity .3s;
}
.portal:hover, .portal:focus-visible {
  border-color: transparent;
  box-shadow: 0 30px 70px -34px var(--accent), 0 0 0 1px rgba(255,255,255,.08) inset;
  outline: none;
}
.portal:hover::before, .portal:focus-visible::before { opacity: 1; }

/* sheen follows the pointer */
.sheen {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(255,255,255,.16), transparent 45%);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
.portal:hover .sheen { opacity: 1; }

.portal-tag {
  align-self: flex-start;
  font-size: .65rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  padding: .3rem .7rem;
  border-radius: 999px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
.portal-name {
  font-family: "Unbounded", sans-serif;
  font-weight: 700;
  font-size: clamp(1.3rem, 3.2vw, 1.9rem);
  letter-spacing: -.02em;
  margin-top: auto;
  line-height: 1.05;
}
.portal-sub { color: var(--muted); font-size: .9rem; }
.portal-go {
  font-weight: 500;
  font-size: .9rem;
  color: var(--accent);
  transition: transform .25s var(--ease);
}
.portal:hover .portal-go { transform: translateX(6px); }

.portal--soon { cursor: default; opacity: .82; }
.portal--soon .portal-name { background: linear-gradient(90deg, var(--muted), #cbd5e1); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ───────────────────────────────────────────────  WHO'S WHO  ── */
.people {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.person {
  flex: 1 1 280px;
  max-width: 420px;
  text-align: center;
  padding: 2.4rem 1.6rem;
  border-radius: 26px;
  background: radial-gradient(120% 120% at 50% 0%, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border: 1px solid rgba(255,255,255,.08);
}
.person-emoji {
  font-size: clamp(3.5rem, 12vw, 5.5rem);
  display: inline-block;
  filter: drop-shadow(0 12px 30px rgba(0,0,0,.5));
}
.wiggle  { animation: wiggle 7s ease-in-out infinite; }
.shudder { animation: shudder 5s ease-in-out infinite; }
@keyframes wiggle  { 0%,100% { transform: translateX(0) rotate(-3deg); } 50% { transform: translateX(10px) rotate(3deg); } }
@keyframes shudder { 0%,92%,100% { transform: translate(0,0) rotate(0); } 94% { transform: translate(-2px,1px) rotate(-2deg); } 96% { transform: translate(2px,-1px) rotate(2deg); } 98% { transform: translate(-1px,0) rotate(-1deg); } }

.person h3 {
  font-family: "Unbounded", sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
  margin-top: .8rem;
  letter-spacing: -.02em;
}
.person-name { color: var(--slime); font-weight: 500; letter-spacing: .05em; margin-top: .1rem; }
.person-bio  { color: #cfc4e8; font-weight: 300; margin-top: .7rem; max-width: 28ch; margin-inline: auto; }
.person-x {
  align-self: center;
  font-family: "Unbounded", sans-serif;
  font-size: 2rem;
  color: var(--muted);
}

/* ────────────────────────────────────────────────  FOOTER  ──── */
.footer {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 3rem 1.2rem 3.5rem;
  border-top: 1px solid rgba(255,255,255,.06);
}
.foot-mark {
  display: block;
  font-family: "Unbounded", sans-serif;
  font-weight: 700;
  letter-spacing: .04em;
}
.foot-line { display: block; margin-top: .5rem; color: var(--muted); font-size: .82rem; letter-spacing: .1em; }

/* ──────────────────────────────────────────  CURSOR SLIME  ──── */
.slime-drop {
  position: fixed;
  z-index: 40;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at 35% 30%, #ffffff, var(--slime) 45%, var(--slime-2) 80%);
  mix-blend-mode: screen;
  animation: slime-fade .9s var(--ease) forwards;
}
@keyframes slime-fade {
  0%   { transform: scale(1);   opacity: .9; }
  100% { transform: scale(.2);  opacity: 0; }
}

/* ────────────────────────────────────────  REVEAL ON SCROLL  ── */
[data-reveal] {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
[data-reveal].in { opacity: 1; transform: none; }

/* ───────────────────────────────────────────  RESPONSIVE  ───── */
@media (max-width: 560px) {
  .title { font-size: clamp(2.6rem, 13.5vw, 4rem); }
  .title .line { gap: .08em; }
  .title-emoji { font-size: .5em; }
  .amp { font-size: .42em; }
  .tagline { font-size: 1.05rem; }
  .topbar-note { display: none; }
  .people { gap: .6rem; }
  .person-x { transform: rotate(90deg); }
}

/* ───────────────────────────────────────  REDUCED MOTION  ───── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .holo { background-position: 0 50%; }
}