/*!
 * Udaan, © 2026 Shoolini University. All rights reserved.
 * Designed & built in-house by Divya Mohan · AI Product Developer · Shoolini Online.
 * Portfolio https://dmj.one/work/ · Proprietary & confidential, see /COPYRIGHT.
 * SPDX-License-Identifier: LicenseRef-Shoolini-Proprietary
 */
/* ============================================================
   WIN-CARD, the "Share your win" affordance + preview modal.

   A real milestone (first solve / streak day / badge / block clear) earns a
   story-sized brag card rendered by public/assets/fx/win-card.js. This file
   styles only the trigger button and the small preview/share modal. It reuses
   the product's design tokens (--primary, --accent, --surface, etc.) and the
   .modal-overlay entrance pattern already defined in styles.css, so it themes
   automatically in light + dark and respects reduced-motion.

   Scope: every selector is prefixed .wc- to avoid collisions. No new tokens.
   ============================================================ */

/* ---- the trigger: a tactile "Share your win" button --------------------- */
.wc-share-btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 20px; border: 0; border-radius: 999px; cursor: pointer;
  font-family: var(--display, inherit); font-weight: 700; font-size: 15px;
  letter-spacing: -.01em; line-height: 1; color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  box-shadow: 0 8px 22px -8px rgba(79, 70, 229, .65),
              inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: transform .16s var(--ease, ease), box-shadow .18s var(--ease, ease),
              filter .18s var(--ease, ease);
}
.wc-share-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -8px rgba(79, 70, 229, .7),
              inset 0 1px 0 rgba(255, 255, 255, .3);
  filter: saturate(1.06);
}
.wc-share-btn:active { transform: translateY(0) scale(.98); }
.wc-share-btn:focus-visible {
  outline: 3px solid var(--accent, #F59E0B); outline-offset: 2px;
}
/* the rocket emoji nudges up on hover, a tiny lift-off tease */
.wc-share-btn .wc-rk {
  display: inline-block; font-size: 16px; line-height: 1;
  transition: transform .2s var(--ease, ease);
}
.wc-share-btn:hover .wc-rk { transform: translateY(-2px) rotate(8deg); }

/* ---- preview modal (rides on the shared .modal-overlay scaffolding) ------ */
/* If the host wraps the modal in .modal-overlay/.modal-card it inherits the
   entrance animation for free. These rules style the win-card-specific body. */
.wc-modal .modal-card { max-width: 420px; text-align: center; }

.wc-modal-title {
  font-family: var(--display, inherit); font-weight: 700;
  font-size: 20px; letter-spacing: -.015em; color: var(--ink);
  margin: 2px 0 4px;
}
.wc-modal-sub {
  color: var(--ink-soft); font-size: 13.5px; margin-bottom: 16px;
}

/* the scaled-down card preview, the big 1080x1920 canvas shrinks to fit */
.wc-preview {
  position: relative; margin: 0 auto 18px; width: 220px; max-width: 70vw;
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 18px 40px -14px rgba(12, 12, 28, .5),
              0 0 0 1px var(--line, rgba(0, 0, 0, .08));
  background: var(--surface-2);
  /* a gentle float so the artifact feels alive */
  animation: wc-float 5.5s ease-in-out infinite;
}
.wc-preview canvas,
.wc-preview img {
  display: block; width: 100%; height: auto;
}
/* subtle glare sweeping the preview, pure CSS, GPU-cheap transform */
.wc-preview::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg,
    rgba(255, 255, 255, 0) 38%,
    rgba(255, 255, 255, .18) 50%,
    rgba(255, 255, 255, 0) 62%);
  transform: translateX(-120%);
  animation: wc-glare 4.5s ease-in-out 1.2s infinite;
}

@keyframes wc-float {
  0%, 100% { transform: translateY(0) rotate(-.4deg); }
  50%      { transform: translateY(-6px) rotate(.4deg); }
}
@keyframes wc-glare {
  0%   { transform: translateX(-120%); }
  18%  { transform: translateX(120%); }
  100% { transform: translateX(120%); }
}

/* ---- action row inside the modal ---------------------------------------- */
.wc-actions {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}
.wc-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 18px; border-radius: 12px; cursor: pointer;
  font-family: var(--display, inherit); font-weight: 700; font-size: 14px;
  line-height: 1; border: 1px solid transparent;
  transition: transform .15s var(--ease, ease), background .15s, color .15s,
              border-color .15s;
}
.wc-btn:active { transform: scale(.97); }
.wc-btn:focus-visible { outline: 3px solid var(--accent, #F59E0B); outline-offset: 2px; }
.wc-btn-primary {
  background: var(--primary); color: #fff;
  box-shadow: 0 6px 16px -6px rgba(79, 70, 229, .55);
}
.wc-btn-primary:hover { background: var(--primary-deep); transform: translateY(-1px); }
.wc-btn-ghost {
  background: var(--surface); color: var(--ink); border-color: var(--line-2, var(--line));
}
.wc-btn-ghost:hover { border-color: var(--primary); color: var(--primary-deep); }

/* tiny status line, e.g. "Copied to clipboard", screen-reader live region */
.wc-status {
  margin-top: 12px; min-height: 18px; font-size: 13px; font-weight: 600;
  color: var(--ink-soft);
}
.wc-status.wc-ok { color: var(--primary-deep, var(--primary)); }

/* ---- reduced motion: kill float/glare, keep everything legible ---------- */
@media (prefers-reduced-motion: reduce) {
  .wc-preview { animation: none; }
  .wc-preview::after { animation: none; display: none; }
  .wc-share-btn, .wc-share-btn .wc-rk, .wc-btn { transition: none; }
  .wc-share-btn:hover { transform: none; }
  .wc-share-btn:hover .wc-rk { transform: none; }
}

/* ---- small screens: stack actions, shrink preview ---------------------- */
@media (max-width: 480px) {
  .wc-preview { width: 180px; }
  .wc-actions { flex-direction: column; }
  .wc-btn { width: 100%; justify-content: center; }
}