/* ───────── Cycles section: staircase entrance, floating letters, hover, expanding cards ─────────
   Loaded after home.css (see home.html). To undo all of it: remove the two includes in home.html. */

.hm-cycles { --ease: cubic-bezier(.2, .7, .2, 1); }

/* every card: transitions for the entrance (staggered by --i, set in cycles.js) and for hover */
.hm-level {
    transition:
        translate .9s var(--ease) calc(var(--i, 0) * .14s),
        opacity .9s ease calc(var(--i, 0) * .14s),
        transform .4s var(--ease),
        flex-grow .65s var(--ease),
        box-shadow .4s ease;
}

/* the text keeps three lines at rest, and opens up when the card is hovered */
.hm-level-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }

.hm-level-mark { transform-origin: 100% 0; transition: transform .7s var(--ease), color .5s; }
.hm-level-go .gs-ic { transition: transform .3s var(--ease); }

/* a warm glow that appears behind the letter on hover (cards without a photo) */
.hm-level.no-photo::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; background: radial-gradient(60% 55% at 85% 0%, rgba(140, 185, 255, .34), transparent 70%); transition: opacity .5s ease; }

/* ── before the section is seen (cycles.js adds .is-armed): cards wait below, then rise one after another ── */
.hm-cycles.is-armed .hm-level:not(.is-in) { opacity: 0; translate: 0 80px; }
.hm-cycles.is-armed .gs-head:not(.is-in) { opacity: 0; translate: 0 28px; }
.hm-cycles .gs-head { transition: translate .9s var(--ease), opacity .9s ease; }

/* ── wide screens: the cards form a staircase (a taller card for each step up), and the hovered one widens ── */
@media (min-width: 900px) {
    .hm-levels { display: flex; align-items: flex-end; gap: 1.4rem; }
    .hm-level { flex: 1 1 0; min-width: 0; }
    .hm-level:nth-child(1) { min-height: 430px; }
    .hm-level:nth-child(2) { min-height: 490px; }
    .hm-level:nth-child(3) { min-height: 550px; }
    .hm-level:nth-child(4) { min-height: 610px; }
}

@media (hover: hover) {
    .hm-level:hover, .hm-level:focus-visible { transform: translateY(-8px); box-shadow: 0 36px 60px -30px rgba(11, 28, 51, .7); }
    .hm-level.no-photo:hover::before, .hm-level.no-photo:focus-visible::before { opacity: 1; }
    .hm-level:hover .hm-level-mark, .hm-level:focus-visible .hm-level-mark { transform: translateX(-14px) scale(1.12); color: rgba(255, 255, 255, .17); }
    .hm-level.no-photo:nth-child(4):hover .hm-level-mark { color: rgba(11, 28, 51, .16); }
    .hm-level:hover .hm-level-go .gs-ic, .hm-level:focus-visible .hm-level-go .gs-ic { transform: translateX(8px); }
    .hm-level:hover .hm-level-text, .hm-level:focus-visible .hm-level-text { -webkit-line-clamp: 8; }
}
@media (hover: hover) and (min-width: 900px) {
    .hm-level:hover, .hm-level:focus-visible { flex-grow: 1.45; }
}

@media (prefers-reduced-motion: reduce) {
    .hm-level, .hm-level-mark, .hm-level-go .gs-ic, .hm-cycles .gs-head { transition: none; }
    .hm-level:hover, .hm-level:focus-visible { transform: none; flex-grow: 1; }
    .hm-level:hover .hm-level-mark { transform: none; }
}