/* ===================================================================   THE YARD — Interaction Design layer (IxD lead)
   Motion + interaction system. Mobile-first, touch-first, 60fps.
   Rules: transform/opacity animations ONLY. Kelly green #4cbb17 + black +
   smoke-grey. Every control: default/hover/active/focus/disabled/loading/
   success states. prefers-reduced-motion fully respected.
   Hooks: [data-ixd-reels] viewer, [data-reveal] scroll reveals,
   [data-tick] countdowns, [data-ptr] pull-to-refresh, .pressable buttons.
   ========================================================================== */

/* ---------- 0. TOKENS ---------- */
:root{
  --ixd-green:#4cbb17;
  --ixd-green-hi:#2bd97c;      /* hover glow edge */
  --ixd-green-deep:#2f7d0e;    /* pressed edge */
  --ixd-ink:#070907;
  --ixd-ink2:#0a0c0a;
  --ixd-smoke:#9aa39a;
  --ixd-cream:#f2f5f0;
  /* Easing — studied from the best */
  --ixd-ease-out:cubic-bezier(.22,1,.36,1);        /* expo-out: entrances */
  --ixd-ease-snap:cubic-bezier(.32,.72,0,1);       /* Apple sheet snap */
  --ixd-ease-spring:cubic-bezier(.34,1.56,.64,1);  /* overshoot pop */
  --ixd-ease-soft:cubic-bezier(.4,0,.2,1);         /* standard */
  --ixd-ease-in:cubic-bezier(.55,0,.85,.36);
  /* Durations */
  --ixd-d-press:120ms;   /* tap feedback — must feel instant */
  --ixd-d-quick:200ms;   /* hovers, small fades */
  --ixd-d-base:320ms;    /* transitions, bars */
  --ixd-d-enter:520ms;   /* page/section entrances */
  --ixd-d-epic:800ms;    /* choreography, heart burst */
  --ixd-z-navline:2147483000;
  --ixd-z-toast:2147483001;
  --ixd-z-heart:50;
}
html.ixd{scroll-behavior:smooth}
html.ixd body{-webkit-tap-highlight-color:transparent}

/* ---------- 1. REDUCED MOTION — kills everything, keeps meaning ---------- */
@media (prefers-reduced-motion:reduce){
  html.ixd{scroll-behavior:auto}
  html.ixd *,html.ixd *::before,html.ixd *::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  [data-reveal]{opacity:1!important;transform:none!important}
  .skel,.ixd-skel{background:#141a14!important;animation:none!important}
  [data-ixd-reels]{scroll-snap-type:y proximity}
  .reel-heart{display:none!important}
}

/* ---------- 2. KEYFRAME LIBRARY ---------- */
@keyframes ixd-rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes ixd-rise-sm{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes ixd-fade-in{from{opacity:0}to{opacity:1}}
@keyframes ixd-page-out{to{opacity:0;transform:scale(.985) translateY(10px)}}
@keyframes ixd-page-in{from{opacity:0;transform:translateY(16px) scale(.995)}to{opacity:1;transform:none}}
@keyframes ixd-heart-pop{
  0%{opacity:0;transform:scale(0) rotate(-12deg)}
  18%{opacity:1;transform:scale(1.25) rotate(4deg)}
  38%{transform:scale(.94) rotate(0)}
  55%{transform:scale(1.06)}
  100%{opacity:0;transform:scale(1.1) translateY(-70px)}
}
@keyframes ixd-ring{from{opacity:.9;transform:scale(.4)}to{opacity:0;transform:scale(1.6)}}
@keyframes ixd-shimmer{to{background-position:-200% 0}}
@keyframes ixd-tick{0%{opacity:0;transform:translateY(45%)}60%{opacity:1}100%{opacity:1;transform:none}}
@keyframes ixd-pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}}
@keyframes ixd-nav-slide{from{transform:translateX(-40%)}to{transform:translateX(320%)}}
@keyframes ixd-check-pop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}
@keyframes ixd-draw-check{to{stroke-dashoffset:0}}
@keyframes ixd-toast-in{from{opacity:0;transform:translateX(-50%) translateY(14px) scale(.96)}to{opacity:1;transform:translateX(-50%)}}
@keyframes ixd-toast-out{to{opacity:0;transform:translateX(-50%) translateY(8px) scale(.97)}}
@keyframes ixd-sheet-up{from{transform:translateY(100%)}to{transform:none}}
@keyframes ixd-float-hint{0%,100%{transform:translateX(-50%) translateY(0);opacity:.9}50%{transform:translateX(-50%) translateY(10px);opacity:.5}}
@keyframes ixd-spin-slow{to{transform:rotate(360deg)}}
@keyframes ixd-bar-glow{0%,100%{box-shadow:0 0 0 0 rgba(76,187,23,.0)}50%{box-shadow:0 0 18px 2px rgba(76,187,23,.55)}}
@keyframes ixd-pause-blink{0%,100%{opacity:0}12%,88%{opacity:1}}

