/* Home page: partner logo wall and scroll parallax (developer D). */

/* ---------- Partner logo wall ---------- */
.partner-wall { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; }
.pw-item { position: relative; min-width: 0; }
.pw-tile {
    position: relative; display: grid; place-items: center; height: 108px; padding: 18px 22px;
    border-radius: var(--radius-sm); background: #fff; border: 1px solid var(--line);
    transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s, border-color .35s;
    outline: none; color: inherit;
}
.pw-tile img { max-height: 60px; max-width: 100%; width: auto; object-fit: contain; filter: grayscale(1) contrast(.9); opacity: .62; transition: filter .4s, opacity .4s, transform .4s; }
.pw-name { font-weight: 700; color: var(--muted); text-align: center; line-height: 1.25; transition: color .3s; }
.pw-tile:hover, .pw-tile:focus-visible, .pw-item.has-desc .pw-tile:focus { transform: translateY(-4px); border-color: rgba(94, 159, 31, .35); box-shadow: 0 18px 40px -22px rgba(15, 23, 42, .35); }
.pw-tile:hover img, .pw-tile:focus img, .pw-tile:focus-visible img { filter: none; opacity: 1; transform: scale(1.04); }
.pw-tile:hover .pw-name, .pw-tile:focus .pw-name { color: var(--text); }
.pw-tile:focus-visible { box-shadow: 0 0 0 3px rgba(94, 159, 31, .35); }

/* description card (tooltip) */
.pw-desc {
    position: absolute; left: 50%; bottom: calc(100% + 12px); z-index: 5; width: min(280px, 86vw);
    transform: translate(-50%, 6px); opacity: 0; visibility: hidden; pointer-events: none;
    background: #0f172a; color: #e2e8f0; border-radius: 12px; padding: 12px 14px; font-size: 13.5px; line-height: 1.5; text-align: left;
    box-shadow: 0 18px 40px -16px rgba(15, 23, 42, .55); transition: opacity .25s, transform .25s, visibility .25s;
}
.pw-desc::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -7px; border: 7px solid transparent; border-top-color: #0f172a; }
.pw-desc b { display: block; color: #fff; margin-bottom: 2px; font-size: 14px; }
.pw-visit { display: inline-flex; align-items: center; gap: 4px; color: #a3e05f; font-weight: 600; margin-top: 6px; }
.pw-tile:hover .pw-desc, .pw-tile:focus .pw-desc, .pw-tile:focus-within .pw-desc { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
/* small marker that a tile has a story */
.pw-item.has-desc .pw-tile::after { content: ""; position: absolute; top: 10px; right: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); opacity: .55; transition: opacity .3s; }
.pw-item.has-desc .pw-tile:hover::after, .pw-item.has-desc .pw-tile:focus::after { opacity: 0; }
/* tooltips at the screen edges: keep them inside the viewport on narrow screens */
@media (max-width: 560px) {
    .partner-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .pw-tile { height: 92px; padding: 14px; }
    .pw-tile img { max-height: 50px; }
    .pw-item:nth-child(odd) .pw-desc { left: 0; transform: translate(0, 6px); }
    .pw-item:nth-child(even) .pw-desc { left: auto; right: 0; transform: translate(0, 6px); }
    .pw-item:nth-child(odd) .pw-tile:hover .pw-desc, .pw-item:nth-child(odd) .pw-tile:focus .pw-desc,
    .pw-item:nth-child(even) .pw-tile:hover .pw-desc, .pw-item:nth-child(even) .pw-tile:focus .pw-desc { transform: translate(0, 0); }
    .pw-item:nth-child(odd) .pw-desc::after { left: 40px; }
    .pw-item:nth-child(even) .pw-desc::after { left: auto; right: 33px; }
}
@media (hover: none) { .pw-tile img { filter: grayscale(.35); opacity: .9; } }

/* ---------- Scroll parallax (public/assets/js/parallax.js) ----------
   The script only sets the custom properties --py (px offset) and --pv (0…1) on [data-px] elements, once per
   animation frame. The individual `translate` property is used (not `transform`), so it composes with the
   existing float/bob keyframe animations and the .reveal transitions. Only translate/opacity change →
   no layout shift; vertical only → no horizontal overflow. */
.px-on [data-px] { translate: 0 var(--py, 0px); will-change: translate; }
.px-on .hero-inner > [data-px] { opacity: var(--pv, 1); }
.px-on .cta[data-px] { scale: calc(.975 + .025 * var(--pv, 1)); }

/* sections slide/fade in once when they enter the viewport */
.px-on .px-section { opacity: 0; translate: 0 40px; transition: opacity .9s cubic-bezier(.2, .7, .2, 1), translate .9s cubic-bezier(.2, .7, .2, 1); }
.px-on .px-section.px-in { opacity: 1; translate: 0 0; }

@media (prefers-reduced-motion: reduce) {
    .px-on [data-px], .px-on .px-section { translate: none !important; scale: none !important; opacity: 1 !important; transition: none !important; }
    .pw-tile, .pw-tile img, .pw-desc { transition: none; }
}