/* =========================================================================
   The homepage's featured event (views/Client/index.hbs, FEATURED EVENT).

   A wall of the lineup's frames, tilted away into the dark as negatives,
   develops into colour where a projector beam passes over it: one image
   (the event's atlas, set by home-feature.js once the banner is near), two
   layers of it, and a mask that moves. Over the wall, the event's name, a
   live countdown and the way in. The whole banner opens the event.
   ========================================================================= */
.hf {
    --hf-accent: #34e08a; --hf-accent-rgb: 52, 224, 138; --hf-ink: #06180f;
    --hf-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --hf-mono: "Roboto Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
    position: relative; isolation: isolate; overflow: hidden;
    display: flex; align-items: center; min-height: clamp(540px, 48vw, 700px);
    border-radius: var(--hx-radius, 24px); border: 1px solid rgba(255, 255, 255, 0.08);
    background: #050507; color: #f4f4f6;
}

/* ------------------------------------------------------------- the wall */
.hf__wall {
    position: absolute; inset: 0; z-index: -3; overflow: hidden; perspective: 1500px; perspective-origin: 72% 16%;
    opacity: 0; transition: opacity 1.8s ease;
}
.hf.is-lit .hf__wall { opacity: 1; }
.hf__plane {
    position: absolute; top: -36%; right: -24%; width: 94%;
    transform: rotateX(38deg) rotateY(-16deg) rotateZ(9deg); transform-origin: 50% 0;
    transition: transform 1.6s var(--hf-ease);
}
.hf:hover .hf__plane { transform: rotateX(34deg) rotateY(-12deg) rotateZ(8deg) scale(1.03); }
/* three tiles of the atlas, so a drift of one tile loops unseen */
.hf__drift { position: relative; width: 100%; animation: hf-drift 140s linear infinite; will-change: transform; }
@keyframes hf-drift { to { transform: translateY(-33.3333%); } }
.hf__tiles { position: absolute; inset: 0; background-image: var(--hf-atlas, none); background-size: 100% calc(100% / 3); background-repeat: repeat-y; }
/* the film as it comes from the lab: negatives */
.hf__tiles--neg { filter: invert(1) sepia(0.6) saturate(2.4) hue-rotate(150deg) brightness(0.36) contrast(1.2); opacity: 0.85; }
/* and the picture, only where the beam is: a window that slides across the
   wall while the picture inside slides back by as much, so the picture holds
   still over its negative. Both are transforms, so the compositor runs it. */
.hf__beam {
    position: absolute; top: 0; bottom: 0; left: 0; z-index: 1; width: 24%; overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 34%, #000 66%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 34%, #000 66%, transparent);
    animation: hf-beam 10s linear infinite; will-change: transform;
}
.hf__beam .hf__tiles--pos { right: auto; width: 416.6667%; filter: saturate(1.2) brightness(1.08); animation: hf-hold 10s linear infinite; will-change: transform; }
/* the beam's own light, carried by the window */
.hf__beam::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
    background: linear-gradient(90deg, transparent 8%, rgba(255, 236, 200, 0.1) 30%, rgba(255, 240, 210, 0.34) 50%, rgba(255, 236, 200, 0.1) 70%, transparent 92%);
}
/* the window travels from just off the wall's left to just off its right
   (-1 to +4.1667 of its own width); the picture moves by exactly the reverse */
