/* ============================================================
   Fidgr — under construction page
   Loads after styles.css and reuses its tokens.
   ============================================================ */

.soon {
  min-height: 100svh;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 0 32px;
  overflow-x: hidden;
  background:
    radial-gradient(900px 520px at 78% 4%, rgba(37, 99, 235, .18), transparent 68%),
    radial-gradient(760px 480px at 2% 96%, rgba(249, 115, 22, .2), transparent 70%),
    linear-gradient(180deg, #fffaf4 0%, var(--bg) 82%);
}

.soon__main {
  width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 32px;
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center;
}

/* Two renders with their transparent padding trimmed, sitting tight together */
.soon__art {
  display: grid; grid-template-columns: auto auto; gap: 28px;
  justify-content: center; align-items: center;
  margin-left: -4%;
  position: relative;
}
.soon__art img { margin: 0; height: clamp(160px, 17.5vw, 264px); width: auto; }.soon__art::before {
  content: ""; position: absolute; inset: -8% -4%; z-index: -1;
  background:
    radial-gradient(closest-side at 30% 50%, rgba(249, 115, 22, .22), transparent 100%),
    radial-gradient(closest-side at 72% 50%, rgba(37, 99, 235, .2), transparent 100%);
  filter: blur(30px);
}
/* cut-out PNGs: no multiply needed now that the studio background is gone */
.soon__art img {
  filter: drop-shadow(0 24px 32px rgba(22, 33, 58, .24));
}
.soon__art img:last-child { animation: soonFloat 8s ease-in-out infinite 1s; }
.soon__art img:first-child { animation: soonRevolve 44s linear infinite; }

@keyframes soonFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
@keyframes soonRevolve {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.soon__brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-size: 20px; font-weight: 500;
  color: var(--ink); margin-bottom: 26px;
}
.soon__brand svg { width: 26px; height: 26px; color: var(--orange); }

.soon__copy h1 {
  font-family: var(--font-display);
  font-size: clamp(52px, 8.2vw, 104px);
  font-weight: 600; letter-spacing: -.04em; line-height: .95;
  color: var(--ink); margin: 0 0 24px;
}
.soon__contact {
  margin-top: 8px; padding-top: 26px;
  border-top: 2px solid var(--ink);
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
}
.soon__mail {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(20px, 2.4vw, 27px); letter-spacing: -.02em; color: var(--ink);
  border-bottom: 3px solid var(--orange); padding-bottom: 2px;
  transition: color .18s ease, border-color .18s ease;
}
.soon__mail:hover { color: var(--blue-ink); border-bottom-color: var(--blue-ink); }
.soon__note {
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--faint);
}

.soon__foot {
  width: 100%; max-width: 1160px; margin: 0 auto; padding: 44px 32px 0;
  color: var(--faint); font-size: 13.5px;
}

@media (max-width: 960px) {
  .soon__main { grid-template-columns: 1fr; gap: 30px; padding: 0 24px; }
  .soon__art { order: -1; margin: 0; max-width: 560px; width: 100%; justify-self: center; }
  .soon__contact { border-top-width: 1px; }
  .soon__foot { padding-left: 24px; padding-right: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .soon__art img:first-child, .soon__art img:last-child { animation: none; }
}