/* Package: home — additions to storefront/home.blade.php restored from last13
 * (slide switches + dots, phone shortcuts, best-seller game tag, shop tiles,
 * news placeholders). Every class sf-home-*. Tokens from theme-v2.css. */

/* ---------- All public games: equal groups make a seamless moving strip. ---------- */
.sf-game-marquee { --game-gap: 30px; }
/* Leave breathing room on both sides of the tilted section divider. */
.sf-home-page > .sf-game-marquee { margin-block: clamp(28px, 3vw, 64px) clamp(80px, 6vw, 128px); }
.manifesto-strip.sf-game-marquee > .sf-game-marquee-track {
  width: max-content;
  gap: 0;
  padding: 13px 0;
  transform: none;
  animation: sf-games-scroll var(--game-duration, 100s) linear infinite;
}
.sf-game-marquee-group {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-around;
  min-width: 100vw;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sf-game-marquee-group li {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--game-gap);
  padding-inline-end: var(--game-gap);
  white-space: nowrap;
}
.sf-game-marquee:focus-visible { outline: 2px solid var(--v2-pink); outline-offset: 4px; }
.sf-game-marquee:focus-within > .sf-game-marquee-track,
.sf-game-marquee[data-marquee-visible="false"] > .sf-game-marquee-track { animation-play-state: paused; }
@media (hover: hover) {
  .sf-game-marquee:hover > .sf-game-marquee-track { animation-play-state: paused; }
}
@media (max-width: 900px) { .sf-game-marquee { --game-gap: 22px; } }
@media (max-width: 680px) {
  .sf-game-marquee { --game-gap: 16px; }
  .manifesto-strip.sf-game-marquee > .sf-game-marquee-track { padding-block: 11px; }
}
@keyframes sf-games-scroll { to { transform: translate3d(-50%, 0, 0); } }
/* Keep all names reachable by touch/keyboard when automatic motion is off. */
.effects-off .sf-game-marquee { overflow-x: auto; scrollbar-width: thin; }
.effects-off .sf-game-marquee-group[aria-hidden="true"] { display: none; }
.effects-off .sf-game-marquee > .sf-game-marquee-track { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .sf-game-marquee { overflow-x: auto; scrollbar-width: thin; }
  .sf-game-marquee-group[aria-hidden="true"] { display: none; }
  .sf-game-marquee > .sf-game-marquee-track { animation: none; transform: none; }
}

/* Align the game tile action with the right edge, keeping its existing inset. */
.sf-home-page .game-grid .game-item .game-caption { justify-content: flex-end; }
/* Game tile caption in the theme: a violet strip under the white logo stage and
   "ดูการ์ด" as a cyan outline chip that fills on hover (was a flat grey bar).
   The tile body goes dark too, or its white shows as a frame round the strip. */
.sf-home-page .game-grid .game-item,
.sf-home-page .game-grid .game-item:hover { background: var(--v2-surface-2); }
.sf-home-page .game-grid .game-item .game-caption,
.sf-home-page .game-grid .game-item:hover .game-caption {
  background: linear-gradient(100deg, var(--v2-surface) 0%, var(--v2-surface-2) 100%);
  border-top: 1px solid #00f0ff38; border-color: #00f0ff38;
}
.sf-home-page .game-grid .game-item .game-action {
  padding: 6px 12px 6px 14px; border: 1px solid #00f0ff73; background: #00f0ff0f;
  color: var(--v2-accent); font-weight: 600; letter-spacing: .02em;
  transition: background .25s, color .25s, border-color .25s, box-shadow .25s;
}
.sf-home-page .game-grid .game-item .game-action .icon { color: currentColor; }
.sf-home-page .game-grid .game-item:hover .game-action,
.sf-home-page .game-grid .game-item:focus-visible .game-action {
  background: var(--v2-accent); border-color: var(--v2-accent); color: var(--v2-bg);
  box-shadow: 0 0 16px #00f0ff59;
}
.sf-home-page .game-grid .game-item:hover .game-action .icon { color: currentColor; }
@media (max-width: 680px) {
  .sf-home-page .game-grid .game-item .game-action { padding: 5px 8px; }
}

