/* ============================================================
   PSYTEN — psychedelic single-page experience
   ============================================================ */

:root {
  --bg: #0c0020;
  --ink: #fbe9ff;
  --magenta: #ff2d95;
  --cyan: #22e1ff;
  --lime: #b6ff3c;
  --orange: #ff8a1e;
  --violet: #8a2be2;
  --hot: #ff007a;

  --display: "Shrikhand", "Georgia", serif;
  --logo: "Monoton", "Shrikhand", cursive;
  --body: "Space Grotesk", system-ui, sans-serif;

  --maxw: 1180px;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--body);
  color: var(--ink);
  background: var(--bg);
  overflow-x: hidden;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body.trip { --trip: 1; }

::selection { background: var(--lime); color: #000; }

a { color: inherit; text-decoration: none; }

/* ---------- Aurora animated background ---------- */
.aurora {
  position: fixed; inset: -30%; z-index: -3;
  background:
    radial-gradient(45% 50% at 20% 25%, var(--violet), transparent 60%),
    radial-gradient(40% 45% at 80% 20%, var(--magenta), transparent 60%),
    radial-gradient(50% 55% at 75% 75%, var(--cyan), transparent 60%),
    radial-gradient(45% 50% at 25% 80%, var(--orange), transparent 60%),
    radial-gradient(60% 60% at 50% 50%, var(--hot), transparent 70%);
  filter: blur(40px) saturate(140%);
  animation: swirl 24s linear infinite;
  opacity: .55;
}
@keyframes swirl {
  0%   { transform: rotate(0deg) scale(1.1); }
  50%  { transform: rotate(180deg) scale(1.35); }
  100% { transform: rotate(360deg) scale(1.1); }
}
body.trip .aurora { animation-duration: 7s; opacity: .8; filter: blur(30px) saturate(200%) hue-rotate(90deg); }

/* film grain */
.grain {
  position: fixed; inset: 0; z-index: -2; pointer-events: none; opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Gooey liquid blobs ---------- */
.goo-layer {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  filter: url(#goo) blur(2px);
  mix-blend-mode: screen; opacity: .9;
}
.blob {
  position: absolute; border-radius: 50%;
  width: 42vmin; height: 42vmin; filter: blur(6px);
}
.blob-1 { background: var(--magenta); left: 8%;  top: 12%; animation: float1 18s ease-in-out infinite; }
.blob-2 { background: var(--cyan);    right: 6%; top: 30%; animation: float2 22s ease-in-out infinite; }
.blob-3 { background: var(--lime);    left: 30%; bottom: 6%; animation: float3 20s ease-in-out infinite; }
.blob-cursor { background: var(--orange); width: 26vmin; height: 26vmin; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: transform .18s ease-out; }
@keyframes float1 { 0%,100%{ transform: translate(0,0) scale(1);} 33%{ transform: translate(30vw,20vh) scale(1.3);} 66%{ transform: translate(10vw,50vh) scale(.8);} }
@keyframes float2 { 0%,100%{ transform: translate(0,0) scale(1);} 33%{ transform: translate(-35vw,30vh) scale(.85);} 66%{ transform: translate(-10vw,60vh) scale(1.25);} }
@keyframes float3 { 0%,100%{ transform: translate(0,0) scale(1);} 33%{ transform: translate(25vw,-30vh) scale(1.2);} 66%{ transform: translate(40vw,-10vh) scale(.9);} }
body.trip .goo-layer { animation: spin 12s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; gap: 1.5rem;
  padding: 1rem clamp(1rem, 4vw, 2.5rem);
  backdrop-filter: blur(8px);
  background: linear-gradient(180deg, rgba(12,0,32,.5), transparent);
}
.brand {
  font-family: var(--logo); font-size: 1.5rem; letter-spacing: 1px;
  background: linear-gradient(90deg, var(--cyan), var(--magenta), var(--lime));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: hue 8s linear infinite;
}
@keyframes hue { to { filter: hue-rotate(360deg); } }
.nav-links { display: flex; gap: 1.4rem; margin-left: auto; }
.nav-links a { font-weight: 500; font-size: .95rem; position: relative; opacity: .85; }
.nav-links a:hover { opacity: 1; }
.nav-links a::after { content:""; position:absolute; left:0; bottom:-4px; width:0; height:2px; background: var(--lime); transition:width .25s; }
.nav-links a:hover::after { width: 100%; }

.trip-btn {
  font-family: var(--body); font-weight: 700; font-size: .78rem; letter-spacing: 1px;
  color: #000; cursor: pointer; border: 0; padding: .55rem .9rem; border-radius: 999px;
  background: var(--lime); box-shadow: 0 0 0 2px #000, 0 0 24px var(--lime);
  transition: transform .15s;
}
.trip-btn:hover { transform: scale(1.05) rotate(-2deg); }
body.trip .trip-btn { background: var(--magenta); box-shadow: 0 0 0 2px #fff, 0 0 30px var(--magenta); color:#fff; }

/* ---------- Layout ---------- */
section { position: relative; padding: clamp(4rem, 12vh, 9rem) clamp(1.25rem, 6vw, 3rem); max-width: var(--maxw); margin-inline: auto; }
.section-tag {
  font-family: var(--body); font-weight: 700; letter-spacing: .3em; text-transform: uppercase;
  font-size: .8rem; color: var(--cyan); margin-bottom: 1.2rem;
}
h2 { font-family: var(--display); font-size: clamp(2rem, 6vw, 4rem); line-height: 1.05; margin-bottom: 1.5rem; }
.lead { font-size: clamp(1.05rem, 2.2vw, 1.4rem); max-width: 60ch; opacity: .92; }

/* ---------- Hero ---------- */
.hero {
  min-height: 100svh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding-top: 6rem;
}
.kicker { font-weight: 500; letter-spacing: .25em; text-transform: uppercase; font-size: .85rem; color: var(--lime); margin-bottom: 1.5rem; }
.hero-title {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(4rem, 20vw, 15rem); line-height: .82; letter-spacing: -.02em;
  display: flex; gap: .02em;
}
.hero-title span {
  display: inline-block;
  background: linear-gradient(180deg, var(--cyan), var(--magenta) 55%, var(--orange));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 60px rgba(255,45,149,.35);
  animation: meltwave 4s ease-in-out infinite;
}
.hero-title span:nth-child(2){ animation-delay:.15s } .hero-title span:nth-child(3){ animation-delay:.3s }
.hero-title span:nth-child(4){ animation-delay:.45s } .hero-title span:nth-child(5){ animation-delay:.6s } .hero-title span:nth-child(6){ animation-delay:.75s }
@keyframes meltwave { 0%,100%{ transform: translateY(0) skewX(0); } 50%{ transform: translateY(3%) skewX(-3deg); } }
.hero-sub { font-size: clamp(1.05rem, 2.4vw, 1.5rem); max-width: 32ch; margin: 2rem auto 0; opacity: .95; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 2.5rem; }

.btn {
  font-weight: 700; padding: .95rem 1.8rem; border-radius: 999px; font-size: 1rem;
  transition: transform .15s, box-shadow .2s; display: inline-block;
}
.btn-solid { background: var(--ink); color: #12002e; box-shadow: 0 0 30px rgba(251,233,255,.4); }
.btn-solid:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 0 45px var(--magenta); }
.btn-ghost { border: 2px solid var(--ink); }
.btn-ghost:hover { transform: translateY(-3px); background: var(--ink); color: #12002e; }

.scroll-cue { position: absolute; bottom: 2rem; font-size: .75rem; letter-spacing: .3em; text-transform: uppercase; opacity: .6; display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.scroll-cue span { width: 2px; height: 40px; background: linear-gradient(var(--lime), transparent); animation: drip 1.8s ease-in-out infinite; }
@keyframes drip { 0%,100%{ transform: scaleY(.4); opacity:.3 } 50%{ transform: scaleY(1); opacity:1 } }

/* ---------- Marquee ---------- */
.marquee { overflow: hidden; margin-top: 3rem; border-block: 2px solid rgba(251,233,255,.2); padding: .6rem 0; }
.marquee-track { display: flex; width: max-content; animation: scrollx 18s linear infinite; }
.marquee-track span { font-family: var(--display); font-size: 1.6rem; color: var(--cyan); white-space: nowrap; }
@keyframes scrollx { to { transform: translateX(-50%); } }
body.trip .marquee-track { animation-duration: 5s; }

/* ---------- Visiones gallery ---------- */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 2.5rem; }
.vision {
  position: relative; aspect-ratio: 4/5; border-radius: 20px; overflow: hidden;
  padding: 1.4rem; display: flex; flex-direction: column; justify-content: flex-end;
  color: #fff; isolation: isolate; cursor: pointer;
  transition: transform .3s ease;
}
.vision::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-size: 180% 180%; animation: shift 8s ease infinite;
  filter: saturate(130%);
}
@keyframes shift { 0%{ background-position: 0% 0% } 50%{ background-position: 100% 100% } 100%{ background-position: 0% 0% } }
.vision:hover { transform: translateY(-8px) rotate(-1deg) scale(1.02); }
.vision:hover::before { animation-duration: 2.5s; }
.vision-n { font-family: var(--display); font-size: 1rem; opacity: .85; }
.vision h3 { font-family: var(--display); font-size: 1.5rem; margin: .3rem 0 .2rem; }
.vision p { font-size: .9rem; opacity: .9; }
.v1::before { background-image: conic-gradient(from 0deg, var(--violet), var(--magenta), var(--cyan), var(--violet)); }
.v2::before { background-image: linear-gradient(135deg, var(--hot), var(--orange), var(--lime)); }
.v3::before { background-image: radial-gradient(circle at 30% 30%, var(--lime), var(--cyan) 45%, var(--violet)); }
.v4::before { background-image: linear-gradient(160deg, var(--orange), var(--hot) 60%, var(--violet)); }
.v5::before { background-image: repeating-linear-gradient(45deg, var(--magenta) 0 12%, var(--orange) 12% 24%, var(--cyan) 24% 36%); }
.v6::before { background-image: conic-gradient(from 90deg, var(--cyan), var(--lime), var(--orange), var(--magenta), var(--cyan)); }

/* ---------- text effects ---------- */
.wavy { background: linear-gradient(90deg, var(--cyan), var(--lime), var(--magenta), var(--orange), var(--cyan)); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: flow 8s linear infinite; }
@keyframes flow { to { background-position: 300% 0; } }
.glow { text-shadow: 0 0 30px var(--magenta), 0 0 60px var(--hot); }
.whisper { margin-top: 2rem; font-size: .85rem; opacity: .5; font-style: italic; }

/* ---------- Contact ---------- */
.contacto { text-align: center; }
.mail { font-family: var(--display); font-size: clamp(1.8rem, 7vw, 4rem); display: inline-block; margin: 1rem 0; background: linear-gradient(90deg, var(--lime), var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; transition: transform .2s; }
.mail:hover { transform: scale(1.05) rotate(-1deg); }
.socials { display: flex; gap: 1.5rem; justify-content: center; margin-top: 1rem; }
.socials a { font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: .85rem; opacity: .8; }
.socials a:hover { opacity: 1; color: var(--lime); }

/* ---------- Footer ---------- */
.footer { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; padding: 2rem clamp(1.25rem, 6vw, 3rem); max-width: var(--maxw); margin-inline: auto; font-size: .8rem; opacity: .6; }
.footer .credit:hover { color: var(--lime); opacity: 1; }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 820px) {
  .nav-links { display: none; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .gallery { grid-template-columns: 1fr; }
  .trip-btn { margin-left: auto; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  .aurora { opacity: .4; }
}