/* Hover language — modelled on the Harvard Film Archive reference
   (https://harvardfilmarchive.org/calendar/the-builders-the-storm-tamer-the-fires-of-the-sea-2016-02):
   one shared easing, colour fades ~0.2s, slower 0.4–0.6s "curtain" fills,
   text that slides sideways on rows, arrows that nudge, underlines that draw.
   Only on devices that can hover, and never when motion is reduced. */
:root{ --hv-ease: cubic-bezier(.4,0,0,1); }
a{ transition: color .2s var(--hv-ease); }

@media (hover:hover){

  /* Top nav — fill slides up from the bottom instead of snapping */
  .topbar:not(.gs-has-issue-bg) .tpb-nav a{
    position: relative; overflow: hidden; isolation: isolate;
    transition: color .4s var(--hv-ease);
  }
  .topbar:not(.gs-has-issue-bg) .tpb-nav a::before{
    content:""; position:absolute; inset:0; z-index:-1;
    background: var(--ink);
    transform: scaleY(0); transform-origin: 50% 100%;
    transition: transform .4s var(--hv-ease);
  }
  .topbar:not(.gs-has-issue-bg) .tpb-nav a:is(:hover,.hv){ background: transparent; color: var(--bg); }
  .topbar:not(.gs-has-issue-bg) .tpb-nav a:is(:hover,.hv)::before{ transform: scaleY(1); }

  /* Programme rows — the text slides, the row tints */
  .tl-row{ transition: background .4s var(--hv-ease), opacity .4s var(--hv-ease); }
  .tl-prog, .tl-venue{ transition: transform .4s var(--hv-ease); }
  .tl-row:is(:hover,.hv) .tl-prog{ transform: translateX(10px); }
  .tl-row:is(:hover,.hv) .tl-venue{ transform: translateX(6px); }
  .tl-row:is(:hover,.hv) .tl-name{ text-decoration: none; }
  .tl-name{
    background: linear-gradient(currentColor,currentColor) 0 100% / 0 2px no-repeat;
    transition: background-size .4s var(--hv-ease);
    padding-bottom: 2px; width: fit-content;
  }
  .tl-row:is(:hover,.hv) .tl-name{ background-size: 100% 2px; }

  /* Project / event rows on the Projects pages */
  .pj-row .t, .pj-ed summary .t{ transition: transform .4s var(--hv-ease); }
  .pj-row:is(:hover,.hv) .t, .pj-ed summary:is(:hover,.hv) .t{ transform: translateX(10px); }
  .pj-row .a, .ep-prog-arrow{ transition: transform .2s var(--hv-ease); display: inline-block; }
  .pj-row:is(:hover,.hv) .a, .ep-prog-row:is(:hover,.hv) .ep-prog-arrow{ transform: translateX(6px); }
  .ep-prog-name{ transition: transform .4s var(--hv-ease); }
  .ep-prog-row:is(:hover,.hv) .ep-prog-name{ transform: translateX(10px); }

  /* Cards — a curtain of ink rises from the bottom, text inverts */
  .pj-card, .gs-m-card{
    position: relative; overflow: hidden; isolation: isolate;
    transition: color .5s var(--hv-ease);
  }
  .pj-card::before, .gs-m-card::before{
    content:""; position:absolute; inset:0; z-index:-1;
    background: var(--ink);
    transform: scaleY(0); transform-origin: 50% 100%;
    transition: transform .6s var(--hv-ease);
  }
  .pj-card:is(:hover,.hv), .gs-m-card:is(:hover,.hv){ background: transparent; color: var(--bg); }
  .pj-card:is(:hover,.hv)::before, .gs-m-card:is(:hover,.hv)::before{ transform: scaleY(1); }
  .pj-card img{ transition: transform .8s var(--hv-ease); }
  .pj-card:is(:hover,.hv) img{ transform: scale(1.04); }

  /* This-week / Coming-up rail — photography eases in, no fills (cards carry their own colours) */
  .gs-card{ overflow: hidden; }
  .gs-card-bg-img, .gs-card-bg-video{ transition: transform .9s var(--hv-ease); }
  .gs-card:is(:hover,.hv) .gs-card-bg-img, .gs-card:is(:hover,.hv) .gs-card-bg-video{ transform: scale(1.04); }
  .gs-card .gs-c-title{ transition: transform .4s var(--hv-ease); }
  .gs-card:is(:hover,.hv) .gs-c-title{ transform: translateX(6px); }

  /* Text links — underline draws left to right */
  .foot-col-body a, .gs-lineup-name, .gs-lineup-all, .pj-names a{
    background: linear-gradient(currentColor,currentColor) 0 100% / 0 1px no-repeat;
    transition: background-size .4s var(--hv-ease), color .2s var(--hv-ease);
    text-decoration: none; padding-bottom: 1px;
  }
  .foot-col-body a:is(:hover,.hv), .gs-lineup-name:is(:hover,.hv), .gs-lineup-all:is(:hover,.hv), .pj-names a:is(:hover,.hv){ background-size: 100% 1px; }

  /* Focus gets the same treatment as hover for keyboard users */
  .tl-row:focus-visible .tl-prog{ transform: translateX(10px); }
}

