/* R320 awards photographs (7 October 2026). Loaded on the About page and the home page only.
   Layout: three photographs in a row, then a long photograph across the bottom, under the Clutch badges.
   Motion: plays once. The Australian Web Awards photograph glints first, then after a short pause the long row.
   The other two photographs stay still. Reduced motion: everything stays still. */

/* Home page only: the About page gets its charcoal from the joined page canvas, the home page does not */
#awards.section--charcoal .cbadge__name{color:#191919}

/* Layout */
.r320-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:430px;gap:20px;margin-top:20px}
.r320-grid figure,.r320-wide{margin:0;min-height:0}
.r320-wide{height:430px;margin-top:20px}
.r320-media{position:relative;overflow:hidden;height:100%}
.r320-media img{display:block;width:100%;height:100%;object-fit:cover}
.r320-grid figure:nth-child(1) img,.r320-grid figure:nth-child(2) img{object-position:center 60%}
.r320-grid figure:nth-child(3) img{object-position:center 55%}
.r320-wide img{object-position:center 14%}
@media (max-width:767px){
  .r320-grid{grid-template-columns:1fr;grid-auto-rows:auto;gap:14px;margin-top:14px}
  .r320-grid figure{aspect-ratio:4/5}
  .r320-grid figure:nth-child(n) img{object-position:center 70%}
  .r320-wide{height:250px;margin-top:14px}
}

/* Motion */
.r320-media::after{content:none}
.r320-wide .r320-media::after,.r320-grid figure:nth-child(3) .r320-media::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;mix-blend-mode:screen;
  background-size:400% 100%;background-repeat:no-repeat;background-position:80% 0;
  -webkit-mask-size:cover;mask-size:cover;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:var(--r320-pos,50% 50%);mask-position:var(--r320-pos,50% 50%)}
.r320-wide{--r320-pos:50% 14%}
.r320-wide .r320-media::after{background-image:linear-gradient(96deg,rgba(245,248,255,0) 42%,rgba(245,248,255,.45) 47.5%,rgba(255,255,255,1) 50%,rgba(245,248,255,.45) 52.5%,rgba(245,248,255,0) 58%);transform-origin:50% 30%}
.r320-wide .r320-media img{transform:scale(1);transform-origin:50% 30%}
.r320-grid figure:nth-child(3){--r320-pos:50% 55%}
.r320-grid figure:nth-child(3) .r320-media::after{background-image:linear-gradient(102deg,rgba(245,250,255,0) 41%,rgba(245,250,255,.45) 47%,rgba(255,255,255,1) 50%,rgba(245,250,255,.45) 53%,rgba(245,250,255,0) 59%)}
/* the light masks load only once the module is reached */
#awards.r320-lit .r320-wide .r320-media::after,.r320-wide.r320-on .r320-media::after{-webkit-mask-image:url(/assets/awards/awards-long-row-glint.webp);mask-image:url(/assets/awards/awards-long-row-glint.webp)}
#awards.r320-lit .r320-grid figure:nth-child(3) .r320-media::after,.r320-grid figure:nth-child(3).r320-on .r320-media::after{-webkit-mask-image:url(/assets/awards/awards-australian-web-glint.webp);mask-image:url(/assets/awards/awards-australian-web-glint.webp)}
/* R322: each photograph plays once as it comes into view. r320.js lights the Australian Web Awards tile first and holds the long row until that glint has finished plus a short gap, so the approved order is kept when both are on screen together */
.r320-grid figure:nth-child(3).r320-on .r320-media::after{animation:r320-glint 3s cubic-bezier(.45,0,.3,1) .3s 1 both}
.r320-wide.r320-on .r320-media img{animation:r320-push 14s cubic-bezier(.25,.1,.25,1) .2s 1 both}
.r320-wide.r320-on .r320-media::after{animation:r320-glint 4.5s cubic-bezier(.45,0,.3,1) .4s 1 both,r320-push 14s cubic-bezier(.25,.1,.25,1) .2s 1 both}
@keyframes r320-glint{0%{opacity:0;background-position:80% 0}10%{opacity:1}90%{opacity:1}100%{opacity:0;background-position:20% 0}}
@keyframes r320-push{from{transform:scale(1)}to{transform:scale(1.03)}}
/* mobile: photograph focal point */
@media (max-width:767px){
  .r320-grid figure:nth-child(n){--r320-pos:50% 70%}
}
@media (prefers-reduced-motion:reduce){.r320-media::after{display:none!important}.r320-media img{animation:none!important}}

/* R321: awards module sits in its own ambient blob canvas (same treatment as Ask Emote). Desktop only; on phones and tablets the static glows are hidden so the module keeps its plain charcoal. */
@media (max-width:1080px){html.px-ambient-ready .r321-canvas .px-blob,.r321-canvas .px-blob{display:none}}