/*
  TUUUCKYTV v1.0.42 — HARD RETRO MOTION
  Deliberately chunky frame-jumps instead of modern easing.
*/

:root {
  --tuu-frame: steps(1, end);
}

/* Never allow browser/programmatic smooth scrolling in default mode. */
html,
body,
body:not(.retro-game) * {
  scroll-behavior: auto !important;
}

/* Existing transitions now snap frame-to-frame instead of easing. */
body:not(.retro-game) :is(
  button,
  .button,
  [role="button"],
  a,
  input,
  textarea,
  select,
  .card,
  .panel,
  .panel-card,
  .tool-card,
  .settings-card,
  .toggle-container,
  .board,
  .composer,
  .post,
  .queue-tool,
  .site-menu-panel,
  .site-menu-overlay,
  .site-menu-toggle,
  .site-menu-toggle span,
  .site-menu-link,
  .message-board-shortcut,
  #suggestions,
  #suggestions > div
) {
  transition-timing-function: var(--tuu-frame) !important;
}

/* Page comes in as four visibly separate CRT/pixel frames. */
body:not(.retro-game) {
  animation: tuuHardBoot .18s var(--tuu-frame) both !important;
}

/* Cards/panels visibly "draw" in chunks. */
body:not(.retro-game) :is(
  .card,
  .panel,
  .panel-card,
  .tool-card,
  .board,
  .composer,
  .post
) {
  animation: tuuHardPanel .16s var(--tuu-frame) both !important;
}

/* Text arrives with a tiny old-screen raster tick rather than a fade. */
body:not(.retro-game) :is(
  h1,
  h2,
  h3,
  h4,
  p,
  label,
  .muted,
  .status,
  .subtitle,
  .description
) {
  animation: tuuHardText .12s var(--tuu-frame) both;
}

/* Hover deliberately jitters through a couple of pixel positions. */
body:not(.retro-game) :is(
  button,
  .button,
  [role="button"],
  .site-menu-link,
  .message-board-shortcut,
  .tool-link
):hover {
  animation: tuuPixelHover .12s var(--tuu-frame) both !important;
}

/* Press feels like a physical old-game button. */
body:not(.retro-game) :is(
  button,
  .button,
  [role="button"],
  .message-board-shortcut,
  .tool-link
):active {
  translate: 3px 3px !important;
  transition: none !important;
  filter: brightness(.92);
}

/* Inputs flick between two focus frames instead of glowing smoothly. */
body:not(.retro-game) :is(input, textarea, select):focus {
  animation: tuuHardFocus .10s var(--tuu-frame) both !important;
}

/* Search suggestions appear one frame at a time. */
body:not(.retro-game) #suggestions > div {
  animation: tuuHardSuggestion .14s var(--tuu-frame) both !important;
}

/* Kill common smooth/fade-style transition lengths that can hide the effect. */
body:not(.retro-game) :is(
  button,
  .button,
  [role="button"],
  a,
  input,
  textarea,
  select,
  .site-menu-link,
  .message-board-shortcut,
  #suggestions > div
) {
  transition-duration: .09s !important;
}

/* Scrollbars themselves snap visually where supported. */
body:not(.retro-game) :is(textarea, pre, .board, .feed, .messages, .message-feed) {
  scroll-behavior: auto !important;
}

@keyframes tuuHardBoot {
  0%   { opacity: .05; filter: contrast(1.25) brightness(.72); }
  24%  { opacity: .34; filter: contrast(1.18) brightness(.88); }
  49%  { opacity: .61; filter: contrast(1.10) brightness(1.08); }
  74%  { opacity: .84; filter: contrast(1.05) brightness(.96); }
  100% { opacity: 1; filter: none; }
}

@keyframes tuuHardPanel {
  0%   { opacity: .12; translate: 0 4px; }
  32%  { opacity: .42; translate: 0 3px; }
  64%  { opacity: .72; translate: 0 1px; }
  100% { opacity: 1; translate: 0 0; }
}

@keyframes tuuHardText {
  0%   { opacity: .25; translate: 1px 0; }
  49%  { opacity: .62; translate: -1px 0; }
  100% { opacity: 1; translate: 0 0; }
}

@keyframes tuuPixelHover {
  0%   { translate: 0 0; }
  32%  { translate: 1px -1px; }
  64%  { translate: -1px -1px; }
  100% { translate: 0 -1px; }
}

