/* HAYLEEN · effets premium (labyrinthe révélé, métal liquide, texte du titre, reflet du bouton newsletter)
   Chargé après le <style> de la page. Tout est désactivable via prefers-reduced-motion. */

/* ---------- 0. Typo d'affiche : Syncopate (titres et accroche), Jost pour tout le reste ---------- */
@font-face{font-family:"Syncopate";font-weight:400;font-display:swap;src:url(fonts/syncopate-latin-400-normal.woff2) format("woff2")}
h2{font-family:"Syncopate","Jost",sans-serif;font-weight:400;font-size:clamp(1.15rem,2.5vw,1.7rem);letter-spacing:.08em;line-height:1.3}
.news h2{font-family:"Syncopate","Jost",sans-serif;font-weight:400;font-size:clamp(1.4rem,3.6vw,2.3rem);letter-spacing:.1em}
.tagline{font-family:"Syncopate","Jost",sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(1.35rem,2.9vw,2.05rem);line-height:1.22;letter-spacing:.02em;max-width:none;padding-left:.75em}
.tagline::before{font-family:"Jost",sans-serif;top:-.2em;font-size:1.9em}

/* ---------- 1. Labyrinthe révélé ---------- */
.hero .stage{position:relative;width:100%;max-width:440px;justify-self:end;box-shadow:0 0 90px rgba(175,51,177,.3);overflow:hidden;touch-action:pan-y;-webkit-tap-highlight-color:transparent;aspect-ratio:1/1;background:var(--ink)}
@media(max-width:820px){.hero .stage{order:-1;justify-self:start;max-width:360px}}
.stage .photo{width:100%;max-width:none;box-shadow:none;order:0;justify-self:auto}
/* téléphone : pas de menu image ni de sélection au doigt posé (l'image reste lisible et décrite pour Google) */
.hero .stage{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.stage picture,.stage .photo{pointer-events:none;-webkit-touch-callout:none}
.stage .veil{position:absolute;inset:0;pointer-events:none;
  background:#0b0710 url(img/hayleen-mind-maze-veil.webp) center/cover no-repeat;
  --x:50%;--y:50%;--r:0px;opacity:.94;
  -webkit-mask-image:radial-gradient(circle var(--r) at var(--x) var(--y),transparent 0,transparent 50%,#000 100%);
          mask-image:radial-gradient(circle var(--r) at var(--x) var(--y),transparent 0,transparent 50%,#000 100%)}
.stage .veil svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.stage .veil .halo{stroke:#ff3cf2;stroke-opacity:.22;stroke-width:34}
.stage .veil .tube{stroke:#ff3cf2;stroke-width:15}
.stage .veil .core{stroke:#ffd6fb;stroke-width:4}
.stage .veil svg{fill:none;stroke-linecap:square}
/* une lumière parcourt le chemin de sortie (6 s), puis repos (3 s) : traînée rose + tête blanche */
.stage .veil .way{stroke-linecap:round;stroke-linejoin:round}
.stage .veil .way-glow{stroke:#ff3cf2;stroke-opacity:.38;stroke-width:24;stroke-dasharray:80 1200;stroke-dashoffset:80;
  animation:wayGlow 9s cubic-bezier(.45,.05,.55,.95) 1.2s infinite}
.stage .veil .way-core{stroke:#fff;stroke-width:7;stroke-dasharray:22 1200;stroke-dashoffset:22;
  animation:wayCore 9s cubic-bezier(.45,.05,.55,.95) 1.2s infinite}
@keyframes wayGlow{0%{stroke-dashoffset:80}70%,100%{stroke-dashoffset:-1000}}
@keyframes wayCore{0%{stroke-dashoffset:22}70%,100%{stroke-dashoffset:-1058}}
.stage .lens{position:absolute;left:0;top:0;width:0;height:0;border-radius:50%;pointer-events:none;opacity:0;
  box-shadow:0 0 46px 8px rgba(255,60,242,.16);
  transition:opacity .35s;will-change:transform}
.stage.is-live .lens{opacity:1}

/* ---------- 2. Métal liquide (logo HAYLEEN) ---------- */
.logo-wrap{position:relative;width:min(460px,100%);margin:0 0 18px -8px}
.logo-wrap .logo{width:100%;margin:0}
.lockup .logo-wrap{width:min(460px,70vw);margin:0}  /* page DJ */
.logo-wrap .metal{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;opacity:0;transition:opacity .6s}
.metal-on .logo-wrap .metal{opacity:1}
.metal-on .logo-wrap .logo{opacity:.28}  /* garde un peu du halo d'origine sous le métal */
.metal .sweep{animation:chrome 16s linear infinite}
@keyframes chrome{from{transform:translateX(0)}to{transform:translateX(1000px)}}

/* ---------- 3. Titre : mots qui apparaissent, puis légère attraction ---------- */
.tagline .w{display:inline-block;translate:var(--tx,0) var(--ty,0);transition:translate .45s cubic-bezier(.2,.7,.2,1)}
.tagline.is-split .w{opacity:0;transform:translateY(.45em);filter:blur(6px)}
.tagline.is-in .w{animation:wordIn .9s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i) * 110ms)}
@keyframes wordIn{from{opacity:0;transform:translateY(.45em);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}

/* écho sur « overthinking » : deux contours qui se décalent puis reviennent, comme une pensée qui tourne en boucle */
.tagline .w.echo{position:relative;isolation:isolate}
.tagline .echo-l{position:absolute;left:0;top:0;z-index:-1;pointer-events:none;opacity:0;white-space:nowrap}
.tagline .echo-l::before{content:attr(data-text);color:transparent;-webkit-text-stroke:1px rgba(255,60,242,.85)}
.tagline.is-in .echo-l{animation:echoL 6s ease-in-out infinite;animation-delay:calc(2.2s + var(--d,0s))}
@keyframes echoL{0%,100%{opacity:0;transform:translate(0,0)}35%{opacity:var(--o,.4);transform:translate(var(--dx,0),var(--dy,0))}75%{opacity:0;transform:translate(calc(var(--dx,0) * 2),calc(var(--dy,0) * 2))}}

/* ---------- 4. Bouton newsletter : reflet au survol (une seule fois, pas de boucle) ---------- */
.btn.hot[href*="beehiiv"]{position:relative;overflow:hidden;isolation:isolate}
.btn.hot[href*="beehiiv"]::after{content:"";position:absolute;inset:-2px;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.7) 50%,transparent 70%);transform:translateX(-120%)}
.btn.hot[href*="beehiiv"]:hover,.btn.hot[href*="beehiiv"]:focus-visible{background:var(--magenta);border-color:var(--magenta);color:var(--black);box-shadow:0 0 28px rgba(255,60,242,.45)}
.btn.hot[href*="beehiiv"]:hover::after,.btn.hot[href*="beehiiv"]:focus-visible::after{transform:translateX(120%);transition:transform .9s cubic-bezier(.2,.7,.2,1)}

/* ---------- 5. Finitions ---------- */
/* couleur des petits titres (Listen, About, Live…) : fuchsia par défaut.
   Option plus calme : remplacer var(--magenta) par #c0a6ee (lavande). */
:root{--kicker:var(--magenta)}
.kicker,.events span{color:var(--kicker)}
/* photo de la bande Live étalonnée dans l'univers rose/violet (supprimer cette ligne pour revenir à la photo bleue) */
.live{background-image:url(img/hayleen-dj-stage-maze.jpg)}
/* texte surligné et navigation au clavier aux couleurs de la marque */
/* carte du lecteur Listen : dégradé violet, « Start here » + titre (au premier single Mind Maze, passer à « Latest release ») */
.player:not(.loaded){background:linear-gradient(120deg,rgba(175,51,177,.2),var(--ink) 55%)}
.player:not(.loaded) img{box-shadow:0 12px 34px rgba(175,51,177,.35)}
.player .tag{display:block;font-size:.62rem;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--magenta);margin-bottom:2px}
.player strong{font-size:1.3rem;font-weight:400;letter-spacing:.04em;line-height:1.2}
/* texte sous Enter the Maze : en minuscules pour que la phrase tienne */
.cta small{text-transform:none;letter-spacing:.06em;font-size:.8rem}
::selection{background:rgba(255,60,242,.85);color:#08070b}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--magenta);outline-offset:3px}

/* ---------- Garde-fous ---------- */
.hero.is-paused .veil .way,.hero.is-paused .metal .sweep,.hero.is-paused .tagline .echo-l{animation-play-state:paused}
@media(max-width:820px){
  .metal .sweep{animation-duration:26s}
}
@media(prefers-reduced-motion:reduce){
  .metal .sweep{animation:none}
  .stage .veil .way,.btn.hot[href*="beehiiv"]::after{display:none}
  .tagline.is-split .w{opacity:1;transform:none;filter:none}
  .tagline.is-in .w{animation:none}
  .tagline .w{transition:none}
  .tagline .echo-l{display:none}
  .stage .lens{transition:none}
}