/* ============================================================
   MarketResearchly — Homepage product showcase
   A large, dimensional "window" into the ACTUAL client portal.
   Reuses portal.css tokens/components (loaded alongside) so the
   preview is the real product, at presentation scale. Pure CSS
   perspective/transform + a little vanilla JS. No dependencies.
   ============================================================ */

.sc-wrap {
  max-width: 1240px; margin: 0 auto; padding: 4px 24px 132px; overflow-x: clip;
  /* Soft warm-cream halo behind the floating panels — the page stays white,
     the ambient light just reads a touch upscale. */
  background: radial-gradient(46% 40% at 50% 60%, oklch(0.94 0.038 84 / 0.6), transparent 72%);
}
.sc-head { text-align: center; max-width: 680px; margin: 0 auto 52px; }
.sc-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: oklch(0.55 0.015 262); margin-bottom: 18px; }
.sc-head h2 { font-size: 42px; line-height: 1.1; letter-spacing: -0.03em; font-weight: 600; margin: 0 0 16px; text-wrap: balance; }
.sc-head h2 em { font-family: 'Instrument Serif', serif; font-weight: 400; font-style: italic; }
.sc-head p { font-size: 16px; line-height: 1.65; color: oklch(0.5 0.015 262); margin: 0; text-wrap: pretty; }

/* ---- Stage / depth ---- */
.sc-stage { position: relative; height: 620px; margin: 0 auto; }
.sc-float { position: relative; width: 100%; height: 100%; animation: sc-float 8s ease-in-out infinite; }
/* perspective (not preserve-3d) so the receding side panels read with a
   subtle angle while z-index still governs stacking — the opaque front
   panel fully covers the ones behind it (no text bleed-through). */
.sc-track { position: relative; width: 100%; height: 100%; perspective: 2200px; transition: transform 0.4s ease-out; }
@keyframes sc-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

.sc-panel {
  /* Auto-margin centering (no percentage translate). The FRONT panel is a
     clean 2D transform so it always lands centred; only the blurred side
     panels carry a subtle rotateY for depth. */
  position: absolute; top: 0; left: 0; right: 0; margin: 0 auto;
  width: min(940px, 96%); height: 100%;
  transform: translateX(0) scale(0.86); transform-origin: center center;
  background: #fff; border: 1px solid var(--cp-line); border-radius: 18px;
  box-shadow: 0 40px 90px -40px oklch(0.28 0.02 264 / 0.42), 0 12px 30px -16px oklch(0.28 0.02 264 / 0.16);
  overflow: hidden; opacity: 0; pointer-events: none;
  transition: transform 0.85s cubic-bezier(0.4, 0, 0.15, 1), opacity 0.7s ease, filter 0.7s ease, box-shadow 0.85s ease;
}
.sc-panel.is-active { opacity: 1; filter: none; transform: translateX(0) scale(1); z-index: 4; pointer-events: auto; box-shadow: 0 48px 110px -44px oklch(0.28 0.02 264 / 0.48), 0 14px 34px -18px oklch(0.28 0.02 264 / 0.18); }
.sc-panel.is-next   { opacity: 0.55; filter: blur(1.4px); transform: translateX(158px) rotateY(-10deg) scale(0.9); z-index: 2; }
.sc-panel.is-prev   { opacity: 0.42; filter: blur(1.4px); transform: translateX(-158px) rotateY(10deg) scale(0.9); z-index: 1; }
.sc-panel.is-far    { opacity: 0; filter: blur(3px); transform: translateX(0) scale(0.82); z-index: 0; }

