.gq-background { --gq-ink:#0c0808; --gq-gold:#f0d8a4; --gq-red:#8f1e22; --gq-cycle:24s; --gq-ease:cubic-bezier(0.77,0,0.175,1); }
.gq-background { position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; isolation:isolate; background:radial-gradient(ellipse at 50% 0%,#37241088,transparent 48%),radial-gradient(ellipse at 100% 60%,#37101255,transparent 50%),#0c0808; }
.gq-frame { position:absolute; inset:0; width:100%; height:100%; overflow:hidden; z-index:3; }
.gq-wing { transform:scaleX(.42); transform-box:view-box; transform-origin:0 50%; }
.gq-wing--right { transform-origin:100% 50%; }
.gq-frame--desktop { display:none; }
.gq-frame--mobile { display:block; }
.gq-fire { transform-box:view-box; animation:gq-surge 8s linear infinite; }
.gq-fire--right { animation-delay:-4s; }
.gq-fire--echo { animation-delay:-4s; opacity:.5; }
.gq-fire--right.gq-fire--echo { animation-delay:0s; }
.gq-electric { fill:none; stroke:#fff7d8; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:38 462; filter:drop-shadow(0 0 3px #ffcb3d); animation:gq-current 12s linear infinite,gq-lightning 12s linear infinite; }
.gq-electric--right { animation-delay:-6s; }
.gq-gold-breathe { animation:gq-gold-breathe 24s var(--gq-ease) infinite; }
.gq-cloud { position:absolute; left:-7%; width:114%; height:clamp(180px,30vh,340px); overflow:hidden; z-index:1; contain:paint; mask-image:linear-gradient(transparent 0%,#000 58%); }
.gq-cloud--top { top:-3%; transform:rotate(180deg); }
.gq-cloud--bottom { bottom:-3%; }
.gq-cloud__bank { position:absolute; inset:0 -6% -15%; background:url('GQ-Motivate-Volumetric-Smoke-v2.png') center/100% 100% no-repeat; opacity:.58; transform-origin:50% 100%; filter:url(#gq-smoke-flow); animation:gq-cloud-drift 24s var(--gq-ease) infinite; }
.gq-cloud__bank--echo { opacity:.22; inset:14% -25% -20%; animation:gq-smoke-depth 24s var(--gq-ease) infinite; animation-delay:-12s; }
.gq-cloud--bottom .gq-cloud__bank { animation-delay:-12s; }
.gq-cloud--bottom .gq-cloud__bank--echo { animation-delay:0s; }
.gq-aura { position:absolute; inset:0; z-index:0; background:radial-gradient(ellipse at 50% 0%,#fbc95124,transparent 26%),radial-gradient(ellipse at 50% 100%,#ffc84e1f,transparent 25%); animation:gq-aura 24s var(--gq-ease) infinite; }
.gq-spark { position:absolute; bottom:-2%; width:2px; height:2px; border-radius:50%; background:#ffe8a2; box-shadow:0 0 5px 1px #ffbc3c99; opacity:0; animation:gq-spark 12s linear infinite; }
@media(min-aspect-ratio:4/3) { .gq-frame--desktop { display:block; } .gq-frame--mobile { display:none; } .gq-wing { transform:scaleX(.6); } }
@keyframes gq-cloud-drift { 0%,100% { transform:translate3d(-1.5%,0,0) scale(1.02); } 50% { transform:translate3d(1.5%,3%,0) scale(1.07); } }
@keyframes gq-smoke-depth { 0%,100% { transform:translate3d(3%,3%,0) scale(1.04); opacity:.18; } 50% { transform:translate3d(-3%,-5%,0) scale(1.13); opacity:.3; } }
@keyframes gq-surge { 0% { transform:translateY(110%); opacity:0; } 9% { opacity:.96; } 86% { opacity:.9; } 100% { transform:translateY(-110%); opacity:0; } }
@keyframes gq-current { from { stroke-dashoffset:0; } to { stroke-dashoffset:-1000; } }
@keyframes gq-lightning { 0%,18%,39%,68%,84%,100% { opacity:0; } 22%,31%,73% { opacity:1; } 26%,35%,78% { opacity:.25; } }
@keyframes gq-gold-breathe { 0%,100% { opacity:.05; } 50% { opacity:.14; } }
@keyframes gq-aura { 0%,100% { opacity:.55; } 50% { opacity:1; } }
@keyframes gq-spark { 0% { transform:translate3d(0,0,0); opacity:0; } 12% { opacity:.8; } 70% { opacity:.45; } 100% { transform:translate3d(5px,-104vh,0); opacity:0; } }
.gq-background[data-paused="true"] *, .gq-background[data-hidden="true"] * { animation-play-state:paused!important; }
@media(prefers-reduced-motion:reduce) { .gq-background * { animation:none!important; } .gq-fire,.gq-electric,.gq-spark { opacity:0; } .gq-gold-breathe { opacity:.08; } .gq-cloud__bank { transform:none; filter:none; } .gq-aura { opacity:.6; } }

/* Preserve Rollout content geometry while the frame fits the page gutters. */
body{isolation:isolate;background:#0c0808}
body::before{display:none}
.wrap{z-index:2}
.gq-frame--mobile .gq-wing{transform:none}
@media(max-width:600px) and (orientation:portrait){.wrap{padding-left:clamp(34px,10.6vw,56px);padding-right:clamp(34px,10.6vw,56px)}}
@media(max-width:480px){.gq-cloud{height:clamp(180px,29vh,260px)}.gq-cloud__bank{opacity:.48}}
@media(max-width:900px){.gq-wing{transform:scaleX(.42)}}
@media(min-width:901px) and (max-width:1250px){.gq-wing{transform:scaleX(.22)}}
@media(max-height:500px) and (min-aspect-ratio:4/3){.gq-cloud{height:90px}}