@keyframes hf-beam { from { transform: translateX(-100%); } to { transform: translateX(416.6667%); } }
@keyframes hf-hold { from { transform: translateX(24%); } to { transform: translateX(-100%); } }
/* the frame lines between the stills */
.hf__drift::after {
    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background:
        linear-gradient(90deg, #050507 0 6px, transparent 6px) 0 0 / calc(100% / var(--cols)) 100%,
        linear-gradient(#050507 0 6px, transparent 6px) 0 0 / 100% calc(100% / (var(--rows) * 3));
}

/* the dark the words stand in, and the grain of it */
.hf__shade {
    position: absolute; inset: 0; z-index: -2; pointer-events: none;
    background:
        linear-gradient(90deg, #050507 0%, rgba(5, 5, 7, 0.94) 30%, rgba(5, 5, 7, 0.5) 54%, rgba(5, 5, 7, 0) 74%),
        linear-gradient(0deg, rgba(5, 5, 7, 0.8) 0%, transparent 30%),
        radial-gradient(55% 70% at 100% 0%, rgba(255, 236, 200, 0.1), transparent 62%);
}
.hf__grain {
    position: absolute; inset: -50%; z-index: -1; pointer-events: none; opacity: 0.07;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    animation: hf-grain 0.9s steps(5) infinite;
}
@keyframes hf-grain { 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -2%); } 80% { transform: translate(3%, 3%); } }

/* -------------------------------------------------------------- the words */
/* static, so the title's link can stretch over the whole banner */
.hf__body { display: grid; gap: 18px; width: min(660px, 100%); padding: clamp(36px, 5vw, 76px); }
.hf__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; font-family: var(--hf-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); }
.hf__kicker i { width: 5px; height: 5px; border-radius: 50%; background: var(--hf-accent); }
.hf__kicker span + i + span { color: var(--hf-accent); }
.hf__t { margin: 0; font-size: clamp(2.7rem, 6.2vw, 5.6rem); font-weight: 900; line-height: 0.9; letter-spacing: -0.05em; text-wrap: balance; }
.hf__link, .hf__link:hover, .hf__link:focus { color: #fff; text-decoration: none; }
.hf__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.hf__link:focus-visible { outline: none; }
.hf__link:focus-visible::after { border-radius: inherit; box-shadow: inset 0 0 0 3px var(--hf-accent); }
.hf__tag { margin: 0; max-width: 44ch; font-size: clamp(1rem, 1.35vw, 1.14rem); line-height: 1.55; color: rgba(255, 255, 255, 0.8); }

.hf__count { display: grid; gap: 8px; margin-top: 6px; }
.hf__count-k { display: inline-flex; align-items: center; gap: 9px; font-family: var(--hf-mono); font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--hf-accent); }
.hf__count-k i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--hf-accent); animation: hf-pulse 1.8s infinite; }
@keyframes hf-pulse { 0% { box-shadow: 0 0 0 0 rgba(var(--hf-accent-rgb), 0.55); } 70%, 100% { box-shadow: 0 0 0 10px rgba(var(--hf-accent-rgb), 0); } }
.hf__digits { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; font-family: var(--hf-mono); font-variant-numeric: tabular-nums; }
.hf__digits b { font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: #fff; }
.hf__digits em { margin-right: 16px; font-size: 0.9rem; font-style: normal; color: rgba(255, 255, 255, 0.5); }
.hf__digits em:last-child { margin-right: 0; }
.hf.is-over .hf__digits { display: none; }

.hf__acts { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 6px; }
.hf__go {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding: 0 26px 0 28px; border-radius: 999px;
    background: var(--hf-accent); color: var(--hf-ink); font-size: 1rem; font-weight: 800; text-decoration: none;
    box-shadow: 0 18px 44px -16px rgba(var(--hf-accent-rgb), 0.9); transition: transform 0.3s var(--hf-ease), box-shadow 0.3s ease, filter 0.2s ease;
}
.hf__go svg { width: 18px; height: 18px; transition: transform 0.35s var(--hf-ease); }
.hf__go:hover, .hf__go:focus { color: var(--hf-ink); text-decoration: none; transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 24px 54px -16px rgba(var(--hf-accent-rgb), 1); }
.hf__go:hover svg { transform: translateX(4px); }
.hf__sub {
    display: inline-flex; align-items: center; justify-content: center; height: 54px; padding: 0 24px; border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.24); background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(8px);
    color: #fff; font-size: 1rem; font-weight: 800; text-decoration: none; transition: border-color 0.2s ease, background 0.2s ease;
}
.hf__sub:hover, .hf__sub:focus { color: #fff; text-decoration: none; border-color: #fff; background: rgba(255, 255, 255, 0.1); }
.hf__go:focus-visible, .hf__sub:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.hf__in { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: var(--hf-accent); }
.hf__in svg { width: 20px; height: 20px; }
.hf__facts { margin: 2px 0 0; font-family: var(--hf-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }

/* off screen, the wall rests */
.hf.is-away .hf__drift, .hf.is-away .hf__beam, .hf.is-away .hf__beam .hf__tiles--pos, .hf.is-away .hf__grain, .hf.is-away .hf__count-k i { animation-play-state: paused; }

@media (max-width: 900px) {
    .hf { align-items: flex-end; min-height: clamp(600px, 150vw, 780px); }
    .hf__wall { perspective-origin: 50% 0%; }
    .hf__plane { top: -14%; right: -46%; width: 160%; }
    .hf__shade { background: linear-gradient(0deg, #050507 0%, rgba(5, 5, 7, 0.95) 44%, rgba(5, 5, 7, 0.4) 68%, rgba(5, 5, 7, 0.08) 100%); }
    .hf__body { gap: 14px; padding: 28px 22px 30px; }
}
@media (max-width: 520px) {
    .hf__t { font-size: clamp(2.4rem, 11vw, 3rem); }
    .hf__digits b { font-size: 1.85rem; }
    .hf__digits em { margin-right: 10px; }
    .hf__go, .hf__sub { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .hf__drift, .hf__beam, .hf__beam .hf__tiles--pos, .hf__grain, .hf__count-k i { animation: none; }
    /* the beam rests mid-wall: the window at 48% of the wall, the picture back by as much */
    .hf__beam { transform: translateX(200%); }
    .hf__beam .hf__tiles--pos { transform: translateX(-48%); }
    .hf__plane { transition: none; }
}