/*
Theme Name: Smeltkroes
Theme URI: https://smeltkroesss.nl
Author: Solaire Software
Author URI: https://solairesoftware.nl
Description: Custom block theme voor Smeltkroes DJ Trio. Gebouwd met pure CSS marquees (geen plugins), grain overlay, duotone parallax foto's, en smooth scroll animaties. Geoptimaliseerd voor Safari/WebKit.
Version: 1.0.0
Requires at least: 6.2
Tested up to: 6.7
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: smeltkroes
Tags: full-site-editing, block-patterns, custom-colors, custom-logo, editor-style, one-column, wide-blocks, entertainment
*/

/* ===== GRAIN OVERLAY ===== */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 200px;
}

/* ===== HERO LOGO BOUNCE ===== */
.hero-logo img,
.hero-logo .custom-logo {
  animation: logoBounce 1.5s cubic-bezier(0.28, 0.84, 0.42, 1) infinite;
  filter: none !important;
}
@keyframes logoBounce {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-25px); }
  100% { transform: translateY(0); }
}

/* ===== MARQUEE SYSTEM — Pure CSS, GPU-accelerated ===== */
.marquee-strip {
  background: #23ffa3;
  padding: 25px 0 20px;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  z-index: 10;
}
.marquee-track {
  display: inline-flex;
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.marquee-track span {
  display: inline-block;
  font-family: 'Bigger', 'Staatliches', 'Impact', sans-serif;
  font-size: clamp(32px, 4vw, 50px);
  color: #1b1429;
  padding-right: 50px;
  flex-shrink: 0;
}
.marquee-left .marquee-track  { animation: mqL 20s linear infinite; }
.marquee-right .marquee-track { animation: mqR 20s linear infinite; }
@keyframes mqL { from { transform: translateX(0); }    to { transform: translateX(-50%); } }
@keyframes mqR { from { transform: translateX(-50%); } to { transform: translateX(0); }    }

/* Rotation classes */
.m-hero    { transform: translateY(-120px) scale(1.01) rotate(4deg); margin-bottom: -50px; }
.m-neg2    { transform: translateY(30px) scale(1.01) rotate(-2deg); }
.m-pos2-up { transform: translateY(-50px) scale(1.01) rotate(2deg); }
.m-pos2-dn { transform: translateY(30px) scale(1.01) rotate(2deg); }
.m-neg2-up { transform: translateY(-50px) scale(1.01) rotate(-2deg); }

/* ===== DUOTONE PARALLAX FIX ===== */
.parallax-duotone {
  filter: grayscale(100%) sepia(80%) hue-rotate(100deg) saturate(250%) brightness(0.7) contrast(1.1);
}
.parallax-duotone .wp-block-cover__image-background {
  filter: inherit;
}
@supports (-webkit-touch-callout: none) {
  .wp-block-cover.has-parallax .wp-block-cover__image-background {
    background-attachment: scroll !important;
  }
}

/* ===== EVENTS LIST ===== */
.events-list {
  max-width: 700px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.event-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid rgba(35,255,163,0.15);
  text-decoration: none;
  color: #23ffa3;
  transition: all 0.3s;
}
.event-card:hover {
  background: rgba(35,255,163,0.05);
  border-color: #23ffa3;
}
.event-date-box {
  background: rgba(35,255,163,0.1);
  padding: 0.5rem 0.75rem;
  text-align: center;
  min-width: 55px;
}
.event-date-box .weekday {
  font-family: 'Bigger', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.6;
  display: block;
}
.event-date-box .day {
  font-family: 'Bigger', sans-serif;
  font-size: 1.8rem;
  line-height: 1;
  display: block;
}
.event-name {
  font-family: 'Bigger', sans-serif;
  font-size: 1.3rem;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.event-meta {
  font-size: 0.75rem;
  opacity: 0.5;
  margin-top: 2px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .parallax-duotone .wp-block-cover__image-background {
    background-attachment: scroll !important;
  }
}