/* ---- Portal chrome inside a panel (sidebar + topbar + body) ---- */
.sc-app { display: grid; grid-template-columns: 196px 1fr; height: 100%; }
.sc-side { background: var(--cp-sidebar); color: #fff; padding: 18px 14px; display: flex; flex-direction: column; box-sizing: border-box; }
.sc-side-logo { padding: 6px 8px 18px; }
.sc-side-logo img { height: 22px; display: block; opacity: 0.96; }
.sc-side-nav { display: flex; flex-direction: column; gap: 2px; }
.sc-side-item { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 9px; color: var(--cp-sidebar-ink); font-size: 13px; font-weight: 500; }
.sc-side-item.active { background: oklch(1 0 0 / 0.09); color: #fff; font-weight: 600; }
.sc-side-item svg { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.85; }
.sc-side-item.active svg { opacity: 1; }
.sc-side-foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--cp-sidebar-line); display: flex; align-items: center; gap: 11px; }
.sc-side-av { width: 30px; height: 30px; border-radius: 50%; background: oklch(1 0 0 / 0.12); border: 1px solid oklch(1 0 0 / 0.16); flex-shrink: 0; }
.sc-side-foot .nm { font-size: 12.5px; font-weight: 600; color: #fff; display: block; line-height: 1.3; }
.sc-side-foot .co { font-size: 11px; color: var(--cp-sidebar-ink); display: block; line-height: 1.3; }

.sc-mainarea { display: flex; flex-direction: column; min-width: 0; background: var(--cp-ground); }
.sc-top { height: 54px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; border-bottom: 1px solid var(--cp-line); background: oklch(0.985 0.002 264); }
.sc-crumb { font-size: 12.5px; color: var(--cp-ink-3); }
.sc-crumb b { color: var(--cp-ink); font-weight: 600; }
.sc-top-av { width: 30px; height: 30px; border-radius: 50%; background: var(--cp-ink); }
.sc-body { flex: 1; padding: 22px 26px; overflow: hidden; min-width: 0; }

/* Preview controls are illustrative only — not interactive */
.sc-body .cp-btn, .sc-body .cp-option, .sc-body input { pointer-events: none; }

.sc-h { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 4px; }
.sc-h em { font-family: 'Instrument Serif', serif; font-weight: 400; font-style: italic; }
.sc-sub { font-size: 13px; color: var(--cp-ink-2); margin: 0 0 18px; }

/* condensed dashboard bits */
.sc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
.sc-stat { border: 1px solid var(--cp-line); border-radius: 12px; padding: 13px 15px; background: #fff; }
.sc-stat .lbl { font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cp-ink-3); margin-bottom: 8px; }
.sc-stat .val { font-size: 26px; font-weight: 600; letter-spacing: -0.025em; line-height: 1; font-variant-numeric: tabular-nums; }
.sc-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.sc-act { border: 1px solid var(--cp-line); border-radius: 12px; padding: 15px 16px; display: flex; align-items: center; gap: 13px; background: #fff; }
.sc-act.sample { background: oklch(0.986 0.013 155); border-color: oklch(0.9 0.035 155); }
.sc-act.report { background: oklch(0.985 0.013 245); border-color: oklch(0.9 0.03 245); }
.sc-act .ic { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sc-act.sample .ic { background: oklch(0.94 0.05 155); color: oklch(0.47 0.09 155); }
.sc-act.report .ic { background: oklch(0.94 0.045 245); color: oklch(0.5 0.1 245); }
.sc-act .ic svg { width: 18px; height: 18px; }
.sc-act .nm { font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; display: block; }
.sc-act .ds { font-size: 11.5px; color: var(--cp-ink-2); margin-top: 2px; line-height: 1.4; display: block; }

.sc-list { border: 1px solid var(--cp-line); border-radius: 12px; overflow: hidden; background: #fff; }
.sc-list .lh { display: flex; justify-content: space-between; align-items: center; padding: 11px 16px; border-bottom: 1px solid var(--cp-line-soft); font-size: 12.5px; font-weight: 600; }
.sc-row { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--cp-line-soft); }
.sc-row:last-child { border-bottom: none; }
.sc-row .rn { font-size: 12.5px; font-weight: 600; flex: 1; letter-spacing: -0.008em; }
.sc-row .rt { font-size: 11.5px; color: var(--cp-ink-3); width: 84px; }

/* form-ish rows */
.sc-frow { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.sc-fld .fl { font-size: 10.5px; font-weight: 600; color: var(--cp-ink-3); margin-bottom: 6px; }
.sc-fld .fv { font-size: 13px; font-weight: 500; border: 1px solid var(--cp-line); border-radius: 9px; padding: 10px 12px; color: var(--cp-ink); background: #fff; }
.sc-seg { display: grid; grid-template-columns: 1fr 1.6fr; gap: 12px; margin-bottom: 10px; }

/* sample-ready / detail bits */
.sc-detail-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.sc-detail-head .dn { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; }
.sc-meta { font-size: 12.5px; color: var(--cp-ink-2); margin-bottom: 18px; }
.sc-actionsrow { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }

/* edit / changes */
.sc-editbar { display: flex; gap: 26px; flex-wrap: wrap; align-items: baseline; padding: 13px 16px; border: 1px solid var(--cp-line); border-radius: 12px; background: var(--cp-surface-2); margin-bottom: 16px; }
.sc-editbar .k { font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cp-ink-3); margin-right: 7px; }
.sc-editbar .v { font-size: 13px; font-weight: 600; }
.sc-textarea { border: 1px solid var(--cp-line); border-radius: 9px; padding: 12px 14px; font-size: 12.5px; line-height: 1.55; color: var(--cp-ink-2); background: #fff; min-height: 74px; }

/* dropzone-ish */
.sc-drop { border: 1.5px dashed oklch(0.86 0.005 264); border-radius: 12px; padding: 20px; text-align: center; background: var(--cp-surface-2); margin-bottom: 12px; }
.sc-drop .dm { font-size: 13px; font-weight: 600; }
.sc-drop .dsub { font-size: 11.5px; color: var(--cp-ink-3); margin-top: 3px; }
.sc-filechip { display: flex; align-items: center; gap: 10px; border: 1px solid var(--cp-line); border-radius: 9px; padding: 10px 13px; background: #fff; margin-bottom: 12px; }
.sc-filechip .fx { width: 28px; height: 28px; border-radius: 7px; background: var(--cp-ink); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; }
.sc-filechip .fn { font-size: 12.5px; font-weight: 600; }

/* downloads */
.sc-dl { border: 1px solid var(--cp-line); border-radius: 12px; padding: 15px 16px; display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; background: #fff; }
.sc-dl .di { display: flex; align-items: center; gap: 13px; min-width: 0; }
.sc-dl .badge-ic { width: 40px; height: 40px; border-radius: 10px; background: var(--cp-surface-2); border: 1px solid var(--cp-line); color: var(--cp-ink-3); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sc-dl .badge-ic svg { width: 18px; height: 18px; }
.sc-dl .dn { font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; }
.sc-dl .dm { font-size: 11.5px; color: var(--cp-ink-3); margin-top: 2px; }
.sc-dl .da { display: flex; gap: 8px; flex-wrap: wrap; }

.sc-title-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.sc-title-row .st { font-size: 16px; font-weight: 600; letter-spacing: -0.015em; }

/* entrance animation of populated values (active panel only) */
.sc-panel.is-active [data-sc-reveal] { animation: sc-rise 0.6s cubic-bezier(0.4,0,0.2,1) both; }
[data-sc-reveal] { opacity: 1; }
@keyframes sc-rise { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

/* ---- Step navigation ---- */
.sc-steps { display: flex; justify-content: center; gap: 4px; margin: 36px auto 0; flex-wrap: wrap; }
.sc-step {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: none; cursor: pointer; font-family: inherit;
  font-size: 12.5px; font-weight: 600; letter-spacing: -0.004em;
  color: oklch(0.55 0.015 262); padding: 8px 14px; border-radius: 999px;
  transition: background 0.15s, color 0.15s;
}
.sc-step .n { width: 6px; height: 6px; border-radius: 50%; background: oklch(0.82 0.006 264); transition: background 0.15s, transform 0.15s; }
.sc-step:hover { color: oklch(0.21 0.01 262); }
.sc-step.active { background: oklch(0.955 0.002 264); color: oklch(0.21 0.01 262); }
.sc-step.active .n { background: oklch(0.21 0.01 262); transform: scale(1.3); }

/* ---- Supporting tags ---- */
.sc-tags { display: flex; justify-content: center; gap: 30px; margin-top: 28px; flex-wrap: wrap; }
.sc-tags span { display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 500; color: oklch(0.5 0.015 262); }
.sc-tags span::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: oklch(0.75 0.006 264); }

/* ---- Responsive ---- */
@media (max-width: 1000px) {
  .sc-head h2 { font-size: 34px; }
  .sc-stage { height: 560px; }
  .sc-panel.is-next { transform: translateX(calc(-50% + 60px)) rotateY(-9deg) scale(0.9); }
  .sc-panel.is-prev { transform: translateX(calc(-50% - 60px)) rotateY(9deg) scale(0.9); }
}
@media (max-width: 720px) {
  .sc-wrap { padding: 4px 16px 96px; }
  .sc-head { margin-bottom: 34px; }
  .sc-head h2 { font-size: 28px; }
  .sc-stage { height: auto; min-height: 600px; perspective: none; }
  .sc-float { animation: none; }
  .sc-panel { position: relative; left: auto; right: auto; width: 100%; height: auto; min-height: 600px; transform: none; margin: 0 auto; }
  .sc-panel.is-next, .sc-panel.is-prev, .sc-panel.is-far { display: none; }
  .sc-panel.is-active { transform: none; }
  .sc-app { grid-template-columns: 1fr; }      /* hide sidebar on mobile */
  .sc-side { display: none; }
  .sc-frow { grid-template-columns: 1fr; }
  .sc-stats { grid-template-columns: 1fr 1fr; }
  .sc-acts { grid-template-columns: 1fr; }
  .sc-tags { gap: 8px 22px; }
  .sc-track { transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .sc-float { animation: none; }
  .sc-panel { transition: opacity 0.3s ease; }
  .sc-panel.is-active [data-sc-reveal] { animation: none; }
  .sc-track { transition: none; }
}