/* enhance.css – Andreas Jenni start page
   Load AFTER index.css. Works together with enhance.js. */

.u-section-1 .u-gallery-1 {
  --aj-interval: 5000ms;
  position: relative;
}

/* ---- 1. Slides: a slow settle instead of a static frame ---- */
.u-section-1 .u-carousel-item { overflow: hidden; }

.u-section-1 .u-carousel-item.u-active .u-back-slide {
  animation: aj-settle calc(var(--aj-interval) + 1500ms) cubic-bezier(.2, .6, .2, 1) both;
}

@keyframes aj-settle {
  from { transform: scale(1.05); }
  to   { transform: scale(1); }
}

/* Pure crossfade: only opacity animates, nothing moves sideways.
   (index.css sets 0.1s, which reads as a hard cut; a longer duration alone
   would make Nicepage's slide movement visible, so movement is switched off.) */
.u-section-1 .u-gallery-1 .u-carousel-item {
  transform: none !important;
  transition-property: opacity !important;
  transition-duration: 900ms !important;
  transition-timing-function: ease-in-out !important;
}

/* ---- 2. Category index with progress lines ---- */
.aj-index {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  padding: 64px clamp(16px, 4vw, 48px) 6px;
  background: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
  pointer-events: none;
}

.aj-index__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 2vw, 28px);
  max-width: 760px;
}

.aj-index__item {
  display: block;
  padding: 14px 0 12px;
  color: #fff;
  text-decoration: none;
  pointer-events: auto;
}

.aj-index__label {
  display: block;
  margin-bottom: 10px;
  font-size: clamp(.9rem, .5rem + 1.2vw, 1.15rem);
  line-height: 1.2;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
  opacity: .72;
  transition: opacity .25s ease;
}

.aj-index__item:hover .aj-index__label,
.aj-index__item:focus-visible .aj-index__label,
.aj-index__item.is-active .aj-index__label {
  opacity: 1;
}

.aj-index__item:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

.aj-index__line {
  position: relative;
  display: block;
  height: 2px;
  overflow: hidden;
  background: rgba(255, 255, 255, .35);
}

.aj-index__line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left center;
}

.aj-index__item.is-active .aj-index__line::after {
  animation: aj-fill var(--aj-interval) linear forwards;
}

@keyframes aj-fill {
  to { transform: scaleX(1); }
}

/* While the pointer is on the index the slideshow is "held":
   show the chosen line full instead of counting down. */
.aj-hover .aj-index__item.is-active .aj-index__line::after {
  animation: none;
  transform: scaleX(1);
}

/* ---- 3. Start page only: the index replaces the big titles
        and the four category links in the top menu ---- */

/* On-image titles (kept in the DOM, enhance.js reads the labels from them) */
.u-section-1 .u-gallery-1 .u-over-slide {
  display: none;
}

.u-section-1 .u-gallery-1 .u-carousel-item {
  cursor: pointer;
}

/* Top menu: hide Painting, Sculpture, Drawing, Exhibition (items 1-4);
   CV and Contact stay. Applies to the desktop menu and the mobile panel. */
.u-header .u-nav > .u-nav-item:nth-child(-n+4) {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .u-section-1 .u-carousel-item.u-active .u-back-slide { animation: none; }
  .aj-index__item.is-active .aj-index__line::after {
    animation: none;
    transform: scaleX(1);
  }
}