/* ───────── News section, second layer: the excerpt that slides up, an Instagram badge, titles that write themselves
   and a highlight that sweeps, depth under the mouse, a loading shimmer, and a swipeable rail for more posts.
   Loaded after news.css. To undo all of it: remove the two includes in home.html. ───────── */

/* ── 1. excerpt over the poster on hover (mouse only) ── */
.hm-post-peek { position: absolute; inset: auto 0 0 0; z-index: 3; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; padding: 3rem 1.2rem 1.1rem; background: linear-gradient(0deg, rgba(11, 28, 51, .96) 62%, rgba(11, 28, 51, 0)); color: #fff; font-size: .95rem; line-height: 1.55; translate: 0 101%; transition: translate .55s var(--ease); }
.hm-news-n3 .hm-post:not(.is-featured) .hm-post-peek { -webkit-line-clamp: 4; padding: 2rem .9rem .8rem; font-size: .82rem; }
@media (hover: hover) { .hm-post:hover .hm-post-peek, .hm-post:focus-visible .hm-post-peek { translate: 0 0; } }
@media (hover: none) { .hm-post-peek { display: none; } }

/* ── 2. posts that open Instagram say so ── */
@property --a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.hm-ig { position: absolute; top: .9rem; right: .9rem; z-index: 4; isolation: isolate; display: inline-flex; align-items: center; height: 40px; padding: 0 10px; border-radius: 999px; background: #fff; color: #c13584; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .5); }
.hm-ig::before { content: ""; position: absolute; inset: -3px; z-index: -1; border-radius: inherit; background: conic-gradient(from var(--a), #f9ce34, #ee2a7b, #6228d7, #f9ce34); animation: hm-ig-spin 4s linear infinite; }
@keyframes hm-ig-spin { to { --a: 360deg; } }
.hm-ig .gs-ic { width: 20px; height: 20px; flex: none; }
.hm-ig em { max-width: 0; margin-left: 0; overflow: hidden; opacity: 0; white-space: nowrap; font: 700 .82rem var(--body); font-style: normal; color: var(--ink); transition: max-width .45s var(--ease), margin .45s var(--ease), opacity .3s ease; }
.hm-post:hover .hm-ig em, .hm-post:focus-visible .hm-ig em { max-width: 10rem; margin-left: .5rem; opacity: 1; }

/* ── 3. titles: words that rise on entrance, a yellow highlight that sweeps behind the title on hover ── */
.hm-t { padding-bottom: 2px; background: linear-gradient(var(--yellow), var(--yellow)) no-repeat 0 90% / 0% 38%; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size .55s var(--ease); }
.hm-t:dir(rtl) { background-position: 100% 90%; }
.hm-post:hover .hm-t, .hm-post:focus-visible .hm-t { background-size: 100% 38%; }
.hm-w { display: inline-block; transition: opacity .7s ease calc(var(--i, 0) * .14s + var(--wi, 0) * .06s + .3s), translate .7s var(--ease) calc(var(--i, 0) * .14s + var(--wi, 0) * .06s + .3s); }
.hm-newssec.is-armed .hm-post:not(.is-in) .hm-w { opacity: 0; translate: 0 .7em; }
.hm-post h3.hm-whole { transition: opacity .7s ease calc(var(--i, 0) * .14s + .3s), translate .7s var(--ease) calc(var(--i, 0) * .14s + .3s); }
.hm-newssec.is-armed .hm-post:not(.is-in) h3.hm-whole { opacity: 0; translate: 0 .7em; }

/* ── 4. depth: the poster and its backdrop follow the mouse, in opposite directions (news-extra.js sets --px / --py) ── */
@media (hover: hover) {
    .hm-post:hover .hm-post-pic { transform: translate(calc(var(--px, 0) * 9px), calc(var(--py, 0) * 7px)) scale(1.04); transition-duration: .35s; }
    .hm-post:hover .hm-post-bg { transform: translate(calc(var(--px, 0) * -14px), calc(var(--py, 0) * -10px)) scale(1.45); transition-duration: .35s; }
}

/* ── 5. while a picture loads: a soft shimmer, then it fades in ── */
.hm-post-img > .hm-post-pic, .hm-post-img > .hm-post-bg { transition: transform .9s var(--ease), opacity .7s ease; }
.hm-newssec.is-imgs .hm-post-img:not(.no-photo):not(.is-loaded) > img { opacity: 0; }
.hm-newssec.is-imgs .hm-post-img:not(.no-photo):not(.is-loaded)::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, .28) 50%, rgba(255, 255, 255, 0) 80%) 0 0 / 220% 100%; animation: hm-shimmer 1.3s linear infinite; }
@keyframes hm-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }

/* ── 6. more than three posts: the rest in a rail you can drag, swipe or step through ── */
/* the rail enters as one piece: its cards must not wait for the grid's entrance signal (news.js) */
.hm-newssec.is-armed .hm-post.hm-rail-card:not(.is-in) { opacity: 1; translate: none; }
.hm-newssec.is-armed .hm-rail-card:not(.is-in) .hm-w, .hm-newssec.is-armed .hm-rail-card:not(.is-in) h3.hm-whole { opacity: 1; translate: none; }

.hm-rail { margin-top: clamp(2.5rem, 5vw, 4rem); transition: opacity .8s ease, translate .8s var(--ease); }
.hm-rail.is-armed:not(.is-in) { opacity: 0; translate: 0 40px; }
.hm-rail-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.hm-rail-head h3 { font-size: 1.5rem; font-weight: 800; }
.hm-rail-nav { display: flex; gap: .6rem; }
.hm-rail-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, opacity .2s; }
.hm-rail-btn:hover:not(:disabled) { background: var(--yellow); border-color: var(--yellow); }
.hm-rail-btn:disabled { opacity: .35; cursor: default; }
.hm-rail-btn .gs-ic { width: 22px; height: 22px; stroke-width: 2.4; }
.hm-rail-btn.prev .gs-ic { transform: rotate(180deg); }
.hm-rail-track { display: flex; gap: 1.2rem; padding: .5rem .2rem 1.4rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: .2rem; scrollbar-width: none; cursor: grab; }
.hm-rail-track::-webkit-scrollbar { display: none; }
.hm-rail-track:focus-visible { outline: 3px solid var(--navy-2); outline-offset: 4px; border-radius: 12px; }
.hm-rail-track.is-dragging { scroll-snap-type: none; cursor: grabbing; }
.hm-rail-track.is-dragging a { pointer-events: none; }
.hm-rail-card { flex: 0 0 min(82vw, 330px); scroll-snap-align: start; }
.hm-rail-card .hm-post-img { aspect-ratio: 4 / 3; }
.hm-rail-card .hm-post-body { padding: 1.2rem 1.3rem 1.4rem; }
.hm-rail-card h3 { font-size: 1.15rem; }
.hm-rail-card .hm-post-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: .9rem; }
.hm-rail-bar { height: 4px; border-radius: 4px; background: var(--line); }
.hm-rail-bar i { position: relative; display: block; height: 100%; width: var(--w, 30%); left: calc((100% - var(--w, 30%)) * var(--p, 0)); border-radius: 4px; background: var(--navy-2); }

@media (prefers-reduced-motion: reduce) {
    .hm-post-peek, .hm-ig em, .hm-t, .hm-w, .hm-post h3.hm-whole, .hm-rail { transition: none; }
    .hm-ig::before, .hm-newssec.is-imgs .hm-post-img:not(.is-loaded)::before { animation: none; }
    .hm-post:hover .hm-post-pic, .hm-post:hover .hm-post-bg { transform: none; }
}