/* ---- Inside pages (event / artist / project readers) ---- */
@media (hover:hover){
  .ep-register, .ep-register-header, .ep-nav-btn:not(.ep-nav-empty){
    position: relative; overflow: hidden; isolation: isolate;
    transition: color .5s var(--hv-ease), border-color .5s var(--hv-ease);
  }
  .ep-register::before, .ep-register-header::before, .ep-nav-btn:not(.ep-nav-empty)::before{
    content:""; position:absolute; inset:0; z-index:-1;
    background: var(--ink, currentColor);
    transform: scaleY(0); transform-origin: 50% 100%;
    transition: transform .6s var(--hv-ease);
  }
  .ep-register:is(:hover,.hv), .ep-register-header:is(:hover,.hv), .ep-nav-btn:not(.ep-nav-empty):is(:hover,.hv){
    opacity: 1; background: transparent; color: var(--bg, #f9f9f9);
  }
  .ep-register:not(.ep-register-disabled):is(:hover,.hv)::before,
  .ep-register-header:not(.ep-register-disabled):is(:hover,.hv)::before,
  .ep-nav-btn:not(.ep-nav-empty):is(:hover,.hv)::before{ transform: scaleY(1); }
  .ep-register-disabled::before{ display:none; }
  /* artist / related links inside readers */
  .ep-text a, .ep-facts a, .ep-artists a, .ep-sub a, .ep-subtitle a, #arRoot a:not(.ep-prog-row):not(.art-close){
    background: linear-gradient(currentColor,currentColor) 0 100% / 0 1px no-repeat;
    transition: background-size .4s var(--hv-ease), color .2s var(--hv-ease);
    text-decoration: none; padding-bottom: 1px;
  }
  .ep-text a:is(:hover,.hv), .ep-facts a:is(:hover,.hv), .ep-artists a:is(:hover,.hv), .ep-sub a:is(:hover,.hv), .ep-subtitle a:is(:hover,.hv),
  #arRoot a:not(.ep-prog-row):not(.art-close):is(:hover,.hv){ background-size: 100% 1px; }
  /* close / pop-out icons: quarter turn like the reference */
  #epClose svg, .art-close{ transition: transform .4s var(--hv-ease); }
  #epClose:is(:hover,.hv) svg{ transform: rotate(-90deg); }
  .art-close:is(:hover,.hv){ transform: rotate(-90deg); }
}

/* Reduced motion: keep the colour inversion, drop the movement */
@media (prefers-reduced-motion:reduce){
  .tpb-nav a, .tpb-nav a::before, .pj-card, .pj-card::before, .gs-m-card, .gs-m-card::before,
  .ep-register, .ep-register::before, .ep-register-header, .ep-register-header::before,
  .ep-nav-btn, .ep-nav-btn::before{ transition-duration: .01s !important; }
  .tl-prog, .tl-venue, .pj-row .t, .ep-prog-name, .gs-card .gs-c-title, .gs-card-bg-img{ transform: none !important; }
}