@keyframes tuuHardFocus {
  0%   { filter: brightness(.90) contrast(1.05); }
  49%  { filter: brightness(1.08) contrast(1.08); }
  100% { filter: none; }
}

@keyframes tuuHardSuggestion {
  0%   { opacity: 0; translate: 0 6px; }
  32%  { opacity: .35; translate: 0 4px; }
  64%  { opacity: .72; translate: 0 2px; }
  100% { opacity: 1; translate: 0 0; }
}

/* Accessibility: user's OS preference wins. */
@media (prefers-reduced-motion: reduce) {
  body:not(.retro-game),
  body:not(.retro-game) * {
    animation: none !important;
    transition-duration: 0s !important;
    translate: none !important;
  }
}


/* =====================================================================
   v1.0.42 — HOME + PIPES: MORE OBVIOUS 8-BIT FRAME ANIMATION
   These overrides affect animation only. Layout/functionality is preserved.
   ===================================================================== */

/* ----------------------------- HOME --------------------------------- */

body.page-home:not(.retro-game) .container {
  animation: tuuHomeCardBuild .26s steps(1, end) both !important;
}

body.page-home:not(.retro-game) .search-bar {
  animation: tuuHomeSearchDrop .22s steps(1, end) both !important;
}

body.page-home:not(.retro-game) .message-board-shortcut {
  animation: tuuHomeCornerButton .20s steps(1, end) both !important;
}

body.page-home:not(.retro-game) .tool-grid .button {
  animation: tuuHomeToolSpawn .18s steps(1, end) both !important;
}

body.page-home:not(.retro-game) .tool-grid .button:nth-child(2) {
  animation-delay: .06s !important;
}

body.page-home:not(.retro-game) .button::before {
  transition: none !important;
}

body.page-home:not(.retro-game) .button:hover::before {
  animation: tuuHomePixelFill .14s steps(4, end) both !important;
}

body.page-home:not(.retro-game) #suggestions > div:nth-child(odd) {
  animation: tuuHomeSuggestLeft .14s steps(1, end) both !important;
}

body.page-home:not(.retro-game) #suggestions > div:nth-child(even) {
  animation: tuuHomeSuggestRight .14s steps(1, end) both !important;
}

/* The old 3D loader now pulses through a small fixed number of frames. */
body.page-home:not(.retro-game) #loader {
  transition: none !important;
}

body.page-home:not(.retro-game) #loader.active {
  animation: tuuHomeLoaderFlash .16s steps(1, end) both !important;
}

body.page-home:not(.retro-game) #loader .item {
  animation-name: tuuHomeCubePulse !important;
  animation-duration: .72s !important;
  animation-timing-function: steps(4, end) !important;
  animation-iteration-count: infinite !important;
  animation-direction: alternate !important;
}

/* ----------------------------- PIPES -------------------------------- */

body.page-pipes:not(.retro-game) .panel-card {
  animation: tuuPipesPanelBuild .24s steps(1, end) both !important;
}

body.page-pipes:not(.retro-game) .settings-card {
  animation: tuuPipesSettingsBuild .22s steps(1, end) both !important;
}

body.page-pipes:not(.retro-game) .headline-scroller {
  animation: tuuPipesHeadlineBoot .18s steps(1, end) both !important;
}

body.page-pipes:not(.retro-game) #headlineText {
  will-change: transform;
  text-rendering: geometricPrecision;
}

body.page-pipes:not(.retro-game) :is(.button, .batch-copy-btn) {
  transition: none !important;
}

body.page-pipes:not(.retro-game) :is(.button, .batch-copy-btn)::before {
  transition: none !important;
}

body.page-pipes:not(.retro-game) :is(.button, .batch-copy-btn):hover {
  animation: tuuPipesButtonJolt .12s steps(1, end) both !important;
}

body.page-pipes:not(.retro-game) :is(.button, .batch-copy-btn):hover::before {
  animation: tuuPipesPixelFill .14s steps(4, end) both !important;
}

body.page-pipes:not(.retro-game) :is(
  .output-container,
  .splitOutputsMount,
  .queue-input-wrap,
  .queue-actions,
  .queue-actions-setup
) {
  transition-timing-function: steps(1, end) !important;
}

/* Toggles now visibly snap rather than slide. */
body.page-pipes:not(.retro-game) .slider,
body.page-pipes:not(.retro-game) .slider::before {
  transition: none !important;
}

