/* scrollwithclasses_fix0855.css
   Known-good, minimal implementation:
   - Left ticker panel same height as image (banner stretches)
   - One quote visible at a time (no piling)
   - Quotes centered vertically + horizontally
   - Survives HTML5UP body.is-preload animation kill-switch via fallback
*/

/* --- Layout: two equal columns --- */
#banner{
  display:flex;
  align-items:stretch;
  gap:2rem;
}

#banner > .content,
#banner > .image.object{
  flex:1 1 0;
  max-width:none;
  margin:0;
}

#banner > .image.object img{
  width:100%;
  height:auto;      /* image defines banner height */
  display:block;
}

/* --- Left box height chain --- */
#banner > .content{
  display:flex;
  align-items:stretch;
}

#banner > .content > .box{
  flex:1 1 auto;
  padding:2rem;
  margin:0;
  overflow:hidden;  /* viewport for the ticker */
  position:relative;
}

/* UL fills the box */
#banner > .content > .box > ul.scroll{
  list-style:none;
  margin:0;
  padding:0;
  position:relative;
  width:100%;
  height:100%;
}

/* --- Ticker items: overlap but hidden by default (prevents piling) --- */
#banner > .content > .box > ul.scroll > li{
  position:absolute !important;
  inset:0 !important;
  width:100%;
  height:100%;

  /* center text */
  display:grid;
  place-items:center;
  text-align:center;

  padding:3rem 2.25rem;
  line-height:1.8;

  /* hard default hidden */
  opacity:0 !important;
  visibility:hidden !important;

  transform:translateY(140%) !important;
  will-change: transform, opacity;
}

/* keep line length nice */
#banner > .content > .box > ul.scroll > li > *{
  max-width:46ch;
}
#banner > .content > .box > ul.scroll > li.item-1{
  opacity:1 !important;
  visibility:visible !important;
  transform:translateY(0%) !important;
}
/* --- Animation (6 items) --- */
:root{
  --ticker-slot: 7s;
  --ticker-duration: calc(var(--ticker-slot) * 6);
}

#banner > .content > .box > ul.scroll > li{
  animation: ticker var(--ticker-duration) ease-in-out infinite !important;
  animation-fill-mode: both !important;
}

#banner .scroll .item-1{ animation-delay: calc(var(--ticker-slot) * 0); }
#banner .scroll .item-2{ animation-delay: calc(var(--ticker-slot) * 1); }
#banner .scroll .item-3{ animation-delay: calc(var(--ticker-slot) * 2); }
#banner .scroll .item-4{ animation-delay: calc(var(--ticker-slot) * 3); }
#banner .scroll .item-5{ animation-delay: calc(var(--ticker-slot) * 4); }
#banner .scroll .item-6{ animation-delay: calc(var(--ticker-slot) * 5); }

@keyframes ticker{
  0%   { opacity:1; visibility:visible; transform:translateY(0%); }
  70%  { opacity:1; visibility:visible; transform:translateY(0%); }
  82%  { opacity:0; visibility:hidden;  transform:translateY(-140%); }
  100% { opacity:0; visibility:hidden;  transform:translateY(-140%); }
}
/* --- HTML5UP preload kill-switch fallback ---
   If animations are disabled (body.is-preload sticks), show ONLY first item.
*/
/*body.is-preload #banner > .content > .box > ul.scroll > li{
  animation:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  transform:none !important;
}
body.is-preload #banner > .content > .box > ul.scroll > li.item-1{
  opacity:1 !important;
  visibility:visible !important;
}
*/
/* If is-preload sticks, still allow ticker to run */
body.is-preload #banner > .content > .box > ul.scroll > li{
  animation: ticker var(--ticker-duration) ease-in-out infinite !important;
}
/* --- Mobile: stack --- */
@media screen and (max-width: 980px){
  #banner{ flex-direction:column; gap:1.5rem; }
  #banner > .content > .box{ min-height:280px; }
}