/* ===========================================================================
   portals.css — invisible hotspots over the bubble plate in the hero canvas
   ---------------------------------------------------------------------------
   Concept (2026-06-01 — replaces the round <video> portals):

   The hero canvas (driven by hero-video-scrub.js) plays the master video,
   whose final frame already shows the two bubbles painted into the plate.
   We overlay two transparent <button> hotspots aligned to those bubble
   positions, with PNG bubble images (extracted from PSB) as the .portal__overlay.
   The PNG itself is mostly transparent except for the bubble's outline +
   refractions — when the user hovers, we apply a brass drop-shadow + soft
   tint to the overlay PNG so only that bubble glows. The user thus sees
   the SAME bubbles they saw in the video but now lit up as a selectable
   hover state.

   Reveal: .portals.is-active toggled by js/portals.js once
   window.gamosHero.progress >= 0.92 (with hysteresis at 0.88).
   ========================================================================= */

.portals {
  /* Lives inside .hero__sticky as Layer D (NOT fixed — moved 2026-06-01). */
  position: absolute;
  inset: 0;
  display: block;             /* children are absolutely positioned */
  z-index: 20;
  pointer-events: none;       /* container = pass-through */

  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.6s var(--ease-out-cinema),
    visibility 0s linear 0.6s;
}

.portals.is-active {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.6s var(--ease-out-cinema),
    visibility 0s linear 0s;
}


/* ---------------------------------------------------------------------------
   Portal — full-viewport plate carrying a FULL-FRAME overlay PNG, plus a
   sized click hotspot centered on its bubble.
   ---------------------------------------------------------------------------
   The portal-resort / portal-venue art (assets/images/brand/portal-*.webp,
   ~3825×~1880 source) are FULL-VIEWPORT PLATES — each contains its bubble
   positioned within the whole frame (resort bubble on the right, venue bubble
   on the left), mostly-transparent elsewhere. To land each bubble EXACTLY on
   the canvas's baked-in bubble, the overlay <img> must fill the viewport with
   the SAME math the canvas renderer uses:
     canvas: scale = max(cw/iw, ch/ih) * ZOOM_FACTOR  (ZOOM_FACTOR = 1.35)
     overlay: object-fit:cover (= max ratio) then transform: scale(1.35).
   Measured bubble centers in the 1280×720 source frame:
     RESORT ≈ (72.8%, 59.6%)   VENUE ≈ (28.0%, 59.6%)
   The visual plate is full-viewport (covers everything); the <button> itself
   is a sized invisible hotspot anchored on the bubble center so the clickable
   region, focus ring, label, and hover glow stay local to one bubble.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   2026-06-02 redesign — bubbles confined to a small hotspot.
   ---------------------------------------------------------------------------
   Previous spec used full-viewport overlay plates with ZOOM_FACTOR=1.35 to
   match canvas cover-math, but that turned the entire screen brass on hover.
   The user wants: small bubbles, pixel-perfect over the canvas's baked-in
   bubbles, label INSIDE the bubble (not floating below).

   New approach: each `.portal` is a small round hotspot anchored at the
   measured bubble center on the canvas (resort 72.8%/venue 28% × 59.6%).
   The .portal__overlay is now confined to the hotspot box, and the PNG is
   rendered at object-fit:contain so its bubble center sits exactly at the
   center of the hotspot. Glow filters apply only to that small image — not
   the full viewport.
   --------------------------------------------------------------------------- */

.portal {
  position: absolute;
  /* Round hotspot ≈ 22vw at desktop, capped so it never dominates the screen.
     The clip-path keeps the click region perfectly circular. */
  inline-size: clamp(180px, 22vw, 320px);
  block-size: clamp(180px, 22vw, 320px);
  border-radius: 50%;
  transform-origin: center;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;       /* opt-in */
  isolation: isolate;
  outline: none;
  -webkit-tap-highlight-color: transparent;

  /* Vertical center of both bubbles ≈ 59.6%. */
  top: 59.6%;

  /* Subtle scale + opacity reveal (overall fade controlled by .portals). */
  opacity: 0;
  transition:
    transform 0.7s var(--ease-out-cinema),
    opacity   0.7s var(--ease-out-cinema),
    filter    0.45s var(--ease-out-cinema);
}

/* Resort bubble center ≈ 72.8% from the left edge of the frame. */
.portal--resort {
  left: 72.8%;
  transform: translate(-50%, -50%) scale(0.94);
}
/* Venue bubble center ≈ 28.0% from the left edge of the frame. */
.portal--venue {
  left: 28.0%;
  transform: translate(-50%, -50%) scale(0.94);
}

.portals.is-active .portal--resort,
.portals.is-active .portal--venue {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}


