/* Dino Competitions: stomping footprint page transition.
   Curtain rises from the ground, three prints are punched into it, curtain
   carries on up and off the top of the screen on the next page. Reveal is pure
   CSS, so the curtain always lifts even if the JavaScript never runs.

   --dino-tx-print and --dino-tx-plate are set from PHP as absolute URLs. A
   relative URL inside a custom property resolves against a different stylesheet
   depending on the browser, so it silently 404s. */

:root {
  --dino-tx-ink: #050A08;
  --dino-tx-forest: #0B3B2E;
  --dino-tx-forest-deep: #06231B;
  --dino-tx-gold: #C9A24A;
  --dino-tx-gold-lit: #E8C46A;
  --dino-tx-dust: 216, 210, 199;

  --dino-tx-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.035' numOctaves='4' seed='7'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  --dino-tx-noise-fine: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.11' numOctaves='3' seed='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");

  --dino-tx-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dino-tx-punch: cubic-bezier(0.2, 0.85, 0.3, 1);
  --dino-tx-settle: cubic-bezier(0.12, 0.6, 0.25, 1);
}

.dino-curtain {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: none;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(120% 62% at 50% 84%, var(--dino-tx-forest) 0%, var(--dino-tx-forest-deep) 44%, var(--dino-tx-ink) 78%),
    var(--dino-tx-ink);
  transform: translate3d(0, 100%, 0);
  will-change: transform;
  pointer-events: none;
  overflow: hidden;
}

.dino-curtain__trail {
  display: flex;
  align-items: center;
  gap: clamp(4px, 1.2vw, 14px);
}

.dino-step {
  position: relative;
  width: clamp(46px, 9vw, 88px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}

.dino-step:nth-child(1) { rotate: -11deg; translate: 0 7%; scale: 0.86; --dino-lit: 0.72; --dino-at: 110ms; }
.dino-step:nth-child(2) { rotate: 8deg; translate: 0 -9%; scale: 1; --dino-lit: 0.88; --dino-at: 200ms; }
.dino-step:nth-child(3) { rotate: -5deg; translate: 0 6%; scale: 1.14; --dino-lit: 1; --dino-at: 290ms; }
.dino-step:nth-child(2) .dino-step__mark { scale: -1 1; }

.dino-step__mark {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.dino-step__mark::before {
  content: "";
  position: absolute;
  inset: 0;
  translate: 2.5% 4%;
  background: rgba(0, 0, 0, 0.85);
  -webkit-mask: var(--dino-tx-print) no-repeat center / contain;
  mask: var(--dino-tx-print) no-repeat center / contain;
  filter: blur(1.5px);
}

.dino-step__mark::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(155deg, #F4DCA4 0%, var(--dino-tx-gold-lit) 22%, var(--dino-tx-gold) 52%, #5F4B24 100%);
  -webkit-mask: var(--dino-tx-print) no-repeat center / contain;
  mask: var(--dino-tx-print) no-repeat center / contain;
  opacity: var(--dino-lit, 1);
}

.dino-step__ejecta {
  position: absolute;
  left: 50%;
  top: 64%;
  width: 150%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--dino-tx-dust), 0.78) 0%, rgba(var(--dino-tx-dust), 0.26) 46%, rgba(var(--dino-tx-dust), 0) 68%);
  -webkit-mask-image: var(--dino-tx-noise-fine), radial-gradient(closest-side, #000 58%, transparent 100%);
  -webkit-mask-size: 100% 100%, 100% 100%;
  -webkit-mask-repeat: no-repeat, no-repeat;
  -webkit-mask-position: center, center;
  -webkit-mask-composite: source-in;
  mask-image: var(--dino-tx-noise-fine), radial-gradient(closest-side, #000 58%, transparent 100%);
  mask-size: 100% 100%, 100% 100%;
  mask-repeat: no-repeat, no-repeat;
  mask-position: center, center;
  mask-composite: intersect;
  opacity: 0;
}

.dino-step__ejecta::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 42%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(252, 249, 242, 0.8) 0%, rgba(var(--dino-tx-dust), 0) 70%);
  opacity: 0;
}

