/* GPLGuide HOME 2: brand showcase v2 styling. Layers on top of the .brand-* rules in home2.css. */

/* Stage: warm centre glow, faint dot texture, wider soft edges. */
.gplguide-home2 .brand-stage{padding:28px 0;background:radial-gradient(ellipse 70% 90% at 50% 50%,#fff0eb 0%,#fff8f5 45%,var(--bg) 80%)}
.gplguide-home2 .brand-stage::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(#e8d6ce 1px,transparent 1px);background-size:20px 20px;-webkit-mask-image:radial-gradient(ellipse 60% 70% at 50% 50%,#000,transparent 75%);mask-image:radial-gradient(ellipse 60% 70% at 50% 50%,#000,transparent 75%);opacity:.7}
.gplguide-home2 .brand-showcase.is-ready .brand-stage{-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.gplguide-home2 .brand-lane{position:relative}

/* Tiles: soft gradient card, logo chip, bolder name. */
.gplguide-home2 .brand-tile{position:relative;overflow:hidden;isolation:isolate;gap:16px;border-radius:20px;border-color:#f1e4de;background:linear-gradient(140deg,#fff 45%,#fff8f5);font-weight:600;font-size:15px;letter-spacing:-.2px;color:var(--ink);box-shadow:0 1px 2px #17120f05,0 6px 18px #17120f06;transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s cubic-bezier(.22,1,.36,1),border-color .3s ease}
.gplguide-home2 .brand-logo{flex:0 0 62px;width:62px;height:62px;border-radius:17px;background:#fff;border:1px solid #f4ebe7;box-shadow:inset 0 1px 0 #fff,0 4px 12px #17120f08;transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s ease}
.gplguide-home2 .brand-logo img{width:44px;height:44px;border-radius:9px}
/* Light shine that sweeps across a tile on hover. */
.gplguide-home2 .brand-tile::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(105deg,transparent 35%,#ffffffcc 50%,transparent 65%);transform:translateX(-110%);transition:transform .9s cubic-bezier(.22,1,.36,1)}
@media(hover:hover){
.gplguide-home2 .brand-tile:hover,.gplguide-home2 .lane-2 .brand-tile:hover{transform:translateY(-6px);border-color:#ffc2aa;box-shadow:0 18px 36px #a94a2117,0 3px 8px #17120f08}
.gplguide-home2 .brand-tile:hover::after{transform:translateX(110%)}
.gplguide-home2 .brand-tile:hover .brand-logo{transform:scale(1.07) rotate(-4deg);box-shadow:0 10px 22px #ff673324}
}

/* Pause button: match the site's pill buttons. */
.gplguide-home2 .brand-pause{gap:8px;padding:9px 16px;font-size:12px;font-weight:500;border-color:#f1e4de;box-shadow:0 4px 12px #17120f08;transition:transform .2s,background .2s,border-color .2s}
.gplguide-home2 .brand-pause:hover{background:#fff0eb;border-color:#ffc2aa}
.gplguide-home2 .brand-pause .pause-icon{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--accent);color:#fff;font-size:8px}

/* Entrance: rows slide in from opposite sides once the section is in view (class set by brands-v2.js). */
.gplguide-home2 .brand-showcase.will-enter .brand-lane{opacity:0}
.gplguide-home2 .brand-showcase.will-enter .lane-1{translate:80px 0}
.gplguide-home2 .brand-showcase.will-enter .lane-2{translate:-80px 0}
.gplguide-home2 .brand-showcase.will-enter.is-entered .brand-lane{opacity:1;translate:0 0;transition:opacity .9s ease,translate 1.1s cubic-bezier(.22,1,.36,1)}
.gplguide-home2 .brand-showcase.will-enter.is-entered .lane-2{transition-delay:.12s}

/* Smooth hover slow-down is handled in JS, so the CSS hard pause on hover is switched off. */
.gplguide-home2 .brand-showcase.has-smooth:not(.is-paused):not(.is-offscreen) .brand-lane:hover .brand-track{animation-play-state:running}

@media(max-width:600px){
.gplguide-home2 .brand-stage{padding:20px 0}
.gplguide-home2 .brand-logo{flex-basis:48px;width:48px;height:48px;border-radius:14px}
.gplguide-home2 .brand-logo img{width:34px;height:34px}
.gplguide-home2 .brand-tile{font-size:13px;gap:12px}
.gplguide-home2 .brand-showcase.will-enter .lane-1{translate:40px 0}
.gplguide-home2 .brand-showcase.will-enter .lane-2{translate:-40px 0}
}
@media(prefers-reduced-motion:reduce){
.gplguide-home2 .brand-tile,.gplguide-home2 .brand-logo,.gplguide-home2 .brand-tile::after{transition:none}
.gplguide-home2 .brand-tile:hover,.gplguide-home2 .brand-tile:hover .brand-logo{transform:none}
.gplguide-home2 .brand-showcase.will-enter .brand-lane{opacity:1;translate:none}
}