/* Technovation IV — lightweight category and countdown enhancements.
   Load AFTER style.css and header-reel.css. No header styles are changed.
   Category artwork, colours, sizes and existing layout remain untouched. */

/* 1. Interactive category cards: light follows the pointer (desktop only). */
.category-tile {
  isolation: isolate;
  --tv-pointer-x: 50%;
  --tv-pointer-y: 50%;
  transition: transform 300ms cubic-bezier(.22, 1, .36, 1),
              box-shadow 300ms ease;
}
.category-tile::before,
.category-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 260ms ease;
}
.category-tile::before {
  z-index: 0;
  background: radial-gradient(
    circle 145px at var(--tv-pointer-x) var(--tv-pointer-y),
    rgba(255, 231, 220, .23) 0%,
    rgba(177, 48, 65, .13) 43%,
    transparent 77%
  );
}
.category-tile::after {
  z-index: 2;
  inset: 2px;
  border: 1px solid rgba(255, 236, 225, .42);
  box-shadow: inset 0 0 19px rgba(255, 200, 203, .08);
}
.category-tile .category-name {
  position: relative;
  z-index: 1;
}
.category-tile:focus-visible::before,
.category-tile:focus-visible::after {
  opacity: 1;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .category-tile:hover,
  .motion-ready .category-tile.reveal.is-visible:hover {
    transform: translate3d(0, -6px, 0);
    box-shadow: 0 16px 30px rgba(0, 0, 0, .35), 0 0 18px rgba(155, 39, 57, .22);
  }
  .category-tile:hover::before,
  .category-tile:hover::after { opacity: 1; }
  .category-tile:active,
  .motion-ready .category-tile.reveal.is-visible:active {
    transform: translate3d(0, -2px, 0);
  }
}

/* 2. Countdown: animate only values that actually change.
   The existing main.js remains the source of the countdown values. */
.countdown-block strong {
  position: relative;
  font-variant-numeric: tabular-nums;
}
.countdown-block strong.tv-digit-rolling {
  isolation: isolate;
  color: transparent;
}
.countdown-block strong.tv-digit-rolling::before,
.countdown-block strong.tv-digit-rolling::after {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  color: #fff;
  font: inherit;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  backface-visibility: hidden;
}
.countdown-block strong.tv-digit-rolling::before {
  content: attr(data-tv-previous);
  animation: tv-digit-out 420ms cubic-bezier(.25, .75, .3, 1) both;
}
.countdown-block strong.tv-digit-rolling::after {
  content: attr(data-tv-current);
  animation: tv-digit-in 420ms cubic-bezier(.2, .9, .3, 1) both;
}
@keyframes tv-digit-out {
  from { transform: translate3d(0, 0, 0); opacity: 1; }
  to   { transform: translate3d(0, -45%, 0); opacity: 0; }
}
@keyframes tv-digit-in {
  from { transform: translate3d(0, 45%, 0); opacity: 0; }
  to   { transform: translate3d(0, 0, 0); opacity: 1; }
}

/* Code of Conduct and Contact use the same .reveal rules as About Technovation,
   controlled by main.js. No duplicate transition rules are needed here. */

/* On touch screens the artwork is static, with no hover-dependent styling. */
@media (hover: none), (pointer: coarse) {
  .category-tile::before, .category-tile::after { display: none; }
}

/* Accessibility: no rolling/entrance animations when reduced motion is chosen. */
@media (prefers-reduced-motion: reduce) {
  .category-tile {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .category-tile::before, .category-tile::after { display: none !important; }
  .countdown-block strong.tv-digit-rolling { color: inherit !important; }
  .countdown-block strong.tv-digit-rolling::before,
  .countdown-block strong.tv-digit-rolling::after { display: none !important; }
}