/* Hero 2.0 — alleen actief met body.has-hero-photo (foto geüpload in beheer).
   Lagen in .hero-art: wazige fotogloed (backdrop) → illustratie (sketch) → echte foto → kleurwas → zaadjes.
   Bij binnenkomst lost de illustratie op in de echte foto (cirkel-onthulling vanuit Ruth).
   Zonder upload blijft de illustratie-hero ongewijzigd. */

.has-hero-photo{--hero-h:clamp(600px,86vh,800px);--hero-tint:color-mix(in srgb,var(--pink) 30%,var(--paper));--p:0}
.has-hero-photo .hero-main{min-height:var(--hero-h);display:flex;align-items:center;background:var(--hero-tint);overflow:hidden;border:0;border-radius:0}
.has-hero-photo .hero-art{position:absolute;inset:0;z-index:-2;overflow:hidden;background:var(--hero-tint)}

/* 1. Gloed: dezelfde foto, groot en wazig, zodat bos- en jaskleuren door de hele hero ademen. */
.has-hero-photo .hero-backdrop{position:absolute;inset:-10%;width:120%;height:120%;max-width:none;object-fit:cover;object-position:60% 50%;filter:blur(48px) saturate(1.2);opacity:.5;z-index:0;translate:0 calc(var(--p) * -40px)}

/* 2 + 3. Illustratie en echte foto delen exact hetzelfde vlak; linkerrand vloeit weg. */
.has-hero-photo .hero-sketch,
.has-hero-photo .hero-picture.hero-photo{position:absolute;top:0;bottom:0;left:auto;right:0;width:60%;height:100%;max-width:none;object-fit:cover;box-shadow:none;
 -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 18%,#000 40%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 18%,#000 40%)}
.has-hero-photo .hero-sketch{z-index:1;object-position:center 62%;opacity:0;filter:saturate(1.05);transition:opacity 1.1s ease .85s,filter 1.4s ease,scale 1.8s cubic-bezier(.2,.7,.2,1)}
.has-hero-photo .hero-picture.hero-photo{z-index:2;object-position:50% 72%;clip-path:circle(100% at 66% 56%);
 transition:clip-path 1.7s cubic-bezier(.65,0,.25,1);translate:0 calc(var(--p) * 70px);scale:calc(1 + var(--p) * .05)}

/* Intro-staat (gezet door een klein inline script, alleen zonder 'minder beweging'). */
.hero-flow-pending .has-hero-photo .hero-picture.hero-photo{clip-path:circle(0% at 66% 56%)}
.hero-flow-pending .has-hero-photo .hero-sketch{opacity:1;scale:1.04;transition:none}
.hero-flow-reveal .has-hero-photo .hero-sketch{filter:blur(6px) saturate(.7);scale:1.08}

/* 4. Kleurwas: links rustig papier-roze voor leesbaarheid, rechts vrij zicht op de foto. */
.has-hero-photo .hero-art::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;opacity:1;
 background:
  radial-gradient(60% 80% at 8% 30%,color-mix(in srgb,var(--paper) 70%,transparent),transparent 70%),
  linear-gradient(90deg,color-mix(in srgb,var(--hero-tint) 96%,transparent) 0%,color-mix(in srgb,var(--hero-tint) 82%,transparent) 28%,color-mix(in srgb,var(--hero-tint) 30%,transparent) 44%,transparent 56%),
  linear-gradient(0deg,color-mix(in srgb,var(--ink) 22%,transparent) 0%,transparent 22%)}

/* 5. Zaadjes / pollen in het bos-licht: "pluk de hoop". */
.has-hero-photo .hero-seeds{position:absolute;inset:0;z-index:4;pointer-events:none}
.has-hero-photo .hero-seeds i{position:absolute;bottom:-14px;left:var(--x);width:var(--s);height:var(--s);border-radius:50%;background:var(--c);opacity:0;box-shadow:0 0 12px color-mix(in srgb,var(--c) 70%,transparent)}
.ruth-motion-on .has-hero-photo .hero-seeds i{animation:ruth-seed var(--d) linear var(--w) infinite}
.has-hero-photo .hero-seeds i:nth-child(1){--x:40%;--s:8px;--c:var(--mustard);--d:13s;--w:-2s}
.has-hero-photo .hero-seeds i:nth-child(2){--x:47%;--s:5px;--c:var(--paper);--d:10s;--w:-6s}
.has-hero-photo .hero-seeds i:nth-child(3){--x:55%;--s:10px;--c:var(--lime);--d:15s;--w:-9s}
.has-hero-photo .hero-seeds i:nth-child(4){--x:62%;--s:6px;--c:var(--mustard);--d:11s;--w:-1s}
.has-hero-photo .hero-seeds i:nth-child(5){--x:71%;--s:7px;--c:var(--paper);--d:14s;--w:-11s}
.has-hero-photo .hero-seeds i:nth-child(6){--x:79%;--s:9px;--c:var(--pink);--d:12s;--w:-4s}
.has-hero-photo .hero-seeds i:nth-child(7){--x:86%;--s:5px;--c:var(--lime);--d:16s;--w:-7s}
.has-hero-photo .hero-seeds i:nth-child(8){--x:93%;--s:7px;--c:var(--mustard);--d:13s;--w:-12s}
@keyframes ruth-seed{0%{opacity:0;transform:translate(0,0)}12%{opacity:.85}50%{transform:translate(18px,-46vh)}85%{opacity:.6}100%{opacity:0;transform:translate(-10px,-92vh)}}

