/* Good Till Gone — sign-in page product teaser (2026-11-01). Loaded only on the sign-in page.
   A = magic lens band under the header, D = flashlight wall behind the page, mix = D on computers + A on phones. */

body.gtg-teaser-on { overflow-x: clip; }

.gtg-tile { flex: none; width: 150px; height: 200px; border-radius: 14px; background: #fff; overflow: hidden; position: relative; box-shadow: 0 4px 14px rgba(0, 0, 0, .08); }
.gtg-tile img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; display: block; image-rendering: pixelated; }
.gtg-tile img.gtg-soft { filter: blur(2.5px) saturate(1.05); transform: scale(1.06); }

/* ---------- A: magic lens band ---------- */
.gtg-teaser { position: relative; width: 100vw; margin: 22px 0 4px calc(50% - 50vw); text-align: center; }
.gtg-teaser__title { margin: 0; color: #25724f; font-weight: 600; font-size: 16px; line-height: 1.3; }
.gtg-teaser__sub { margin: 3px 0 12px; color: #6b7570; font-size: 13px; line-height: 1.3; }
.gtg-teaser__lines { min-height: 52px; transition: opacity .45s ease; }
.gtg-teaser__lines.is-fading { opacity: 0; }
.gtg-band { position: relative; height: 232px; overflow: hidden; touch-action: pan-y; --x: -999px; --y: -999px; --r: 0px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.gtg-track { position: absolute; top: 16px; left: 0; display: flex; gap: 18px; padding-left: 18px; width: max-content; animation: gtg-slide 70s linear infinite; }
.gtg-clearwrap { position: absolute; inset: 0; clip-path: circle(var(--r) at var(--x) var(--y)); }
.gtg-ring { position: absolute; left: var(--x); top: var(--y); width: calc(var(--r) * 2); height: calc(var(--r) * 2); transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .95), 0 0 0 4px rgba(46, 125, 87, .35), 0 10px 26px rgba(0, 0, 0, .18); }
@keyframes gtg-slide { to { transform: translateX(-50%); } }

/* ---------- D: flashlight wall ---------- */
.gtg-wallbox { display: none; position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: #eef2f0; --x: -999px; --y: -999px; --r: 0px; }
body.gtg-teaser-d .gtg-wallbox { display: block; }
body.gtg-teaser-d { background: #eef2f0; }
body.gtg-teaser-d .sirlo-login { position: relative; z-index: 2; }
body.gtg-teaser-d .sirlo-login__left-block { background: transparent; }
.gtg-wall { position: absolute; inset: -60px; display: grid; grid-template-columns: repeat(var(--cols, 12), 150px); gap: 16px; transform: rotate(-6deg); animation: gtg-drift 90s linear infinite alternate; }
.gtg-wallclear { position: absolute; inset: 0; clip-path: circle(var(--r) at var(--x) var(--y)); }
.gtg-torch { position: absolute; left: var(--x); top: var(--y); width: calc(var(--r) * 2); height: calc(var(--r) * 2); transform: translate(-50%, -50%); border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .9), 0 0 70px 24px rgba(255, 255, 255, .35); }
.gtg-veil { position: absolute; top: 0; bottom: 0; left: 50%; width: min(700px, 100%); transform: translateX(-50%);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .97) 16%, rgba(255, 255, 255, .97) 84%, rgba(255, 255, 255, 0)); }
@keyframes gtg-drift { from { transform: rotate(-6deg) translate(0, 0); } to { transform: rotate(-6deg) translate(-200px, -160px); } }

/* ---------- mix: wall on computers, band on phones ---------- */
body.gtg-teaser-mix .gtg-teaser { display: none; }
@media (max-width: 899px) {
  body.gtg-teaser-mix .gtg-teaser { display: block; }
  body.gtg-teaser-mix .gtg-wallbox { display: none; }
  body.gtg-teaser-mix.gtg-teaser-d { background: #fff; }
  body.gtg-teaser-mix.gtg-teaser-d .sirlo-login__left-block { background: #fff; }
}

/* ---------- phones ---------- */
@media (max-width: 600px) {
  .gtg-tile { width: 112px; height: 150px; border-radius: 12px; }
  .gtg-band { height: 178px; }
  .gtg-track { top: 14px; gap: 12px; padding-left: 12px; }
  body.gtg-teaser-d { background: #fff; }
  body.gtg-teaser-d .gtg-wallbox { position: absolute; bottom: auto; height: 470px;
    -webkit-mask-image: linear-gradient(#000 62%, transparent); mask-image: linear-gradient(#000 62%, transparent); }
  .gtg-wall { grid-template-columns: repeat(var(--cols, 8), 112px); gap: 12px; }
  .gtg-veil { top: 34px; bottom: auto; height: 360px; width: 300px; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 255, 255, .97) 70%, rgba(255, 255, 255, 0)); }
}

@media (prefers-reduced-motion: reduce) {
  .gtg-track, .gtg-wall { animation-duration: 400s; }
}