/* Marketing Champion · Hall of Fame: The Rafters (banners in the roof), the trophy walk (lit glass cases), the work.
   Mobile first. js/hof.js writes --p (0 on the ice, 1 up in the rafters) on .raf. */

/* ---------- 1. The Rafters ---------- */
.raf { --p: 0; --zoom: .06; --lift: 10svh; position: relative; height: 185vh; height: 185svh; background: #050709; }
@media (min-width: 760px) { .raf { --zoom: .2; --lift: 7svh; height: 210vh; height: 210svh; } }
.raf__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; isolation: isolate;
  background: radial-gradient(ellipse 80% 55% at 50% 0%, #142233 0%, rgba(20, 34, 51, 0) 70%), linear-gradient(#06080b, #0a0f16 55%, #0c1119); }

/* the roof: steel trusses, light rigs and haze. It drifts slower than the bowl, so the room has depth. */
.raf__roof { position: absolute; left: 0; right: 0; top: -12%; height: 124%; z-index: 0; transform: translateY(calc(var(--p) * 10svh)); will-change: transform; }
.raf__truss { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .95; }
.raf__beams i { position: absolute; top: 4%; left: var(--x); width: clamp(140px, 22vw, 360px); height: 110%; transform: translateX(-50%) rotate(var(--r)); transform-origin: 50% 0;
  background: linear-gradient(to bottom, rgba(var(--c), .42), rgba(var(--c), .12) 45%, rgba(var(--c), 0) 85%);
  clip-path: polygon(47% 0, 53% 0, 100% 100%, 0 100%); filter: blur(5px); mix-blend-mode: screen; opacity: 0;
  animation: beam-on .5s steps(1, end) calc(.25s + var(--d) * -.1) forwards, beam-sweep 11s ease-in-out var(--d) infinite alternate; }
.raf__beams i::before { content: ""; position: absolute; left: 50%; top: -6px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: rgb(var(--c)); box-shadow: 0 0 18px 6px rgba(var(--c), .7); filter: blur(1px); }
@keyframes beam-on { to { opacity: .9; } }
@keyframes beam-sweep { from { rotate: -5deg; } to { rotate: 5deg; } }
.raf__haze { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 30% at 50% 62%, rgba(140, 170, 205, .16), transparent 70%), radial-gradient(ellipse 50% 22% at 30% 40%, rgba(95, 183, 227, .08), transparent 70%); animation: haze 14s ease-in-out infinite alternate; }
@keyframes haze { to { transform: translateX(3%) scale(1.05); opacity: .8; } }

/* the bowl: stands and ice (a crop of the Rafters concept). Falls away fast as you rise. */
.raf__bowl { position: absolute; left: 0; right: 0; bottom: 0; height: 36svh; z-index: 1; transform: translateY(calc(var(--p) * 48svh)); will-change: transform; }
.raf__bowl img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 38%); mask-image: linear-gradient(to bottom, transparent, #000 38%); }
.raf__bowl::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 40%, rgba(5, 7, 9, .55)); }
@media (min-width: 760px) { .raf__bowl { height: 44svh; } }

/* the rig: one truss bar with the four banners hanging from it */
.raf__rig { position: absolute; z-index: 2; left: 0; right: 0; top: calc(var(--top) + clamp(80px, 11svh, 104px)); transform-origin: 50% 0;
  transform: translateY(calc(var(--p) * var(--lift))) scale(calc(1 + var(--p) * var(--zoom))); will-change: transform; }
