/* Gallian homepage — mobile/tablet banner + touch performance (2026-10-19).
   Pairs with js/hero-lite.js. Loaded on the homepage only. */

/* static banner: one screen tall, no WebGL, no scroll pinning */
.gh-lite #gallian-hero { display: block; position: relative; background: #050607; color: #f2f4ee; }
.gl-root { position: relative; min-height: min(86svh, 760px); display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; isolation: isolate;
  background: radial-gradient(70% 55% at 50% 34%, rgba(70,86,110,.34), transparent 70%), linear-gradient(180deg, #07090b, #050607 62%, #030404); }
.gl-stage { position: absolute; inset: 8px 0 44% 0; display: flex; align-items: center; justify-content: center; z-index: 0; }
.gl-stage img { width: auto; height: 100%; max-width: 92%; min-height: 0; object-fit: contain; filter: drop-shadow(0 26px 36px rgba(0,0,0,.6));
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 96%); mask-image: linear-gradient(180deg, #000 60%, transparent 96%); }
.gl-copy { position: relative; z-index: 1; padding: 0 18px calc(26px + env(safe-area-inset-bottom, 0px)); }
.gl-copy .gh-eye { display: block; font: 700 11px var(--cond, "Barlow Condensed", sans-serif); letter-spacing: .22em; text-transform: uppercase; color: var(--volt, #c8ff00); margin-bottom: 8px; }
.gl-copy .gh-h { font: 800 clamp(36px, 10.5vw, 60px)/.9 var(--display, "Big Shoulders Display", Impact, sans-serif); text-transform: uppercase; margin: 0; }
.gl-copy .gh-h em { display: block; font-style: normal; color: var(--volt, #c8ff00); }
.gl-copy .gh-sub { display: block; font: 400 15px/1.5 var(--body, "Barlow", system-ui, sans-serif); color: #fff; margin: 12px 0 0; max-width: 40ch; }
.gl-copy .gh-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.gl-copy .gh-btn { display: inline-block; flex: 1 1 auto; text-align: center; padding: 14px 16px; font: 700 14px var(--cond, "Barlow Condensed", sans-serif); letter-spacing: .12em;
  text-transform: uppercase; text-decoration: none; color: #050607; background: var(--volt, #c8ff00); transform: skew(-8deg); }
.gl-copy .gh-btn.ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px #fff; }
@media (min-width: 700px) {
  .gl-root { justify-content: center; min-height: min(80svh, 820px); }
  .gl-stage { inset: 0 0 0 42%; }
  .gl-copy { width: 52%; padding: 40px 0 40px 40px; }
}

/* touch screens: drop the desktop-only card layers (tilt/cursor light never run there)
   so dozens of tiles are not each promoted to their own GPU layer while scrolling */
@media (hover: none), (pointer: coarse) {
  html.gsm .sport-tile, html.gsm .grid-cards .card, html.gsm .promo-strip .card { will-change: auto; transform-style: flat; }
  html.gsm .sport-tile::before, html.gsm .grid-cards .card::before, html.gsm .promo-strip .card::before { display: none; }
  html.gsm header.site.gsm-scrolled { -webkit-backdrop-filter: none; backdrop-filter: none; background-color: rgba(7,8,7,.96); }
}