/* Game tile fan with the game's OWN card backs (/admin/games/card-backs; effects.js
   .game-peek.has-backs = left back · main back · right back — backs ONLY, owner: "แสดงแค่
   หลังการ์ดพอ"). At rest the three peek out from under the logo as a small stack — touch
   screens see it too; on hover they fan out as before (playful.css). A franchise without
   backs keeps the generic back of the plain .game-peek. Rules sit above playful's hover ones. */
.sf-home-page .game-grid .game-item .game-peek.has-backs > * {
  position: absolute; left: calc(50% - 42px); bottom: 0; z-index: 1; width: 84px; height: auto; max-width: none;
  aspect-ratio: 63 / 88; object-fit: cover; border-radius: 4px; opacity: 1; filter: none;
  box-shadow: 0 6px 14px #0007, 0 0 0 1px #0000001a; transform-origin: 50% 120%;
  transition: transform .6s var(--ease-back);
}
.sf-home-page .game-grid .game-item .game-peek.has-backs > :nth-child(1) { transform: translate(-15px, 71%) rotate(-8deg); transition-delay: .06s; }
.sf-home-page .game-grid .game-item .game-peek.has-backs > :nth-child(2) { z-index: 2; transform: translate(0, 66%); }
.sf-home-page .game-grid .game-item .game-peek.has-backs > :nth-child(3) { transform: translate(15px, 71%) rotate(8deg); transition-delay: .12s; }
/* Lift the logo a little so its bottom line ("CARD GAME", "THE GATHERING") stays on
   the white, not on the dark card tops. */
.sf-home-page .game-grid .game-item .game-logo:has(> .game-peek.has-backs) { padding-bottom: 29px; }
@media (max-width: 680px) {   /* the shorter phone stage shows less of the stack */
  .sf-home-page .game-grid .game-item .game-logo:has(> .game-peek.has-backs) { padding-bottom: 22px; }
  .sf-home-page .game-grid .game-item .game-peek.has-backs > :nth-child(1) { transform: translate(-13px, 80%) rotate(-8deg); }
  .sf-home-page .game-grid .game-item .game-peek.has-backs > :nth-child(2) { transform: translate(0, 75%); }
  .sf-home-page .game-grid .game-item .game-peek.has-backs > :nth-child(3) { transform: translate(13px, 80%) rotate(8deg); }
}
@media (hover: hover) {
  .sf-home-page .game-grid .game-item:hover .game-peek.has-backs > :nth-child(1) { transform: translate(-64px, 55%) rotate(-14deg); }
  .sf-home-page .game-grid .game-item:hover .game-peek.has-backs > :nth-child(2) { transform: translate(0, 42%); }
  .sf-home-page .game-grid .game-item:hover .game-peek.has-backs > :nth-child(3) { transform: translate(64px, 55%) rotate(14deg); }
}
.effects-off .sf-home-page .game-grid .game-item .game-peek.has-backs > * { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .sf-home-page .game-grid .game-item .game-peek.has-backs > * { transition: none; }
}

