/* Animated hero background (hero-bg.js, ?hero=a|b|c|d). Without the param nothing here matches. */
.hbg { position: absolute; left: 0; right: 0; top: 0; z-index: 0; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 180px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 180px), transparent); }
.hbg canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 1400ms cubic-bezier(0.23, 1, 0.32, 1); }
.hbg-on .hbg canvas { opacity: 1; }
/* the shader paints its own dawn; the window keeps its lit rim */
html[data-hero-bg] #apertura.hbg-on .hx-dawn::before { opacity: 0; transition: opacity 1400ms; }
html[data-hero-bg] #apertura .ha-sky { transition: opacity 1400ms; }
html[data-hero-bg] #apertura.hbg-on .ha-sky { opacity: 0; }

/* c Bande: the brand dawn stays and moves non-stop; bands move only by transform, so the compositor keeps cached textures */
html[data-hero-bg="c"] #apertura.hbg-on .ha-sky { opacity: 1; }
html[data-hero-bg="c"] #apertura.hbg-on .hx-dawn::before { opacity: 1; }
html[data-hero-bg="c"] #apertura .ha-st0 { animation: hbg-sun 9s ease-in-out infinite alternate; }
html[data-hero-bg="c"] #apertura .ha-st1 { animation: hbg-swing 11s ease-in-out infinite alternate; }
html[data-hero-bg="c"] #apertura .ha-st2 { animation: hbg-swing 14s ease-in-out -5s infinite alternate-reverse; }
html[data-hero-bg="c"] #apertura .ha-st3 { animation: hbg-swing 17s ease-in-out -9s infinite alternate; }
html[data-hero-bg="c"] #apertura .ha-st4 { animation: hbg-swing 21s ease-in-out -3s infinite alternate-reverse; }
@keyframes hbg-sun { from { transform: translateX(-6%) scale(1, 1); } to { transform: translateX(6%) scale(1.1, 1.25); } }
@keyframes hbg-swing { from { transform: translateX(-9%) scaleY(0.9); } to { transform: translateX(9%) scaleY(1.15); } }
.hbg-b { position: absolute; border-radius: 50%; opacity: 0; will-change: transform; mix-blend-mode: screen; transition: opacity 1400ms cubic-bezier(0.23, 1, 0.32, 1); animation: var(--hbg-anim) ease-in-out infinite alternate; }
.hbg-on .hbg-b { opacity: var(--k, 1); }
.hbg-paused .hbg-b, html[data-hero-bg="c"] #apertura.hbg-paused .ha-st { animation-play-state: paused; }
.hbg-b1 { --k: 1; left: 18%; width: 64%; top: calc(var(--hbg-hz) - 150px); height: 300px; filter: blur(30px); background: radial-gradient(50% 50% at 50% 50%, #ffe2bd 0%, rgb(255 176 112 / 0.95) 30%, rgb(244 120 86 / 0.6) 56%, transparent 78%); --hbg-anim: hbg-glide 8s; }
.hbg-b2 { --k: 0.7; left: -10%; width: 50%; top: calc(var(--hbg-hz) - 190px); height: 220px; filter: blur(34px); background: radial-gradient(50% 50% at 50% 50%, rgb(98 206 254 / 0.85), rgb(98 206 254 / 0.25) 55%, transparent 75%); --hbg-anim: hbg-cross 12s; }
.hbg-b3 { --k: 0.5; left: -20%; width: 55%; top: calc(var(--hbg-hz) - 400px); height: 400px; filter: blur(48px); background: radial-gradient(50% 50% at 50% 50%, rgb(3 115 226 / 0.8), transparent 70%); --hbg-anim: hbg-wander 15s; }
.hbg-b4 { --k: 0.5; right: -20%; width: 55%; top: calc(var(--hbg-hz) - 360px); height: 380px; filter: blur(48px); background: radial-gradient(50% 50% at 50% 50%, rgb(3 115 226 / 0.75), rgb(98 206 254 / 0.2) 45%, transparent 70%); --hbg-anim: hbg-wander 13s reverse; }
.hbg-b5 { --k: 1; right: -10%; width: 55%; top: calc(var(--hbg-hz) - 70px); height: 140px; filter: blur(22px); background: radial-gradient(50% 50% at 50% 50%, rgb(255 132 96 / 0.9), rgb(255 196 140 / 0.35) 50%, transparent 75%); --hbg-anim: hbg-cross 10s reverse; }
@keyframes hbg-glide { from { transform: translateX(-28%) scale(0.9); } to { transform: translateX(28%) scale(1.15, 1.25); } }
@keyframes hbg-cross { from { transform: translateX(-10%); } to { transform: translateX(95%) scaleY(1.2); } }
@keyframes hbg-wander { from { transform: translate(-6%, 6%) scale(0.95); } to { transform: translate(40%, -8%) scale(1.15); } }
@media (max-width: 860px) {
  .hbg-b1 { left: 10%; width: 80%; top: calc(var(--hbg-hz) - 80px); height: 160px; filter: blur(22px); }
  .hbg-b2 { width: 90%; top: calc(var(--hbg-hz) - 130px); height: 190px; }
  .hbg-b3 { width: 100%; top: calc(var(--hbg-hz) - 280px); height: 300px; }
  .hbg-b4 { width: 100%; top: calc(var(--hbg-hz) - 240px); height: 280px; }
  .hbg-b5 { width: 90%; }
}
@media (prefers-reduced-motion: reduce) { .hbg-b, html[data-hero-bg="c"] #apertura .ha-st { animation: none; } .hbg canvas, .hbg-b, html[data-hero-bg] #apertura .ha-sky { transition: none; } }

/* the switch, only with ?hero in the URL */
.hbg-pick { position: fixed; right: 12px; top: 50%; z-index: 9999; display: flex; flex-direction: column; gap: 2px; transform: translateY(-50%); padding: 6px; border-radius: 12px; background: rgb(5 15 43 / 0.88); box-shadow: 0 0 0 1px rgb(255 255 255 / 0.12), 0 8px 24px rgb(0 0 0 / 0.3); font: 500 12px/1.2 system-ui, sans-serif; color: rgb(255 255 255 / 0.6); }
.hbg-pick span { padding: 4px 8px 6px; text-transform: uppercase; letter-spacing: 0.06em; font-size: 10px; }
.hbg-pick a { padding: 7px 10px; border-radius: 8px; color: #fff; text-decoration: none; white-space: nowrap; }
.hbg-pick a:hover { background: rgb(255 255 255 / 0.1); }
.hbg-pick a[aria-current] { background: #fff; color: #071846; }
@media (max-width: 860px) {
  .hbg-pick { top: auto; bottom: 12px; right: auto; left: 12px; flex-direction: row; transform: none; padding: 4px; }
  .hbg-pick span { display: none; }
  .hbg-pick a { padding: 6px 8px; font-size: 11px; }
}
@media (max-width: 860px) { .hbg-pick b { display: none; } }
.hbg-pick b { font-weight: inherit; }
/* the question sits right on the lit horizon */
html[data-hero-bg] #apertura .hx-ask { text-shadow: 0 1px 2px rgb(5 15 43 / 0.5), 0 0 14px rgb(5 15 43 / 0.7); }

/* e Tramonto: c's night blue and peach with e's livelier sunset. Plannix blue where the copy sits, peach and coral behind the window; same band motion as c */
html[data-hero-bg="e"] #apertura.hx-hero { --hx-bg: #0a3a9e; background:
  radial-gradient(48% 36% at 0% 0%, #050f2b 0%, transparent 74%),
  radial-gradient(48% 38% at 100% 0%, #050f2b 0%, transparent 74%),
  linear-gradient(176deg, #071846 0%, #0a2a7a 14%, #0548b2 30%, #065dc8 42%, #3d88dc 50%, #a9c6e6 56%, hsl(33 82% 84%) 61%, hsl(31 78% 78%) 68%, hsl(26 70% 68%) 77%, hsl(16 62% 58%) 90%, hsl(10 58% 50%) 100%); }
html[data-hero-bg="e"] #apertura.hbg-on .ha-sky, html[data-hero-bg="e"] #apertura.hbg-on .hx-dawn::before { opacity: 0; }
html[data-hero-bg="e"] .hbg-b1 { --k: 0.95; background: radial-gradient(50% 50% at 50% 50%, hsl(34 92% 86% / 0.95), hsl(29 78% 70% / 0.55) 45%, transparent 75%); }
html[data-hero-bg="e"] .hbg-b2 { --k: 0.6; mix-blend-mode: soft-light; background: radial-gradient(50% 50% at 50% 50%, rgb(150 220 255 / 0.7), transparent 72%); }
html[data-hero-bg="e"] .hbg-b3, html[data-hero-bg="e"] .hbg-b4 { --k: 0.7; background: radial-gradient(50% 50% at 50% 50%, rgb(10 42 122 / 0.9), transparent 70%); }
html[data-hero-bg="e"] .hbg-b5 { --k: 0.9; background: radial-gradient(50% 50% at 50% 50%, hsl(18 72% 62% / 0.85), hsl(30 76% 74% / 0.35) 50%, transparent 75%); }
html[data-hero-bg="e"] #apertura .sub { color: rgb(255 255 255 / 0.94); }

/* the footer that goes with e: the same horizon along its top edge, night under the text */
html[data-hero-bg="e"] .fa { --line: rgb(255 255 255 / 0.14); color: #ffffff; background:
  radial-gradient(75% 300px at 62% 0%, hsl(32 88% 80% / 0.85), hsl(18 66% 60% / 0.45) 45%, transparent 80%),
  linear-gradient(180deg, #0a2a7a 0%, #071846 38%, #050f2b 100%); }
html[data-hero-bg="e"] .fa h3, html[data-hero-bg="e"] .fa-legal .note, html[data-hero-bg="e"] .fa-base { color: rgb(255 255 255 / 0.62); }
html[data-hero-bg="e"] .fa-legal, html[data-hero-bg="e"] .fa-legal .co { color: rgb(255 255 255 / 0.82); }
html[data-hero-bg="e"] .fa a { color: #ffffff; }
html[data-hero-bg="e"] .fa-logo img { content: url("img/plannix-logo-white.png"); }