/* ──────────────────────────────────────────────────────────
   Swift Grid — Theme: Front (a.k.a. "Illustrated" / V4)
   Purple-forward, warm, illustration-led. Scoped under
   [data-theme="front"] so it cannot leak into the other theme.
   ────────────────────────────────────────────────────────── */

[data-theme="front"] {
  font-feature-settings: "cv11", "ss01", "ss03";
}

[data-theme="front"] body {
  font-family: var(--sg-font-sans);
}

/* ─── Slide transition (front theme adds the slideIn animation) ─── */
[data-theme="front"] [data-sg-slider] > .sg-slide.is-active {
  animation: sg-front-slide-in var(--sg-dur-slow) var(--sg-ease-out) forwards;
}
@keyframes sg-front-slide-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ─── Subtle dot field background (replaces .dots) ─── */
[data-theme="front"] .sg-dots {
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* ─── Gentle float ─── */
@keyframes sg-front-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-16px) rotate(-0.5deg); }
}
[data-theme="front"] .float-y { animation: sg-front-float 8s ease-in-out infinite; }

/* ─── Hero illustration: centered in right column with color aura ─── */
[data-theme="front"] .hero-illo-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}
[data-theme="front"] .hero-illo-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  top: 50%;
  left: 50%;
  width: 80%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--aura, rgba(119, 106, 248, 0.45)) 0%, transparent 65%);
  filter: blur(30px);
  pointer-events: none;
  z-index: 0;
}
[data-theme="front"] .hero-illo-wrap.tint-green  { --aura: rgba(33, 194, 119, 0.45); }
[data-theme="front"] .hero-illo-wrap.tint-blue   { --aura: rgba(39, 102, 248, 0.50); }
[data-theme="front"] .hero-illo-wrap.tint-purple { --aura: rgba(119, 106, 248, 0.55); }

[data-theme="front"] .hero-illo {
  position: relative;
  z-index: 1;
  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  pointer-events: none;
  filter:
    drop-shadow(0 0 28px rgba(119, 106, 248, 0.35))
    drop-shadow(0 25px 50px rgba(39, 102, 248, 0.30));
}
[data-theme="front"] .hero-illo.tint-green  { filter: drop-shadow(0 0 28px rgba(33, 194, 119, 0.45)) drop-shadow(0 25px 50px rgba(33, 194, 119, 0.30)); }
[data-theme="front"] .hero-illo.tint-blue   { filter: drop-shadow(0 0 28px rgba(39, 102, 248, 0.50)) drop-shadow(0 25px 50px rgba(39, 102, 248, 0.35)); }
[data-theme="front"] .hero-illo.tint-purple { filter: drop-shadow(0 0 28px rgba(119, 106, 248, 0.55)) drop-shadow(0 25px 50px rgba(119, 106, 248, 0.40)); }

@media (max-width: 1024px) {
  [data-theme="front"] .hero-illo           { height: auto; max-height: 320px; }
  [data-theme="front"] .hero-illo-wrap::before { width: 70%; }
}

/* ─── Section-bg ghost illustration (watermark) ─── */
[data-theme="front"] .ghost-illo {
  position: absolute;
  pointer-events: none;
  opacity: 0.08;
  filter: blur(0.5px) saturate(0.8);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 40%, transparent 80%);
          mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 40%, transparent 80%);
}

/* ─── Squiggle under italic emphasis word ─── */
[data-theme="front"] .squiggle { position: relative; white-space: nowrap; }
[data-theme="front"] .squiggle::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.18em;
  height: 0.35em;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'><path d='M2 7 Q 15 1, 30 7 T 60 7 T 90 7 T 118 7' fill='none' stroke='%23776AF8' stroke-width='3' stroke-linecap='round'/></svg>") center/100% 100% no-repeat;
}

/* ─── Icon tile (SVG heroicon wrappers) ─── */
[data-theme="front"] .icon-tile {
  width: 56px;
  height: 56px;
  border-radius: var(--sg-radius-lg);
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  border: 1px solid var(--sg-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* ─── Reduced motion guards (theme-scoped) ─── */
@media (prefers-reduced-motion: reduce) {
  [data-theme="front"] .float-y,
  [data-theme="front"] [data-sg-slider] > .sg-slide.is-active { animation: none !important; }
}