.raf__bar { position: relative; margin: 0 auto; width: min(94vw, 1180px); height: 12px; border-radius: 2px;
  background: repeating-linear-gradient(60deg, transparent 0 9px, #2a3440 9px 11px), repeating-linear-gradient(-60deg, transparent 0 9px, #2a3440 9px 11px), linear-gradient(#222b36, #11161d);
  box-shadow: 0 1px 0 rgba(207, 232, 245, .12), 0 10px 24px rgba(0, 0, 0, .6); }
.raf__banners { list-style: none; margin: 0 auto; padding: 22px 0 0; display: flex; justify-content: center; gap: 2.4vw; }
@media (min-width: 760px) { .raf__banners { gap: clamp(18px, 3vw, 46px); } }
.banner { position: relative; width: min(21vw, 17svh, 200px); flex: none; transform-origin: 50% 0;
  animation: banner-drop 1.25s cubic-bezier(.34, 1.45, .64, 1) calc(.5s + var(--i) * .28s) both; }
/* two wires up to the bar */
.banner::before { content: ""; position: absolute; left: 14%; right: 14%; bottom: 100%; height: 22px; border-left: 1.5px solid rgba(160, 176, 192, .55); border-right: 1.5px solid rgba(160, 176, 192, .55); }
@keyframes banner-drop { from { transform: translateY(-160%) rotate(-5deg); opacity: 0; } 25% { opacity: 1; } to { transform: none; opacity: 1; } }
.arrive .banner { animation-delay: calc(2s + var(--i) * .28s); }
/* the cloth: red border, black field, a slow sway on top of the scroll springs (motion.js) */
.banner__cloth { position: relative; aspect-ratio: 10 / 21; padding: max(3px, 2.4%); background: #E0102F; container-type: inline-size; transform-origin: 50% 0;
  clip-path: polygon(0 0, 100% 0, 100% 86%, 50% 100%, 0 86%); filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .55));
  animation: banner-sway 5.5s ease-in-out calc(var(--i) * -1.4s) infinite alternate; }
@keyframes banner-sway { from { transform: rotate(-1deg) skewX(.5deg); } to { transform: rotate(1deg) skewX(-.5deg); } }
.banner__in { height: 100%; clip-path: polygon(0 0, 100% 0, 100% 86%, 50% 100%, 0 86%); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 5cqi; padding: 12cqi 7cqi 0; color: #F2F5F7;
  background: radial-gradient(ellipse 90% 40% at 50% 0%, rgba(207, 232, 245, .14), transparent 70%),
    linear-gradient(90deg, #060708, #15181d 22%, #08090b 44%, #17191e 68%, #07080a 88%, #121418); }
.banner__show { font: 600 max(7px, 5.8cqi)/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #C9D2DA; }
.banner__year { font: 800 31cqi/0.9 var(--font); letter-spacing: -.03em; margin-top: 2cqi; }
.banner__title { font: 800 max(8.5px, 9.4cqi)/1.12 var(--font); letter-spacing: .02em; text-transform: uppercase; }
.banner__agency { margin-top: auto; margin-bottom: 26cqi; font: 600 max(7px, 6.6cqi)/1.25 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #E0102F; }
@media (max-width: 759px) { .banner__show { display: none; } .banner__in { padding-top: 14cqi; } }

/* caption under the banners: fades in as you rise */
.raf__caption { width: min(92vw, 760px); margin: clamp(18px, 3svh, 30px) auto 0; text-align: center; font-size: clamp(15px, 1.6vw, 20px); line-height: 1.4; font-weight: 600; color: var(--text);
  opacity: clamp(0, calc(var(--p) * 2.2 - .5), 1); transform: translateY(calc((1 - var(--p)) * 16px)); text-shadow: 0 2px 18px #000; }
.raf__caption span { display: block; margin-top: 6px; font-weight: 400; color: var(--muted); font-size: .9em; }

/* the title, down on the ice. It drops away with the bowl. */
.raf__copy { position: absolute; z-index: 3; left: 0; right: 0; bottom: clamp(48px, 9svh, 96px); display: grid; gap: 10px; justify-items: start;
  transform: translateY(calc(var(--p) * 34svh)); opacity: calc(1 - var(--p) * 1.6); }
.raf__kicker { color: var(--light); }
.raf__copy h1 { margin: 0; font-size: clamp(54px, 11vw, 168px); line-height: .88; font-weight: 700; letter-spacing: -.045em; text-transform: uppercase; text-shadow: 0 4px 40px rgba(0, 0, 0, .8), 0 0 60px rgba(95, 183, 227, .18); }
.raf__lede { max-width: 470px; color: #DCE3E9; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.45; text-shadow: 0 2px 14px #000; }
.raf__hint { position: absolute; z-index: 3; right: var(--pad); bottom: 20px; color: var(--muted); font-size: 11px; opacity: calc(1 - var(--p) * 3); }
@media (max-width: 759px) { .raf__hint { left: var(--pad); right: auto; bottom: 16px; } }

@media (prefers-reduced-motion: reduce) {
  .banner, .banner__cloth, .raf__beams i, .raf__haze { animation: none; }
  .raf__beams i { opacity: .9; }
}

/* ---------- 2. The trophy walk ---------- */
.cases { position: relative; padding-block: clamp(70px, 10vw, 140px) clamp(40px, 6vw, 80px);
  background: radial-gradient(ellipse 70% 40% at 50% 0%, rgba(31, 79, 163, .16), transparent 70%), linear-gradient(#050709, rgba(11, 13, 16, .96) 30%, rgba(11, 13, 16, .9)); }
.cases .sec-head p { max-width: 460px; }
.case-group { margin-top: clamp(36px, 6vw, 72px); }
.case-group__h { margin: 0 0 18px; color: var(--light); display: flex; align-items: center; gap: 12px; }
.case-group__h::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--glass), transparent); }
/* flex, centred: a short last row sits in the middle of the walk, not stranded on the left */
.case-row { --gap: 12px; --cols: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 26px var(--gap); }
@media (min-width: 760px) { .case-row { --gap: 22px; --cols: 3; row-gap: 40px; } }
@media (min-width: 1100px) { .case-row { --cols: 5; } }
.case { display: flex; flex-direction: column; min-width: 0; flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); }
/* the glass box under its own spotlight */
.case__glass { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 3px; background: #07090c;
  border: 1px solid rgba(207, 232, 245, .14); border-bottom: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .02), inset 0 50px 60px -40px rgba(207, 232, 245, .1); }
.case__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.35) saturate(.6); transition: filter 1s var(--ease) calc(var(--li, 0) * 90ms); }
.case__glass::before { content: ""; position: absolute; z-index: 1; left: 50%; top: 0; width: 70%; height: 100%; transform: translateX(-50%); pointer-events: none;
  background: linear-gradient(to bottom, rgba(230, 242, 250, .3), rgba(230, 242, 250, .06) 55%, transparent 90%); clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%);
  mix-blend-mode: screen; opacity: 0; transition: opacity .3s steps(2, end) calc(var(--li, 0) * 90ms); }
