/* Rare homepage oddities --------------------------------------------------- */

/* Tyrannosaurus ------------------------------------------------------------ */
.oddity-trex-runner {
  position: fixed;
  z-index: 10000;
  left: var(--oddity-anchor-x, 50vw);
  top: var(--oddity-anchor-y, 50vh);
  width: clamp(620px, 90vw, 1040px);
  aspect-ratio: 1;
  pointer-events: none;
  animation: oddity-trex-cross 5.6s steps(56, end) both;
  transform: translate3d(
    calc(var(--oddity-view-left, 0px) - var(--oddity-anchor-x, 50vw) - 106%),
    -50%,
    0
  );
  will-change: transform;
}

.oddity-trex-sprite {
  position: absolute;
  z-index: 2;
  inset: 0;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 400% 200%;
  filter:
    drop-shadow(0 4px 2px rgba(15, 18, 22, 0.25))
    drop-shadow(0 18px 12px rgba(15, 18, 22, 0.24));
  image-rendering: auto;
  will-change: background-position;
}

.oddity-trex-ground-shadow {
  position: absolute;
  z-index: 1;
  left: 11%;
  bottom: 9.5%;
  width: 74%;
  height: 7%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(9, 12, 16, 0.34), rgba(9, 12, 16, 0) 70%);
  filter: blur(10px);
  animation: oddity-trex-shadow-pulse 400ms ease-in-out infinite alternate;
}

.oddity-trex-dust {
  position: absolute;
  z-index: 3;
  bottom: 12%;
  width: clamp(20px, 2.6vw, 46px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(102, 96, 83, 0.22);
  filter: blur(3px);
  opacity: 0;
  animation: oddity-trex-dust 800ms ease-out infinite;
}

.oddity-trex-dust-a {
  left: 30%;
}

.oddity-trex-dust-b {
  left: 57%;
  width: clamp(14px, 1.9vw, 34px);
  animation-delay: 267ms;
}

.oddity-trex-dust-c {
  left: 46%;
  width: clamp(10px, 1.35vw, 25px);
  animation-delay: 533ms;
}

@keyframes oddity-trex-cross {
  from {
    transform: translate3d(
      calc(var(--oddity-view-left, 0px) - var(--oddity-anchor-x, 50vw) - 106%),
      -50%,
      0
    );
  }
  to {
    transform: translate3d(
      calc(var(--oddity-view-right, 100vw) - var(--oddity-anchor-x, 50vw) + 6%),
      -50%,
      0
    );
  }
}

@keyframes oddity-trex-shadow-pulse {
  from {
    opacity: 0.48;
    transform: scaleX(0.92);
  }
  to {
    opacity: 0.76;
    transform: scaleX(1.05);
  }
}

@keyframes oddity-trex-dust {
  0%,
  12% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.2);
  }
  22% {
    opacity: 0.62;
  }
  65% {
    opacity: 0.22;
  }
  100% {
    opacity: 0;
    transform: translate3d(-5vw, -2.4vh, 0) scale(2.8);
  }
}

/* The page itself opens ---------------------------------------------------- */
.oddity-door-scene {
  position: fixed;
  z-index: 10001;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}

.oddity-page-doorway {
  position: absolute;
  left: var(--oddity-door-left);
  top: var(--oddity-door-top);
  width: var(--oddity-door-width);
  height: var(--oddity-door-height);
  perspective: 1500px;
  -webkit-perspective: 1500px;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  isolation: isolate;
}

.oddity-page-depth,
.oddity-visitor-stack,
.oddity-page-panel,
.oddity-page-edge {
  position: absolute;
  inset: 0;
}

.oddity-page-depth {
  z-index: 1;
  overflow: hidden;
  background:
    radial-gradient(circle at 56% 32%, rgba(48, 53, 61, 0.5), transparent 42%),
    #06080b;
  box-shadow:
    inset 0 0 42px rgba(0, 0, 0, 0.92),
    0 22px 46px rgba(6, 9, 14, 0.36);
  opacity: 0;
  animation: oddity-page-depth 7.2s ease both;
}