/* ---------------------------------------------------------------------------
   Bubble overlay image — confined to the hotspot, contained at object-fit so
   the PNG's transparent bubble shape lands centered. Default rest state is
   nearly invisible (the canvas's baked-in bubble already shows the bubble);
   on hover/focus the PNG glows brass to indicate selection.
   --------------------------------------------------------------------------- */

.portal__overlay {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  user-select: none;
  z-index: 1;
  opacity: 0;
  filter:
    drop-shadow(0 0 0 transparent)
    drop-shadow(0 0 0 transparent);
  transition:
    opacity 0.4s var(--ease-out-cinema),
    filter  0.45s var(--ease-out-cinema),
    transform 0.6s var(--ease-out-cinema);
}


/* ---------------------------------------------------------------------------
   Label — anchored to CENTER of the bubble (not its bottom). The hotspot
   box IS the bubble box now, so center-of-hotspot = center-of-bubble.
   --------------------------------------------------------------------------- */

.portal__label {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-family: var(--font-display-he);
  font-weight: var(--fw-bold);
  font-size: clamp(1.4rem, 2.2vw, 2.2rem);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ivory);
  text-shadow:
    0 2px 12px rgba(0, 0, 0, 0.85),
    0 0 22px rgba(0, 0, 0, 0.70),
    0 0 40px rgba(0, 0, 0, 0.55);
  pointer-events: none;
  user-select: none;
  z-index: 2;
  opacity: 0.95;
  transition:
    opacity 0.4s var(--ease-out-cinema),
    transform 0.5s var(--ease-out-cinema),
    text-shadow 0.4s var(--ease-out-cinema);
}


/* ---------------------------------------------------------------------------
   Hover / focus — strong brass GLOW on the bubble overlay (this is the
   selection indicator the user explicitly asked for: "אמור להיות סימן של
   צל או משהו מואר שמראה את הבחירה"). Only the hovered bubble lights up.
   --------------------------------------------------------------------------- */

.portal:hover .portal__overlay,
.portal:focus-visible .portal__overlay {
  opacity: 1;
  transform: scale(1.04);
  filter:
    drop-shadow(0 0 14px var(--brass-glow))
    drop-shadow(0 0 32px color-mix(in srgb, var(--brass) 70%, transparent))
    brightness(1.15) saturate(1.18);
}

.portal:hover .portal__label,
.portal:focus-visible .portal__label {
  opacity: 1;
  transform: translate(-50%, calc(-50% - 4px));
  text-shadow:
    0 2px 16px rgba(0, 0, 0, 0.90),
    0 0 24px var(--brass-glow);
}

.portal:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-offset);   /* unified offset ring (2026-06-15) */
  border-radius: 50%;
}

.portals.is-active .portal:active {
  /* Preserve center anchoring (translate) while nudging scale on press. */
  transform: translate(-50%, -50%) scale(0.97);
}


/* ---------------------------------------------------------------------------
   Click feedback — JS adds [data-clicked] on press for ~250ms before the
   expand timeline kicks in. Strong glow + ring confirms selection.
   --------------------------------------------------------------------------- */

.portal[data-clicked] .portal__overlay {
  opacity: 1;
  filter:
    drop-shadow(0 0 36px var(--brass-glow))
    drop-shadow(0 0 100px var(--brass))
    brightness(1.4) saturate(1.4);
}


/* ---------------------------------------------------------------------------
   Expand timeline — js/portals.js (WAAPI) scales to 6× over ~1s.
   While expanding, sibling fades out, body scroll-lock prevents the user
   from scrolling away mid-animation. .is-leaving on .portals dims the rest.
   --------------------------------------------------------------------------- */

.portal.is-expanding {
  z-index: 30;
  pointer-events: none;
}

.portals.is-leaving .portal:not(.is-expanding) {
  opacity: 0.18;
  pointer-events: none;
  transition: opacity 0.35s var(--ease-out-cinema);
}


/* ---------------------------------------------------------------------------
   Reduced motion — instant reveal, no glow scaling, no expand transform.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .portals,
  .portal,
  .portal__overlay,
  .portal__label {
    transition: none !important;
  }
  .portal:hover .portal__overlay,
  .portal:focus-visible .portal__overlay {
    transform: none;
  }
  .portal:hover .portal__label,
  .portal:focus-visible .portal__label {
    transform: translate(-50%, -50%);
  }
}


/* ---------------------------------------------------------------------------
   Mobile — bubbles square-ish, slightly larger touch target.
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .portal {
    inline-size: 38vw;
    block-size: 38vw;
  }
  .portal__label {
    font-size: clamp(1.1rem, 4.6vw, 1.5rem);
  }
}