.case__glass::after { content: ""; position: absolute; z-index: 2; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 0, rgba(255, 255, 255, .9) 0 3px, rgba(255, 255, 255, 0) 4px), linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .07) 40%, transparent 48%), linear-gradient(to top, rgba(95, 183, 227, .12), transparent 18%); }
.case.is-lit .case__media { filter: none; }
.case.is-lit .case__glass::before { opacity: 1; }
/* the plinth and its engraved plate */
.case__plate { position: relative; display: grid; gap: 3px; align-content: start; flex: 1; padding: 12px 12px 14px; background: linear-gradient(#14181e, #0b0d10); border: 1px solid var(--glass); border-top: 2px solid rgba(207, 232, 245, .28);
  box-shadow: 0 22px 34px -18px rgba(95, 183, 227, .4); }
.case__show { color: var(--muted); font-size: 10px; letter-spacing: .12em; }
.case__year { font: 600 clamp(22px, 2.4vw, 30px)/1 var(--mono); color: var(--text); font-variant-numeric: tabular-nums; margin-top: 2px; }
.case__result { font-weight: 600; font-size: 14px; line-height: 1.3; color: var(--text); }
.case__who { color: #AEB8C2; font-size: 12.5px; line-height: 1.35; overflow-wrap: anywhere; }
.case__note { color: var(--light); font-size: 12px; line-height: 1.35; font-style: italic; margin-top: 2px; }
.case__link { justify-self: start; margin-top: 6px; color: var(--light); font-size: 10.5px; border-bottom: 1px solid rgba(207, 232, 245, .4); padding-bottom: 1px; }
.case__link:hover { color: var(--text); border-color: var(--text); }
@media (min-width: 760px) { .case__plate { padding: 14px 16px 16px; } .case__result { font-size: 15px; } .case__who { font-size: 13px; } }
/* the 2019 Gold gets a warm lamp */
.case.is-gold .case__glass::before { background: linear-gradient(to bottom, rgba(255, 214, 140, .38), rgba(255, 214, 140, .08) 55%, transparent 90%); }
.case.is-gold .case__plate { border-top-color: var(--score); }
.case.is-gold .case__result { color: var(--score); }
.case.is-turning .case__glass { border-color: rgba(207, 232, 245, .3); }
@media (prefers-reduced-motion: reduce) { .case__media, .case__glass::before { transition: none; } }

/* ---------- 3. The work ---------- */
.work { padding-block: clamp(70px, 10vw, 130px) 40px; position: relative; z-index: 2; }
.work-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 18px; }
.hof-card { display: grid; grid-template-rows: auto 1fr; min-width: 0; gap: 0; border-radius: 18px; overflow: hidden; background: var(--boards); border: 1px solid var(--glass); transition: border-color .25s, box-shadow .35s; }
a.hof-card:hover, a.hof-card:focus-visible { border-color: var(--light); }
.hof-card__media { position: relative; aspect-ratio: 16 / 9; border-radius: 0; background: #050607; overflow: hidden; }
.hof-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
a.hof-card:hover .hof-card__media img { transform: scale(1.04); }
.hof-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(11, 13, 16, .85), transparent 55%); pointer-events: none; }
.hof-card__num { position: absolute; z-index: 1; right: 14px; bottom: 4px; font: 800 italic clamp(44px, 5vw, 60px)/1 var(--font); color: #F2F5F7; -webkit-text-stroke: 1.5px #E0102F; letter-spacing: -.03em; }
.hof-card__ribbon { position: absolute; z-index: 1; left: 12px; top: 12px; font-size: 10.5px; color: #0B0D10; background: var(--score); border-radius: 3px; padding: 4px 8px; }
.hof-card__body { display: grid; gap: 6px; align-content: start; padding: 16px 18px 20px; }
.hof-card__meta { color: var(--muted); font-size: 10.5px; }
.hof-card__brand { font-size: 22px; line-height: 1.15; }
.hof-card__title { color: #C9D2DA; font-size: 16px; line-height: 1.35; }
.hof-card__awards { list-style: none; margin: 6px 0 0; padding: 10px 0 0; border-top: 1px solid rgba(255, 176, 0, .3); display: grid; gap: 6px; }
.hof-card__awards li { font-size: 13.5px; line-height: 1.35; color: #F3DFB0; }
.hof-card__awards b { display: block; font: 600 10.5px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--score); }
.hof-card__film { margin-top: 10px; font-weight: 700; font-size: 14px; color: var(--goal); display: inline-flex; gap: 8px; align-items: center; }
.hof-card__film i { font-style: normal; transition: transform .3s var(--ease); }
a.hof-card:hover .hof-card__film i { transform: translateX(4px); }
.hof-card__film.is-soon { color: var(--muted); font-weight: 500; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
/* award winners: gold rim and a warm glow */
.hof-card.is-gold { border-color: rgba(255, 176, 0, .55); box-shadow: 0 0 0 1px rgba(255, 176, 0, .15), 0 20px 50px -24px rgba(255, 176, 0, .45); background: linear-gradient(#1a1812, var(--boards) 40%); }
a.hof-card.is-gold:hover { border-color: var(--score); }
.work__soon { color: var(--muted); }

/* ---------- Finale ---------- */
.hof-fin__p { margin: -12px auto 28px; max-width: 460px; color: #C9D2DA; }

/* the shared copy halo (rink.css) smudges small type on solid panels: off inside banners, cases and cards */
.flow .banner, .flow .banner *, .flow .case *, .flow .hof-card * { text-shadow: none; }
/* the Revive card borrows .card for the grow-into-the-play transition; keep its picture square-cornered */
.hof-card.card .card__media { clip-path: none; border-radius: 0; }

/* slow devices (quality.js steps down to low): the beams, haze and banners hang still once they are up */
.q-low .raf__beams i, .q-low .raf__haze, .q-low .banner__cloth { animation-iteration-count: 1 !important; }