.oddity-visitor-stack {
  z-index: 1;
  overflow: hidden;
  opacity: 0;
  animation: oddity-visitor-stack 7.2s linear both;
}

.oddity-visitor-frame {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  opacity: 0;
  transform: translateZ(0) scale(1.018);
  transition: opacity 90ms linear;
  will-change: opacity;
}

.oddity-visitor-frame.is-active {
  opacity: 1;
}

.oddity-page-panel {
  z-index: 3;
  overflow: hidden;
  background: var(--bg, #f6f7f9);
  transform-origin: left center;
  -webkit-transform-origin: left center;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  animation: oddity-page-open 7.2s cubic-bezier(0.54, 0.02, 0.24, 1) both;
  will-change: transform;
}

.oddity-door-page-copy {
  position: absolute;
  min-height: 100vh;
  overflow: hidden;
  background: var(--bg, #f6f7f9);
  color: var(--text, #17191c);
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans", "Yu Gothic UI", sans-serif;
  line-height: 1.75;
  pointer-events: none;
  user-select: none;
}

.oddity-door-page-copy * {
  pointer-events: none !important;
}

.oddity-page-edge {
  z-index: 4;
  width: 2px;
  left: 0;
  right: auto;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(255, 255, 255, 0.88) 12%,
    rgba(14, 18, 25, 0.62) 50%,
    rgba(255, 255, 255, 0.82) 88%,
    transparent
  );
  opacity: 0;
  filter: drop-shadow(2px 0 3px rgba(5, 8, 12, 0.5));
  animation: oddity-page-edge 7.2s ease both;
}

.oddity-door-bubble {
  position: absolute;
  z-index: 6;
  left: calc(var(--oddity-anchor-x, 50%) + clamp(65px, 8vw, 125px));
  top: calc(var(--oddity-anchor-y, 50%) - min(28vh, 250px));
  min-width: max-content;
  padding: clamp(11px, 1.55vw, 18px) clamp(15px, 2.1vw, 24px);
  border: 3px solid #15171b;
  border-radius: 53% 47% 55% 45% / 47% 55% 45% 53%;
  background: #fffdf6;
  color: #111318;
  box-shadow:
    4px 5px 0 rgba(21, 23, 27, 0.88),
    0 8px 22px rgba(6, 9, 14, 0.2);
  font-family: "Comic Sans MS", "Bradley Hand", "Segoe Print", cursive;
  font-size: clamp(1rem, 2vw, 1.42rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: 0.01em;
  white-space: nowrap;
  opacity: 0;
  transform: rotate(-5deg) scale(0.2);
  transform-origin: left bottom;
  animation: oddity-door-bubble 7.2s cubic-bezier(0.2, 0.86, 0.28, 1.18) both;
}

.oddity-door-bubble::after {
  content: "";
  position: absolute;
  left: 9px;
  bottom: -18px;
  width: 24px;
  height: 24px;
  border-right: 3px solid #15171b;
  border-bottom: 3px solid #15171b;
  background: #fffdf6;
  transform: skew(-28deg) rotate(48deg);
}

@keyframes oddity-page-depth {
  0%,
  11% {
    opacity: 0;
  }
  18%,
  84% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes oddity-visitor-stack {
  0%,
  15% {
    opacity: 0;
  }
  20%,
  80% {
    opacity: 1;
  }
  87%,
  100% {
    opacity: 0;
  }
}

@keyframes oddity-page-open {
  0%,
  12% {
    transform: translateZ(0) rotateY(0deg);
    box-shadow: 0 0 0 rgba(6, 9, 14, 0);
  }
  27%,
  73% {
    transform: translateZ(0) rotateY(-87deg);
    box-shadow: 24px 13px 38px rgba(6, 9, 14, 0.42);
  }
  89%,
  100% {
    transform: translateZ(0) rotateY(0deg);
    box-shadow: 0 0 0 rgba(6, 9, 14, 0);
  }
}

@keyframes oddity-page-edge {
  0%,
  10% {
    opacity: 0;
  }
  16%,
  82% {
    opacity: 0.9;
  }
  91%,
  100% {
    opacity: 0;
  }
}

@keyframes oddity-door-bubble {
  0%,
  38% {
    opacity: 0;
    transform: rotate(-7deg) scale(0.18);
  }
  44% {
    opacity: 1;
    transform: rotate(-4deg) scale(1.08);
  }
  48%,
  66% {
    opacity: 1;
    transform: rotate(-5deg) scale(1);
  }
  73%,
  100% {
    opacity: 0;
    transform: rotate(-2deg) scale(0.76) translateY(-8px);
  }
}

/* Screen shatter ----------------------------------------------------------- */
.oddity-lock-scroll {
  overflow: hidden;
}

.oddity-shatter {
  position: fixed;
  z-index: 20000;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  outline: none;
  background: #010204;
  cursor: pointer;
}

.oddity-shatter-dark,
.oddity-shatter-stage,
.oddity-cracks {
  position: absolute;
  inset: 0;
}

.oddity-shatter-dark {
  z-index: 0;
  background:
    radial-gradient(circle at var(--impact-x) var(--impact-y), #10141b 0, #040609 22%, #010204 58%);
  opacity: 0;
  transition: opacity 260ms linear;
}

.oddity-shatter-stage {
  z-index: 1;
  transform-origin: var(--impact-x) var(--impact-y);
}

.oddity-shard {
  position: absolute;
  inset: 0;
  overflow: hidden;
  backface-visibility: hidden;
  filter:
    drop-shadow(0 0 0.6px rgba(255, 255, 255, 0.9))
    drop-shadow(0 2px 2px rgba(0, 0, 0, 0.42));
  transform: translate3d(0, 0, 0);
  will-change: transform, opacity;
}

.oddity-screen-copy {
  position: absolute;
  left: 0;
  width: 100vw;
  min-height: 100vh;
  overflow: hidden;
  background: var(--bg, #f6f7f9);
  color: var(--text, #17191c);
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans", "Yu Gothic UI", sans-serif;
  line-height: 1.75;
  pointer-events: none;
  user-select: none;
}

.oddity-screen-copy * {
  pointer-events: none !important;
}

.oddity-cracks {
  z-index: 3;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.oddity-cracks path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.oddity-crack-shadow {
  stroke: rgba(6, 8, 12, 0.96);
  stroke-width: 0.34;
  filter: drop-shadow(0 0 0.36px rgba(0, 0, 0, 0.9));
}

.oddity-crack-highlight {
  stroke: rgba(255, 255, 255, 0.88);
  stroke-width: 0.11;
  transform: translate(0.12px, -0.12px);
  filter: drop-shadow(0 0 0.6px rgba(205, 225, 255, 0.9));
}

.oddity-crack-radial {
  stroke: rgba(11, 14, 19, 0.98);
  stroke-width: 0.4;
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  opacity: 0;
  filter:
    drop-shadow(0.16px -0.16px 0 rgba(255, 255, 255, 0.98))
    drop-shadow(0 0 0.55px rgba(0, 0, 0, 0.9));
}

.oddity-impact-flash,
.oddity-impact-core {
  position: absolute;
  z-index: 4;
  left: var(--impact-x);
  top: var(--impact-y);
  width: 18vmin;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.98) 0 1%, rgba(226, 237, 255, 0.8) 2%, rgba(255, 255, 255, 0.26) 7%, transparent 34%);
  opacity: 0;
  mix-blend-mode: screen;
  transform: translate(-50%, -50%) scale(0.08);
  pointer-events: none;
}

.oddity-impact-core {
  width: clamp(20px, 3vmin, 34px);
  border: 1px solid rgba(255, 255, 255, 0.82);
  background:
    radial-gradient(circle, #05070a 0 13%, rgba(17, 21, 27, 0.95) 14% 25%, rgba(255, 255, 255, 0.92) 27% 29%, rgba(8, 11, 16, 0.72) 31% 40%, transparent 68%);
  box-shadow:
    0 0 0 1px rgba(5, 7, 11, 0.84),
    0 0 9px rgba(223, 235, 255, 0.74);
  mix-blend-mode: normal;
}

.oddity-shatter.is-cracked .oddity-cracks path {
  animation: oddity-crack-draw 580ms cubic-bezier(0.16, 0.78, 0.2, 1) forwards;
}

.oddity-shatter.is-cracked .oddity-crack-highlight {
  animation-delay: 34ms;
}

.oddity-shatter.is-cracked .oddity-crack-radial {
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  animation: oddity-radial-reveal 430ms cubic-bezier(0.16, 0.78, 0.2, 1) forwards;
}

.oddity-shatter.is-cracked .oddity-impact-flash {
  animation: oddity-impact-flash 470ms ease-out both;
}

.oddity-shatter.is-cracked .oddity-impact-core {
  animation: oddity-impact-core 760ms cubic-bezier(0.16, 0.76, 0.22, 1) both;
}

.oddity-shatter.is-shattering .oddity-shatter-stage {
  animation: oddity-screen-impact 280ms cubic-bezier(0.22, 0.72, 0.24, 1) both;
}

.oddity-shatter.is-shattering .oddity-shard {
  animation: oddity-shard-fall var(--shard-duration) cubic-bezier(0.24, 0.57, 0.32, 1) var(--shard-delay) forwards;
}

.oddity-shatter.is-shattering .oddity-cracks {
  opacity: 0;
  transition: opacity 240ms ease 120ms;
}

.oddity-shatter.is-shattering .oddity-impact-core {
  opacity: 0;
  transition: opacity 170ms linear;
}

.oddity-shatter.is-shattering .oddity-shatter-dark {
  opacity: 1;
}

.oddity-shatter-hint {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: max(34px, env(safe-area-inset-bottom));
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0;
  transform: translate(-50%, 7px);
  transition: opacity 480ms ease, transform 480ms ease;
}

.oddity-shatter.is-dark .oddity-shatter-hint {
  opacity: 1;
  transform: translate(-50%, 0);
}

.oddity-shatter.is-restoring {
  opacity: 0;
  transition: opacity 480ms ease;
  pointer-events: none;
}

@keyframes oddity-crack-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes oddity-radial-reveal {
  0% {
    opacity: 0;
  }
  28% {
    opacity: 0.94;
  }
  100% {
    opacity: 1;
  }
}

@keyframes oddity-impact-flash {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.08);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.65);
  }
}

@keyframes oddity-impact-core {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.08) rotate(-14deg);
  }
  24% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.22) rotate(3deg);
  }
  100% {
    opacity: 0.96;
    transform: translate(-50%, -50%) scale(1) rotate(0);
  }
}

