/*
 * Shared homepage hover effects.
 * Colours follow the existing Customizer palette.
 */

.home {
  --pc-photo-hover-scale: 1.025;
  --pc-photo-hover-time: 400ms;
  --pc-detail-hover-time: 180ms;
}

/* Keep enlarged photographs inside their existing frames.
   Announcement overlays remain stationary over the photograph. */
.pc-hero__media,
.pc-announcement__media,
.pc-experience__photo,
.pc-organiser__media {
  overflow: hidden;
}

/* Colour feedback on devices that support precise hovering. */
@media (hover: hover) and (pointer: fine) {
  /* Experience: highlight the row and fill its number circle. */
  .pc-experience__points li:hover {
    background-color: var(--pc-surface-alt, #f5e8e9);
  }

  .pc-experience__points li:hover .pc-experience__number {
    border-color: var(--pc-primary, #c91d35);
    background-color: var(--pc-primary, #c91d35);
    color: var(--pc-on-primary, #fff);
  }

  /* Speakers: turn the announcement panel into a brand accent. */
  .pc-speakers__panel:hover {
    border-color: var(--pc-primary, #c91d35);
    background-color: var(--pc-primary, #c91d35);
  }

  .pc-speakers__panel:hover .pc-speakers__announcement,
  .pc-speakers__panel:hover .pc-speakers__icon {
    color: var(--pc-on-primary, #fff);
  }

  .pc-speakers__panel:hover .pc-speakers__icon {
    border-inline-end-color: var(--pc-on-primary, #fff);
  }

  /* Takeaways: echo the button's secondary colour. */
  .pc-takeaways__items li:hover .pc-takeaways__number {
    background-color: var(--pc-secondary, #242424);
    color: var(--pc-on-secondary, #fff);
  }
}

/* Add movement only when the visitor allows motion. */
@media (hover: hover) and (pointer: fine)
  and (prefers-reduced-motion: no-preference) {

  /* One consistent photographic effect. */
  .pc-hero__image,
  .pc-announcement__image,
  .pc-experience__image,
  .pc-organiser__image {
    transition: transform var(--pc-photo-hover-time) ease-out;
  }

  .pc-hero:hover .pc-hero__image,
  .pc-announcement:hover .pc-announcement__image,
  .pc-experience__photo:hover .pc-experience__image,
  .pc-organiser__media:hover .pc-organiser__image {
    transform: scale(var(--pc-photo-hover-scale));
  }

  /* Experience row and number transitions. */
  .pc-experience__points li {
    transition:
      background-color var(--pc-detail-hover-time) ease-out;
  }

  .pc-experience__number {
    transition:
      background-color var(--pc-detail-hover-time) ease-out,
      border-color var(--pc-detail-hover-time) ease-out,
      color var(--pc-detail-hover-time) ease-out,
      transform var(--pc-detail-hover-time) ease-out;
  }

  .pc-experience__points li:hover .pc-experience__number {
    transform: scale(1.04);
  }

  /* Speaker panel: restrained lift and soft shadow. */
  .pc-speakers__panel {
    transition:
      background-color var(--pc-detail-hover-time) ease-out,
      border-color var(--pc-detail-hover-time) ease-out,
      transform var(--pc-detail-hover-time) ease-out,
      box-shadow var(--pc-detail-hover-time) ease-out;
  }

  .pc-speakers__announcement {
    transition: color var(--pc-detail-hover-time) ease-out;
  }

  .pc-speakers__icon {
    transition:
      color var(--pc-detail-hover-time) ease-out,
      border-color var(--pc-detail-hover-time) ease-out;
  }

  .pc-speakers__panel:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 8%);
  }

  /* Takeaway circles. */
  .pc-takeaways__number {
    transition:
      background-color var(--pc-detail-hover-time) ease-out,
      color var(--pc-detail-hover-time) ease-out,
      transform var(--pc-detail-hover-time) ease-out;
  }

  .pc-takeaways__items li:hover .pc-takeaways__number {
    transform: scale(1.04);
  }

  /* Audience icons: small movement without moving their labels. */
  .pc-audience__icon {
    transition: transform var(--pc-detail-hover-time) ease-out;
  }

  .pc-audience__items li:hover .pc-audience__icon {
    transform: translateY(-2px);
  }
}