/* ============================================
   FOODHALLEN — SITE-EFFECTS
   Alles wat puur visueel/interactief is en niet bij een specifieke
   pagina-CSS (venue/home/events) hoort: grain, scroll-reveal, tilt,
   easter-eggs, hero-effecten, link-styles, button-shimmer.
   Eenvoudig in zijn geheel uit te schakelen.
   ============================================ */


/* ============================================
   GRAIN / NOISE — papier-textuur op vlakken
   SVG fractal-noise als data-URI, gehergebruikt op meerdere secties.
   Multiply op licht, overlay op accent-kleuren.
   ============================================ */
.venue-slider-section,
.venue-events-cta,
.bars-section,
.venue-faq,
.venue-intro {
  isolation: isolate;       /* mix-blend-mode beperkt zich tot deze sectie */
}

.venue-slider-section::after,
.venue-events-cta::after,
.bars-section::after,
.venue-faq::after,
.venue-intro::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 200px 200px;
  opacity: 0.06;
  mix-blend-mode: multiply;
  z-index: 1;
}

/* Op rode/groene FAQ ander mix-blend zodat de noise niet zwart wordt */
.venue-faq::after {
  opacity: 0.08;
  mix-blend-mode: overlay;
}

/* Zorg dat sectie-content boven de grain blijft staan */
.venue-slider-section > *,
.venue-events-cta > *,
.bars-section > *,
.venue-faq > *,
.venue-intro > * {
  position: relative;
  z-index: 2;
}


/* ============================================
   SECTION-LABEL — verticale hairline als ankerstreepje
   Sluit aan bij de geometrische schuine-overgangen-taal.
   ============================================ */
p.section-label,
p.venue-hero-label,
.section-label,
.venue-hero-label {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: fit-content;
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0;
}

.section-label::before,
.venue-hero-label::before {
  content: '';
  display: block;
  width: 3px;
  height: 1em;
  background: currentColor;
  border-radius: 999px;
  flex-shrink: 0;
}


/* ============================================
   UNDERLINE-GROW LINKS — body-/footer-links krijgen een
   onderstreping die van links naar rechts groeit on hover.
   currentColor zodat het op licht én donker werkt.
   ============================================ */
.faq-body a,
.site-footer a:not(.nav-logo):not(.btn-primary):not(.btn-secondary),
.venue-intro a,
.about-section a:not(.btn-primary):not(.btn-secondary),
.careers-section a:not(.btn-primary):not(.btn-secondary),
.team-section a:not(.btn-primary):not(.btn-secondary),
a.inline {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 320ms cubic-bezier(.5, 0, 0, 1),
              color 200ms ease;
  text-decoration: none;
}

.faq-body a:hover,
.site-footer a:not(.nav-logo):not(.btn-primary):not(.btn-secondary):hover,
.venue-intro a:hover,
.about-section a:not(.btn-primary):not(.btn-secondary):hover,
.careers-section a:not(.btn-primary):not(.btn-secondary):hover,
.team-section a:not(.btn-primary):not(.btn-secondary):hover,
a.inline:hover {
  background-size: 100% 1px;
}


/* ============================================
   IMAGE TREATMENT — subtiele filter op stand-foto's voor
   visuele unificatie tussen de variabele leveranciersfoto's.
   Hover heft de filter op = beloning voor interactie.
   ============================================ */
.stand-card-img {
  filter: contrast(1.04) saturate(0.92) sepia(0.05);
  transition: transform 400ms ease, filter 400ms ease;
}

.stand-card:hover .stand-card-img {
  filter: none;
}


/* ============================================
   SCROLL-REVEAL — kaarten en titels verschijnen wanneer ze in beeld komen
   ============================================ */
