/* ============================================================
   Island Hub Hero Overlay
   Adds the painterly island portrait at upper-right of each
   island hub's hero (/oahu, /maui, /big-island, /kauai), plus
   replaces the legacy 7rem .video-controls pause button with
   the tucked-corner pattern from the homepage.

   Loaded via extra_head on each of the four island hub HTML
   files. NOT loaded on the homepage (homepage has its own
   constellation in homepage-beta-v1.css).
============================================================ */

/* Island portrait — clickable link to that island's maps page */
.hg-island-hub-portrait {
  position: absolute;
  top: 6%;
  right: 5%;
  /* z-index must beat .bg-image-overlay (z:99 in 04-08-25-v1.css) */
  z-index: 100;
  display: block;
  width: clamp(180px, 24vw, 420px);
  height: auto;
  cursor: pointer;
  text-decoration: none;
  transition: transform .35s ease;
  transform-origin: center;
  /* The -new.png set has clean alpha-0 corners — no SVG filter
     needed (unlike the watercolor -large.png set on the homepage). */
}
.hg-island-hub-portrait img {
  display: block;
  width: 100%;
  height: auto;
  opacity: .92;
  transition: opacity .35s ease;
  -webkit-user-drag: none;
  user-select: none;
  border-radius: 0 !important;
}
.hg-island-hub-portrait:hover,
.hg-island-hub-portrait:focus-visible {
  transform: scale(1.04);
  outline: none;
}
.hg-island-hub-portrait:hover img,
.hg-island-hub-portrait:focus-visible img {
  opacity: 1;
}

/* Fade-in on load — matches the homepage constellation's
   reveal style so the system feels coherent. */
.hg-island-hub-portrait {
  opacity: 0;
  animation: hgIslandHubPortraitFadeIn 1.6s ease forwards .25s;
}
@keyframes hgIslandHubPortraitFadeIn { to { opacity: 1; } }

/* Mobile / tablet — portrait shrinks proportionally so it
   doesn't dominate the smaller hero. */
@media (max-width: 1023px) {
  .hg-island-hub-portrait {
    top: 8%;
    right: 4%;
    width: 32vw;
  }
}

/* ============================================================
   Tucked-corner pause/play — replaces the legacy 7rem
   .video-controls icon on each island hub. Existing JS in
   each page still wires #video-play / #video-pause so this is
   a visual-only refactor for the control itself.
============================================================ */
.hg-island-hub-video-control {
  position: absolute;
  bottom: 18px;
  right: 18px;
  /* Must beat .bg-image-overlay (z:99); match homepage at z:1000 */
  z-index: 1000;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: .55;
  border: none;
  padding: 0;
  margin: 0;
  transition: opacity .2s ease, background .2s ease, transform .2s ease;
}
.hg-island-hub-video-control:hover,
.hg-island-hub-video-control:focus-visible {
  opacity: 1;
  background: rgba(0, 0, 0, .62);
  transform: scale(1.08);
  outline: none;
}
.hg-island-hub-video-control i {
  color: #fff;
  font-size: 14px;
  line-height: 1;
}
@media (max-width: 768px) {
  .hg-island-hub-video-control {
    bottom: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
  }
  .hg-island-hub-video-control i { font-size: 13px; }
}