@keyframes oddity-screen-impact {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  18% {
    transform: translate3d(-8px, 3px, 0) rotate(-0.15deg);
  }
  36% {
    transform: translate3d(7px, -5px, 0) rotate(0.12deg);
  }
  58% {
    transform: translate3d(-4px, 4px, 0);
  }
  78% {
    transform: translate3d(3px, -2px, 0);
  }
}

@keyframes oddity-shard-fall {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateX(0) rotateY(0) rotateZ(0);
  }
  17% {
    opacity: 1;
    transform:
      translate3d(var(--shard-pop-x), var(--shard-pop-y), 40px)
      rotateX(var(--shard-pop-flip-x))
      rotateY(var(--shard-pop-flip-y))
      rotateZ(var(--shard-pop-rotate));
  }
  72% {
    opacity: 0.94;
  }
  100% {
    opacity: 0;
    transform:
      translate3d(var(--shard-x), var(--shard-y), -180px)
      rotateX(var(--shard-flip-x))
      rotateY(var(--shard-flip-y))
      rotateZ(var(--shard-rotate));
  }
}

@media (max-width: 640px) {
  .oddity-trex-runner {
    width: min(560px, 132vw);
  }

  .oddity-door-bubble {
    left: calc(var(--oddity-anchor-x, 50%) - 7vw);
    top: calc(var(--oddity-anchor-y, 50%) - min(31vh, 240px));
    font-size: clamp(0.92rem, 4.5vw, 1.18rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.oddity-force-motion) .oddity-trex-runner,
  html:not(.oddity-force-motion) .oddity-door-scene,
  html:not(.oddity-force-motion) .oddity-shatter {
    display: none !important;
  }
}