/* ALYSSIUN STORE v2: the hero showcase at the top of the home page.
 * One featured app at a time, large: its name in thin display type, one line
 * about it, Try and Add, and its picture in a glass frame that leans a little
 * toward the pointer. A quiet field of moving lines sits behind (sv-field.js). */
.sv-hero { position: relative; margin: clamp(14px, 2.4vw, 28px) 0 0; border: 1px solid var(--hair); border-radius: var(--sv-r-l); overflow: hidden; background: var(--banner); isolation: isolate; }
.sv-hero-field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: .7; color: var(--text); }
.sv-hero-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: clamp(18px, 3.4vw, 56px); align-items: center; min-height: clamp(400px, 46vw, 560px); padding: clamp(22px, 4vw, 56px); }
.sv-hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(10px, 1.4vw, 18px); min-width: 0; }
.sv-hero-kicker { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sv-hero-kicker .sv-eyebrow { margin: 0; }
.sv-hero-copy h1 { margin: 0; font-size: clamp(42px, 7vw, 96px); font-weight: 200; line-height: .98; letter-spacing: -.025em; overflow-wrap: anywhere;
  background: linear-gradient(180deg, var(--grad-from), var(--grad-to)); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .08em; }
.sv-hero-copy p { margin: 0; max-width: 40ch; color: var(--muted); font-size: clamp(16px, 1.7vw, 20px); line-height: 1.45; }
.sv-hero-by { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; }
.sv-hero-by .sv-app-icon { width: 36px; height: 36px; }
.sv-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.sv-hero-visual { position: relative; display: block; perspective: 1400px; }
.sv-hero-frame { position: relative; aspect-ratio: 16 / 10; border: 1px solid var(--hair-2); border-radius: var(--sv-r-l); overflow: hidden; background: var(--void-2); box-shadow: var(--sv-shadow);
  transform: rotateY(var(--ry, -5deg)) rotateX(var(--rx, 2deg)); transition: transform .5s var(--sv-ease); transform-style: preserve-3d; }
.sv-hero-frame img, .sv-hero-frame .store-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sv-hero-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(125deg, var(--sv-sheen), transparent 38%); mix-blend-mode: soft-light; }
.sv-hero-slide { animation: sv-hero-in .7s var(--sv-ease) both; }
.sv-hero-visual.sv-hero-slide { animation-name: sv-hero-in-visual; }
@keyframes sv-hero-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes sv-hero-in-visual { from { opacity: 0; transform: translateX(28px) scale(.98); } to { opacity: 1; transform: none; } }
.sv-hero-dots { display: flex; gap: 8px; padding: 0 clamp(22px, 4vw, 56px) clamp(16px, 2.4vw, 28px); }
.sv-hero-dot { position: relative; flex: 0 1 120px; min-width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; color: var(--muted); font: inherit; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sv-hero-dot::before, .sv-hero-dot::after { content: ""; position: absolute; left: 0; top: 6px; height: 1px; width: 100%; background: var(--hair-2); }
.sv-hero-dot::after { background: var(--text); transform: scaleX(0); transform-origin: left; }
.sv-hero-dot[aria-selected="true"] { color: var(--text); }
.sv-hero-dot[aria-selected="true"]::after { transform: scaleX(1); }
.sv-hero.is-rotating .sv-hero-dot[aria-selected="true"]::after { animation: sv-hero-progress var(--sv-hero-ms, 7000ms) linear both; }
.sv-hero.is-paused .sv-hero-dot[aria-selected="true"]::after { animation-play-state: paused; }
@keyframes sv-hero-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.sv-hero-dot span { display: block; padding: 16px 12px 0 0; overflow: hidden; text-overflow: ellipsis; }

/* A hero made of words only: the Store has nothing featured yet, or it could not be read. */
.sv-hero.is-plain .sv-hero-stage { grid-template-columns: 1fr; min-height: clamp(280px, 34vw, 420px); }
.sv-hero.is-plain h1 { max-width: 14ch; }

@media (max-width: 899px) {
  .sv-hero-stage { grid-template-columns: 1fr; min-height: 0; }
  .sv-hero-visual { order: -1; }
  .sv-hero-frame { transform: none; }
  .sv-hero-dot { flex: 1 1 0; }
  .sv-hero-dot span { display: none; }
  .sv-hero-dot { height: 44px; }
  .sv-hero-dot::before, .sv-hero-dot::after { top: 21px; height: 2px; }
}
@media (max-width: 539px) {
  .sv-hero { margin-left: calc(var(--sv-pad) * -1); margin-right: calc(var(--sv-pad) * -1); border-left: 0; border-right: 0; border-radius: 0; }
  .sv-hero-actions { width: 100%; }
  .sv-hero-actions > * { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .sv-hero-slide, .sv-hero-visual.sv-hero-slide { animation: none; }
  .sv-hero-frame { transform: none; transition: none; }
  .sv-hero.is-rotating .sv-hero-dot[aria-selected="true"]::after { animation: none; transform: scaleX(1); }
}