/* ==========================================================================
   Case file: desktop-only member view (assets/js/casefile.js)
   Colours / idle / hover per member come from assets/data/casefile-themes.js.
   Everything is inside the desktop query, so the mobile popup is untouched.
   ========================================================================== */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {

  .cf {
    /* theme (set per member from casefile-themes.js) */
    --cf-folder: #d9b77e; --cf-label: #2b2116; --cf-paper: #f5eedf; --cf-ink: #231c16; --cf-accent: #a3262a;
    /* size */
    --cf-h: min(640px, calc(100vh - 150px));
    --cf-pw: min(calc(var(--cf-h) * .78), 44vw);
    --cf-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .22 0 0 0 0 .12 0 0 0 .13 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    --cf-grunge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

    position: fixed; inset: 0; width: 100vw; height: 100vh; max-width: none; max-height: none;
    margin: 0; padding: 0; border: 0; background: transparent; color: var(--cf-ink);
    overflow: hidden; outline: none;
  }
  .cf::backdrop { background: transparent; }

  .cf__dim { position: absolute; inset: 0; background: rgba(7, 4, 5, .62); backdrop-filter: blur(6px) saturate(.75); -webkit-backdrop-filter: blur(6px) saturate(.75); opacity: 0; will-change: opacity; }
  /* will-change keeps the folder on its own GPU layer, so sliding doesn't repaint its textures every frame */
  .cf__stage { position: absolute; inset: 0; display: grid; place-items: center; padding-top: 10px; pointer-events: none; opacity: 0; transform: translate3d(0, 58vh, 0) scale(.97); will-change: transform, opacity; backface-visibility: hidden; }
  .cf__cover, .cf__shift { will-change: transform; }
  .cf__shift { perspective: 2400px; transform: translateX(calc(var(--cf-pw) * -.5)); }
  .cf__folder { position: relative; width: calc(var(--cf-pw) * 2); height: var(--cf-h); transform-style: preserve-3d; pointer-events: auto; }

  /* --- folder surfaces --- */
  .cf__back, .cf__face--front, .cf__face--inside {
    background: var(--cf-noise), linear-gradient(160deg, rgba(255, 255, 255, .14), transparent 40%, rgba(0, 0, 0, .1)), var(--cf-folder);
  }
  .cf__back {
    position: absolute; left: 50%; top: 0; width: 50%; height: 100%;
    border-radius: 3px 12px 12px 3px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14);   /* the drop shadow lives on .cf__tabs::before, under the tabs */
  }
  .cf__cover {
    position: absolute; left: 50%; top: 0; width: 50%; height: 100%;
    transform-origin: left center; transform-style: preserve-3d;
    transform: translateZ(1px) rotateY(0deg);
  }
  .cf__face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 3px 12px 12px 3px; }
  .cf__face--front { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .16), inset 10px 0 18px -10px rgba(0, 0, 0, .35); }
  .cf__face--inside { transform: rotateY(180deg); border-radius: 12px 3px 3px 12px; box-shadow: 0 40px 90px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(0, 0, 0, .14); }

  /* --- paper --- */
  .cf__page {
    position: absolute; color: var(--cf-ink);
    background: var(--cf-noise), radial-gradient(ellipse at 40% 0, rgba(255, 255, 255, .5), transparent 65%), var(--cf-paper);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25), 0 0 0 1px rgba(0, 0, 0, .05);
  }
  .cf__page--right { inset: 14px 16px 14px 6px; padding: 26px 34px 26px 32px; display: flex; flex-direction: column; gap: 13px; overflow: hidden auto; scrollbar-width: thin; }
  .cf__page--left { inset: 14px 6px 14px 16px; display: grid; place-items: center; overflow: hidden; }

  /* --- tabs ---
     The tab layer sits 1px behind the back panel. Each tab is 64px long but only 34px sticks out;
     the other 30px stays hidden under the folder, so the hover nudge never opens a gap.
     JS animates `transform` (slide out / tuck in); hover uses the separate `translate` property so both combine. */
  .cf__tabs { position: absolute; left: 50%; top: 0; width: 50%; height: 100%; transform: translateZ(-1px); pointer-events: none; }
  .cf__tabs::before { /* the folder's drop shadow, painted beneath the tabs so it doesn't darken them */
    content: ''; position: absolute; inset: 0; border-radius: 3px 12px 12px 3px;
    box-shadow: 0 40px 90px rgba(0, 0, 0, .55), 0 6px 18px rgba(0, 0, 0, .3);
  }
  .cf__tab {
    --tab-show: 34px; --tab-hide: 30px;
    position: absolute; display: inline-flex; align-items: center; gap: .6em; height: calc(var(--tab-show) + var(--tab-hide)); padding: 0 18px;
    pointer-events: auto;
    background: var(--cf-noise), var(--cf-folder); color: var(--cf-label);
    font: 400 .72rem/1 var(--f-type); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14);
  }
  .cf__tab b { font-weight: 400; font-size: 1.12em; letter-spacing: .1em; }
  .cf__tab svg { width: 13px; height: 13px; }
  .cf__tab--top { top: calc(var(--tab-show) * -1); padding-bottom: var(--tab-hide); border-radius: 10px 10px 0 0; }
  .cf__tab--bottom { bottom: calc(var(--tab-show) * -1); padding-top: var(--tab-hide); border-radius: 0 0 10px 10px; }
  .cf__tab--name, .cf__tab--prev { left: 7%; }
  .cf__tab--close, .cf__tab--next { right: 4%; }
  button.cf__tab { cursor: pointer; transition: translate .25s var(--ease-out), filter .2s; }
  button.cf__tab--top:hover { translate: 0 -4px; filter: brightness(1.08); }
  button.cf__tab--bottom:hover { translate: 0 4px; filter: brightness(1.08); }
  .cf__tab:focus-visible { outline: 2px solid var(--cf-label); outline-offset: -5px; }

  /* --- cover front --- */
  .cf__card {
    position: absolute; left: 12%; right: 12%; top: 16%;
    display: grid; gap: 6px; padding: 18px 20px 16px; text-align: center;
    background: #fbf7ee; color: #1f1a16; transform: rotate(-1.2deg);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
    background-image: repeating-linear-gradient(transparent 0 23px, rgba(60, 90, 160, .14) 23px 24px);
    font: 400 .72rem/1.4 var(--f-type); letter-spacing: .18em; text-transform: uppercase;
  }
  .cf__card b { font: 400 2.1rem/1.1 var(--f-type); letter-spacing: .08em; }
  .cf__sticker { position: absolute; z-index: 2; line-height: 1; pointer-events: none;
    filter: drop-shadow(1.5px 0 0 #fff) drop-shadow(-1.5px 0 0 #fff) drop-shadow(0 1.5px 0 #fff) drop-shadow(0 -1.5px 0 #fff) drop-shadow(0 3px 4px rgba(0, 0, 0, .3)); }
  .cf__sticker--cover { right: 12%; bottom: 30%; font-size: 3rem; transform: rotate(14deg); }
  .cf__sticker--page { right: 22px; top: 20px; font-size: 2.1rem; transform: rotate(12deg); }
  .cf__bigstamp, .cf__confidential, .cf__live, .cf__mvstamp, .cf__wave {
    -webkit-mask-image: var(--cf-grunge); mask-image: var(--cf-grunge);
    font-family: var(--f-type); text-transform: uppercase;
  }
  .cf__bigstamp { position: absolute; left: 14%; bottom: 13%; padding: .25em .6em .15em; border: 3px solid var(--cf-accent); color: var(--cf-accent);
    font-size: 1.5rem; letter-spacing: .18em; transform: rotate(-8deg); background: rgba(255, 255, 255, .18); }

  /* --- right page --- */
  .cf__head { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px dashed color-mix(in srgb, var(--cf-ink) 35%, transparent);
    font: 400 .7rem/1 var(--f-type); letter-spacing: .18em; text-transform: uppercase; color: color-mix(in srgb, var(--cf-ink) 75%, var(--cf-paper)); }
  .cf__head b { font-weight: 400; color: var(--cf-ink); }
  .cf__wave { align-self: flex-start; padding: .3em .7em .2em; border: 2px solid var(--cf-accent); color: var(--cf-accent); font-size: .68rem; letter-spacing: .26em; transform: rotate(-2deg); }
  .cf__label { margin: 0 0 4px; font: 400 .66rem/1 var(--f-type); letter-spacing: .24em; text-transform: uppercase; color: color-mix(in srgb, var(--cf-ink) 68%, var(--cf-paper)); }
  .cf__name { font: 400 clamp(2rem, 3.1vw, 2.75rem)/1 var(--f-type); letter-spacing: .07em; text-transform: uppercase; color: var(--cf-ink); }
  .cf__fields { display: grid; grid-template-columns: auto 1fr; gap: 3px 14px; margin: 0; font: 400 .82rem/1.45 var(--f-type); }
  .cf__fields dt { letter-spacing: .16em; text-transform: uppercase; color: color-mix(in srgb, var(--cf-ink) 68%, var(--cf-paper)); font-size: .68rem; padding-top: .2em; }
  .cf__fields dd { margin: 0; }
  .cf__intro { font: 400 .95rem/1.6 var(--f-type); color: var(--cf-ink); max-width: 34em; }

  .cf__tags { display: flex; flex-wrap: wrap; gap: 8px 8px; }
  .cf__tags li:nth-child(odd) a { --r: -1.4deg; } .cf__tags li:nth-child(even) a { --r: 1.2deg; } .cf__tags li:nth-child(3n) a { --r: -.4deg; }
  .cf__tags a {
    position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px 5px;
    border: 1.5px solid var(--cf-ink); color: var(--cf-ink); background: rgba(255, 255, 255, .2);
    font: 400 .7rem/1 var(--f-type); letter-spacing: .12em; text-transform: uppercase;
    transform: rotate(var(--r, 0deg));
    transition: transform .25s var(--ease-out), color .2s, border-color .2s, background-color .2s, text-shadow .2s;
  }
  .cf__tags a svg { width: 13px; height: 13px; flex: none; }
  .cf__tags a::after { /* underline used by several hover styles */
    content: ''; position: absolute; left: 8px; right: 8px; bottom: -6px; height: 2px; background: var(--cf-accent);
    transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease-out);
  }
  .cf__tags a:focus-visible { outline: 2px solid var(--cf-accent); outline-offset: 3px; }

  .cf__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 18px; margin-top: 4px; }
  .cf__watch {
    display: inline-flex; align-items: center; gap: .7em; padding: 11px 16px 10px;
    background: var(--cf-ink); color: var(--cf-paper);
    font: 400 .74rem/1 var(--f-type); letter-spacing: .16em; text-transform: uppercase;
    transition: transform .25s var(--ease-out), background-color .2s;
  }
  .cf__watch svg { width: 13px; height: 13px; }
  .cf__watch:hover { transform: translateY(-2px) rotate(-1deg); }
  .cf__watch:focus-visible { outline: 2px solid var(--cf-accent); outline-offset: 3px; }
  .cf__watch.is-live { background: #c4161c; color: #fff; }
  .cf__mvstamp { padding: .3em .6em .2em; border: 2px solid var(--cf-accent); color: var(--cf-accent); font-size: .66rem; letter-spacing: .2em; transform: rotate(-4deg); opacity: .85; }
  .cf__confidential { position: absolute; right: 26px; top: 64px; padding: .2em .5em .1em; border: 3px solid var(--cf-accent); color: var(--cf-accent);
    font-size: 1.15rem; letter-spacing: .2em; transform: rotate(9deg); opacity: .16; pointer-events: none; }

  /* --- left page: photo --- */
  .cf__photo-wrap { display: grid; justify-items: center; gap: 12px; }
  .cf__photo { position: relative; isolation: isolate; width: min(calc(var(--cf-pw) * .6), calc((var(--cf-h) - 150px) * .75)); margin: 0;
    transform: rotate(-3deg); transition: transform .5s var(--ease-out); }
  .cf__photo::before { /* glow used by ember idle + blush hover */
    content: ''; position: absolute; inset: -20px; z-index: -1; border-radius: 16px;
    background: radial-gradient(ellipse, color-mix(in srgb, var(--cf-accent) 70%, transparent), transparent 70%);
    filter: blur(12px); opacity: 0; transition: opacity .5s;
  }
  .cf__polaroid { position: relative; padding: 10px 10px 34px; background: #fdfbf6; box-shadow: 0 12px 26px rgba(0, 0, 0, .3), 0 2px 4px rgba(0, 0, 0, .15); transform-origin: 50% 100%; }
  .cf__polaroid img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: #ddd; }
  .cf__polaroid::after { /* overlay used by scanlines / vhs / glitch */
    content: ''; position: absolute; left: 10px; right: 10px; top: 10px; height: calc(100% - 44px); pointer-events: none; opacity: 0;
    background: repeating-linear-gradient(0deg, rgba(150, 220, 255, .16) 0 1px, transparent 1px 3px); mix-blend-mode: screen;
  }
  .cf__clip { position: absolute; top: -26px; left: 26px; z-index: 2; width: 20px; height: 56px; fill: none; stroke: #8d939b; stroke-width: 2.6; stroke-linecap: round;
    transform: rotate(-6deg); filter: drop-shadow(1px 2px 1.5px rgba(0, 0, 0, .3)); }
  .cf__live { position: absolute; right: -22px; top: 22px; z-index: 3; padding: .15em .45em .05em; border: 3px solid #c4161c; color: #c4161c;
    font-size: 1.7rem; letter-spacing: .2em; transform: rotate(11deg); background: rgba(255, 255, 255, .55); }
  .cf__exhibit { font: 400 .64rem/1 var(--f-type); letter-spacing: .26em; text-transform: uppercase; color: color-mix(in srgb, var(--cf-ink) 65%, var(--cf-paper)); }
  .cf__coffee { position: absolute; left: 18px; bottom: 16px; width: 118px; height: 118px; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, transparent 55%, rgba(120, 72, 30, .15) 57%, rgba(120, 72, 30, .06) 61%, transparent 64%); transform: rotate(20deg) scaleY(.96); }
  .cf__fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
  .cf__fx i { display: none; position: absolute; }

  /* ==========================================================================
     Idle loops (only while open, only with motion allowed). Transform/opacity only.
     ========================================================================== */
  @media (prefers-reduced-motion: no-preference) {
    /* heartbeat: the sticker pulses */
    .cf.is-open[data-idle='heartbeat'] .cf__sticker--page { animation: cf-heartbeat 2.6s ease-in-out infinite; }
    @keyframes cf-heartbeat { 0%, 45%, 100% { transform: rotate(12deg) scale(1); } 10% { transform: rotate(12deg) scale(1.2); } 20% { transform: rotate(12deg) scale(1.03); } 30% { transform: rotate(12deg) scale(1.15); } }

    /* leaves: three leaves drift down the photo page */
    .cf[data-idle='leaves'] .cf__fx i:nth-child(-n+3) { display: block; top: -24px; width: 16px; height: 10px; border-radius: 0 100% 0 100%; opacity: 0;
      background: color-mix(in srgb, var(--cf-folder) 70%, #2d4a1c); }
    .cf.is-open[data-idle='leaves'] .cf__fx i:nth-child(1) { left: 16%; animation: cf-leaf 12s linear infinite; }
    .cf.is-open[data-idle='leaves'] .cf__fx i:nth-child(2) { left: 64%; animation: cf-leaf 15s linear 4s infinite; }
    .cf.is-open[data-idle='leaves'] .cf__fx i:nth-child(3) { left: 38%; animation: cf-leaf 18s linear 9s infinite; }
    @keyframes cf-leaf { 0% { transform: translate(0, 0) rotate(0); opacity: 0; } 8% { opacity: .7; } 50% { transform: translate(34px, 330px) rotate(160deg); } 90% { opacity: .6; } 100% { transform: translate(-10px, 680px) rotate(320deg); opacity: 0; } }

    /* scanlines: faint flicker over the photo */
    .cf.is-open[data-idle='scanlines'] .cf__polaroid::after { animation: cf-scan 4.5s steps(1) infinite; }
    @keyframes cf-scan { 0%, 100% { opacity: .55; } 30% { opacity: .35; } 31% { opacity: .75; } 33% { opacity: .4; } 70% { opacity: .6; } 71% { opacity: .2; } 72% { opacity: .55; } }

    /* ember: slow glow pulse behind the photo */
    .cf.is-open[data-idle='ember'] .cf__photo::before { animation: cf-ember 3.4s ease-in-out infinite alternate; }
    @keyframes cf-ember { from { opacity: .15; } to { opacity: .6; } }

    /* squish: gentle plushie bounce */
    .cf.is-open[data-idle='squish'] .cf__polaroid { animation: cf-squish 3.2s ease-in-out infinite; }
    @keyframes cf-squish { 0%, 100% { transform: scale(1, 1); } 45% { transform: scale(1.018, .982); } 60% { transform: scale(.992, 1.01); } }

    /* flicker: the lights blink every so often */
    .cf[data-idle='flicker'] .cf__fx::before { content: ''; position: absolute; inset: 0; background: #12060c; opacity: 0; }
    .cf.is-open[data-idle='flicker'] .cf__fx::before { animation: cf-flicker 7s steps(1) infinite; }
    @keyframes cf-flicker { 0%, 89%, 91%, 93.5%, 100% { opacity: 0; } 90% { opacity: .5; } 92.5% { opacity: .3; } }

    /* bee: one tiny bee loops around the page */
    .cf[data-idle='bee'] .cf__fx i:nth-child(1) { display: block; left: 10%; top: 16%; font-size: 18px; font-style: normal; }
    .cf[data-idle='bee'] .cf__fx i:nth-child(1)::before { content: '🐝'; }
    .cf.is-open[data-idle='bee'] .cf__fx i:nth-child(1) { animation: cf-bee 10s ease-in-out infinite; }
    @keyframes cf-bee {
      0% { transform: translate(0, 0) rotate(-8deg); } 20% { transform: translate(140px, -30px) rotate(10deg); } 40% { transform: translate(300px, 30px) rotate(-6deg); }
      60% { transform: translate(220px, 420px) rotate(14deg); } 80% { transform: translate(40px, 300px) rotate(-12deg); } 100% { transform: translate(0, 0) rotate(-8deg); }
    }

    /* vhs: a tracking band rolls down the photo */
    .cf[data-idle='vhs'] .cf__polaroid::after { height: 22%; background: linear-gradient(transparent, rgba(255, 255, 255, .22) 45%, rgba(255, 255, 255, .06) 70%, transparent); }
    .cf.is-open[data-idle='vhs'] .cf__polaroid::after { animation: cf-vhs 6s linear infinite; }
    @keyframes cf-vhs { 0% { transform: translateY(-10%); opacity: 0; } 10% { opacity: .9; } 85% { opacity: .7; } 100% { transform: translateY(330%); opacity: 0; } }

    /* bubbles: small bubbles rise */
    .cf[data-idle='bubbles'] .cf__fx i { display: block; bottom: -24px; border-radius: 50%; opacity: 0;
      border: 1.5px solid color-mix(in srgb, var(--cf-folder) 75%, #fff); background: rgba(255, 255, 255, .35); }
    .cf[data-idle='bubbles'] .cf__fx i:nth-child(1) { left: 14%; width: 12px; height: 12px; }
    .cf[data-idle='bubbles'] .cf__fx i:nth-child(2) { left: 32%; width: 7px; height: 7px; }
    .cf[data-idle='bubbles'] .cf__fx i:nth-child(3) { left: 74%; width: 14px; height: 14px; }
    .cf[data-idle='bubbles'] .cf__fx i:nth-child(4) { left: 88%; width: 8px; height: 8px; }
    .cf.is-open[data-idle='bubbles'] .cf__fx i:nth-child(1) { animation: cf-bubble 11s linear infinite; }
    .cf.is-open[data-idle='bubbles'] .cf__fx i:nth-child(2) { animation: cf-bubble 9s linear 3s infinite; }
    .cf.is-open[data-idle='bubbles'] .cf__fx i:nth-child(3) { animation: cf-bubble 13s linear 6s infinite; }
    .cf.is-open[data-idle='bubbles'] .cf__fx i:nth-child(4) { animation: cf-bubble 10s linear 8s infinite; }
    @keyframes cf-bubble { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: .8; } 50% { transform: translate(12px, -330px); } 90% { opacity: .6; } 100% { transform: translate(-6px, -680px); opacity: 0; } }

    /* looping hover effects */
    .cf[data-hover='sway'] .cf__photo:hover { animation: cf-sway 2.6s ease-in-out infinite; }
    .cf[data-hover='glitch'] .cf__photo:hover { animation: cf-glitch .5s steps(2) infinite; }
    .cf[data-hover='glitch'] .cf__tags a:hover { animation: cf-glitch-sm .4s steps(2) infinite; }
    .cf[data-hover='shake'] .cf__photo:hover { animation: cf-shake .32s linear infinite; }
    .cf[data-hover='buzz'] .cf__photo:hover { animation: cf-buzz .14s linear infinite; }
    .cf[data-hover='buzz'] .cf__tags a:hover { animation: cf-buzz-sm .14s linear infinite; }
    .cf[data-hover='tracking'] .cf__photo:hover { animation: cf-track .7s steps(3) infinite; }
    .cf[data-hover='bob'] .cf__photo:hover { animation: cf-bob 2.2s ease-in-out infinite; }
    .cf[data-hover='bob'] .cf__tags a:hover::before { animation: cf-ripple .7s ease-out; }
  }

  /* ==========================================================================
     Hover styles (photo + links). Same elements for everyone, the feel varies.
     ========================================================================== */
  /* blush: photo tilts with a warm glow; links get a clean underline */
  .cf[data-hover='blush'] .cf__photo:hover { transform: rotate(1.5deg) scale(1.03); }
  .cf[data-hover='blush'] .cf__photo:hover::before { opacity: .75; }
  .cf[data-hover='blush'] .cf__tags a:hover { color: var(--cf-accent); border-color: var(--cf-accent); transform: rotate(0) translateY(-2px); }
  .cf[data-hover='blush'] .cf__tags a:hover::after { transform: scaleX(1); }

  /* sway: breeze; hand-drawn underline */
  .cf[data-hover='sway'] .cf__tags a::after { height: 6px; bottom: -9px;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='6'%3E%3Cpath d='M0 3 Q6 0 12 3 T24 3' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") repeat-x 0 0 / 24px 6px;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='6'%3E%3Cpath d='M0 3 Q6 0 12 3 T24 3' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") repeat-x 0 0 / 24px 6px; }
  .cf[data-hover='sway'] .cf__tags a:hover { color: var(--cf-accent); border-color: var(--cf-accent); transform: rotate(-2deg); }
  .cf[data-hover='sway'] .cf__tags a:hover::after { transform: scaleX(1); }

  /* glitch: digital RGB split */
  .cf[data-hover='glitch'] .cf__photo:hover .cf__polaroid::after { opacity: .9; }
  .cf[data-hover='glitch'] .cf__tags a:hover { text-shadow: 1.5px 0 #ff2e88, -1.5px 0 #18c8ff; border-color: var(--cf-accent); color: var(--cf-accent); }

  /* shake: obsessive; red stamped underline */
  .cf[data-hover='shake'] .cf__photo:hover::before { opacity: .6; }
  .cf[data-hover='shake'] .cf__tags a::after { height: 3px; transform: scaleX(0) rotate(-1.5deg); }
  .cf[data-hover='shake'] .cf__tags a:hover { color: var(--cf-accent); border-color: var(--cf-accent); }
  .cf[data-hover='shake'] .cf__tags a:hover::after { transform: scaleX(1) rotate(-1.5deg); }

  /* squish: plush squash; stitched underline */
  .cf[data-hover='squish'] .cf__photo { transition: transform .55s cubic-bezier(.34, 1.8, .5, 1); }
  .cf[data-hover='squish'] .cf__photo:hover { transform: rotate(-3deg) scale(1.05, .95); }
  .cf[data-hover='squish'] .cf__tags a::after { height: 2px; background: repeating-linear-gradient(90deg, var(--cf-accent) 0 6px, transparent 6px 10px); }
  .cf[data-hover='squish'] .cf__tags a:hover { color: var(--cf-accent); border-color: var(--cf-accent); transform: scale(1.05, .95); }
  .cf[data-hover='squish'] .cf__tags a:hover::after { transform: scaleX(1); }

  /* creep: slow unsettling tilt; links flash red */
  .cf[data-hover='creep'] .cf__photo { transition: transform 1.4s var(--ease-out); }
  .cf[data-hover='creep'] .cf__photo:hover { transform: rotate(-8deg) scale(1.04); }
  .cf[data-hover='creep'] .cf__tags a { transition: transform .25s var(--ease-out), color .08s, border-color .08s, background-color .08s; }
  .cf[data-hover='creep'] .cf__tags a:hover { background: var(--cf-accent); border-color: var(--cf-accent); color: #fff; transform: rotate(-2deg); }

  /* buzz: tiny buzz; honey glow */
  .cf[data-hover='buzz'] .cf__tags a::before { content: ''; position: absolute; inset: -5px; z-index: -1; border-radius: 6px; background: color-mix(in srgb, var(--cf-folder) 80%, #ffb000); filter: blur(7px); opacity: 0; transition: opacity .25s; }
  .cf[data-hover='buzz'] .cf__tags a { isolation: isolate; }
  .cf[data-hover='buzz'] .cf__tags a:hover { border-color: var(--cf-accent); }
  .cf[data-hover='buzz'] .cf__tags a:hover::before { opacity: .55; }

  /* tracking: VHS shift */
  .cf[data-hover='tracking'] .cf__photo:hover .cf__polaroid::after { opacity: .9; }
  .cf[data-hover='tracking'] .cf__tags a:hover { text-shadow: -2px 0 rgba(220, 0, 50, .55), 2px 0 rgba(0, 190, 230, .5); transform: translateX(2px) skewX(-6deg); border-color: var(--cf-accent); }

  /* bob: floats like it's underwater; ripple */
  .cf[data-hover='bob'] .cf__tags a::before { content: ''; position: absolute; left: 50%; top: 50%; width: 120%; aspect-ratio: 1; border-radius: 50%;
    border: 1.5px solid var(--cf-accent); transform: translate(-50%, -50%) scale(.2); opacity: 0; pointer-events: none; }
  .cf[data-hover='bob'] .cf__tags a:hover { color: var(--cf-accent); border-color: var(--cf-accent); transform: translateY(-3px); }

  @keyframes cf-sway { 0%, 100% { transform: rotate(-3.5deg); } 50% { transform: rotate(1.5deg); } }
  @keyframes cf-glitch { 0% { transform: rotate(-3deg) translate(0, 0); } 25% { transform: rotate(-3deg) translate(-3px, 1px); } 50% { transform: rotate(-3deg) translate(2px, -1px); } 75% { transform: rotate(-3deg) translate(-1px, 0); } }
  @keyframes cf-glitch-sm { 0% { transform: translate(0, 0); } 50% { transform: translate(-1.5px, .5px); } }
  @keyframes cf-shake { 0%, 100% { transform: rotate(-3deg) translate(0, 0); } 25% { transform: rotate(-3.6deg) translate(-1.5px, .5px); } 50% { transform: rotate(-2.4deg) translate(1px, -1px); } 75% { transform: rotate(-3.3deg) translate(1.5px, .5px); } }
  @keyframes cf-buzz { 0%, 100% { transform: rotate(-3deg) translate(0, 0); } 25% { transform: rotate(-3deg) translate(1px, -1px); } 50% { transform: rotate(-3deg) translate(-1px, .5px); } 75% { transform: rotate(-3deg) translate(.5px, 1px); } }
  @keyframes cf-buzz-sm { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(1px, -1px); } 50% { transform: translate(-1px, .5px); } 75% { transform: translate(.5px, 1px); } }
  @keyframes cf-track { 0% { transform: rotate(-3deg) translateX(0); } 33% { transform: rotate(-3deg) translateX(-4px); } 66% { transform: rotate(-3deg) translateX(3px); } }
  @keyframes cf-bob { 0%, 100% { transform: rotate(-3deg) translateY(0); } 50% { transform: rotate(-1.5deg) translateY(-8px); } }
  @keyframes cf-ripple { from { transform: translate(-50%, -50%) scale(.2); opacity: .7; } to { transform: translate(-50%, -50%) scale(1); opacity: 0; } }
}