.dino-step__billow {
  position: absolute;
  left: 50%;
  top: 58%;
  width: 165%;
  aspect-ratio: 1;
  translate: -50% -50%;
  opacity: 0;
  background:
    radial-gradient(circle at 32% 62%, rgba(var(--dino-tx-dust), 0.62) 0%, rgba(var(--dino-tx-dust), 0) 52%),
    radial-gradient(circle at 68% 56%, rgba(var(--dino-tx-dust), 0.54) 0%, rgba(var(--dino-tx-dust), 0) 48%),
    radial-gradient(circle at 50% 40%, rgba(var(--dino-tx-dust), 0.44) 0%, rgba(var(--dino-tx-dust), 0) 58%);
  -webkit-mask-image: var(--dino-tx-noise), radial-gradient(closest-side, #000 62%, transparent 100%);
  -webkit-mask-size: 140% 140%, 100% 100%;
  -webkit-mask-repeat: no-repeat, no-repeat;
  -webkit-mask-position: center, center;
  -webkit-mask-composite: source-in;
  mask-image: var(--dino-tx-noise), radial-gradient(closest-side, #000 62%, transparent 100%);
  mask-size: 140% 140%, 100% 100%;
  mask-repeat: no-repeat, no-repeat;
  mask-position: center, center;
  mask-composite: intersect;
  filter: blur(1.5px);
}

.dino-step__plate {
  position: absolute;
  left: 50%;
  top: 54%;
  width: 430%;
  aspect-ratio: 230 / 146;
  translate: -50% -58%;
  background: rgb(var(--dino-tx-dust));
  -webkit-mask-image: var(--dino-tx-plate);
  -webkit-mask-size: 400% 400%;
  -webkit-mask-position: 0% 0%;
  -webkit-mask-repeat: no-repeat;
  mask-image: var(--dino-tx-plate);
  mask-size: 400% 400%;
  mask-position: 0% 0%;
  mask-repeat: no-repeat;
  opacity: 0;
  pointer-events: none;
}

.dino-step__grit {
  position: absolute;
  left: 50%;
  top: 66%;
  width: 0;
  height: 0;
}

.dino-step__grit i {
  position: absolute;
  border-radius: 50% 50% 45% 55%;
  background: rgb(var(--dino-tx-dust));
  opacity: 0;
}

.dino-step__grit i:nth-child(1) { --gx: -420%; --gy: 120%; --gh: -260%; width: 5px; height: 4px; }
.dino-step__grit i:nth-child(2) { --gx: 380%; --gy: 150%; --gh: -320%; width: 3px; height: 3px; }
.dino-step__grit i:nth-child(3) { --gx: -260%; --gy: 90%; --gh: -170%; width: 4px; height: 3px; }
.dino-step__grit i:nth-child(4) { --gx: 470%; --gy: 130%; --gh: -210%; width: 6px; height: 5px; }

.dino-tx-leaving .dino-curtain {
  display: flex;
  animation: dino-tx-rise 300ms var(--dino-tx-ease) forwards;
}

.dino-tx-leaving .dino-curtain__trail {
  animation: dino-tx-jolt 620ms linear forwards;
}

.dino-tx-leaving .dino-step__mark {
  animation: dino-tx-punch 190ms var(--dino-tx-punch) var(--dino-at) forwards;
}

.dino-tx-leaving .dino-step__ejecta {
  animation: dino-tx-ejecta 520ms ease-out var(--dino-at) forwards;
}

.dino-tx-leaving .dino-step__ejecta::after {
  animation: dino-tx-flash 140ms ease-out var(--dino-at) forwards;
}

.dino-tx-leaving .dino-step__billow {
  animation: dino-tx-billow 820ms var(--dino-tx-settle) var(--dino-at) forwards;
}

.dino-tx-leaving .dino-step__grit i {
  animation: dino-tx-grit 560ms cubic-bezier(0.25, 0.7, 0.4, 1) var(--dino-at) forwards;
}

.dino-tx-leaving .dino-step__plate {
  animation:
    dino-tx-plate-x 130ms steps(4, jump-none) var(--dino-at) 4 forwards,
    dino-tx-plate-y 520ms steps(4, jump-none) var(--dino-at) 1 forwards,
    dino-tx-plate-o 640ms ease-out var(--dino-at) 1 forwards;
}

.dino-tx-leaving .dino-step__billow { opacity: 0; animation-name: dino-tx-billow-soft; }

.dino-tx-leaving .dino-step:nth-child(2) .dino-step__mark {
  animation-name: dino-tx-punch-flip;
}

@keyframes dino-tx-rise {
  from { transform: translate3d(0, 100%, 0); }
  to { transform: translate3d(0, 0, 0); }
}

@keyframes dino-tx-punch {
  0% { opacity: 0; scale: 1.16; }
  18% { opacity: 1; scale: 1.01; }
  100% { opacity: 1; scale: 1; }
}

@keyframes dino-tx-punch-flip {
  0% { opacity: 0; scale: -1.16 1.16; }
  18% { opacity: 1; scale: -1.01 1.01; }
  100% { opacity: 1; scale: -1 1; }
}

@keyframes dino-tx-jolt {
  0%, 15% { translate: 0 0; }
  18% { translate: 0 2px; }
  23% { translate: 0 -1px; }
  28%, 30% { translate: 0 0; }
  33% { translate: 0 3px; }
  38% { translate: 0 -1px; }
  43%, 45% { translate: 0 0; }
  48% { translate: 0 5px; }
  53% { translate: 0 -2px; }
  58% { translate: 0 1px; }
  64%, 100% { translate: 0 0; }
}

@keyframes dino-tx-ejecta {
  0% { opacity: 0; scale: 0.35 0.2; }
  10% { opacity: 1; }
  100% { opacity: 0; scale: 2.3 0.42; }
}

@keyframes dino-tx-flash {
  0% { opacity: 0; scale: 0.4; }
  20% { opacity: 1; }
  100% { opacity: 0; scale: 1.5; }
}

@keyframes dino-tx-billow {
  0% { opacity: 0; scale: 0.42; translate: -50% -50%; }
  18% { opacity: 1; }
  100% { opacity: 0; scale: 1.85; translate: -50% -86%; }
}

@keyframes dino-tx-grit {
  0% { opacity: 0; translate: 0 0; }
  8% { opacity: 1; }
  45% { translate: calc(var(--gx) * 0.62) var(--gh); }
  100% { opacity: 0; translate: var(--gx) var(--gy); }
}

@keyframes dino-tx-plate-x {
  from { -webkit-mask-position-x: 0%; mask-position-x: 0%; }
  to { -webkit-mask-position-x: 100%; mask-position-x: 100%; }
}

@keyframes dino-tx-plate-y {
  from { -webkit-mask-position-y: 0%; mask-position-y: 0%; }
  to { -webkit-mask-position-y: 100%; mask-position-y: 100%; }
}

@keyframes dino-tx-plate-o {
  0% { opacity: 0; }
  6% { opacity: 1; }
  65% { opacity: 0.85; }
  100% { opacity: 0; }
}

@keyframes dino-tx-billow-soft {
  0% { opacity: 0; scale: 0.42; translate: -50% -50%; }
  18% { opacity: 0.4; }
  100% { opacity: 0; scale: 1.85; translate: -50% -86%; }
}

.dino-tx-arriving .dino-curtain {
  display: flex;
  transform: translate3d(0, 0, 0);
  animation: dino-tx-exit 400ms 70ms var(--dino-tx-ease) forwards;
}

.dino-tx-arriving .dino-step__mark {
  opacity: 1;
  animation: dino-tx-fade 240ms 70ms ease-out forwards;
}

.dino-tx-arriving .dino-step:nth-child(2) .dino-step__mark { scale: -1 1; }

@keyframes dino-tx-exit {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, -100%, 0); }
}

@keyframes dino-tx-fade {
  to { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .dino-tx-leaving .dino-curtain,
  .dino-tx-arriving .dino-curtain {
    display: none;
    animation: none;
  }
}