/**
 * trivia1.com home — rotating image·copy hero slider + in-flow join band +
 * content sections, on the standard layout (universal header/footer). Solid
 * brand surfaces, ZERO gradients. Home-only (linked via @push('styles')).
 * t1x- scoped; uses the app tokens in trivia-app.css.
 */
.t1x-home { width: 100%; }
[x-cloak] { display: none !important; }
.t1x-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ================= HERO SLIDER (image · copy per slide) ================= */
/* Hero fills the first screen below the header + join bar and centers its
   content; the image is capped (below) so the whole slide fits without the
   page scrolling. */
.t1x-hero { position: relative; background: #12122a; padding: 1.5rem 1.15rem; min-height: calc(100dvh - 168px); display: flex; flex-direction: column; justify-content: center; }
.t1x-hero-inner { position: relative; max-width: 1160px; margin: 0 auto; width: 100%; display: grid; }
.t1x-hslide { grid-area: 1 / 1; display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: center; }
.t1x-fade { animation: t1xFade .5s ease; }
@keyframes t1xFade { from { opacity: 0; } to { opacity: 1; } }
.t1x-hslide-media { order: -1; }
.t1x-hslide-media img, .t1x-hslide-media video { width: auto; max-width: 100%; max-height: 30vh; margin: 0 auto; display: block; border-radius: 1.25rem; border: 1px solid rgba(255,255,255,0.1); }
.t1x-hslide-copy { text-align: center; min-width: 0; }
.t1x-eyebrow { display: inline-flex; align-items: center; gap: .4rem; padding: 5px 13px; border-radius: 999px; background: rgba(99,102,241,.16); border: 1px solid rgba(99,102,241,.4); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: #c7d2fe; margin-bottom: .9rem; }
.t1x-live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,.6); animation: t1xPulse 2s infinite; }
@keyframes t1xPulse { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.55); } 70% { box-shadow: 0 0 0 7px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }
.t1x-hero-h { margin: 0; font-family: 'Poppins', sans-serif; font-weight: 800; line-height: 1.08; font-size: clamp(1.9rem, 5vw, 3.1rem); letter-spacing: -.01em; color: #fff; }
.t1x-grad { color: #c4b5fd; }
.t1x-hero-lead { margin: 1rem auto 0; max-width: 46ch; font-size: clamp(1rem, 2vw, 1.15rem); line-height: 1.55; color: rgba(255,255,255,.82); }
.t1x-hero-ctas { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.5rem; justify-content: center; }
.t1x-btn { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; font-size: 1rem; line-height: 1; padding: .8rem 1.3rem; border-radius: 11px; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: transform .12s, background .15s, border-color .15s; }
.t1x-btn:hover { transform: translateY(-1px); }
.t1x-btn-white { background: #fff; color: #312e81; }
.t1x-btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.3); }
.t1x-btn-outline:hover { border-color: rgba(255,255,255,.6); }

.t1x-arrows { position: absolute; z-index: 3; top: calc(50% - 20px); left: 0; width: 100%; display: flex; justify-content: space-between; pointer-events: none; padding: 0 .35rem; }
.t1x-arrows button { pointer-events: auto; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); color: #fff; cursor: pointer; display: none; align-items: center; justify-content: center; }
.t1x-arrows button:hover { background: rgba(255,255,255,.16); }
.t1x-dots { display: flex; gap: .5rem; justify-content: center; margin-top: 1.5rem; position: relative; z-index: 3; }
.t1x-dots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: rgba(255,255,255,.3); transition: width .25s, background .25s; }
.t1x-dots button.is-active { width: 26px; border-radius: 6px; background: #fff; }

@media (min-width: 900px) {
    .t1x-hero { padding: 2rem; min-height: calc(100dvh - 130px); }
    .t1x-hslide { grid-template-columns: 1fr 1fr; gap: 3rem; }
    .t1x-hslide-media { order: 0; }
    .t1x-hslide-media img, .t1x-hslide-media video { max-width: 100%; max-height: 58vh; }
    .t1x-hslide-copy { text-align: left; }
    .t1x-hero-lead { margin-left: 0; margin-right: 0; }
    .t1x-hero-ctas { justify-content: flex-start; }
    .t1x-arrows button { display: inline-flex; }
}

/* ================= JOIN BAND (in-flow) ================= */
/* Slim persistent join bar at the very top of the home page (under the header). */
.t1x-joinband { background: var(--bg-secondary, #1a1a35); border-bottom: 1px solid var(--border-color, #2a2a4a); padding: .55rem 1.15rem; }
.t1x-joinband-inner { max-width: 1160px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem .9rem; }
.t1x-joinband-label { font-weight: 700; font-size: .9rem; white-space: nowrap; }
.t1x-join-form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: center; margin: 0; }
.t1x-code-input { min-width: 0; width: 150px; font-family: 'Poppins', 'SF Mono', Menlo, monospace; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; text-align: center; font-size: 1rem; padding: .45rem .5rem; border-radius: 9px; border: 2px solid var(--border-color, #2a2a4a); background: var(--bg-primary, #0f0f23); color: #fff; }
.t1x-code-input::placeholder { color: rgba(255,255,255,.3); }
.t1x-code-input:focus { outline: none; border-color: var(--primary-color, #6366f1); }
.t1x-join-btn { background: var(--primary-color, #6366f1); color: #fff; border: 0; border-radius: 9px; font-weight: 800; font-size: .95rem; padding: .45rem 1rem; cursor: pointer; white-space: nowrap; }
.t1x-join-btn:hover { background: #5457e5; }
.t1x-join-error { flex-basis: 100%; margin: .1rem 0 0; color: #fca5a5; font-size: .82rem; text-align: center; }
.t1x-scan-btn { display: none; align-items: center; gap: .4rem; background: transparent; color: #a5b4fc; border: 1px solid rgba(99,102,241,.4); border-radius: 9px; font-weight: 700; font-size: .88rem; padding: .4rem .75rem; cursor: pointer; white-space: nowrap; }
.t1x-joinband.t1x-has-camera .t1x-scan-btn { display: inline-flex; }
.t1x-joinband-or { color: var(--text-tertiary, #808099); font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; }
.t1x-joinband-host { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; font-size: .9rem; color: #a5b4fc; text-decoration: none; white-space: nowrap; padding: .45rem .9rem; border: 1px solid rgba(99,102,241,.4); border-radius: 9px; }
.t1x-joinband-host:hover { background: rgba(99,102,241,.12); color: #c7d2fe; }
.t1x-resume { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .85rem; border-radius: 999px; text-decoration: none; background: rgba(34,197,94,.14); border: 1px solid rgba(34,197,94,.4); color: #dcfce7; font-weight: 600; font-size: .85rem; white-space: nowrap; }
.t1x-resume:hover { background: rgba(34,197,94,.22); }
.t1x-resume i:first-child { color: #4ade80; }

/* ================= CONTENT SECTIONS (solid surfaces) ================= */
.t1x-band { padding: 3.5rem 1.15rem; }
.t1x-band--alt { background: var(--bg-secondary, #1a1a35); border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06); }
/* Light band — contrast + easier long-form reading for the SEO/FAQ block. */
.t1x-band--light { background: #f6f7fb; color: #1f2333; border-top: 1px solid rgba(0,0,0,.06); border-bottom: 1px solid rgba(0,0,0,.06); }
.t1x-band--light .t1x-seo h2 { color: #14162b; }
.t1x-band--light .t1x-seo p { color: #3a3f52; }
.t1x-band--light .t1x-seo a { color: #4f46e5; }
.t1x-band--light .t1x-faq > h2 { color: #14162b; }
.t1x-band--light .t1x-faq-item { border: 1px solid #e3e4ee; background: #fff; }
.t1x-band--light .t1x-faq-item summary { color: #14162b; }
.t1x-band--light .t1x-faq-item summary::after { color: #14162b; opacity: .5; }
.t1x-band--light .t1x-faq-item p { color: #3a3f52; }
.t1x-band-inner { max-width: 1160px; margin: 0 auto; }
.t1x-sec-eyebrow { text-align: center; color: #a5b4fc; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; margin: 0; }
.t1x-sec-h { text-align: center; font-family: 'Poppins', sans-serif; font-weight: 800; font-size: clamp(1.5rem, 4vw, 2.1rem); margin: .4rem auto 0; max-width: 22ch; }
.t1x-steps { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 2.2rem; }
.t1x-step { background: var(--bg-tertiary, #2d2d50); border: 1px solid rgba(255,255,255,.14); border-radius: 16px; padding: 1.4rem; }
.t1x-step-n { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 2rem; color: #818cf8; line-height: 1; }
.t1x-step h3 { margin: .7rem 0 .35rem; font-size: 1.1rem; }
.t1x-step p { margin: 0; color: rgba(255,255,255,.72); font-size: .95rem; }
.t1x-features { display: grid; grid-template-columns: 1fr; gap: .9rem; margin-top: 2.2rem; }
.t1x-fcard { background: var(--bg-tertiary, #2d2d50); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; padding: 1.2rem; transition: transform .18s, border-color .18s; }
.t1x-fcard:hover { transform: translateY(-2px); border-color: rgba(129,140,248,.5); }
.t1x-fcard-ic { width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; margin-bottom: .7rem; background: rgba(99,102,241,.22); color: #a5b4fc; }
.t1x-fcard-ic--gold { background: rgba(251,191,36,.2); color: #fcd34d; }
.t1x-fcard-ic--green { background: rgba(16,185,129,.2); color: #6ee7b7; }
.t1x-fcard-ic--pink { background: rgba(236,72,153,.2); color: #f9a8d4; }
.t1x-fcard h3 { margin: 0 0 .3rem; font-size: 1.02rem; }
.t1x-fcard p { margin: 0; color: rgba(255,255,255,.72); font-size: .9rem; }
.t1x-seofaq { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
.t1x-seo { line-height: 1.65; max-width: 40rem; }
.t1x-seo-img { width: 100%; border-radius: 14px; border: 1px solid #e3e4ee; box-shadow: 0 14px 34px -18px rgba(0,0,0,.4); display: block; margin-bottom: 1.25rem; }
/* Still→motion reveal: the image sits in flow and sizes the box; the video is
   layered on top and fades in after a beat (both are square, object-fit covers). */
.t1x-seo-media { position: relative; margin-bottom: 1.25rem; }
.t1x-seo-media .t1x-seo-img { margin-bottom: 0; }
.t1x-seo-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 14px; border: 1px solid #e3e4ee; box-shadow: 0 14px 34px -18px rgba(0,0,0,.4); opacity: 0; animation: t1xSeoReveal 1.1s ease 2.4s forwards; }
@keyframes t1xSeoReveal { to { opacity: 1; } }
.t1x-seo h2 { font-size: 1.35rem; font-weight: 800; margin: 0 0 .5rem; text-wrap: balance; }
.t1x-seo-lead { margin: 0; text-wrap: pretty; font-size: 1.02rem; }
.t1x-seo a { color: #a5b4fc; }
.t1x-faq > h2 { font-size: 1.25rem; margin: 0 0 .75rem; }
.t1x-faq-item { border: 1px solid rgba(148,163,184,.2); border-radius: 12px; padding: .6rem .9rem; margin-bottom: .55rem; background: var(--bg-secondary, #1a1a35); }
.t1x-faq-item summary { cursor: pointer; font-weight: 600; list-style: none; }
.t1x-faq-item summary::-webkit-details-marker { display: none; }
.t1x-faq-item summary::after { content: '+'; float: right; opacity: .6; }
.t1x-faq-item[open] summary::after { content: '\2013'; }
.t1x-faq-item p { margin: .55rem 0 0; color: rgba(255,255,255,.8); line-height: 1.55; }
.t1x-cta { padding: 2rem 1.5rem; border-radius: 18px; text-align: center; color: #fff; background: var(--primary-color, #6366f1); }
.t1x-cta-icon { font-size: 2rem; margin-bottom: .6rem; color: rgba(255,255,255,.95); }
.t1x-cta h2 { margin: 0 0 .45rem; font-family: 'Poppins', sans-serif; font-size: 1.55rem; font-weight: 800; }
.t1x-cta p { margin: 0 auto 1.1rem; max-width: 42ch; font-size: .98rem; line-height: 1.55; color: rgba(255,255,255,.92); }
.t1x-cta-actions { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
.t1x-cta .t1x-btn-white { color: #4338ca; }
.t1x-cta .t1x-btn-outline { border-color: rgba(255,255,255,.55); }
.t1x-qr-cam-icon { opacity: .5; margin-bottom: .5rem; }

@media (min-width: 640px) {
    .t1x-steps { grid-template-columns: repeat(3, 1fr); }
    .t1x-features { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
    .t1x-features { grid-template-columns: repeat(4, 1fr); }
    .t1x-seofaq { grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
}
@media (prefers-reduced-motion: reduce) {
    .t1x-fade { animation: none; }
    .t1x-live-dot { animation: none; }
    .t1x-btn:hover, .t1x-fcard:hover { transform: none; }
    /* No auto-reveal: keep the still image, drop the video entirely. */
    .t1x-seo-video { display: none; animation: none; }
}

/* Slider image-side flip (shared) — alternate the illustration to the other side. */
@media (min-width: 900px) { .t1x-hslide.is-flip .t1x-hslide-media { order: 2; } }