/* Purple scrollbars with a soft lavender track across the site. */
:root {
  scrollbar-color: #6A36B8 #F5F2FF;
  scrollbar-width: thin;
}
* { scrollbar-color: #6A36B8 #F5F2FF; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #F5F2FF; }
::-webkit-scrollbar-thumb {
  background: #6A36B8;
  border: 2px solid #F5F2FF;
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: #753BBD; }
::-webkit-scrollbar-corner { background: #F5F2FF; }

/* Native custom cursors remain responsive without a JavaScript follower. */
@media (hover: hover) and (pointer: fine) {
  :root { cursor: url("../images/cursor-arrow.svg?v=3") 3 2, default; }
  :root :is(a[href], button, [role="button"], summary, select,
    input[type="button"], input[type="submit"], input[type="reset"],
    input[type="checkbox"], input[type="radio"], label[for]) {
    cursor: url("../images/cursor-pointer.svg?v=3") 8 2, pointer;
  }
  :root :is(input:not([type]), input[type="text"], input[type="email"],
    input[type="tel"], input[type="url"], input[type="search"],
    input[type="password"], input[type="number"], textarea,
    [contenteditable="true"]) { cursor: text; }
  :root :is(button, input, select, textarea):disabled,
  :root [aria-disabled="true"] { cursor: not-allowed; }
}

@media (forced-colors: active) {
  :root, * { scrollbar-color: auto; }
}

/* Small hover lifts complement the entrance animations and existing shadows. */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .motion-card {
    transition: translate .5s cubic-bezier(.25, .1, .25, 1), filter .5s ease, box-shadow .5s ease,
      background-color .25s ease, border-color .25s ease;
  }
  .motion-card:hover, .motion-card:focus-within { translate: 0 -3px; }
  /* Flagship cards: no hover effect at all (client, 2.48.35) - the card artwork is static. */
  .dpa-flagship.motion-card, .dpa-flagship.motion-card:hover, .dpa-flagship.motion-card:focus-within { translate: none; transition: none; }
  .dpa-flagship:hover .dpa-flagship-card { border-color: transparent; background-color: transparent; box-shadow: none; }
  .dpa-award-card.motion-card:hover { translate: 0 -6px; box-shadow: inset 0 4px 20px rgba(255,255,255,.45), 0 18px 40px rgba(13,0,40,.3); }
  .text-link { transition: translate .2s ease, color .2s ease, border-color .2s ease; }
  .text-link:hover { translate: 2px 0; }
}

/* Button hover (client, 2.48.63): no more liquid wave. A button whose label ends with an arrow slides the arrow
   out to the right and back in from the left (site-motion.js wraps the arrow in .btn-arrow); a button without an
   arrow only shifts its background a step from its normal colour. Tabs, filters and icon buttons are not included. */
:is(.pill, .btn, .awards-submit, .dpa-header-cta, .dpa-mobile-cta, .mc-all, .mp-all, .impact-btn, .ic-btn, input[type="submit"]):not(.nomination-pillar, .category-option) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, filter .25s ease, box-shadow .25s ease;
}
.btn-arrow { display: inline-block; margin-left: .35em; will-change: transform; }
@keyframes btn-arrow-slide {
  0%   { transform: translateX(0); opacity: 1; }
  45%  { transform: translateX(.9em); opacity: 0; }
  50%  { transform: translateX(-.9em); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  :is(.pill, .btn, .awards-submit, .dpa-header-cta, .dpa-mobile-cta, .mc-all, .mp-all, .impact-btn, .ic-btn):hover .btn-arrow,
  :is(.pill, .btn, .awards-submit, .dpa-header-cta, .dpa-mobile-cta, .mc-all, .mp-all, .impact-btn, .ic-btn):focus-visible .btn-arrow { animation: btn-arrow-slide 1.1s ease-in-out infinite; }
}
@media (hover: hover) {
  /* Arrow-less buttons: one step away from the resting colour (lighter for dark/purple, slightly darker for light) */
  :is(.pill, .btn, .awards-submit, .dpa-header-cta, .dpa-mobile-cta, .mc-all, .mp-all, .impact-btn, .ic-btn, input[type="submit"]):not(.nomination-pillar, .category-option):not(.has-arrow):hover:not(:disabled):not([aria-disabled="true"]) { filter: brightness(.94) saturate(1.05); }
}

/* Establish the hidden entrance state before first paint, not on intersection. */
@media (prefers-reduced-motion: no-preference) {
  html.motion-boot :is(.stat-card, .award-stat, .pillar-card, .cat-card, .prize-card, .sponsor-option,
    .impact-stat, .video, .nomination-pillar, .category-option, .step,
    .dpa-flagship, .dpa-award-card, .dpa-spot-item, .story-tile, .journey-card, .faq-item, .apply-step, .hall-category-card, .dpa-countdown, .jb-card):not(#hero *, .awards-hero *),
  html.motion-active [data-motion-pending] { opacity: 0; }
}
@media print {
  html.motion-boot :is(h1, h2, h3, p), html [data-motion-pending] { opacity: 1 !important; }
}

/* Hero copy animates as soon as it is styled, without waiting for script or fonts. */
@keyframes hero-text-enter {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference) {
  :is(#hero, .awards-hero) :is(h1, h2, .awards-description),
  #hero p:not(header p),
  .awards-hero .awards-eyebrow {
    animation: hero-text-enter .8s cubic-bezier(.25, .1, .25, 1) both;
  }
}

/* Start the homepage entrance when its existing style-loading curtain lifts. */
html.tw-loading #hero :is(h1, h2, p) { animation-play-state: paused; }

/* Shared category-card hover (client, 2.49.41): hovering the card grows the icon a little; the "Explore the Awards"
   link itself never animates - hovering it only dims it. */
.cat-card > div > img { transform-origin: left top; transition: transform .45s cubic-bezier(.16, 1, .3, 1); }
.cat-card > .text-link { transition: opacity .2s ease; transform: none !important; }
.cat-card > .text-link:hover, .cat-card > .text-link:focus-visible { opacity: .7; border-bottom-color: rgba(255,255,255,.2) !important; }
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .cat-card:hover > div > img, .cat-card:focus-within > div > img { transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .cat-card > div > img, .cat-card > .text-link { transition: none !important; }
}

/* Pill buttons: DIN uppercase sits ~0.11em above the line-box centre, leaving more space under the
   label than above. All pills have a fixed height and no block padding, so a top padding of .22em
   shifts the label down by half of that and centres the caps (measured in Chrome). */
:is(.pill, .awards-submit, .dpa-header-cta, .dpa-mobile-cta, .hall-load-more button, .mc-all, .mp-all, .impact-btn, .ic-btn, .cf-submit-btn, .cf-success-close, input[type="submit"]):not(.nomination-pillar, .category-option) {
  padding-top: .22em !important;
  padding-bottom: 0 !important;
}
/* iOS (2.49.37): WebKit on iPhone/iPad sits DIN's baseline lower in the line box (the font's line gap lands under the
   baseline), so the same .22em pushed the label ~1.5px below centre there (owner's screenshot). Near-zero on iOS only. */
@supports (-webkit-touch-callout: none) {
  :is(.pill, .awards-submit, .dpa-header-cta, .dpa-mobile-cta, .hall-load-more button, .mc-all, .mp-all, .impact-btn, .ic-btn, .cf-submit-btn, .cf-success-close, input[type="submit"]):not(.nomination-pillar, .category-option) { padding-top: .04em !important; }
}
/* The arrow glyph is not in DIN and renders in each OS's fallback font; a zero line-height keeps that font's metrics
   from growing the line box and shifting the label. */
.btn-arrow { line-height: 0; }

/* Client (2.50.18/2.50.19): text selection in brand purple with white text, site-wide. */
::selection { background: #753BBD; color: #fff; }
::-moz-selection { background: #753BBD; color: #fff; }