/* Scoped utility shim for the ported WorksWheel (ECHO). Only the classes that component uses. */
.reel-wheel-echo {
  position: relative;
}

.reel-wheel-echo .relative { position: relative; }
.reel-wheel-echo .absolute { position: absolute; }
.reel-wheel-echo .inset-0 { inset: 0; }
.reel-wheel-echo .top-1\/2 { top: 50%; }
.reel-wheel-echo .left-1\/2 { left: 50%; }
.reel-wheel-echo .left-\[5\%\] { left: 5%; }
.reel-wheel-echo .top-\[7\%\] { top: 7%; }
.reel-wheel-echo .right-\[3\%\] { right: 3%; }
.reel-wheel-echo .bottom-5 { bottom: 20px; }
.reel-wheel-echo .left-3\.5 { left: 14px; }
.reel-wheel-echo .bottom-3\.5 { bottom: 14px; }
.reel-wheel-echo .right-3\.5 { right: 14px; }
.reel-wheel-echo .-translate-x-1\/2 { transform: translateX(-50%); }
.reel-wheel-echo .-translate-y-1\/2 { transform: translateY(-50%); }
.reel-wheel-echo .w-full { width: 100%; }
.reel-wheel-echo .h-full { height: 100%; }
.reel-wheel-echo .w-3 { width: 12px; }
.reel-wheel-echo .h-3 { height: 12px; }
.reel-wheel-echo .max-w-\[42\%\] { max-width: 42%; }
.reel-wheel-echo .max-w-\[70\%\] { max-width: 70%; }
.reel-wheel-echo .block { display: block; }
.reel-wheel-echo .flex { display: flex; }
.reel-wheel-echo .grid { display: grid; }
.reel-wheel-echo .place-items-center { place-items: center; }
.reel-wheel-echo .items-center { align-items: center; }
.reel-wheel-echo .justify-between { justify-content: space-between; }
.reel-wheel-echo .gap-1 { gap: 4px; }
.reel-wheel-echo .gap-2 { gap: 8px; }
.reel-wheel-echo .ml-auto { margin-left: auto; }
.reel-wheel-echo .space-y-0\.5 > * + * { margin-top: 2px; }
.reel-wheel-echo .px-2 { padding-inline: 8px; }
.reel-wheel-echo .px-3\.5 { padding-inline: 14px; }
.reel-wheel-echo .py-0\.5 { padding-block: 2px; }
.reel-wheel-echo .py-1\.5 { padding-block: 6px; }
.reel-wheel-echo .overflow-hidden { overflow: hidden; }
.reel-wheel-echo .cursor-grab { cursor: grab; }
.reel-wheel-echo .cursor-pointer { cursor: pointer; }
.reel-wheel-echo .active\:cursor-grabbing:active { cursor: grabbing; }
.reel-wheel-echo .select-none { user-select: none; -webkit-user-select: none; }
.reel-wheel-echo .pointer-events-none { pointer-events: none; }
.reel-wheel-echo .pointer-events-auto { pointer-events: auto; }
.reel-wheel-echo .outline-none { outline: none; }
.reel-wheel-echo .touch-pan-x { touch-action: pan-x; }
.reel-wheel-echo .z-10 { z-index: 10; }
.reel-wheel-echo .z-20 { z-index: 20; }
.reel-wheel-echo .rounded-2xl { border-radius: 16px; }
.reel-wheel-echo .rounded-full { border-radius: 9999px; }
.reel-wheel-echo .border { border: 1px solid #2a2a30; }
.reel-wheel-echo .shadow-sm { box-shadow: 0 18px 44px -22px #000000e6; }
/* arbitrary-value shadows used by the card face */
.reel-wheel-echo [class*="shadow-[0_20px_45px"] {
  box-shadow: 0 20px 45px -15px #000000b8, 0 4px 12px #00000059;
}
.reel-wheel-echo [class*="hover:shadow-"]:hover {
  box-shadow: 0 28px 50px -10px #000000d9, 0 6px 16px #00000073;
}
.reel-wheel-echo .backdrop-blur-md { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.reel-wheel-echo .transition-all { transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, opacity 0.2s ease; }
.reel-wheel-echo .transition-transform { transition: transform 0.2s ease; }
.reel-wheel-echo .transition-opacity { transition: opacity 0.3s ease; }
.reel-wheel-echo .duration-200 { transition-duration: 0.2s; }
.reel-wheel-echo .duration-300 { transition-duration: 0.3s; }
.reel-wheel-echo .underline { text-decoration: underline; }
.reel-wheel-echo .decoration-2 { text-decoration-thickness: 2px; }
.reel-wheel-echo .underline-offset-4 { text-underline-offset: 4px; }
.reel-wheel-echo .font-mono { font-family: var(--font-geist-mono), ui-monospace, monospace; }
.reel-wheel-echo .font-bold { font-weight: 700; }
.reel-wheel-echo .font-semibold { font-weight: 600; }
.reel-wheel-echo .font-black { font-weight: 900; }
.reel-wheel-echo .uppercase { text-transform: uppercase; }
.reel-wheel-echo .tracking-wider { letter-spacing: 0.08em; }
.reel-wheel-echo .tracking-tight { letter-spacing: -0.02em; }
.reel-wheel-echo .leading-\[1\.05\] { line-height: 1.05; }
.reel-wheel-echo .leading-\[1\.75\] { line-height: 1.75; }
.reel-wheel-echo .text-\[10px\] { font-size: 10px; }
.reel-wheel-echo .text-\[11px\] { font-size: 11px; }
.reel-wheel-echo .text-xs { font-size: 12px; }
.reel-wheel-echo .text-center { text-align: center; }
.reel-wheel-echo .text-right { text-align: right; }
.reel-wheel-echo .opacity-0 { opacity: 0; }
.reel-wheel-echo .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reel-wheel-echo .object-cover { object-fit: cover; }
.reel-wheel-echo .scale-105 { transform: scale(1.05); }
.reel-wheel-echo .group-hover\:scale-105 { transition: transform 0.2s ease; }
.reel-wheel-echo .group:hover .group-hover\:scale-105 { transform: scale(1.06); }
.reel-wheel-echo .\[backface-visibility\:hidden\] { backface-visibility: hidden; }
.reel-wheel-echo .bg-transparent { background: transparent; }
.reel-wheel-echo .bg-gradient-to-t {
  background-image: linear-gradient(to top, #00000099 0%, #00000000 55%, #00000000 100%);
}
.reel-wheel-echo .drop-shadow-sm { filter: drop-shadow(0 1px 1px #000000a6); }

/* card face + badges, themed for the portfolio */
.reel-wheel-echo .bg-white {
  background: #0c0c0e;
}
.reel-wheel-echo .border-neutral-300\/80 { border-color: #2c2c34; }
.reel-wheel-echo .hover\:border-neutral-500:hover { border-color: #5a5a66; }
.reel-wheel-echo .border-neutral-200 { border-color: #2a2a30; }
.reel-wheel-echo .bg-white\/90 { background: #0b0b0dd9; }
.reel-wheel-echo .bg-white\/90 .w-3 { color: #b4b4bc; }
.reel-wheel-echo .bg-white\/95 { background: #f4f4f5; }
.reel-wheel-echo .bg-white\/95.text-neutral-900 { color: #09090b !important; }
.reel-wheel-echo .text-neutral-900 { color: #f4f4f5; }
.reel-wheel-echo .hover\:text-neutral-900:hover { color: #ffffff; }
.reel-wheel-echo .text-neutral-400 { color: #7d7d88; }
.reel-wheel-echo .text-neutral-500 { color: #6b6b75; }
.reel-wheel-echo .text-neutral-600 { color: #a1a1aa; }
.reel-wheel-echo .text-white { color: #ffffff; }
.reel-wheel-echo .focus-visible\:outline-2:focus-visible {
  outline: 2px solid #ff3b2f;
  outline-offset: -4px;
}

@keyframes ww-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}
.reel-wheel-echo .animate-bounce {
  animation: ww-bounce 1.4s ease-in-out infinite;
}

@media (min-width: 768px) {
  .reel-wheel-echo .md\:left-\[7\%\] { left: 7%; }
  .reel-wheel-echo .md\:text-xs { font-size: 12px; }
  .reel-wheel-echo .md\:text-\[11px\] { font-size: 11px; }
}

.reel-wheel-echo #works-wheel-counter,
.reel-wheel-echo .reel-wheel-count {
  font-family: var(--font-geist-mono), ui-monospace, monospace;
}

@media (prefers-reduced-motion: reduce) {
  .reel-wheel-echo .animate-bounce { animation: none; }
  .reel-wheel-echo .transition-all,
  .reel-wheel-echo .transition-transform,
  .reel-wheel-echo .transition-opacity { transition: none; }
}