/* ---------- Promo slides: /admin/slides switches ---------- */
.sf-home-veil { position: absolute; inset: 0; background: var(--veil); pointer-events: none; }
.sf-promo-slide.sf-home-flip { flex-direction: row-reverse; }
.sf-promo-slide.sf-home-flip .sf-promo-copy { justify-items: end; text-align: right; }
.sf-promo-slide.sf-home-flip::after { background: var(--sf-diag) right top / 16px 16px no-repeat, var(--sf-diag) left bottom / 16px 16px no-repeat, linear-gradient(270deg, #0a0014ee 0%, #0a001499 55%, transparent); }
.sf-home-was { margin-left: 8px; font-size: .62em; font-weight: 400; color: var(--v2-muted); text-decoration-thickness: 1px; }
.sf-promo-cta.sf-home-cta { padding: 7px 13px; color: #fff; background: var(--cta); box-shadow: 0 6px 16px #0008, inset 0 1px 0 #ffffff33; text-shadow: 0 1px 2px #0007; }
/* One slide per view below the 2-up breakpoint: pages.css gives the track
   minmax(0, 100%) columns, which the grid shrinks to share the width. */
@media (max-width: 899px) { .sf-promo-track { grid-auto-columns: 100%; } }
.sf-promo-track:not(.sf-home-loop):has(> :only-child) { grid-auto-columns: 100%; }
.sf-promo-track.sf-home-draggable { cursor: grab; user-select: none; -webkit-user-select: none; }
.sf-home-draggable .sf-promo-slide { cursor: inherit; -webkit-user-drag: none; }
.sf-home-draggable img { -webkit-user-drag: none; }
.sf-promo-track.sf-home-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }

/* Loop (3+ slides, pkg-home.js): the centre slide full size, a neighbour
   peeking on each side, smaller and dimmed. Widths are in cqw (the section's
   width), since the track's own % would shrink with its padding; the padding
   lets the first slide sit centred before the script moves to the real set.
   The script sets per slide --p (signed distance from the centre, in slides)
   and --a (0 centre … 1 neighbour); the translate tucks a shrunken
   neighbour back in by what the scale took off, so the gap stays the gap. */
.sf-promo { container-type: inline-size; }
.sf-promo-track.sf-home-loop {
  --w: 70cqw; --k: .32;
  position: relative; grid-auto-columns: var(--w); gap: 16px; padding-inline: calc((100cqw - var(--w)) / 2);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
.sf-home-loop > .sf-home-slide {
  --p: 1; --a: 1;
  display: grid; min-width: 0;
  scroll-snap-align: center; scroll-snap-stop: always;
}
.sf-home-slide > .sf-promo-slide {
  min-height: clamp(240px, 24cqw, 360px);
  padding: clamp(20px, 2.5cqw, 40px);
  scroll-snap-align: none;
  transform: translateX(calc(var(--p) * var(--k) * -50%)) scale(calc(1 - var(--k) * var(--a)));
  filter: brightness(calc(1.12 - .66 * var(--a))) saturate(calc(1 - .3 * var(--a)));
}
.sf-home-slide .sf-promo-copy strong { font-size: clamp(19px, 2.4cqw, 32px); }
.sf-home-slide > .sf-promo-slide > img { max-height: clamp(155px, 18cqw, 260px); }
.sf-home-loop > .sf-home-slide:first-child { --p: 0; --a: 0; }
@media (max-width: 899px) {
  .sf-promo-track.sf-home-loop { --w: 88cqw; --k: .24; gap: 10px; -webkit-mask-image: none; mask-image: none; }
}
.sf-home-dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
/* Arrows ON the slider's sides, desktop and phone (owner 2026-10-06: "ควรเห็นปุ่มไหม" — they floated above
   the slider, and on a phone sat half under the sticky header). Middle of the track = above the dots row
   (12px gap + 8px dot). The button look is pages.css .sf-hrow-btn. */
.sf-promo .sf-promo-nav { inset: calc(50% - 10px) 0 auto; height: 0; display: block; gap: 0; z-index: 4; }
.sf-promo .sf-promo-nav > .sf-hrow-btn { display: grid; }
.sf-home-dots button { width: 8px; height: 8px; padding: 0; background: #ffffff33; transition: width .25s, background .25s; }
.sf-home-dots button.is-on { width: 24px; background: var(--v2-accent); box-shadow: 0 0 8px #00f0ff88; }
.sf-home-dots button:focus-visible { outline: 2px solid var(--v2-accent); outline-offset: 3px; }

/* ---------- Section shortcuts (phone only — the desktop nav carries them) ----------
   One joined panel, hairlines between the keys (owner 2026-10-06: "ปุ่มให้ดูติดกันดีกว่าไหม"); a short
   last row on a phone ends with "เพิ่มเติม" (= the ☰ sheet). 681–900px: one row, no "เพิ่มเติม" (no ☰ there). */
.sf-home-quick { display: none; }
@media (max-width: 900px) {
  .sf-home-quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 30px; border-top: 1px solid var(--v2-line); border-left: 1px solid var(--v2-line); background: #ffffff05; }
  .sf-home-quick > a, .sf-home-quick > button { display: grid; justify-items: center; align-content: start; gap: 7px; padding: 13px 4px 11px; font: inherit; font-size: 12px; line-height: 1.35; text-align: center; color: #d9d0e6; background: none; border: 0; border-right: 1px solid var(--v2-line); border-bottom: 1px solid var(--v2-line); transition: background .15s, color .15s; }
  .sf-home-quick > :active { background: #00f0ff12; color: #fff; }
  .sf-home-quick > :focus-visible { outline: 2px solid var(--v2-accent); outline-offset: -2px; }
  .sf-home-quick span { --k: var(--v2-accent); width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: var(--k); background: color-mix(in srgb, var(--k) 14%, transparent); border: 1px solid color-mix(in srgb, var(--k) 45%, transparent); }
  .sf-home-quick .icon { width: 19px; height: 19px; }
  .sf-home-quick [data-k=gacha] span { --k: #ff5c9d; }
  .sf-home-quick [data-k=packs] span { --k: #ff9f43; }
  .sf-home-quick [data-k=auctions] span { --k: #ff6b6b; }
  .sf-home-quick [data-k=buybacks] span { --k: #3ee8a0; }
  .sf-home-quick [data-k=decks] span { --k: #a58bff; }
  .sf-home-quick [data-k=tournaments] span { --k: #ffcf00; }
  .sf-home-quick [data-k=more] span { --k: #c9bedb; }
}
@media (hover: hover) and (pointer: fine) and (max-width: 900px) { .sf-home-quick > :hover { background: #00f0ff0d; color: #fff; } }
@media (min-width: 681px) and (max-width: 900px) {
  .sf-home-quick { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .sf-home-quick > [data-sheet-open] { display: none; }
}


/* ---------- Best sellers / news / shop tiles ---------- */
.sf-home-gametag { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 5px 10px; font: 600 11px/1.4 'Noto Sans Thai', sans-serif; color: #e9e2f3; background: linear-gradient(90deg, #0a0014e6, #0a001499); border-top: 1px solid #ffffff14; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-best .sf-cards-sold { margin-top: 0; }
.sf-home-newsph { display: grid; place-items: center; width: 100%; height: 100%; color: #00f0ff55; background: radial-gradient(circle at 50% 40%, #00f0ff14, transparent 65%); }
.sf-home-newsph .icon { width: 42px; height: 42px; }
.sf-home-pin { width: 11px; height: 11px; vertical-align: -1px; margin-right: 4px; }
.sf-news-art .sf-card-badge { display: inline-flex; align-items: center; }
.sf-shelf-shops.sf-shop-grid { grid-template-columns: none; grid-auto-columns: minmax(270px, 1fr); }
@media (min-width: 1200px) { .sf-shelf-shops.sf-shop-grid { grid-auto-columns: calc((100% - 60px) / 4); } }
@media (max-width: 680px) { .sf-shelf-shops.sf-shop-grid { grid-auto-columns: 82%; } }
.sf-shop-tile-go .sf-home-since { font-size: 12px; font-weight: 400; color: var(--v2-muted); }
.sf-shop-tile-go .sf-home-go { display: inline-flex; align-items: center; gap: 6px; }

/* Home shelves sized per content (owner 2026-09-27: "สินค้าชิ้นใหญ่เกินไป — ไม่ต้อง
   เท่ากันทุกอัน"). pages.css gives every .sf-shelf a quarter of the row (315px at
   1440) or 62% on a phone; on the home each strip gets its own width instead —
   a gacha room carries a collage + facts, a best seller is one card. */
.sf-home :is([aria-labelledby="home-gacha"], [aria-labelledby="home-packs"], [aria-labelledby="hot-auctions"],
  [aria-labelledby="best-sellers"], [aria-labelledby="open-buybacks"], [aria-labelledby="home-decks"]) .sf-shelf { grid-auto-columns: var(--shelf-w); gap: 16px; }
.sf-home [aria-labelledby="home-gacha"] { --shelf-w: 280px; }
.sf-home [aria-labelledby="home-packs"] { --shelf-w: 250px; }
.sf-home [aria-labelledby="hot-auctions"] { --shelf-w: 225px; }
.sf-home [aria-labelledby="best-sellers"] { --shelf-w: 195px; }
.sf-home [aria-labelledby="open-buybacks"] { --shelf-w: 215px; }
/* เด็คพร้อมเล่นจากร้าน = market tiles (partials/product-card) in a row; one straight line — the grid's
   every-second-tile drop (theme) made a single row zig-zag */
.sf-home [aria-labelledby="home-decks"] { --shelf-w: 205px; }
.sf-home .sf-home-decks .product-card:nth-child(even) { padding-top: 0; }
@media (max-width: 680px) {
  .sf-home :is([aria-labelledby="home-gacha"], [aria-labelledby="home-packs"], [aria-labelledby="hot-auctions"],
    [aria-labelledby="best-sellers"], [aria-labelledby="open-buybacks"], [aria-labelledby="home-decks"]) .sf-shelf { gap: 10px; }
  .sf-home [aria-labelledby="home-decks"] { --shelf-w: 160px; }
  .sf-home [aria-labelledby="home-gacha"] { --shelf-w: 230px; }
  .sf-home [aria-labelledby="home-packs"] { --shelf-w: 200px; }
  .sf-home [aria-labelledby="hot-auctions"] { --shelf-w: 175px; }
  .sf-home [aria-labelledby="best-sellers"] { --shelf-w: 150px; }
  .sf-home [aria-labelledby="open-buybacks"] { --shelf-w: 170px; }
}

/* Home "เข้าใหม่ล่าสุด" — a denser grid than /market (owner 2026-09-27): the
   prototype's product-grid is 4 per row with a 290–325px art box, far too big
   for a teaser of 12. Scoped to #collection, so /market keeps its own grid. */
.sf-home #collection .product-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 22px 14px; }
@media (max-width: 1279px) { .sf-home #collection .product-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 1023px) { .sf-home #collection .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 767px) { .sf-home #collection .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 10px; } }
@media (max-width: 560px) { .sf-home #collection .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sf-home #collection .product-card:nth-child(even) { padding-top: 16px; }
.sf-home #collection .product-image { height: auto; aspect-ratio: 5 / 6; }
.sf-home #collection .product-image > a:first-child { display: grid; place-items: center; width: 100%; height: 100%; }
.sf-home #collection .product-image > a:first-child img { width: 60%; height: auto; }
.sf-home #collection .product-image::before { bottom: 12%; height: 24px; }
.sf-home #collection .product-body { padding: 12px 12px 14px; }
.sf-home #collection .product-meta { font-size: 10px; letter-spacing: .4px; }
.sf-home #collection .product-meta span:last-child { font-size: 10px; }
.sf-home #collection .product-name { font-size: 15px; line-height: 1.4; margin: 6px 0 2px; min-height: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sf-home #collection .product-code { font-size: 11px; }
.sf-home #collection .product-bottom { margin-top: 10px; padding-top: 10px; gap: 8px; }
.sf-home #collection .product-price { font-size: 18px; }
.sf-home #collection .add-cart { width: 100%; height: 36px; justify-content: center; }
@media (max-width: 560px) {
  .sf-home #collection .product-body { padding: 10px 10px 12px; }
  .sf-home #collection .product-name { font-size: 13px; }
  .sf-home #collection .product-price { font-size: 16px; }
  .sf-home #collection .add-cart { height: 34px; }
}

/* Contact banner picture (owner 2026-10-06: the faint "LINE" word "มองไม่เห็นเลยว่าอะไร … ควรมี icon
   ไหม"): a chat app icon with the shop badge, a card question bubble and the shop typing back — what
   "ถามสต็อก ถามราคา / ร้านตอบในแชท" means at a glance. Sized in --u (1px at full size) so it steps down
   with the heading; hidden ≤900px where the banner stacks. Hovering the banner: the icon lifts, the
   question pops, the dots type. LINE green when a LINE id is set (.is-line). */
.sf-home .sf-contact-art {
  --u: 1px;
  --ca-a: var(--v2-accent);
  --ca-b: #b56bff;
  --ca-c: #ff2e88;
  position: absolute;
  right: 0;
  top: calc(50% - 30px);
  width: calc(var(--u) * 400);
  height: calc(var(--u) * 300);
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 0;
}
.sf-home .sf-contact-art.is-line { --ca-a: #06c755; --ca-b: #3ee08a; --ca-c: #06c755; }
.sf-home .collector-banner > :not(.sf-contact-art) { position: relative; z-index: 1; }
.sf-home .sf-contact-app {
  position: absolute;
  right: calc(var(--u) * 30);
  top: calc(var(--u) * 56);
  display: grid;
  place-items: center;
  width: calc(var(--u) * 176);
  height: calc(var(--u) * 176);
  border: calc(var(--u) * 2) solid transparent;
  border-radius: calc(var(--u) * 44);
  background: linear-gradient(150deg, #1d1446, #0d0a20) padding-box,
              linear-gradient(135deg, var(--ca-a), var(--ca-b) 55%, var(--ca-c)) border-box;
  box-shadow: 0 0 calc(var(--u) * 70) color-mix(in srgb, var(--ca-a) 28%, transparent), 0 calc(var(--u) * 30) calc(var(--u) * 60) #0009;
  transition: transform .35s cubic-bezier(.3, .7, .3, 1);
}
.sf-home .sf-contact-app > .icon {
  width: calc(var(--u) * 100);
  height: calc(var(--u) * 100);
  color: var(--ca-a);
  stroke-width: 1.4;
  filter: drop-shadow(0 0 calc(var(--u) * 14) color-mix(in srgb, var(--ca-a) 60%, transparent));
}
.sf-home .sf-contact-badge {
  position: absolute;
  right: calc(var(--u) * -14);
  bottom: calc(var(--u) * -14);
  display: grid;
  place-items: center;
  width: calc(var(--u) * 64);
  height: calc(var(--u) * 64);
  border: calc(var(--u) * 5) solid var(--v2-bg, #0c0a1c);
  border-radius: 50%;
  background: var(--ca-c);
  color: #fff;
}
.sf-home .sf-contact-badge .icon { width: calc(var(--u) * 30); height: calc(var(--u) * 30); stroke-width: 1.8; }
/* the customer's question: a card + "?" */
.sf-home .sf-contact-ask {
  position: absolute;
  left: calc(var(--u) * 62);
  top: calc(var(--u) * 18);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 6);
  padding: calc(var(--u) * 14) calc(var(--u) * 20);
  border: 1px solid #ffffff2e;
  border-radius: calc(var(--u) * 24) calc(var(--u) * 24) calc(var(--u) * 6) calc(var(--u) * 24);
  background: #ffffff10;
  color: #fff;
  rotate: -4deg;
  transition: transform .3s cubic-bezier(.3, .7, .3, 1);
}
.sf-home .sf-contact-ask .icon { width: calc(var(--u) * 38); height: calc(var(--u) * 38); stroke-width: 1.6; }
.sf-home .sf-contact-ask b { font: 900 calc(var(--u) * 34)/1 var(--v2-display); color: #ffd48e; }
/* the shop typing back */
.sf-home .sf-contact-reply {
  position: absolute;
  left: calc(var(--u) * 84);
  bottom: calc(var(--u) * 44);
  display: flex;
  gap: calc(var(--u) * 8);
  padding: calc(var(--u) * 16) calc(var(--u) * 20);
  border: 1px solid color-mix(in srgb, var(--ca-a) 45%, transparent);
  border-radius: calc(var(--u) * 24) calc(var(--u) * 24) calc(var(--u) * 24) calc(var(--u) * 6);
  background: color-mix(in srgb, var(--ca-a) 12%, transparent);
  rotate: 3deg;
}
.sf-home .sf-contact-reply i { width: calc(var(--u) * 11); height: calc(var(--u) * 11); border-radius: 50%; background: var(--ca-a); opacity: .85; }
@media (hover: hover) and (pointer: fine) {
  .sf-home .collector-banner:hover .sf-contact-app { transform: translateY(calc(var(--u) * -8)) rotate(-3deg); }
  .sf-home .collector-banner:hover .sf-contact-ask { transform: translateY(calc(var(--u) * -4)) scale(1.06); }
  .sf-home .collector-banner:hover .sf-contact-reply i { animation: sf-contact-type 1s ease-in-out infinite; }
  .sf-home .collector-banner:hover .sf-contact-reply i:nth-child(2) { animation-delay: .15s; }
  .sf-home .collector-banner:hover .sf-contact-reply i:nth-child(3) { animation-delay: .3s; }
}
@keyframes sf-contact-type {
  0%, 60%, 100% { transform: none; opacity: .55; }
  30% { transform: translateY(calc(var(--u) * -7)); opacity: 1; }
}
@media (min-width: 1600px) { .sf-home .sf-contact-art { --u: 1.2px; } }
@media (max-width: 1299px) { .sf-home .sf-contact-art { --u: .8px; } }
@media (max-width: 1100px) { .sf-home .sf-contact-art { --u: .64px; } }
@media (max-width: 900px) { .sf-home .sf-contact-art { display: none; } }
.effects-off .sf-home .sf-contact-art * { transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) { .sf-home .sf-contact-art * { transition: none !important; animation: none !important; } }