@media (prefers-reduced-motion: no-preference) {

  .stand-card:not(.is-visible),
  .bar-card:not(.is-visible),
  [data-reveal]:not(.is-visible) {
    opacity: 0;
    transform: translateY(24px);
    /* Belangrijk: geen transition hier, anders animeert de initiële state ook bij pageload */
  }

  .stand-card.is-visible,
  .bar-card.is-visible,
  [data-reveal].is-visible {
    animation: card-reveal 700ms cubic-bezier(.2,.7,.3,1) both;
    animation-delay: calc(var(--reveal-i, 0) * 70ms);
  }

  @keyframes card-reveal {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}


/* ============================================
   3D-TILT — cards kantelen subtiel mee met de cursor
   JS zet --tilt-x en --tilt-y (in deg). Werkt zodra .is-tilting actief is.
   ============================================ */
@media (prefers-reduced-motion: no-preference) and (hover: hover) {

  .stand-card.is-tilting,
  .bar-card.is-tilting {
    transform:
      perspective(900px)
      rotateX(var(--tilt-x, 0deg))
      rotateY(var(--tilt-y, 0deg))
      translateY(-2px) !important;
    transition: transform 90ms linear !important;
  }
}


/* ============================================
   KONAMI / TACO-REGEN — easter egg
   Items vallen vanaf de bovenkant, roteren onderweg, ruimen zichzelf op.
   ============================================ */
.konami-rain {
  position: fixed;
  inset: 0 0 calc(-1 * var(--vh-overshoot)) 0;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}

.konami-drop {
  position: absolute;
  top: -10vh;
  font-size: 2.4rem;
  user-select: none;
  will-change: transform;
  animation: konami-fall var(--fall-dur, 7s) linear var(--fall-delay, 0s) forwards;
  transform: translate3d(0, 0, 0) rotate(0deg);
}

@keyframes konami-fall {
  to {
    transform: translate3d(var(--drift, 0px), 110vh, 0) rotate(var(--spin, 360deg));
  }
}


/* ============================================
   HERO — split-text reveal + parallax video
   Word-spans krijgen staggered fade-up; .venue-hero-video krijgt scroll-parallax via --hero-y.
   ============================================ */
@media (prefers-reduced-motion: no-preference) {

  /* Woorden blijven inline. Een inline-block is een atomaire doos: een woord
     dat breder is dan de regel — "Pakhuis-meesteren" op een telefoon — claimt
     dan de volle regelbreedte, waardoor het volgende woord een eigen regel
     krijgt. De titel werd na het splitsen dus een regel langer en sprong
     omhoog, want het tekstblok hangt aan de onderkant van de hero. */
  .hero-word {
    display: inline;
    opacity: 0;
    transition: opacity 700ms cubic-bezier(.2,.7,.3,1);
    transition-delay: calc(var(--word-i, 0) * 70ms + 200ms);
  }

  .hero-revealed .hero-word {
    opacity: 1;
  }

  /* De fade-up ging per woord, maar een inline element kan geen transform
     krijgen. Nu doet de titel als geheel de beweging; de stagger blijft in de
     opacity per woord zitten. .hero-split zet hero-effects.js bij het splitsen. */
  .hero-split {
    transform: translateY(0.6em);
    transition: transform 700ms cubic-bezier(.2,.7,.3,1);
  }

  .hero-split.hero-revealed {
    transform: translateY(0);
  }

  /* Parallax — alleen video (bg houdt z'n eigen hover-zoom-effect). */
  .venue-hero-video {
    will-change: transform;
    transform: translate3d(0, var(--hero-y, 0px), 0);
  }

}


/* ============================================
   CARD HOVER — pijl-glyph slidet in vanaf rechts.
   Komt bovenop bestaande tilt + image-filter-clear hover-feedback.
   ============================================ */
@media (hover: hover) {
  .stand-card-body {
    position: relative;
  }

  .stand-card-body::after {
    content: '→';
    position: absolute;
    right: 1.05rem;
    bottom: 0.85rem;
    font-family: var(--font-accent);
    font-style: italic;
    font-weight: 500;
    font-size: 1.05rem;
    color: var(--color-accent);
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity 260ms ease, transform 260ms ease;
    pointer-events: none;
  }

  .stand-card:hover .stand-card-body::after {
    opacity: 1;
    transform: translateX(0);
  }
}


/* ============================================
   BUTTON KARAKTER — inverse-fill + arrow op .btn-primary
   Linker-naar-rechter sweep via background-position,
   + serif arrow ::after die mee-nudge'd op hover.
   ============================================ */
.btn-primary {
  background-image: linear-gradient(
    to right,
    var(--color-accent-hover) 50%,
    var(--color-accent) 50%
  );
  background-size: 200% 100%;
  background-position: 100% 0;
  transition: background-position 380ms cubic-bezier(.7, 0, .3, 1),
              color 200ms ease;
}

.btn-primary:hover {
  background-position: 0 0;
}

.btn-primary::after {
  content: '→';
  display: inline-block;
  margin-left: 0.55em;
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0;
  vertical-align: -0.04em;
  transition: transform 260ms cubic-bezier(.2, .7, .3, 1);
}

.btn-primary:hover::after {
  transform: translateX(4px);
}

/* ============================================
   GT AMERICA BODY TEKST — strakke tracking forceren
   (overschrijft per-pagina rules met positieve letter-spacing
    op lopende paragraphs / body-blokken)
   ============================================ */
.about-body,
.venue-intro-body,
.venue-card-body p:not(.section-label),
.events-text p:not(.section-label),
.team-title,
.team-quote-body blockquote,
.stand-card-body p:not(.section-label),
.bar-card-body p:not(.section-label),
.faq-body-inner p:not(.section-label),
.venue-events-cta p:not(.section-label),
.ev-intro p:not(.section-label),
.ev-usp-body p:not(.section-label),
.ev-type-item p:not(.section-label),
.ev-venue-card-body p:not(.section-label),
.space-card-body p:not(.section-label),
.ev-contact-info > p:not(.section-label),
.ev-form-card > p:not(.section-label),
.light-section p:not(.section-label),
.dark-section p:not(.section-label),
.red-section p:not(.section-label),
.careers-lead,
strong, b {
  letter-spacing: -0.05em;
}