/* Creators Conclave — home page: photographs, film and motion layered onto the existing sections.
   Loads after css/rich.css (the shared rich media kit) and is used by index.html only.

   .hm-about      About, in pictures (a .rx-duo: photo + film beside the story)
   .hm-band       statement over a photo or film (.rx-band); .hm-band--film keeps the face in the film clear
   .hm-chip       small second photo floating over the corner of a "Why" picture
   .hm-moments    the photo grid (.rx-mosaic)
   .hm-banner__photo   the trophy in the light, on the open side of the awards banner
   .hm-call__art  framed photograph on the open side of the nominations block
   .hm-film       faint film behind a section heading
   .hm-reel       the moving film strip (.rx-strip) */

/* ───────── Hero: a little of the film's warmth comes through; a soft shade keeps the lockup clear ───────── */
.hero__media img, .hero__media video { filter: grayscale(.45) contrast(1.05); }
.hero__media::after { content: ""; position: absolute; inset: 0; background:
  radial-gradient(62% 46% at 50% 47%, rgba(0, 0, 0, .62), transparent 74%),
  linear-gradient(180deg, rgba(0, 0, 0, .5) 0, transparent 28%); }

/* ───────── About, in pictures ───────── */
.hm-about { overflow-x: clip; padding-top: clamp(24px, 4vw, 64px); }
.hm-about .rx-duo__art { width: 100%; max-width: 500px; margin: 0 auto; }
.hm-about .shead { max-width: 620px; margin: 0; }
.hm-points { margin-top: 28px; display: grid; gap: 14px; }
.hm-points li { position: relative; display: grid; grid-template-columns: 5.2em minmax(0, 1fr); column-gap: 12px; align-items: baseline; padding-left: 30px; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.5; color: #e6dfd0; }
.hm-points li::before { content: ""; position: absolute; left: 0; top: .3em; width: 15px; height: 15px; background: var(--hi); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
.hm-points b { font-family: var(--f-display); font-weight: 500; font-size: .86em; letter-spacing: .08em; text-transform: uppercase; color: var(--hi); }
.hm-about__more { display: inline-block; margin-top: 32px; }
@media (max-width: 899px) { .hm-about .shead { margin: 0 auto; } }

/* ───────── Statement bands ───────── */
.hm-band__body { position: relative; z-index: 4; width: 100%; }
.hm-band .rx-band__media img { object-position: 50% 42%; }
.hm-band::before { background:
  radial-gradient(66% 60% at 50% 52%, rgba(0, 0, 0, .66), transparent 78%),
  linear-gradient(180deg, #000 0, rgba(0, 0, 0, .3) 22%, rgba(0, 0, 0, .3) 78%, #000 100%); }
.hm-band .rx-band__kicker { font-size: clamp(12.5px, 1.1vw, 15px); text-shadow: 0 2px 14px #000, 0 0 2px #000; }
/* Gold words keep a clean gradient: the dark halo sits behind the letters, not through them */
.hm-band .rx-band__line em { text-shadow: none; filter: drop-shadow(0 6px 22px rgba(0, 0, 0, .75)); }

/* The winning moment. Her face moves through the middle of the frame, so the words never sit on it:
   on small screens the film plays first with the statement beneath; on wide screens the statement stands to the left. */
.hm-band--film .rx-band__line { max-width: none; }
.hm-band--film .rx-band__line span, .hm-band--film .rx-band__line em { display: block; }
@media (max-width: 899px) {
  .hm-band--film { display: block; min-height: 0; padding: 0 0 clamp(52px, 10vw, 84px); }
  .hm-band--film::before { content: none; }
  .hm-band--film .rx-band__media { position: relative; inset: auto; height: min(120vw, 70vh);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 13%, #000 84%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 13%, #000 84%, transparent 100%); }
  .hm-band--film .rx-band__media video { object-position: 57% 40%; }
  .hm-band--film .hm-band__body { padding: 0 16px; }
  .hm-band--film .rx-band__line { font-size: clamp(30px, 8.6vw, 54px); }
}
@media (min-width: 900px) {
  .hm-band--film { min-height: clamp(520px, 90vh, 880px); justify-content: flex-start; text-align: left; padding: 0 clamp(32px, 5.5vw, 104px); }
  .hm-band--film .rx-band__media video { object-position: 10% 40%; }
  .hm-band--film::before { background:
    linear-gradient(90deg, rgba(0, 0, 0, .84) 0, rgba(0, 0, 0, .5) 28%, transparent 54%),
    linear-gradient(180deg, #000 0, transparent 20%, transparent 78%, #000 100%); }
  .hm-band--film .rx-band__line { margin: 0; font-size: clamp(34px, 3.5vw, 62px); line-height: 1.14; }
}

/* ───────── Why: larger pictures, each with a second frame floating over its corner ───────── */
.why__pic { position: relative; --picw: min(100%, 440px); }
.why__pic > div { width: var(--picw); height: auto; aspect-ratio: 16 / 10; border-radius: 20px; box-shadow: 0 30px 70px -30px #000, 0 0 0 1px rgba(var(--glow), .32); }
.why__pic > div img { transition: transform 1.4s cubic-bezier(.22, 1, .36, 1); }
.why__row:hover .why__pic > div img { transform: scale(1.06); }
.why__row { padding-bottom: 60px; }
.hm-chip { position: absolute; z-index: 2; right: calc(50% - var(--picw) / 2 - 6px); bottom: -26px; width: 104px; aspect-ratio: 1; overflow: hidden; border-radius: 16px; border: 1px solid rgba(var(--glow), .85); background: #111; box-shadow: 0 24px 50px -16px #000, 0 0 44px -10px rgba(var(--glow), .5); pointer-events: none; animation: hm-float 7s ease-in-out infinite alternate; }
.why__row--flip .hm-chip { animation-delay: -3.5s; }
.hm-chip img { width: 100%; height: 100%; object-fit: cover; }
@keyframes hm-float { from { transform: translate3d(0, -7px, 0) rotate(-1.4deg); } to { transform: translate3d(0, 8px, 0) rotate(1.4deg); } }
@media (min-width: 1024px) {
  .why__pic { --picw: min(100%, 500px); }
  .why__pic > div { border-radius: 24px; }
  .why__row { padding-bottom: 84px; }
  .hm-chip { width: 132px; border-radius: 20px; bottom: -32px; right: calc(var(--picw) - 88px); }
  .why__row--flip .hm-chip { right: auto; left: calc(var(--picw) - 88px); }
}

/* ───────── What's in store: the photographs in colour, with a slower, deeper zoom ───────── */
.fcard > img { filter: saturate(.94) contrast(1.03); transition: transform 1.4s cubic-bezier(.22, 1, .36, 1); }
.fcard:hover > img { transform: scale(1.07); }
.fcard--create > img { object-position: 30% 50%; }    /* Summit: keep the speaker in frame */
.fcard--learn > img { object-position: 22% 28%; }     /* Awards: keep the creator on the carpet in frame */
.fcard--experience > img { object-position: 50% 62%; }
/* Colour photographs are brighter than the old greyscale ones, so the shade behind the words is deeper */
.fcard .fcard__shade { background: linear-gradient(to top, rgba(0, 0, 0, .94) 0, rgba(0, 0, 0, .66) 34%, rgba(0, 0, 0, .14) 64%, transparent); }
.fcard__body { text-shadow: 0 1px 14px rgba(0, 0, 0, .95), 0 0 2px rgba(0, 0, 0, .6); }
.fcard--experience .fcard__shade { background: linear-gradient(90deg, rgba(0, 0, 0, .88) 0, rgba(0, 0, 0, .56) 40%, rgba(0, 0, 0, .06) 78%), linear-gradient(to top, rgba(0, 0, 0, .55), transparent 62%); }

/* ───────── Moments ───────── */
.hm-moments { overflow: hidden; }
.hm-moments::before { content: ""; position: absolute; left: 50%; top: -200px; width: min(1100px, 120vw); height: 520px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(var(--glow), .16), transparent); pointer-events: none; }
.js .hm-moments .rx-mosaic__item.reveal { transition-delay: calc(var(--i, 0) * 70ms); }
.hm-moments .rx-mosaic__item img { display: block; }
.hm-moments .rx-mosaic__cap { text-shadow: 0 1px 10px rgba(0, 0, 0, .95); }
@media (max-width: 767px) {
  .hm-moments .rx-mosaic__item--big { grid-column: span 2; grid-row: span 2; }
}

/* ───────── Awards banner: the trophy in the light on the open side ───────── */
.hm-banner__photo { position: absolute; inset: 84px 0 auto 0; z-index: 1; height: 60%; overflow: hidden; opacity: .92;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 26%, #000 54%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 26%, #000 54%, transparent 100%); }
.hm-banner__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 64% 50%; }
@media (max-width: 767px) {
  .banner .label { filter: drop-shadow(0 2px 10px #000); }   /* the label stays clear where the photograph fades in */
}
@media (min-width: 768px) {
  .hm-banner__photo { inset: 0 0 0 auto; width: 60%; height: auto;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .55) 30%, #000 62%); mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .55) 30%, #000 62%); }
  .hm-banner__photo img { object-position: 58% 50%; }
}

/* Between phone and desktop the banner's line and its two buttons stack instead of squeezing into one row */
@media (min-width: 768px) and (max-width: 1099px) {
  .banner__row { flex-direction: column; align-items: flex-start; gap: 22px; }
  .banner__text { flex: none; }
  .banner__text br { display: none; }
  .banner__actions { padding-left: 40px; }
}

/* ───────── Nominations: a framed photograph on the open side ───────── */
.hm-call__art { width: min(100%, 400px); margin-top: 48px; }
.hm-call__art .rx-frame > div { aspect-ratio: 4 / 5; }
@media (max-width: 767px) {
  .call__video { position: relative; z-index: 5; margin-top: -120px; mix-blend-mode: screen; }
}
@media (min-width: 768px) {
  .hm-call__art { position: absolute; z-index: 4; right: clamp(32px, 8vw, 140px); top: 50%; width: min(30vw, 400px); margin: 0; transform: translateY(-50%); }
  .call__video { mix-blend-mode: screen; }   /* the gold dust falls across the photograph instead of covering it */
}

/* ───────── Passes: a cheering crowd on film behind the heading ───────── */
.hm-film { position: absolute; inset: 0 0 auto 0; z-index: 0; height: min(600px, 62%); overflow: hidden; opacity: .34; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 24%, #000 50%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 24%, #000 50%, transparent 100%); }
.hm-film video { width: 100%; height: 100%; object-fit: cover; }
.hm-film::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 70% at 50% 40%, rgba(0, 0, 0, .6), transparent 80%); }
@media (max-width: 767px) { .hm-film { height: 520px; opacity: .46; } }

/* ───────── Film strip ───────── */
.hm-reel { overflow: hidden; }
.hm-reel .rx-strip { z-index: 1; }
.hm-reel .rx-strip__row { gap: 0; }
.hm-reel .rx-strip__row img { height: auto; margin-right: 14px; background: #101010; }   /* spacing on the frame itself keeps the loop seamless */

/* Slow camera moves, the strip and the floating frames rest while they are off screen (js/main.js) */
.rx-kb.is-resting, .rx-strip.is-resting .rx-strip__row, .hm-chip.is-resting { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .hm-chip { animation: none; }
}