/* ---------- 3. PAGE TRANSITIONS ---------- */
/* Native cross-document view transitions (Chromium): choreographed, free. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:ixd-page-out .26s var(--ixd-ease-soft) both}
::view-transition-new(root){animation:ixd-page-in .42s var(--ixd-ease-out) both}
/* JS fallback (no VT support): exit choreography before nav */
html.ixd body{transition:opacity var(--ixd-d-press) var(--ixd-ease-soft),transform var(--ixd-d-press) var(--ixd-ease-soft)}
html.ixd body.ixd-leave{opacity:0;transform:translateY(10px) scale(.99);pointer-events:none}
/* Enter choreography for the page hero */
.ixd-enter [data-hero]{animation:ixd-rise var(--ixd-d-enter) var(--ixd-ease-out) both;animation-delay:var(--ixd-delay,0ms)}
/* Top hairline: navigation is always acknowledged instantly */
.ixd-navline{position:fixed;top:0;left:0;right:0;height:3px;z-index:var(--ixd-z-navline);
  background:transparent;opacity:0;pointer-events:none;transition:opacity var(--ixd-d-quick)}
.ixd-navline.on{opacity:1}
.ixd-navline::after{content:"";position:absolute;top:0;bottom:0;width:32%;left:0;
  background:linear-gradient(90deg,transparent,var(--ixd-green),transparent);
  animation:ixd-nav-slide .9s var(--ixd-ease-soft) infinite}

/* ---------- 4. REVEAL ON SCROLL ---------- */
[data-reveal]{opacity:0;transform:translateY(24px);
  transition:opacity var(--ixd-d-enter) var(--ixd-ease-out),transform var(--ixd-d-enter) var(--ixd-ease-out);
  transition-delay:var(--ixd-delay,0ms);will-change:opacity,transform}
[data-reveal].in{opacity:1;transform:none;will-change:auto}
[data-reveal="left"]{transform:translateX(-24px)}
[data-reveal="right"]{transform:translateX(24px)}
[data-reveal="zoom"]{transform:scale(.94)}
[data-reveal].in{transform:none}
/* Parallax: JS translates [data-parallax] within its range, rAF-throttled */
[data-parallax]{will-change:transform;transform:translate3d(0,0,0)}
/* Sticky elements get depth the moment they stick (JS toggles .is-stuck) */
.ixd-sticky{transition:box-shadow var(--ixd-d-base) var(--ixd-ease-out)}
.ixd-sticky.is-stuck{box-shadow:0 8px 28px rgba(0,0,0,.55)}

/* ---------- 5. REELS VIEWER — TikTok feel ---------- */
/* Contract for route/content leads: 
   <div data-ixd-reels>
     <article class="reel" data-reel-id="r-123">
       <div class="reel-media">…video / iframe…</div>
       <div class="reel-progress"><i></i></div>
       <div class="reel-rail">…action buttons…</div>
       <div class="reel-caption">…</div>
       <div class="reel-credit">Photo: …</div>
     </article> …
   ixd.js auto-wires: snap paging, autoplay, double-tap heart burst,
   progress, tap-to-pause, captions, keyboard nav. */
