/* ───────── Gallery, second layer: a spotlight layout for one photo, "Stories" for several, a frame that grows
   as you scroll, an ambient colour glow taken from the photo, and light that follows the pointer.
   Loaded after gallery.css. To undo all of it: remove the two includes in home.html. ───────── */

@property --glow1 { syntax: "<color>"; inherits: true; initial-value: #234a7d; }
@property --glow2 { syntax: "<color>"; inherits: true; initial-value: #fff200; }

.hm-spot { --ease: cubic-bezier(.2, .7, .2, 1); display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 460px); align-items: center; gap: clamp(2rem, 6vw, 5rem); transition: --glow1 1.2s ease, --glow2 1.2s ease; }

/* ── the text side ── */
.hm-spot-text { max-width: 34rem; }
.hm-spot-count { margin-bottom: .5rem; font: 700 1rem var(--body); color: var(--muted); font-feature-settings: "tnum"; }
.hm-spot-count b { font: 800 2.6rem/1 var(--display); color: var(--ink); }
.hm-spot-title { font-size: clamp(2.2rem, 4.8vw, 3.8rem); font-weight: 800; line-height: 1.04; letter-spacing: -.02em; text-wrap: balance; }
.hm-spot-title:empty { display: none; }
.hm-spot-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; margin: 1rem 0 1.8rem; color: var(--muted); font-weight: 600; }
.hm-spot-meta span { padding: .22rem .85rem; border-radius: 999px; background: var(--sky); color: var(--navy-2); }
.hm-spot-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; }
.hm-spot-nav { display: flex; gap: .5rem; }
.hm-spot-btn { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1.5px solid var(--line); border-radius: 50%; background: #fff; color: var(--ink); cursor: pointer; transition: background-color .2s, border-color .2s; }
.hm-spot-btn:hover { background: var(--yellow); border-color: var(--yellow); }
.hm-spot-btn .gs-ic { width: 22px; height: 22px; stroke-width: 2.4; }
.hm-spot-btn svg { width: 20px; height: 20px; fill: currentColor; stroke: none; }
.hm-spot-btn .gs-ic { fill: none; stroke: currentColor; }
.hm-spot-title, .hm-spot-meta, .hm-spot-count b { transition: opacity .3s ease, translate .3s var(--ease); }
.hm-spot.is-swapping .hm-spot-title, .hm-spot.is-swapping .hm-spot-meta, .hm-spot.is-swapping .hm-spot-count b { opacity: 0; translate: 0 10px; }

/* ── the photo side: a frame, a glow behind it ── */
.hm-spot-media { position: relative; isolation: isolate; justify-self: center; width: min(100%, 460px); }
.hm-glow { position: absolute; inset: -14% -24%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, var(--glow1), transparent 72%), radial-gradient(closest-side at 72% 28%, var(--glow2), transparent 66%); filter: blur(42px); opacity: .5; translate: calc(var(--px, 0) * -26px) calc(var(--py, 0) * -20px); transition: translate .5s ease-out; animation: hm-breathe 7s ease-in-out infinite alternate; }
@keyframes hm-breathe { from { scale: .94; opacity: .4; } to { scale: 1.06; opacity: .62; } }

.hm-stories-frame {
    position: relative; width: 100%; aspect-ratio: 4 / 5; max-height: 640px; overflow: hidden; background: var(--navy);
    border-radius: calc(46px - var(--grow, 1) * 18px); scale: calc(.9 + var(--grow, 1) * .1);
    box-shadow: 0 40px 70px -34px rgba(11, 28, 51, .65);
}
.hm-stories-slides { position: absolute; inset: 0; }
.hm-story { position: absolute; inset: 0; margin: 0; opacity: 0; pointer-events: none; transition: opacity .8s ease; }
.hm-story.is-active { z-index: 1; opacity: 1; pointer-events: auto; }
.hm-story-link { position: absolute; inset: 0; display: block; }
.hm-story-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.35); filter: blur(26px) saturate(1.3) brightness(.8); translate: calc(var(--px, 0) * -14px) calc(var(--py, 0) * -10px); transition: translate .35s ease-out; }
.hm-story-pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; translate: calc(var(--px, 0) * 10px) calc(var(--py, 0) * 8px); transition: translate .35s ease-out; }
.hm-story.is-active .hm-story-pic { animation: hm-kb 22s ease-in-out infinite alternate; }

/* progress segments, like story bars */
.hm-stories-frame::before { content: ""; position: absolute; inset: 0 0 auto 0; z-index: 3; height: 90px; background: linear-gradient(rgba(0, 0, 0, .34), transparent); pointer-events: none; opacity: 0; }
.hm-stories:not(.is-single) .hm-stories-frame::before { opacity: 1; }
.hm-stories-bars { position: absolute; top: 13px; left: 14px; right: 14px; z-index: 4; display: flex; gap: 5px; pointer-events: none; }
.hm-stories-bars i { flex: 1; height: 4px; overflow: hidden; border-radius: 4px; background: rgba(255, 255, 255, .35); }
.hm-stories-bars i::after { content: ""; display: block; height: 100%; background: #fff; transform-origin: 0 50%; transform: scaleX(var(--f, 0)); }

/* tap zones: left third goes back, right third goes forward, the middle opens the photo */
.hm-zone { position: absolute; top: 0; bottom: 0; z-index: 2; width: 32%; padding: 0; border: 0; background: none; -webkit-tap-highlight-color: transparent; }
.hm-zone.prev { left: 0; cursor: w-resize; }
.hm-zone.next { right: 0; cursor: e-resize; }
.hm-story.is-active { z-index: 1; }

/* a soft light that follows the pointer */
.hm-stories-frame::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0; background: radial-gradient(280px circle at var(--lx, 50%) var(--ly, 30%), rgba(255, 255, 255, .2), transparent 60%); transition: opacity .4s ease; }
@media (hover: hover) { .hm-spot-media:hover .hm-stories-frame::after { opacity: 1; } }

.hm-stories.is-single .hm-zone, .hm-stories.is-single .hm-stories-bars { display: none; }

/* ── entrance (gallery2.js adds .is-armed) ── */
.hm-stories.is-armed .hm-spot-text > *, .hm-stories.is-armed .hm-spot-media { transition: opacity .8s ease, translate .9s var(--ease); }
.hm-stories.is-armed:not(.is-in) .hm-spot-text > * { opacity: 0; translate: -34px 0; }
.hm-stories.is-armed:not(.is-in) .hm-spot-media { opacity: 0; translate: 50px 0; }
.hm-stories.is-armed .hm-spot-text > :nth-child(2) { transition-delay: .08s; }
.hm-stories.is-armed .hm-spot-text > :nth-child(3) { transition-delay: .16s; }
.hm-stories.is-armed .hm-spot-text > :nth-child(4) { transition-delay: .24s; }
.hm-stories.is-armed .hm-spot-media { transition-delay: .2s; }

@media (max-width: 900px) {
    .hm-spot { grid-template-columns: minmax(0, 1fr); }
    .hm-spot-media { order: -1; width: min(100%, 420px); }
    .hm-spot-text { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
    .hm-stories-frame { scale: 1; border-radius: 28px; }
    .hm-story, .hm-story-bg, .hm-story-pic, .hm-glow, .hm-spot, .hm-spot-title, .hm-spot-meta { transition: none; }
    .hm-story.is-active .hm-story-pic, .hm-glow { animation: none; }
    .hm-stories.is-armed .hm-spot-text > *, .hm-stories.is-armed .hm-spot-media { transition: none; }
}