/* ─── pinock.io/trip — psychedelic gradient + animated blobs ────────────
   Loaded after style.css on trip.html.
*/

:root {
  --trip-bg-deep:    #0a0014;
  --trip-bg-mid:     #1a0a2e;
  --trip-magenta:    #ff2db8;
  --trip-violet:     #7e3aff;
  --trip-cyan:       #00f0ff;
  --trip-lime:       #b6ff39;
  --trip-text:       #ffe8fb;
  --trip-text-dim:   #b39ad6;
  --trip-card:       rgba(20, 8, 36, 0.72);
  --trip-border:     rgba(255, 45, 184, 0.25);
  --trip-border-hot: rgba(0, 240, 255, 0.6);
}

body.trip-theme {
  background: radial-gradient(ellipse at top, var(--trip-bg-mid) 0%, var(--trip-bg-deep) 60%, #050008 100%);
  color: var(--trip-text);
  min-height: 100vh;
  overflow-x: hidden;
}

/* ─── Animated psychedelic blobs background ─── */
.trip-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  filter: blur(60px);
}
.blob {
  position: absolute;
  width: 50vw;
  height: 50vw;
  border-radius: 50%;
  opacity: 0.45;
  mix-blend-mode: screen;
}
.blob-1 {
  background: radial-gradient(circle, var(--trip-magenta) 0%, transparent 70%);
  top: -10vw;
  left: -10vw;
  animation: blob1 28s ease-in-out infinite;
}
.blob-2 {
  background: radial-gradient(circle, var(--trip-cyan) 0%, transparent 70%);
  bottom: -15vw;
  right: -10vw;
  animation: blob2 36s ease-in-out infinite;
}
.blob-3 {
  background: radial-gradient(circle, var(--trip-violet) 0%, transparent 70%);
  top: 30vh;
  left: 20vw;
  animation: blob3 44s ease-in-out infinite;
}
@keyframes blob1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(20vw, 30vh) scale(1.15); }
  66%      { transform: translate(40vw, 10vh) scale(0.85); }
}
@keyframes blob2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-30vw, -25vh) scale(1.2); }
}
@keyframes blob3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25%      { transform: translate(30vw, -20vh) scale(0.9); }
  75%      { transform: translate(-25vw, 25vh) scale(1.1); }
}

/* Ensure content above blobs */
body.trip-theme > header,
body.trip-theme > main,
body.trip-theme > section,
body.trip-theme > footer {
  position: relative;
  z-index: 1;
}
body.trip-theme > .modal {
  position: fixed;
  z-index: 100;
}

/* ─── Topbar ─── */
body.trip-theme .topbar {
  background: linear-gradient(180deg,
    rgba(10, 0, 20, 0.92) 0%,
    rgba(26, 10, 46, 0.7) 100%);
  border-bottom: 1px solid var(--trip-border);
  backdrop-filter: blur(14px);
}
body.trip-theme .logo { color: var(--trip-text); }
body.trip-theme .logo .dim {
  background: linear-gradient(135deg, var(--trip-magenta), var(--trip-cyan));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 600;
  margin-left: 2px;
}

/* ─── Search ─── */
body.trip-theme .search input {
  background: rgba(10, 0, 20, 0.7);
  border: 1px solid var(--trip-border);
  color: var(--trip-text);
}
body.trip-theme .search input::placeholder { color: var(--trip-text-dim); }
body.trip-theme .search input:focus {
  border-color: var(--trip-cyan);
  box-shadow: 0 0 0 3px rgba(0, 240, 255, 0.18);
  outline: none;
}
body.trip-theme .search button {
  background: linear-gradient(135deg, var(--trip-magenta), var(--trip-violet));
  color: white;
}

/* ─── Action buttons ─── */
body.trip-theme .ghost {
  color: var(--trip-text-dim);
  border: 1px solid var(--trip-border);
  background: transparent;
}
body.trip-theme .ghost:hover {
  color: var(--trip-text);
  background: rgba(255, 45, 184, 0.12);
}

/* ─── Grid cards ─── */
body.trip-theme .grid > * {
  background: var(--trip-card);
  border: 1px solid var(--trip-border);
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
  backdrop-filter: blur(2px);
}
body.trip-theme .grid > *:hover {
  transform: translateY(-2px);
  border-color: var(--trip-border-hot);
  box-shadow: 0 14px 40px rgba(0, 240, 255, 0.22);
}

/* ─── Modal ─── */
body.trip-theme .modal-content {
  background: var(--trip-bg-deep);
  border: 1px solid var(--trip-border);
  color: var(--trip-text);
}
body.trip-theme .modal-content h2 { color: var(--trip-text); }
body.trip-theme .caption { color: var(--trip-text-dim); }
body.trip-theme .action {
  background: rgba(126, 58, 255, 0.18);
  border: 1px solid var(--trip-border);
  color: var(--trip-text);
}
body.trip-theme .action:hover {
  background: rgba(126, 58, 255, 0.32);
  border-color: var(--trip-border-hot);
}
body.trip-theme .action.primary {
  background: linear-gradient(135deg, var(--trip-magenta), var(--trip-violet));
  border: 0;
  color: white;
  box-shadow: 0 4px 18px rgba(255, 45, 184, 0.4);
}

/* ─── Footer ─── */
body.trip-theme .foot {
  color: var(--trip-text-dim);
  border-top: 1px solid var(--trip-border);
}
body.trip-theme .foot a {
  background: linear-gradient(135deg, var(--trip-cyan), var(--trip-lime));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ─── Status / load more ─── */
body.trip-theme .status { color: var(--trip-text-dim); }
body.trip-theme .load-more-btn {
  background: rgba(126, 58, 255, 0.18);
  border: 1px solid var(--trip-border);
  color: var(--trip-text);
}
body.trip-theme .load-more-btn:hover {
  background: rgba(126, 58, 255, 0.32);
  border-color: var(--trip-border-hot);
}

/* ─── /trip grid: large cards (override base 12-col grid) ─── */
/* base style.css uses 12 cols (~150px each on 1920). Trip wants ~280px cards. */
body.trip-theme .grid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
@media (max-width: 1800px) { body.trip-theme .grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } }
@media (max-width: 1400px) { body.trip-theme .grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } }
@media (max-width: 1100px) { body.trip-theme .grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } }
@media (max-width: 800px)  { body.trip-theme .grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } }
@media (max-width: 520px)  { body.trip-theme .grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } }

/* ─── Tab-nav active glow (overrides base) ─── */
body.trip-theme .tab-link.active img {
  filter: drop-shadow(0 0 12px rgba(0, 240, 255, 0.6))
          drop-shadow(0 0 6px rgba(255, 45, 184, 0.5))
          drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4));
}
body.trip-theme .tab-link:hover img {
  filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.5))
          drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
}