[data-ixd-reels]{
  position:relative;height:100dvh;height:100svh;overflow-y:auto;overflow-x:hidden;
  scroll-snap-type:y mandatory;overscroll-behavior-y:contain;
  background:#000;scrollbar-width:none;-ms-overflow-style:none}
[data-ixd-reels]::-webkit-scrollbar{display:none}
.reel{
  position:relative;height:100dvh;height:100svh;width:100%;
  scroll-snap-align:start;scroll-snap-stop:always;
  display:flex;align-items:stretch;justify-content:center;
  background:#000;overflow:hidden;touch-action:pan-y}
.reel-media{position:absolute;inset:0}
.reel-media video,.reel-media iframe{width:100%;height:100%;object-fit:cover;border:0;
  background:#000;pointer-events:none}
.reel.is-active .reel-media video{pointer-events:auto}
/* crossfade between slides — the snap never feels like a hard cut */
.reel{opacity:.35;transition:opacity var(--ixd-d-base) var(--ixd-ease-out)}
.reel.is-active{opacity:1}
.reel-veil{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.42) 0%,transparent 22%,transparent 62%,rgba(0,0,0,.66) 100%)}
/* progress hairline */
.reel-progress{position:absolute;top:0;left:0;right:0;height:3px;background:rgba(255,255,255,.18);z-index:5}
.reel-progress>i{display:block;height:100%;width:0;background:var(--ixd-green);
  box-shadow:0 0 8px rgba(76,187,23,.8);transition:width 120ms linear}
/* action rail — 44px+ touch targets, spring press */
.reel-rail{position:absolute;right:10px;bottom:96px;display:flex;flex-direction:column;
  gap:16px;z-index:6;align-items:center}
.reel-action{position:relative;width:48px;height:48px;border-radius:50%;border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  background:rgba(10,12,10,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  color:#fff;transition:transform var(--ixd-d-press) var(--ixd-ease-spring),background var(--ixd-d-quick)}
.reel-action svg{width:26px;height:26px;fill:currentColor;transition:transform var(--ixd-d-base) var(--ixd-ease-spring)}
.reel-action:active{transform:scale(.88)}
.reel-action .n{font-size:11px;font-weight:700;margin-top:2px;color:#fff}
.reel-action.is-liked{background:rgba(76,187,23,.28);color:var(--ixd-green-hi)}
.reel-action.is-liked svg{animation:ixd-check-pop .45s var(--ixd-ease-spring)}
.reel-action .burst{position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--ixd-green);
  opacity:0;pointer-events:none}
.reel-action.is-liked .burst{animation:ixd-ring .55s var(--ixd-ease-out)}
/* double-tap heart — spawns at tap point, floats up */
.reel-heart{position:absolute;z-index:var(--ixd-z-heart);pointer-events:none;
  width:92px;height:92px;margin:-46px 0 0 -46px;
  filter:drop-shadow(0 6px 18px rgba(76,187,23,.55));
  animation:ixd-heart-pop var(--ixd-d-epic) var(--ixd-ease-out) forwards}
.reel-heart svg{width:100%;height:100%;fill:var(--ixd-green)}
/* tap-to-pause indicator */
.reel-paused{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  pointer-events:none;opacity:0;z-index:6}
.reel.is-paused .reel-paused{opacity:1}
.reel-paused span{width:76px;height:76px;border-radius:50%;background:rgba(5,7,5,.6);
  backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;
  animation:ixd-fade-in var(--ixd-d-quick) var(--ixd-ease-out)}
.reel-paused svg{width:30px;height:30px;fill:#fff}
/* captions + credits */
.reel-meta{position:absolute;left:12px;right:76px;bottom:24px;z-index:6;color:#fff}
.reel-cap-toggle{background:none;border:0;color:#fff;font:inherit;text-align:left;padding:0;cursor:pointer}
.reel-caption{font-size:14px;line-height:1.45;margin:0 0 6px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  text-shadow:0 1px 8px rgba(0,0,0,.8);max-height:3.1em;transition:max-height var(--ixd-d-base) var(--ixd-ease-out)}
.reel-caption.open{-webkit-line-clamp:unset;max-height:40vh;overflow-y:auto}
.reel-more{font-size:12px;font-weight:700;color:var(--ixd-green-hi);text-shadow:0 1px 6px rgba(0,0,0,.8)}
.reel-credit{display:inline-block;font-size:10.5px;letter-spacing:.04em;color:rgba(255,255,255,.72);
  background:rgba(5,7,5,.55);border:1px solid rgba(255,255,255,.14);border-radius:999px;
  padding:3px 10px;margin-top:6px;backdrop-filter:blur(6px)}
.reel-kicker{font-size:11px;font-weight:800;letter-spacing:.22em;color:var(--ixd-green-hi);
  text-transform:uppercase;margin-bottom:6px;text-shadow:0 1px 6px rgba(0,0,0,.8)}
/* scroll hint on first slide */
.reel-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:6;
  color:#fff;font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;
  animation:ixd-float-hint 2.2s var(--ixd-ease-soft) infinite}
.reel-hint svg{width:18px;height:22px;fill:#fff}
.reel-hint.gone{display:none}
/* mute toggle */
.reel-mute{position:absolute;top:14px;right:10px;z-index:6;width:44px;height:44px;border-radius:50%;
  border:0;background:rgba(10,12,10,.55);backdrop-filter:blur(8px);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:transform var(--ixd-d-press) var(--ixd-ease-spring)}
.reel-mute:active{transform:scale(.88)}
.reel-mute svg{width:22px;height:22px;fill:currentColor}

/* ---------- 6. MICRO-INTERACTIONS ---------- */
/* 6a. Press physics — apply .pressable to any button/link */
.pressable{transition:transform var(--ixd-d-press) var(--ixd-ease-spring),box-shadow var(--ixd-d-quick),background-color var(--ixd-d-quick),border-color var(--ixd-d-quick)}
.pressable:active{transform:scale(.94)}
.pressable-lift{transition:transform var(--ixd-d-base) var(--ixd-ease-out),box-shadow var(--ixd-d-base)}
@media(hover:hover){
  .pressable-lift:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.45)}
}
/* 6b. Like burst — generic [data-like] toggle */
[data-like]{position:relative}
[data-like].is-liked{color:var(--ixd-green-hi)!important;border-color:var(--ixd-green)!important}
[data-like].is-liked::after{content:"";position:absolute;inset:-4px;border-radius:inherit;
  border:2px solid var(--ixd-green);animation:ixd-ring .5s var(--ixd-ease-out);pointer-events:none}
/* 6c. Poll votes — spring bars, check pop, burst on the winner */
.yard-vote .pfill{transition:width .7s var(--ixd-ease-spring)!important}
.yard-vote .pbtn{position:relative;transition:transform var(--ixd-d-press) var(--ixd-ease-spring),border-color var(--ixd-d-quick),background-color var(--ixd-d-quick),box-shadow var(--ixd-d-base)}
.yard-vote .pbtn:active{transform:scale(.96)}
.yard-vote .pbtn.is-sending{pointer-events:none;opacity:.75}
.yard-vote .pbtn.is-sending::after{content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(100deg,transparent 30%,rgba(76,187,23,.25) 50%,transparent 70%);
  background-size:200% 100%;animation:ixd-shimmer 1.1s linear infinite}
.yard-vote .pbtn.pvoted{animation:ixd-bar-glow 1.2s var(--ixd-ease-out) 2}
.yard-vote .pbtn .ixd-check{display:inline-flex;width:22px;height:22px;flex:none;
  animation:ixd-check-pop .45s var(--ixd-ease-spring)}
.yard-vote .pbtn .ixd-check svg{width:100%;height:100%}
.yard-vote .pbtn .ixd-check path{stroke:var(--ixd-green);stroke-width:3;fill:none;
  stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;
  animation:ixd-draw-check .4s var(--ixd-ease-out) .1s forwards}
/* 6d. Countdown ticks — digit rolls in on change (JS toggles .tick) */
[data-tick] .tick{display:inline-block;animation:ixd-tick .38s var(--ixd-ease-out)}
.gwhen.tick,.gchip2.tick{display:inline-block;animation:ixd-tick .38s var(--ixd-ease-out)}
/* live dot */
.live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ixd-green);
  animation:ixd-pulse-dot 1.6s var(--ixd-ease-soft) infinite;vertical-align:1px}
/* 6e. Skeleton shimmer — NEVER spinners, NEVER blank */
.skel,.ixd-skel{position:relative;overflow:hidden;border-radius:12px;
  background:linear-gradient(100deg,#101410 30%,#1b2b1b 48%,#101410 66%)!important;
  background-size:200% 100%!important;animation:ixd-shimmer 1.4s linear infinite}
.ixd-skel-line{height:14px;border-radius:7px;margin:8px 0}
.ixd-skel-card{min-height:120px;margin:12px 0}
.ixd-skel-avatar{width:48px;height:48px;border-radius:50%;flex:none}
/* 6f. Pull-to-refresh */
[data-ptr]{position:relative}
.ptr-ind{position:absolute;top:0;left:50%;transform:translate(-50%,-100%);z-index:40;
  display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;
  background:rgba(10,12,10,.85);border:1px solid rgba(76,187,23,.4);
  opacity:0;transition:opacity var(--ixd-d-quick),transform var(--ixd-d-base) var(--ixd-ease-spring)}
.ptr-ind svg{width:22px;height:22px;stroke:var(--ixd-green);fill:none;stroke-width:2.5;
  stroke-linecap:round;transition:transform var(--ixd-d-base) var(--ixd-ease-spring)}
[data-ptr].ptr-armed .ptr-ind{opacity:1;transform:translate(-50%,12px)}
[data-ptr].ptr-ready .ptr-ind svg{transform:rotate(180deg)}
[data-ptr].ptr-loading .ptr-ind{opacity:1;transform:translate(-50%,12px)}
[data-ptr].ptr-loading .ptr-ind svg{animation:ixd-spin-slow .9s linear infinite}
/* 6g. Tab switch — content crossfades, never blinks */
.ixd-tabfade{animation:ixd-fade-in var(--ixd-d-base) var(--ixd-ease-out)}

/* ---------- 7. INTERACTIVE STATES ---------- */
/* Focus-visible: Kelly green ring, always. Non-negotiable a11y. */
html.ixd :focus{outline:none}
html.ixd :focus-visible{outline:2px solid var(--ixd-green);outline-offset:3px;border-radius:6px;
  box-shadow:0 0 0 4px rgba(76,187,23,.22)}
html.ixd input:focus-visible,html.ixd select:focus-visible,html.ixd textarea:focus-visible{
  border-color:var(--ixd-green)!important;box-shadow:0 0 0 3px rgba(76,187,23,.28)}
/* Disabled: honest, not dead */
html.ixd button:disabled,html.ixd [aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none!important}
/* Loading state: shimmer sweep, keeps layout */
html.ixd [aria-busy="true"]{position:relative;pointer-events:none;overflow:hidden}
html.ixd [aria-busy="true"]::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 30%,rgba(76,187,23,.28) 50%,transparent 70%);
  background-size:200% 100%;animation:ixd-shimmer 1.1s linear infinite;pointer-events:none}
/* Success state: check draws in */
.ixd-success{position:relative}
.ixd-success .ixd-checkmark{width:20px;height:20px;animation:ixd-check-pop .4s var(--ixd-ease-spring)}
.ixd-success .ixd-checkmark path{stroke:var(--ixd-green);stroke-width:3;fill:none;stroke-linecap:round;
  stroke-dasharray:24;stroke-dashoffset:24;animation:ixd-draw-check .35s var(--ixd-ease-out) .08s forwards}
/* Links: underline slides in */
html.ixd a{transition:color var(--ixd-d-quick)}
@media(hover:hover){
  .ixd-ulink{background-image:linear-gradient(var(--ixd-green),var(--ixd-green));
    background-size:0% 2px;background-repeat:no-repeat;background-position:left calc(100% - 1px);
    transition:background-size var(--ixd-d-base) var(--ixd-ease-out),color var(--ixd-d-quick)}
  .ixd-ulink:hover{background-size:100% 2px}
}
/* Cards lift on hover (desktop), press on touch */
@media(hover:hover){
  .card.pressable-lift:hover,.scard.pressable-lift:hover{border-color:rgba(76,187,23,.5)}
}
/* 44px touch targets — touch-first, non-negotiable */
html.ixd button,html.ixd [role="button"],html.ixd input[type="submit"]{min-height:44px}
html.ixd .hub-tab{min-height:48px}
html.ixd .topnav a{min-height:44px;display:inline-flex;align-items:center}
/* Tab bar active pill slides (hub) */
.hub-tab{position:relative;transition:color var(--ixd-d-quick)}
.hub-tab[aria-selected="true"]{color:var(--ixd-green-hi)}
.hub-tab[aria-selected="true"]::after{content:"";position:absolute;left:22%;right:22%;bottom:6px;
  height:3px;border-radius:2px;background:var(--ixd-green);animation:ixd-rise-sm var(--ixd-d-base) var(--ixd-ease-spring)}

/* ---------- 8. HUB FEED MOTION ---------- */
/* Cards rise in on insert — the feed feels alive, never blinking */
html.ixd .hub-feed .hub-card{animation:ixd-rise var(--ixd-d-enter) var(--ixd-ease-out) both;
  animation-delay:var(--ixd-delay,0ms)}
html.ixd .hub-card{transition:transform var(--ixd-d-base) var(--ixd-ease-out),border-color var(--ixd-d-quick)}
@media(hover:hover){
  html.ixd .hub-card:hover{transform:translateY(-3px)}
  html.ixd .hub-thumb img{transition:transform .6s var(--ixd-ease-out)}
  html.ixd .hub-card:hover .hub-thumb img{transform:scale(1.045)}
}
html.ixd .hub-facade:active .hub-playbtn{transform:scale(.9)}
html.ixd .hub-playbtn{transition:transform var(--ixd-d-press) var(--ixd-ease-spring),box-shadow var(--ixd-d-base)}
html.ixd .hub-facade:hover .hub-playbtn{box-shadow:0 0 24px rgba(76,187,23,.5)}
/* Sheet: springs up like iOS */
html.ixd .hub-sheet:not([hidden]){animation:ixd-sheet-up .45s var(--ixd-ease-snap)}
html.ixd .hub-sheet-backdrop{transition:opacity var(--ixd-d-base)}
/* Feed images: blur-up on load */
html.ixd img[data-ixd-blur]{filter:blur(14px);transform:scale(1.04);
  transition:filter .7s var(--ixd-ease-out),transform .7s var(--ixd-ease-out)}
html.ixd img[data-ixd-blur].loaded{filter:none;transform:none}

/* ---------- 9. TOASTS ---------- */
.ixd-toast{position:fixed;left:50%;bottom:calc(28px + env(safe-area-inset-bottom));transform:translateX(-50%);
  z-index:var(--ixd-z-toast);background:rgba(10,12,10,.94);color:var(--ixd-cream);
  border:1px solid rgba(76,187,23,.5);border-radius:999px;padding:12px 20px;font-size:14px;font-weight:600;
  box-shadow:0 12px 34px rgba(0,0,0,.6);display:flex;align-items:center;gap:10px;
  animation:ixd-toast-in var(--ixd-d-base) var(--ixd-ease-spring);pointer-events:none;
  max-width:min(92vw,420px);backdrop-filter:blur(10px)}
.ixd-toast.out{animation:ixd-toast-out var(--ixd-d-base) var(--ixd-ease-soft) forwards}
.ixd-toast .dot{width:8px;height:8px;border-radius:50%;background:var(--ixd-green);flex:none}

/* ---------- 10. UTILITIES ---------- */
.no-select{user-select:none;-webkit-user-select:none}
.ixd-hidden{opacity:0!important;pointer-events:none!important}
/* Stagger helper: set style="--ixd-i:3" on children of [data-stagger] */
[data-stagger] > *{--ixd-delay:calc(var(--ixd-i,0)*70ms)}