/* Home hero — inspect a card (pkg-hero-peek.js; markup .sf-peek in home.blade,
   body/foot from cv.cards.peek). The clicked card flies to the left, a glass
   panel opens beside it. Desktop: the stage covers the whole hero row (the
   headline fades out); ≤900px the script lays it over the gallery only.
   Every entrance keyframe is from-only, so with effects off / reduced motion
   (animation: none) each part simply shows in its final state. */

/* ---- the hero while a card is inspected ---- */
[data-hero-showcase] .hero-gallery-toolbar,
[data-hero-showcase] .card-fan,
[data-hero-showcase] .hero-card-caption { transition: opacity .4s ease, filter .4s ease; }
[data-hero-showcase][data-hero-peek-open] .hero-gallery-toolbar,
[data-hero-showcase][data-hero-peek-open] .card-fan,
[data-hero-showcase][data-hero-peek-open] .hero-card-caption { opacity: 0; filter: blur(4px); pointer-events: none; }
[data-hero-showcase] .sf-peek-src { visibility: hidden !important; }
@media (min-width: 901px) {
  [data-hero-showcase] .hero-copy { transition: opacity .45s ease, filter .45s ease; }
  /* Faded through filter, not opacity: the scroll parallax (playful.css) animates
     .hero-copy's opacity, and an animated property takes no transition. */
  [data-hero-showcase][data-hero-peek-open] .hero-copy { filter: blur(8px) opacity(0); pointer-events: none; }
}
@media (hover: hover) and (pointer: fine) {
  [data-hero-showcase] .fan-slab, [data-hero-showcase] .hero-slab { cursor: zoom-in; }
}

/* ---- stage ---- */
.sf-peek {
  position: absolute; inset: 0; z-index: 6;
  container-type: size;
}
.sf-peek[hidden] { display: none; }
.sf-peek-backdrop { position: absolute; inset: 0; cursor: zoom-out; }
.sf-peek-grid {
  position: absolute; top: clamp(12px, 3.5cqh, 30px); bottom: clamp(12px, 3.5cqh, 30px);
  left: 0; right: 0; margin-inline: auto; width: min(100%, 1280px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  column-gap: clamp(20px, 3.5cqw, 64px);
  pointer-events: none;
}
/* The slot has the hero slab's own proportions (274 × 442: header, art window, footer). */
.sf-peek-slot {
  grid-column: 1; grid-row: 1 / -1; align-self: center; justify-self: center;
  width: min(100%, 440px, calc((100cqh - 70px) * .62));
  aspect-ratio: 274 / 442;
}

/* ---- panel: frame + head + body + foot share column 2 ---- */
.sf-peek-frame {
  grid-column: 2; grid-row: 1 / -1; position: relative; z-index: 0;
  pointer-events: auto;
  background: linear-gradient(155deg, #1f1236f2, #0c0619f7 55%, #150a26f2);
  border: 1px solid #00f0ff38;
  clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px);
  backdrop-filter: blur(16px);
  overflow: hidden;
}
.sf-peek-frame::before {
  content: ''; position: absolute; left: 22px; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, var(--v2-accent), transparent 55%, var(--v2-pink));
}
.sf-peek-frame::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 60% at 100% 0, #00f0ff14, transparent 60%), radial-gradient(90% 50% at 0 100%, #ff006e12, transparent 60%);
}
.sf-peek-frame i { position: absolute; width: 18px; height: 18px; border: 2px solid var(--v2-accent); opacity: .85; }
.sf-peek-frame i:nth-child(1) { top: 7px; right: 7px; border-left: 0; border-bottom: 0; }
.sf-peek-frame i:nth-child(2) { bottom: 7px; left: 7px; border-right: 0; border-top: 0; border-color: var(--v2-pink); }
.sf-peek-frame i:nth-child(3),
.sf-peek-frame i:nth-child(4) { width: 31px; height: 2px; border: 0; background: var(--v2-accent); box-shadow: 0 0 10px var(--v2-accent); }
.sf-peek-frame i:nth-child(3) { top: 10px; left: -4px; transform: rotate(-45deg); }
.sf-peek-frame i:nth-child(4) { bottom: 10px; right: -4px; transform: rotate(-45deg); background: var(--v2-pink); box-shadow: 0 0 10px var(--v2-pink); }
.sf-peek-scan {
  position: absolute; left: 0; right: 0; top: -70px; height: 70px; opacity: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent, #00f0ff14 60%, #00f0ff70 97%, #e6ffff 99%, transparent);
}