/* Menu stays chunky and gets a small frame-jump when its panel appears. */
body.page-pipes:not(.retro-game) .site-menu-panel {
  animation-timing-function: steps(1, end) !important;
}

/* --------------------------- KEYFRAMES ------------------------------- */

@keyframes tuuHomeCardBuild {
  0%   { opacity: 0; translate: 12px 8px; }
  24%  { opacity: .28; translate: -8px 8px; }
  49%  { opacity: .56; translate: 6px -4px; }
  74%  { opacity: .82; translate: -2px 2px; }
  100% { opacity: 1; translate: 0 0; }
}

@keyframes tuuHomeSearchDrop {
  0%   { opacity: 0; translate: 0 -16px; }
  33%  { opacity: .38; translate: 0 -9px; }
  66%  { opacity: .72; translate: 0 -3px; }
  100% { opacity: 1; translate: 0 0; }
}

@keyframes tuuHomeCornerButton {
  0%   { opacity: 0; translate: -12px -8px; }
  33%  { opacity: .4; translate: -7px -4px; }
  66%  { opacity: .75; translate: -2px -1px; }
  100% { opacity: 1; translate: 0 0; }
}

@keyframes tuuHomeToolSpawn {
  0%   { opacity: 0; translate: 6px 6px; }
  33%  { opacity: .35; translate: -4px 4px; }
  66%  { opacity: .7; translate: 2px -2px; }
  100% { opacity: 1; translate: 0 0; }
}

@keyframes tuuHomePixelFill {
  0%   { width: 0; }
  25%  { width: 70%; }
  50%  { width: 135%; }
  75%  { width: 200%; }
  100% { width: 250%; }
}

@keyframes tuuHomeSuggestLeft {
  0%   { opacity: 0; translate: -10px 4px; }
  33%  { opacity: .35; translate: -6px 2px; }
  66%  { opacity: .72; translate: -2px 0; }
  100% { opacity: 1; translate: 0 0; }
}

@keyframes tuuHomeSuggestRight {
  0%   { opacity: 0; translate: 10px 4px; }
  33%  { opacity: .35; translate: 6px 2px; }
  66%  { opacity: .72; translate: 2px 0; }
  100% { opacity: 1; translate: 0 0; }
}

@keyframes tuuHomeLoaderFlash {
  0%   { opacity: .25; }
  33%  { opacity: .55; }
  66%  { opacity: .82; }
  100% { opacity: 1; }
}

@keyframes tuuHomeCubePulse {
  0%   { transform: scale3d(1, 1, 1); }
  25%  { transform: scale3d(.78, .78, .78); }
  50%  { transform: scale3d(.56, .56, .56); }
  75%  { transform: scale3d(.34, .34, .34); }
  100% { transform: scale3d(.2, .2, .2); }
}

@keyframes tuuPipesPanelBuild {
  0%   { opacity: 0; translate: 10px 10px; }
  20%  { opacity: .25; translate: -8px 8px; }
  40%  { opacity: .48; translate: 6px -5px; }
  60%  { opacity: .68; translate: -4px 4px; }
  80%  { opacity: .86; translate: 2px -2px; }
  100% { opacity: 1; translate: 0 0; }
}

@keyframes tuuPipesSettingsBuild {
  0%   { opacity: 0; translate: 12px 0; }
  33%  { opacity: .4; translate: 8px 0; }
  66%  { opacity: .74; translate: 3px 0; }
  100% { opacity: 1; translate: 0 0; }
}

@keyframes tuuPipesHeadlineBoot {
  0%   { opacity: 0; translate: 0 -4px; }
  49%  { opacity: .55; translate: 0 2px; }
  100% { opacity: 1; translate: 0 0; }
}

@keyframes tuuPipesButtonJolt {
  0%   { translate: 0 0; }
  33%  { translate: 2px -2px; }
  66%  { translate: -2px -2px; }
  100% { translate: 0 -2px; }
}

@keyframes tuuPipesPixelFill {
  0%   { width: 0; }
  25%  { width: 65%; }
  50%  { width: 130%; }
  75%  { width: 195%; }
  100% { width: 250%; }
}

@media (prefers-reduced-motion: reduce) {
  body.page-home:not(.retro-game) *,
  body.page-pipes:not(.retro-game) * {
    animation: none !important;
  }
}