/* Tekstkolom */
.has-hero-photo .hero-copy{position:relative;z-index:2;width:min(48%,640px);max-width:none;margin:0;padding:56px 0 72px clamp(28px,5.5vw,88px);text-align:left;
 translate:0 calc(var(--p) * -50px);opacity:calc(1 - var(--p) * .45)}
.has-hero-photo .hero .eyebrow{margin:0 0 6px;background:var(--mustard);color:var(--ink);padding:6px 14px;border-radius:30px;letter-spacing:.18em;box-shadow:0 6px 18px -10px color-mix(in srgb,var(--ink) 60%,transparent)}
.has-hero-photo .hero-main h1{font-size:clamp(104px,11vw,176px);line-height:.88;margin:18px 0 22px;letter-spacing:-.035em;text-shadow:none}
.has-hero-photo #musicalTitle .hero-title-word{display:block;margin:0;padding:0 .04em;line-height:1;color:var(--red);text-shadow:.045em .05em 0 var(--mustard),.09em .1em 0 color-mix(in srgb,var(--ink) 18%,transparent)}
.has-hero-photo #musicalTitle .hero-subtitle{position:relative;z-index:0;display:block;width:fit-content;margin-top:.1em;padding:0 .08em;font-size:.4em;line-height:1.1;color:var(--ink);text-shadow:none;letter-spacing:-.01em}
.has-hero-photo #musicalTitle .hero-subtitle::after{content:"";position:absolute;left:0;right:-.1em;bottom:.02em;height:.32em;z-index:-1;border-radius:.2em;background:var(--lime);transform:rotate(-1.5deg);transform-origin:left center}
.ruth-motion-on .has-hero-photo #musicalTitle .hero-subtitle::after{animation:ruth-underline 1.1s cubic-bezier(.2,.8,.2,1) .9s both}
@keyframes ruth-underline{from{transform:rotate(-1.5deg) scaleX(0)}to{transform:rotate(-1.5deg) scaleX(1)}}
body.has-hero-photo .hero .hero-intro{max-width:31ch;margin:0 0 28px;padding:0;border:0;background:none;font-size:clamp(18px,1.45vw,22px);line-height:1.5;font-weight:500;color:var(--ink);text-shadow:0 1px 0 color-mix(in srgb,var(--paper) 60%,transparent)}
.has-hero-photo .hero .ticket-button{font-size:18px;padding:18px 34px;gap:14px;transition:translate .25s ease,background .25s ease;box-shadow:inset 0 0 0 1px var(--paper)}
.has-hero-photo .hero .ticket-button::after{content:"→";transition:translate .25s ease}
.has-hero-photo .hero .ticket-button:hover{translate:0 -2px;background:var(--petrol)}
.has-hero-photo .hero .ticket-button:hover::after{translate:5px 0}
.has-hero-photo .hero-meta{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0;list-style:none}
.has-hero-photo .hero-meta li{font-size:13px;font-weight:600;line-height:1;padding:9px 13px;border-radius:999px;background:color-mix(in srgb,var(--paper) 88%,transparent);border:1px solid color-mix(in srgb,var(--ink) 14%,transparent);backdrop-filter:blur(6px)}
.has-hero-photo .hero-meta li:first-child{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* Badge op de naad tussen tekst en foto, zacht wiegend. */
.has-hero-photo .hero .retro-badge{left:calc(36% + 64% * .14);right:auto;bottom:44px;top:auto;z-index:5;width:132px;height:132px}
.ruth-motion-on .has-hero-photo .hero .retro-badge{animation:ruth-badge-sway 7s ease-in-out infinite alternate}
@keyframes ruth-badge-sway{from{transform:rotate(9deg) translateY(0)}to{transform:rotate(-5deg) translateY(-8px)}}

/* Minder beweging: alles direct in eindstand. */
@media (prefers-reduced-motion:reduce){
 .has-hero-photo .hero-picture.hero-photo,.has-hero-photo .hero-sketch{transition:none}
 .has-hero-photo .hero-seeds{display:none}
 .has-hero-photo .hero-copy,.has-hero-photo .hero-picture.hero-photo,.has-hero-photo .hero-backdrop{translate:none;scale:none;opacity:1}
}
.ruth-motion-paused .has-hero-photo .hero-seeds{display:none}

/* Tablet en telefoon: foto bovenaan, die naar onderen wegsmelt in de tekst. */
@media(max-width:860px){
 .has-hero-photo{--hero-photo-h:min(128vw,640px)}
 .has-hero-photo .hero-main{display:block;min-height:0}
 .has-hero-photo .hero-art{position:relative;inset:auto;z-index:0;height:var(--hero-photo-h);background:transparent}
 .has-hero-photo .hero-backdrop{display:none}
 .has-hero-photo .hero-art::after{background:linear-gradient(180deg,color-mix(in srgb,var(--ink) 20%,transparent) 0%,transparent 18%)}
 .has-hero-photo .hero-sketch,
 .has-hero-photo .hero-picture.hero-photo{left:0;right:0;width:100%;object-position:50% 62%;
  -webkit-mask-image:linear-gradient(180deg,#000 60%,rgba(0,0,0,.5) 78%,transparent 100%);mask-image:linear-gradient(180deg,#000 60%,rgba(0,0,0,.5) 78%,transparent 100%)}
 .has-hero-photo .hero-picture.hero-photo{clip-path:circle(100% at 52% 50%);translate:none;scale:none}
 .hero-flow-pending .has-hero-photo .hero-picture.hero-photo{clip-path:circle(0% at 52% 50%)}
 .has-hero-photo .hero-seeds i{bottom:30%}
 .has-hero-photo .hero-copy{width:auto;margin-top:-118px;padding:0 20px 34px;text-align:center;translate:none;opacity:1}
 .has-hero-photo .hero .eyebrow{margin-inline:auto}
 .has-hero-photo .hero-main h1{font-size:clamp(78px,24vw,112px);margin:10px 0 14px}
 .has-hero-photo #musicalTitle .hero-title-word,
 .has-hero-photo #musicalTitle .hero-subtitle{margin-inline:auto;width:fit-content}
 body.has-hero-photo .hero .hero-intro{margin:0 auto 20px;font-size:17px;max-width:30ch}
 .has-hero-photo .hero .ticket-button{font-size:16px;padding:16px 28px}
 .has-hero-photo .hero-meta{justify-content:center;margin-top:18px}
 .has-hero-photo .hero-meta li{font-size:12px;padding:8px 11px}
 .has-hero-photo .hero .retro-badge{top:calc(var(--hero-photo-h) - 230px);bottom:auto;left:auto;right:14px;width:96px;height:96px;padding:12px}
 .has-hero-photo .hero .retro-badge strong{font-size:14px}
}
@media(max-width:400px){.has-hero-photo .hero .retro-badge{width:84px;height:84px;top:calc(var(--hero-photo-h) - 205px)}}

/* Mobiele navigatie: leesbare links; onder 400px alleen verhaal + kaarten (Praktisch staat onderaan). */
@media(max-width:720px){.ruth-nav a{font-size:14px}}
@media(max-width:400px){.ruth-nav a[href="#praktisch"]{display:none}.ruth-nav a{padding-inline:8px}}

/* Geen poster geüpload: geen dubbele titel naast het verhaal. */
.no-poster .poster-frame{display:none}
.no-poster .story-with-poster{grid-template-columns:minmax(0,860px);justify-content:center}

/* Nog geen spelersfoto's of namen: castblok tijdelijk verborgen. */
.no-cast .cast-section{display:none}

/* Kaartenblok netter: duidelijke kopstructuur, speeldata als rustige kaartjes, kolom gelijk met het ticketpaneel. */
.booking-heading{padding-top:0;overflow-wrap:break-word}
.booking-heading .overline{display:inline-block;margin:0 0 14px;padding:5px 12px;border-radius:999px;background:var(--paper);color:var(--ink);font-size:12px;letter-spacing:.16em}
.booking-heading h2{margin:0 0 12px;line-height:1.1}
.booking-section .ticket-intro{max-width:34ch;margin:0 0 24px;font-size:17px;line-height:1.5}
.booking-section .ruth-schedule{display:grid;gap:10px;margin:0;padding:0;list-style:none;border-top:0}
.booking-section .ruth-schedule li{padding:13px 16px;border:0;border-radius:10px;background:var(--paper);box-shadow:inset 4px 0 0 var(--petrol);font-size:15px;line-height:1.4;font-weight:600;color:var(--ink)}
.booking-section .ruth-schedule li:first-child{box-shadow:inset 4px 0 0 var(--red)}
@media(min-width:721px){
 .booking-section{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,72px);padding-block:56px}
}
@media(max-width:720px){
 .booking-section{padding-block:28px;gap:20px}
 .booking-heading{padding:0}
 .booking-heading h2{font-size:34px}
 .booking-section .ticket-intro{max-width:none;margin-bottom:18px;font-size:16px}
 .booking-section .ruth-schedule{gap:8px}
 .booking-section .ruth-schedule li{padding:11px 14px;font-size:14px}
}