.sf-peek-head, .sf-peek-body, .sf-peek-foot { grid-column: 2; position: relative; z-index: 1; pointer-events: auto; min-width: 0; }
.sf-peek-head {
  grid-row: 1;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px;
  padding: 24px 26px 14px 30px;
}
.sf-peek-title { display: grid; gap: 5px; min-width: 0; }
.sf-peek-title .sf-kicker { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-peek-title .sf-peek-kick { display: flex; align-items: center; gap: 7px; }
.sf-peek-kick > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-peek-kick .sf-hero-flag { height: 12px; }
.sf-peek-title h3 {
  margin: 0; font: 700 clamp(19px, 2.2cqw, 30px)/1.2 var(--v2-display); color: #fff;
  text-shadow: 0 0 26px #00f0ff45; overflow-wrap: anywhere;
}
.sf-peek-set { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12px; color: var(--v2-muted); }
.sf-peek-set:empty { display: none; }
.sf-peek-set .sf-tag { font-size: 10px; }
.sf-peek-close {
  width: 40px; min-width: 40px; height: 40px; min-height: 40px; padding: 0;
  border: 1px solid #00f0ff45; border-radius: 0; color: #fff; background: #0a0014b3;
}
.sf-peek-close .icon { width: 18px; height: 18px; }
.sf-peek-close:hover { color: var(--v2-accent); background: #00f0ff14; }
.sf-peek-close:focus-visible { outline: 2px solid var(--v2-pink); outline-offset: 2px; }
.sf-peek-ref {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  padding-top: 12px; border-top: 1px solid #ffffff14;
}
.sf-peek-ref small { font-size: 11px; color: var(--v2-muted); }
.sf-peek-ref b {
  font: 700 clamp(22px, 2.5cqw, 34px)/1 var(--v2-display); color: var(--v2-accent);
  text-shadow: 0 0 20px #00f0ff70; font-variant-numeric: tabular-nums;
}
.sf-peek-ref:has(b:empty) { display: none; }

.sf-peek-body {
  grid-row: 2; min-height: 0; overflow: auto; overscroll-behavior: contain;
  padding: 6px 26px 14px 30px;
  scrollbar-width: thin; scrollbar-color: #00f0ff4d transparent;
  mask-image: linear-gradient(#000 calc(100% - 14px), transparent);
}
.sf-peek-foot {
  grid-row: 3; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  margin: 0 26px 0 30px; padding: 14px 0 22px; border-top: 1px solid #ffffff14;
}
.sf-peek-foot:empty { display: none; }
.sf-peek-shops { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--v2-muted); }
.sf-peek-shops .icon { width: 16px; height: 16px; color: var(--v2-accent); }
.sf-peek-shops b { color: var(--v2-text); }
.sf-peek-go { white-space: nowrap; }

/* ---- body sections ---- */
.sf-peek-sec + .sf-peek-sec { margin-top: 18px; padding-top: 16px; border-top: 1px dashed #ffffff1c; }
.sf-peek-h {
  display: flex; align-items: center; gap: 8px; margin: 0 0 12px;
  font: 700 11px/1.4 var(--v2-mono); letter-spacing: 1.5px; text-transform: uppercase; color: var(--v2-accent);
}
.sf-peek-h .icon { width: 15px; height: 15px; }
.sf-peek-h small { margin-left: auto; font: 400 10px var(--v2-mono); letter-spacing: .5px; text-transform: none; color: var(--v2-muted); }
.sf-peek-note { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 11px; color: var(--v2-muted); }
.sf-peek-note .icon { width: 14px; height: 14px; flex: none; }

/* one row per price source: name · native price · ≈ ฿ (counted up) · bar */
.sf-peek-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.sf-peek-rows li > a,
.sf-peek-rows li > div {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto 14px; align-items: center; gap: 4px 14px;
  padding: 10px 12px 14px; color: inherit; text-decoration: none;
  background: #ffffff07; border: 1px solid #ffffff14;
  transition: border-color .2s, background-color .2s, translate .2s;
}
.sf-peek-rows li > a:hover,
.sf-peek-rows li > a:focus-visible { border-color: var(--c); background: #ffffff0f; translate: 3px 0; }
.sf-peek-site { display: flex; align-items: center; gap: 9px; min-width: 0; font-size: 13px; color: var(--v2-text); }
.sf-peek-site i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
.sf-peek-site { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-peek-native { font: 12px var(--v2-mono); color: var(--v2-muted); white-space: nowrap; }
.sf-peek-thb { min-width: 9ch; text-align: right; font: 700 15px var(--v2-mono); color: var(--sf-price, #fff); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sf-peek-out { width: 13px; height: 13px; color: var(--v2-muted); }
.sf-peek-bar { position: absolute; left: 12px; right: 12px; bottom: 5px; height: 3px; background: #ffffff10; overflow: hidden; }
.sf-peek-bar i {
  position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(var(--share, 0));
  background: linear-gradient(90deg, var(--c), #00f0ff); box-shadow: 0 0 8px var(--c);
}

/* loading */
.sf-peek-skel { display: grid; gap: 10px; padding-top: 4px; }
.sf-peek-skel i, .sf-peek-skel b {
  display: block; height: 12px;
  background: linear-gradient(90deg, #ffffff0a 30%, #ffffff1f 50%, #ffffff0a 70%) 0 0 / 200% 100%;
  animation: sf-peek-shimmer 1.2s linear infinite;
}
.sf-peek-skel i:nth-child(2) { width: 88%; }
.sf-peek-skel i:nth-child(3) { width: 62%; margin-bottom: 8px; }
.sf-peek-skel b { height: 38px; }

/* ---- the card that flew in ---- */
.sf-peek-card { position: absolute; z-index: 3; transform-origin: 50% 50%; cursor: zoom-out; }
.sf-peek-card::before {
  content: ''; position: absolute; inset: -16%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, #00f0ff45, #ff006e24 62%, transparent);
  filter: blur(26px); opacity: 0; transition: opacity .8s;
}
.sf-peek-card.is-landed::before { opacity: 1; }
/* The case is the hero slab scaled up (owner 2026-09-28: the frame vanished on the way to
   the left): every size is the slab's px ÷ 274 (its width) in cqw of the card, so the FLIP
   from the centre slab lands header on header; ::before = the lit rim the slab shows on
   hover. */
.sf-peek-card { container-type: inline-size; }
.sf-peek-card-in {
  position: relative; display: flex; flex-direction: column; width: 100%; height: 100%;
  padding: 4.38cqw 4.01cqw 2.55cqw;
  border: 1px solid #f3deff70; border-top-color: #ffffffb3; border-left-color: #ccffffa6; border-radius: 4.74cqw;
  background: linear-gradient(145deg, #c8e1ff38, #cab4ff0d 40%, #f4c1ed1f);
  box-shadow: inset 2px 2px 3px #ffffff26, 0 30px 70px #000c, 6px 0 26px #ff006e24, -6px 0 26px #00ffff2b;
  backdrop-filter: blur(12px);
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .25s ease-out;
}
.sf-peek-card-in::before {
  content: ''; position: absolute; inset: -2px; z-index: 5; padding: 2px; border-radius: inherit; pointer-events: none;
  background: linear-gradient(120deg, #7df9ff 0%, #00e5ff 22%, #00ffff 36%, #fff 45%, #ff006e 55%, #b47cff 72%, #7df9ff 100%);
  background-size: 250% 250%;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: .85; animation: sf-hero-rim 2.6s ease-in-out infinite;
}
.sf-peek-slab-top,
.sf-peek-slab-bottom {
  display: flex; flex: none; align-items: center; justify-content: space-between; min-width: 0;
  font-family: var(--v2-mono); text-transform: uppercase; color: #efe8f7; letter-spacing: .44cqw; line-height: 1.25;
}
.sf-peek-slab-top { height: 16.79cqw; gap: 3.65cqw; padding: 0 .73cqw 3.28cqw; font-size: 4.01cqw; }
.sf-peek-card .sf-peek-slab-top .hero-slab-logo { width: 26.3cqw; font-size: 3.28cqw; }
.sf-peek-slab-heading { display: grid; gap: 1.1cqw; min-width: 0; text-align: right; }
.sf-peek-slab-heading > span,
.sf-peek-slab-heading [data-peek-card-label],
[data-peek-card-grade] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-peek-card .sf-peek-slab-heading .sf-hero-game { justify-content: flex-end; gap: 2.2cqw; letter-spacing: .08cqw; }   /* tighter than the slab, so the full game name fits at every size */
.sf-peek-card .sf-peek-slab-heading .sf-hero-flag { height: 4.01cqw; }
[data-peek-card-code] { font-size: 3.28cqw; letter-spacing: .11cqw; }
.sf-peek-win { position: relative; display: block; flex: 1 1 auto; min-height: 0; overflow: hidden; border: 1px solid #ffffff55; border-radius: 2.55cqw; }
.sf-peek-win img { display: block; width: 100%; height: 100%; object-fit: contain; }
.sf-peek-slab-bottom { height: 9.49cqw; gap: 2.9cqw; padding: 3.28cqw .73cqw .73cqw; font-size: 3.28cqw; }
.sf-peek-card .sf-peek-slab-bottom .slab-bars { flex: none; width: 13.1cqw; height: 3.65cqw; margin: 0; }
.sf-peek-shine {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background:
    radial-gradient(circle at var(--sx, 30%) var(--sy, 20%), #ffffff38, transparent 42%),
    linear-gradient(115deg, transparent 38%, #ffffff75 48%, #9dffff45 52%, transparent 62%);
  background-size: 100% 100%, 260% 100%; background-repeat: no-repeat;
  background-position: 0 0, 130% 0;
}
.sf-peek-ring {
  position: absolute; inset: -10px; border: 2px solid var(--v2-accent); border-radius: calc(4.74cqw + 10px); pointer-events: none;
  box-shadow: 0 0 24px #00f0ff90, inset 0 0 14px #00f0ff55; opacity: 0;
}

/* ---- motion ---- */
.sf-peek.is-open .sf-peek-frame { animation: sf-peek-in .6s cubic-bezier(.2,.8,.2,1) .14s both; }
.sf-peek.is-open .sf-peek-scan { animation: sf-peek-scan 1.15s ease-in .3s both; }
.sf-peek.is-open .sf-peek-title > *,
.sf-peek.is-open .sf-peek-ref { animation: sf-peek-row .5s cubic-bezier(.2,.8,.2,1) both; }
.sf-peek.is-open .sf-peek-title > :nth-child(1) { animation-delay: .26s; }
.sf-peek.is-open .sf-peek-title > :nth-child(2) { animation-delay: .32s; }
.sf-peek.is-open .sf-peek-title > :nth-child(3) { animation-delay: .38s; }
.sf-peek.is-open .sf-peek-ref { animation-delay: .44s; }
.sf-peek.is-open .sf-peek-close { animation: sf-peek-pop .4s cubic-bezier(.2,.8,.2,1) .4s both; }
.sf-peek.is-loaded .sf-peek-body > [style*="--i"] {
  animation: sf-peek-rise .55s cubic-bezier(.2,.8,.2,1) calc(var(--peek-base, 0ms) + var(--i) * 110ms) both;
}
.sf-peek.is-loaded .sf-peek-rows li {
  animation: sf-peek-row .5s cubic-bezier(.2,.8,.2,1) calc(var(--peek-base, 0ms) + 180ms + var(--r) * 75ms) both;
}
.sf-peek.is-loaded .sf-peek-bar i {
  animation: sf-peek-bar .9s cubic-bezier(.2,.8,.2,1) calc(var(--peek-base, 0ms) + 300ms + var(--r) * 75ms) both;
}
.sf-peek.is-loaded .sf-peek-foot { animation: sf-peek-rise .5s cubic-bezier(.2,.8,.2,1) calc(var(--peek-base, 0ms) + 260ms) both; }
/* the price chart (pkg-cards.css) draws its lines once its section has risen */
.sf-peek .sf-cards-chart-svg.is-intro .line { animation-delay: calc(var(--peek-base, 0ms) + 380ms); }
.sf-peek .sf-cards-chart-svg.is-intro :is(.area, .tail, .dot) { animation-delay: calc(var(--peek-base, 0ms) + 1100ms); }
.sf-peek-card.is-landed .sf-peek-shine { animation: sf-peek-sweep 1.2s ease-out both; }
.sf-peek-card.is-landed .sf-peek-ring { animation: sf-peek-ring .9s cubic-bezier(.2,.8,.2,1) both; }
.sf-peek-card.is-landed .sf-peek-card-in { animation: sf-peek-float 6.5s ease-in-out .9s infinite; }
.sf-peek.is-closing .sf-peek-grid { animation: sf-peek-out .24s ease-in both; }
.sf-peek.is-closing .sf-peek-card::before { opacity: 0; }

@keyframes sf-peek-in { from { opacity: 0; translate: 36px 0; filter: blur(8px); } }
@keyframes sf-peek-row { from { opacity: 0; translate: 20px 0; } }
@keyframes sf-peek-rise { from { opacity: 0; translate: 0 16px; } }
@keyframes sf-peek-pop { from { opacity: 0; scale: .6; } }
@keyframes sf-peek-bar { from { transform: scaleX(0); } }
@keyframes sf-peek-out { to { opacity: 0; translate: 28px 0; } }
@keyframes sf-peek-scan { from { top: -70px; opacity: 1; } to { top: 100%; opacity: 0; } }
@keyframes sf-peek-sweep { from { background-position: 0 0, 130% 0; } to { background-position: 0 0, -30% 0; } }
@keyframes sf-peek-ring { from { opacity: .95; scale: .93; } to { opacity: 0; scale: 1.12; } }
@keyframes sf-peek-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes sf-peek-shimmer { to { background-position: -200% 0; } }

/* ---- phones / narrow: over the gallery, card top-left with the head beside it ---- */
@media (max-width: 900px) {
  .sf-peek-grid {
    inset: 0; width: auto;
    grid-template-columns: minmax(0, 36fr) minmax(0, 64fr);
    column-gap: 0;
  }
  .sf-peek-frame { grid-column: 1 / -1; }
  .sf-peek-slot { grid-column: 1; grid-row: 1; align-self: start; width: auto; margin: 16px 0 12px 16px; justify-self: stretch; }
  .sf-peek-head { grid-column: 2; padding: 16px 14px 12px; gap: 6px 10px; }
  .sf-peek-title h3 { font-size: 17px; }
  .sf-peek-ref b { font-size: 21px; }
  .sf-peek-body { grid-column: 1 / -1; padding: 4px 16px 12px; }
  .sf-peek-foot { grid-column: 1 / -1; margin: 0 16px; padding: 12px 0 16px; }
  .sf-peek-go { flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 520px) {
  .sf-peek-rows li > a,
  .sf-peek-rows li > div { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; }
  .sf-peek-native { grid-column: 1; grid-row: 2; }
  .sf-peek-thb { grid-column: 2; grid-row: 1 / 3; }
  .sf-peek-out { display: none; }
  .sf-peek-close { width: 34px; min-width: 34px; height: 34px; min-height: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .sf-peek *, .sf-peek *::before, .sf-peek *::after { animation: none !important; transition: none !important; }
}

/* Site icon in place of the colour dot (owner 2026-09-28: "น่าจะมี icon logo website");
   its ring keeps the source's colour, so it still names the bar below it. A source with
   no icon file keeps the dot. */
.sf-peek-site .sf-src-logo { width: 20px; height: 20px; margin: 0; box-shadow: 0 0 0 1px var(--c), 0 0 10px color-mix(in srgb, var(--c) 55%, transparent); }