/* ==========================================================================
   Retro Bundle — CSS Effects
   Vanilla Breeze · Retro / CRT
   All effects respect prefers-reduced-motion and [data-motion-reduced].
   Migrated to data-effect~="name" selectors.
   ========================================================================== */

@layer bundle-effects {

  /* ------------------------------------------------------------------
     data-effect~="blink"
     ------------------------------------------------------------------ */

  [data-effect~="blink"] {
    --vb-blink-rate: 1s;
    animation: vb-blink var(--vb-blink-rate) steps(1) infinite;
  }

  [data-effect~="blink"].slow  { --vb-blink-rate: 2s; }
  [data-effect~="blink"].fast  { --vb-blink-rate: 0.4s; }

  @keyframes vb-blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    [data-effect~="blink"] { animation: none; }
  }

  :root[data-motion-reduced] [data-effect~="blink"] { animation: none; }


  /* ------------------------------------------------------------------
     data-effect~="neon"
     ------------------------------------------------------------------ */

  [data-effect~="neon"]        { --vb-neon-color: var(--color-primary, oklch(65% 0.28 290)); --vb-neon-spread: 0.04em; }
  [data-effect~="neon"].pink   { --vb-neon-color: oklch(68% 0.3 340); }
  [data-effect~="neon"].cyan   { --vb-neon-color: oklch(72% 0.2 200); }
  [data-effect~="neon"].green  { --vb-neon-color: oklch(70% 0.25 145); }
  [data-effect~="neon"].amber  { --vb-neon-color: oklch(75% 0.2 75); }
  [data-effect~="neon"].red    { --vb-neon-color: oklch(62% 0.26 25); }

  [data-effect~="neon"] {
    color: var(--vb-neon-color);
    animation: vb-neon-pulse 2.5s ease-in-out infinite alternate;
  }

  @keyframes vb-neon-pulse {
    from {
      text-shadow:
        0 0 var(--vb-neon-spread) color-mix(in oklch, var(--vb-neon-color), white 60%),
        0 0 calc(var(--vb-neon-spread) * 3) var(--vb-neon-color),
        0 0 calc(var(--vb-neon-spread) * 8) var(--vb-neon-color),
        0 0 calc(var(--vb-neon-spread) * 16) color-mix(in oklch, var(--vb-neon-color), transparent 40%);
    }
    to {
      text-shadow:
        0 0 calc(var(--vb-neon-spread) * 0.5) color-mix(in oklch, var(--vb-neon-color), white 80%),
        0 0 calc(var(--vb-neon-spread) * 2) var(--vb-neon-color),
        0 0 calc(var(--vb-neon-spread) * 6) var(--vb-neon-color),
        0 0 calc(var(--vb-neon-spread) * 12) color-mix(in oklch, var(--vb-neon-color), transparent 60%);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    [data-effect~="neon"] {
      animation: none;
      text-shadow:
        0 0 var(--vb-neon-spread) color-mix(in oklch, var(--vb-neon-color), white 60%),
        0 0 calc(var(--vb-neon-spread) * 4) var(--vb-neon-color),
        0 0 calc(var(--vb-neon-spread) * 10) color-mix(in oklch, var(--vb-neon-color), transparent 40%);
    }
  }

  :root[data-motion-reduced] [data-effect~="neon"] { animation: none; }


  /* ------------------------------------------------------------------
     data-effect~="text-3d"
     ------------------------------------------------------------------ */

  [data-effect~="text-3d"]         { --vb-3d-color: oklch(35% 0.15 var(--hue-primary, 260)); --vb-3d-angle: 1px; }
  [data-effect~="text-3d"].red     { --vb-3d-color: oklch(35% 0.2 15); }
  [data-effect~="text-3d"].gold    { --vb-3d-color: oklch(45% 0.18 65); }
  [data-effect~="text-3d"].green   { --vb-3d-color: oklch(35% 0.18 145); }
  [data-effect~="text-3d"].purple  { --vb-3d-color: oklch(30% 0.2 300); }
  [data-effect~="text-3d"].black   { --vb-3d-color: oklch(10% 0 0); }

  [data-effect~="text-3d"] {
    font-weight: 900;
    text-shadow:
      var(--vb-3d-angle) var(--vb-3d-angle) 0 var(--vb-3d-color),
      calc(var(--vb-3d-angle) * 2) calc(var(--vb-3d-angle) * 2) 0 var(--vb-3d-color),
      calc(var(--vb-3d-angle) * 3) calc(var(--vb-3d-angle) * 3) 0 var(--vb-3d-color),
      calc(var(--vb-3d-angle) * 4) calc(var(--vb-3d-angle) * 4) 0 var(--vb-3d-color),
      calc(var(--vb-3d-angle) * 5) calc(var(--vb-3d-angle) * 5) 0 var(--vb-3d-color),
      calc(var(--vb-3d-angle) * 6) calc(var(--vb-3d-angle) * 6) 0 var(--vb-3d-color),
      calc(var(--vb-3d-angle) * 7) calc(var(--vb-3d-angle) * 7) 0 var(--vb-3d-color),
      calc(var(--vb-3d-angle) * 8) calc(var(--vb-3d-angle) * 8) 0
        color-mix(in oklch, var(--vb-3d-color), transparent 40%);
  }

  [data-effect~="text-3d"].deep {
    --vb-3d-angle: 2px;
    text-shadow:
      var(--vb-3d-angle) var(--vb-3d-angle) 0 var(--vb-3d-color),
      calc(var(--vb-3d-angle) * 2) calc(var(--vb-3d-angle) * 2) 0 var(--vb-3d-color),
      calc(var(--vb-3d-angle) * 3) calc(var(--vb-3d-angle) * 3) 0 var(--vb-3d-color),
      calc(var(--vb-3d-angle) * 4) calc(var(--vb-3d-angle) * 4) 0 var(--vb-3d-color),
      calc(var(--vb-3d-angle) * 5) calc(var(--vb-3d-angle) * 5) 0 var(--vb-3d-color),
      calc(var(--vb-3d-angle) * 6) calc(var(--vb-3d-angle) * 6) 0 var(--vb-3d-color),
      calc(var(--vb-3d-angle) * 7) calc(var(--vb-3d-angle) * 7) 0 var(--vb-3d-color),
      calc(var(--vb-3d-angle) * 8) calc(var(--vb-3d-angle) * 8) 0 var(--vb-3d-color),
      calc(var(--vb-3d-angle) * 9) calc(var(--vb-3d-angle) * 9) 0 var(--vb-3d-color),
      calc(var(--vb-3d-angle) * 10) calc(var(--vb-3d-angle) * 10) 0
        color-mix(in oklch, var(--vb-3d-color), transparent 40%);
  }

  [data-effect~="text-3d"].animate {
    animation: vb-3d-shift 3s ease-in-out infinite alternate;
  }

  @keyframes vb-3d-shift {
    from {
      text-shadow:
        1px 1px 0 var(--vb-3d-color),
        2px 2px 0 var(--vb-3d-color),
        3px 3px 0 var(--vb-3d-color),
        4px 4px 0 var(--vb-3d-color),
        5px 5px 0 var(--vb-3d-color),
        6px 6px 0 var(--vb-3d-color),
        7px 7px 0 var(--vb-3d-color),
        8px 8px 0 color-mix(in oklch, var(--vb-3d-color), transparent 40%);
    }
    to {
      text-shadow:
        -1px 1px 0 var(--vb-3d-color),
        -2px 2px 0 var(--vb-3d-color),
        -3px 3px 0 var(--vb-3d-color),
        -4px 4px 0 var(--vb-3d-color),
        -5px 5px 0 var(--vb-3d-color),
        -6px 6px 0 var(--vb-3d-color),
        -7px 7px 0 var(--vb-3d-color),
        -8px 8px 0 color-mix(in oklch, var(--vb-3d-color), transparent 40%);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    [data-effect~="text-3d"].animate { animation: none; }
  }

  :root[data-motion-reduced] [data-effect~="text-3d"].animate { animation: none; }


  /* ------------------------------------------------------------------
     data-effect~="outline"
     ------------------------------------------------------------------ */

  @supports (-webkit-text-stroke: 1px black) {

    [data-effect~="outline"] {
      --vb-outline-width: 1px;
      --vb-outline-color: var(--color-text, currentColor);
      -webkit-text-stroke: var(--vb-outline-width) var(--vb-outline-color);
      color: transparent;
      font-weight: 900;
    }

    [data-effect~="outline"].thick { --vb-outline-width: 2px; }
    [data-effect~="outline"].ultra { --vb-outline-width: 3px; }

    [data-effect~="outline"].glow {
      --vb-outline-width: 1px;
      --vb-outline-glow: var(--vb-neon-color, var(--vb-outline-color));
      -webkit-text-stroke: var(--vb-outline-width) var(--vb-outline-glow);
      text-shadow:
        0 0 0.1em color-mix(in oklch, var(--vb-outline-glow), transparent 20%),
        0 0 0.3em color-mix(in oklch, var(--vb-outline-glow), transparent 50%);
      animation: vb-outline-glow-pulse 2s ease-in-out infinite alternate;
    }

    @keyframes vb-outline-glow-pulse {
      from {
        text-shadow:
          0 0 0.08em color-mix(in oklch, var(--vb-outline-glow, var(--color-text)), transparent 10%),
          0 0 0.25em color-mix(in oklch, var(--vb-outline-glow, var(--color-text)), transparent 40%);
      }
      to {
        text-shadow:
          0 0 0.15em color-mix(in oklch, var(--vb-outline-glow, var(--color-text)), transparent 5%),
          0 0 0.4em color-mix(in oklch, var(--vb-outline-glow, var(--color-text)), transparent 60%),
          0 0 0.8em color-mix(in oklch, var(--vb-outline-glow, var(--color-text)), transparent 80%);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      [data-effect~="outline"].glow { animation: none; }
    }

    :root[data-motion-reduced] [data-effect~="outline"].glow { animation: none; }
  }


  /* ------------------------------------------------------------------
     data-effect~="hard-shadow"
     ------------------------------------------------------------------ */

  [data-effect~="hard-shadow"] {
    --vb-shadow-color: oklch(20% 0 0);
    --vb-shadow-offset: 3px;
    text-shadow: var(--vb-shadow-offset) var(--vb-shadow-offset) 0 var(--vb-shadow-color);
    font-weight: 900;
  }

  [data-effect~="hard-shadow"].double {
    text-shadow:
      var(--vb-shadow-offset) var(--vb-shadow-offset) 0 var(--vb-shadow-color),
      calc(var(--vb-shadow-offset) * 2) calc(var(--vb-shadow-offset) * 2) 0
        color-mix(in oklch, var(--vb-shadow-color), transparent 50%);
  }

  [data-effect~="hard-shadow"].long {
    text-shadow:
      1px 1px 0 var(--vb-shadow-color),
      2px 2px 0 var(--vb-shadow-color),
      3px 3px 0 var(--vb-shadow-color),
      4px 4px 0 var(--vb-shadow-color),
      5px 5px 0 var(--vb-shadow-color),
      6px 6px 0 var(--vb-shadow-color),
      7px 7px 0 var(--vb-shadow-color),
      8px 8px 0 var(--vb-shadow-color),
      9px 9px 0 var(--vb-shadow-color),
      10px 10px 0 var(--vb-shadow-color),
      12px 12px 0 color-mix(in oklch, var(--vb-shadow-color), transparent 30%),
      14px 14px 0 color-mix(in oklch, var(--vb-shadow-color), transparent 60%),
      16px 16px 0 color-mix(in oklch, var(--vb-shadow-color), transparent 80%);
    font-weight: 900;
  }

  [data-effect~="hard-shadow"].red    { --vb-shadow-color: oklch(50% 0.22 25); }
  [data-effect~="hard-shadow"].blue   { --vb-shadow-color: oklch(45% 0.2 260); }
  [data-effect~="hard-shadow"].gold   { --vb-shadow-color: oklch(60% 0.2 75); }
  [data-effect~="hard-shadow"].green  { --vb-shadow-color: oklch(45% 0.2 145); }


  /* ------------------------------------------------------------------
     data-effect~="stamp"
     ------------------------------------------------------------------ */

  [data-effect~="stamp"] {
    --vb-stamp-color: oklch(45% 0.22 25);
    display: inline-block;
    color: var(--vb-stamp-color);
    border: 0.12em solid var(--vb-stamp-color);
    border-radius: 0.1em;
    padding: 0.1em 0.35em;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.85;
    transform: rotate(-4deg);
    filter: url(#vb-stamp-noise);
    mix-blend-mode: multiply;
    box-shadow:
      inset 0 0 0 0.05em var(--vb-stamp-color),
      0 0 0 0.05em color-mix(in oklch, var(--vb-stamp-color), transparent 60%);
  }

  [data-effect~="stamp"].red    { --vb-stamp-color: oklch(50% 0.26 25); }
  [data-effect~="stamp"].blue   { --vb-stamp-color: oklch(45% 0.22 250); }
  [data-effect~="stamp"].green  { --vb-stamp-color: oklch(45% 0.22 145); }
  [data-effect~="stamp"].black  { --vb-stamp-color: oklch(15% 0.02 260); }
  [data-effect~="stamp"].gold   { --vb-stamp-color: oklch(55% 0.18 75); }

  [data-effect~="stamp"].straight { transform: none; }
  [data-effect~="stamp"].slight   { transform: rotate(-2deg); }
  [data-effect~="stamp"].heavy    { transform: rotate(-8deg); }


  /* ------------------------------------------------------------------
     data-effect~="rainbow"
     ------------------------------------------------------------------ */

  [data-effect~="rainbow"] {
    --vb-rainbow-speed: 4s;
    color: oklch(65% 0.3 0);
    animation: vb-rainbow var(--vb-rainbow-speed) linear infinite;
    display: inline-block;
  }

  [data-effect~="rainbow"].slow { --vb-rainbow-speed: 8s; }
  [data-effect~="rainbow"].fast { --vb-rainbow-speed: 1.5s; }

  @keyframes vb-rainbow {
    from { filter: hue-rotate(0deg); }
    to   { filter: hue-rotate(360deg); }
  }

  @media (prefers-reduced-motion: reduce) {
    [data-effect~="rainbow"] { animation: none; filter: none; }
  }

  :root[data-motion-reduced] [data-effect~="rainbow"] { animation: none; filter: none; }


  /* ------------------------------------------------------------------
     data-effect~="marquee"
     ------------------------------------------------------------------ */

  [data-effect~="marquee"] {
    --vb-marquee-speed: 20s;
    --vb-marquee-gap: var(--size-xl, 3rem);
    display: flex;
    overflow: hidden;
    white-space: nowrap;
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
  }

  [data-effect~="marquee"] > * {
    display: inline-block;
    flex-shrink: 0;
    padding-inline-end: var(--vb-marquee-gap);
    animation: vb-marquee var(--vb-marquee-speed) linear infinite;
  }

  [data-effect~="marquee"].reverse > * { animation-direction: reverse; }
  [data-effect~="marquee"].slow > *    { --vb-marquee-speed: 40s; }
  [data-effect~="marquee"].fast > *    { --vb-marquee-speed: 8s; }
  [data-effect~="marquee"].pause > *   { animation-play-state: paused; }

  [data-effect~="marquee"].hover-pause:hover > * {
    animation-play-state: paused;
  }

  @keyframes vb-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
  }

  @media (prefers-reduced-motion: reduce) {
    [data-effect~="marquee"] > * { animation: none; }
    [data-effect~="marquee"] { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  }

  :root[data-motion-reduced] [data-effect~="marquee"] > * { animation: none; }


  /* ------------------------------------------------------------------
     data-effect~="flipboard" (split-flap / Solari departure board)
     ------------------------------------------------------------------ */

  .vb-flap-board {
    display: inline-flex;
    gap: 2px;
    perspective: 400px;
    font-family: var(--font-mono, ui-monospace, 'Cascadia Code', monospace);
  }

  .vb-flap-char {
    position: relative;
    display: inline-block;
    width: 0.8em;
    height: 1.2em;
    background: oklch(15% 0.01 260);
    border-radius: 2px;
    overflow: hidden;
    font-weight: 700;
    font-size: inherit;
    line-height: 1.2em;
    text-align: center;
    color: oklch(90% 0.01 70);
    box-shadow:
      inset 0 1px 0 oklch(25% 0.01 260),
      0 1px 2px oklch(0% 0 0 / 0.4);
  }

  /* Static top half */
  .vb-flap-char > .vb-flap-top {
    position: absolute;
    inset: 0;
    height: 50%;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    background: oklch(15% 0.01 260);
    border-bottom: 0.5px solid oklch(8% 0.01 260);
  }

  .vb-flap-char > .vb-flap-top .vb-flap-text {
    line-height: 1.2em;
  }

  /* Static bottom half */
  .vb-flap-char > .vb-flap-bottom {
    position: absolute;
    inset: 0;
    top: 50%;
    height: 50%;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: oklch(13% 0.01 260);
  }

  .vb-flap-char > .vb-flap-bottom .vb-flap-text {
    line-height: 1.2em;
    margin-top: -0.6em;
  }

  /* Flip top — the old char top half falling forward */
  .vb-flap-flip-top {
    position: absolute;
    inset: 0;
    height: 50%;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    background: oklch(15% 0.01 260);
    transform-origin: bottom center;
    transform: rotateX(0deg);
    backface-visibility: hidden;
    z-index: 2;
    opacity: 0;
    border-bottom: 0.5px solid oklch(8% 0.01 260);
  }

  .vb-flap-flip-top .vb-flap-text {
    line-height: 1.2em;
  }

  .vb-flap-flip-top.vb-flap-flipping {
    opacity: 1;
    animation: vb-flap-fall-top ease-in forwards;
    animation-duration: calc(var(--vb-flip-ms, 60) * 1ms);
  }

  /* Flip bottom — the new char bottom half swinging in */
  .vb-flap-flip-bottom {
    position: absolute;
    inset: 0;
    top: 50%;
    height: 50%;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: oklch(13% 0.01 260);
    transform-origin: top center;
    transform: rotateX(90deg);
    backface-visibility: hidden;
    z-index: 2;
    opacity: 0;
  }

  .vb-flap-flip-bottom .vb-flap-text {
    line-height: 1.2em;
    margin-top: -0.6em;
  }

  .vb-flap-flip-bottom.vb-flap-flipping {
    opacity: 1;
    animation: vb-flap-fall-bottom ease-out forwards;
    animation-duration: calc(var(--vb-flip-ms, 60) * 1ms);
  }

  /* Decorative hinge line */
  .vb-flap-hinge {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: oklch(8% 0.01 260);
    z-index: 10;
    pointer-events: none;
    transform: translateY(-0.5px);
  }

  @keyframes vb-flap-fall-top {
    0%   { transform: rotateX(0deg); }
    100% { transform: rotateX(-90deg); opacity: 0; }
  }

  @keyframes vb-flap-fall-bottom {
    0%   { transform: rotateX(90deg); }
    100% { transform: rotateX(0deg); opacity: 1; }
  }

  @media (prefers-reduced-motion: reduce) {
    .vb-flap-flip-top.vb-flap-flipping,
    .vb-flap-flip-bottom.vb-flap-flipping {
      animation: none;
    }
  }

  :root[data-motion-reduced] .vb-flap-flip-top.vb-flap-flipping,
  :root[data-motion-reduced] .vb-flap-flip-bottom.vb-flap-flipping {
    animation: none;
  }


  /* ------------------------------------------------------------------
     Compositing: neon + hard-shadow (both use text-shadow)
     ------------------------------------------------------------------ */

  [data-effect~="neon"][data-effect~="hard-shadow"] {
    text-shadow:
      0 0 var(--vb-neon-spread, 0.04em) color-mix(in oklch, var(--vb-neon-color, oklch(65% 0.28 290)), white 60%),
      0 0 calc(var(--vb-neon-spread, 0.04em) * 3) var(--vb-neon-color, oklch(65% 0.28 290)),
      var(--vb-shadow-offset, 3px) var(--vb-shadow-offset, 3px) 0 var(--vb-shadow-color, oklch(20% 0 0));
  }


  /* ------------------------------------------------------------------
     Shared print override
     ------------------------------------------------------------------ */

  @media print {
    [data-effect~="blink"],
    [data-effect~="neon"],
    [data-effect~="text-3d"],
    [data-effect~="rainbow"],
    [data-effect~="hard-shadow"],
    [data-effect~="stamp"] {
      animation: none !important;
      text-shadow: none !important;
      filter: none !important;
      color: currentColor !important;
      -webkit-text-stroke: 0 !important;
      transform: none !important;
      border: none !important;
      box-shadow: none !important;
      opacity: 1 !important;
    }
  }

}