/* ==========================================================================
   NeoYug Gift Studio - the artwork field.

   Lifted from the deck's assets/art.css so an empty slot on the storefront
   looks exactly like the comps' placeholder: a light source seen through
   depth, with grain. Not photography, and not pretending to be.

   This file must stand on its own. The storefront does not load the deck's
   system.css, so every design token below carries a literal fallback.
   ========================================================================== */

.art {
  --core:  #8D22C3;
  --deep:  #1F1340;
  --halo:  #E6C97A;
  --cx: 32%; --cy: 26%;
  --hx: 78%; --hy: 82%;

  position: relative;
  overflow: hidden;
  background-color: var(--deep);
  border-radius: var(--r-md, 12px);
  isolation: isolate;
}

.art::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(64% 58% at var(--cx) var(--cy),
      color-mix(in oklab, var(--core) 92%, white) 0%,
      color-mix(in oklab, var(--core) 62%, var(--deep)) 34%,
      transparent 72%),
    radial-gradient(52% 46% at var(--hx) var(--hy),
      color-mix(in oklab, var(--halo) 72%, var(--deep)) 0%,
      transparent 68%),
    radial-gradient(120% 100% at 50% 116%,
      color-mix(in oklab, var(--deep) 86%, black) 0%, transparent 62%),
    linear-gradient(168deg,
      color-mix(in oklab, var(--deep) 82%, var(--core)) 0%,
      var(--deep) 58%);
}

/* Organic veil - turbulence, not a polygon. */
.art::after {
  content: "";
  position: absolute; inset: -6%; z-index: 1;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='v'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23v)'/%3E%3C/svg%3E");
  opacity: .19;
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.art > * { position: relative; z-index: 2; }

/* color-mix is well supported but not universal. Where it is missing the
   gradients above drop out and the field falls back to --deep, which is the
   theme's own swatch, so the slot still reads as deliberate. */
@supports not (background: color-mix(in oklab, red 50%, blue)) {
  .art::before {
    background: linear-gradient(168deg, var(--core) 0%, var(--deep) 62%);
    opacity: .9;
  }
}

/* The two commissioned ratios, plus the 8:5 crop derived off the 16:9 for the
   gift card face. Adding a third means a new registered size and a comp
   change - do not add one casually. */
.art--16x9 { aspect-ratio: 16 / 9; }
.art--4x5  { aspect-ratio: 4 / 5; }
.art--8x5  { aspect-ratio: 8 / 5; }
/* Screens 10 and 11 draw the gift as a square object beside its name. Without
   this the field has no aspect-ratio, so it rendered 88px wide and 0 tall - the
   gift panel simply had no artwork in it, and every suite still passed. */
.art--1x1  { aspect-ratio: 1 / 1; }

/* A filled slot: the image fills the same box the field would have. */
.art--filled { background-color: var(--deep); }
.ngs-art-img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  position: relative; z-index: 2;
}

/* --- Subject variants -----------------------------------------------------
   Hue carries meaning: grief runs cold and deep, abundance runs gold, the
   feminine runs rose, beginnings run toward dawn. Copied verbatim from the
   deck's art.css - if a value here disagrees with the deck, the deck wins.
   Without these the moment tiles all render as the default violet field and
   five bundles read as one thing five times. ------------------------------- */
.art--grief     { --core: #3D5A8F; --deep: #10152E; --halo: #7E8FC4; --cx: 28%; --cy: 72%; --hx: 70%; --hy: 14%; }
.art--abundance { --core: #B8873A; --deep: #2A1B0C; --halo: #E6C97A; --cx: 38%; --cy: 30%; --hx: 76%; --hy: 78%; }
.art--feminine  { --core: #A6336E; --deep: #2B0F24; --halo: #E9A9B8; --cx: 30%; --cy: 34%; --hx: 74%; --hy: 76%; }
.art--beginning { --core: #C97A3A; --deep: #24170F; --halo: #F3D9A8; --cx: 24%; --cy: 76%; --hx: 66%; --hy: 20%; }
.art--heart     { --core: #8E3C64; --deep: #1E0F1C; --halo: #DDA6B4; --cx: 40%; --cy: 26%; --hx: 70%; --hy: 82%; }
.art--karma     { --core: #6B3FA8; --deep: #170E2E; --halo: #C9A0E8; --cx: 34%; --cy: 30%; --hx: 78%; --hy: 74%; }
.art--womb      { --core: #9B3F54; --deep: #25101A; --halo: #E8BBAA; --cx: 44%; --cy: 62%; --hx: 26%; --hy: 20%; }
.art--formless  { --core: #4A5FA8; --deep: #101530; --halo: #BFC6E8; --cx: 50%; --cy: 50%; --hx: 50%; --hy: 96%; }
.art--event     { --core: #A8442A; --deep: #24110C; --halo: #F0B48C; --cx: 30%; --cy: 30%; --hx: 76%; --hy: 78%; }
.art--home      { --core: #4C7A5A; --deep: #0F2018; --halo: #BEDCC2; --cx: 34%; --cy: 70%; --hx: 72%; --hy: 22%; }
.art--sympathy  { --core: #4A4E86; --deep: #131530; --halo: #BCC0E4; --cx: 34%; --cy: 30%; --hx: 72%; --hy: 78%; }
.art--off { filter: saturate(.25) brightness(.7); }

/* The four gift themes. Hexes match the deck's art.css variants exactly. */
.art--stillness { --core: #3E6E7A; --deep: #0F1E24; --halo: #A9CFD4; --cx: 30%; --cy: 28%; --hx: 74%; --hy: 78%; }
.art--marigold  { --core: #D08A1E; --deep: #2A1A06; --halo: #F6D98C; --cx: 36%; --cy: 34%; --hx: 72%; --hy: 76%; }
.art--lotus     { --core: #8D22C3; --deep: #1F1340; --halo: #E2B8F2; --cx: 32%; --cy: 26%; --hx: 78%; --hy: 82%; }
.art--dawn      { --core: #C2557A; --deep: #221029; --halo: #F4CDA4; --cx: 26%; --cy: 74%; --hx: 72%; --hy: 18%; }

/* Motion plays on the reveal only, and only for a theme that was decided to
   carry it. Email always gets the still frame. */
@keyframes ngs-art-drift {
  0%   { transform: scale(1.06) translate3d(0, 0, 0); }
  50%  { transform: scale(1.12) translate3d(-2.2%, -1.6%, 0); }
  100% { transform: scale(1.06) translate3d(1.8%, 1.2%, 0); }
}
@keyframes ngs-art-breathe { 0%, 100% { opacity: .78; } 50% { opacity: 1; } }

.art--animated::before {
  animation: ngs-art-drift 26s cubic-bezier(.4, 0, .2, 1) infinite alternate;
  will-change: transform;
}
.art--animated::after { animation: ngs-art-breathe 9s cubic-bezier(.4, 0, .2, 1) infinite; }

@media (prefers-reduced-motion: reduce) {
  .art--animated::before,
  .art--animated::after { animation: none; }
}

/* --- Screen 09's theme picker --------------------------------------------
   THE SWATCH IS 16:9, AND THE COMP SAYS 5:4 (Kunal, 2026-10-23: "can we make
   the how should it look and the live preview the same aspect ratio?").

   This is a deliberate divergence from the board and it is recorded in
   DECISIONS rather than left to be tidied back. The reason is that 5:4 was a
   shape chosen for a gradient, and these tiles stopped being gradients the day
   an operator uploaded theme headers: the buyer now picks a PICTURE in one
   crop and is shown the same picture in another, two inches to the right. The
   email, the reveal and the card face are all cut from the 16:9, so the
   preview cannot move - the picker is the only end that can.

   `object-fit: cover` meant the difference was never missing pixels, which is
   why it reads as "the crop is weird" rather than as an error: the tile kept
   the middle of a square and the preview kept a 16:9 band of it.

   The upload tile that used to sit beside it is GONE: the sender uploads
   nothing (DECISIONS 26), so `.dropzone` and the 4:5 ratio item 26a measured
   are both removed rather than left styling nothing.
   ------------------------------------------------------------------------- */

.swatch {
  /* 4 / 5 SINCE 0.77.28, FOLLOWING THE PREVIEW AND THE REVEAL. DECISIONS 78 put
     this at 16 / 9 so a buyer could not pick a picture in one crop and be shown
     it in another, and the rule it set was that the PREVIEW wins because the
     preview is what the recipient gets. The artwork now carries the theme's own
     sentence in a band across its top, the reveal renders it 4:5 to keep that
     band, and this follows. Item 78 obeyed, not reversed. */
  aspect-ratio: 4 / 5;
  border-radius: var(--r-sm, 8px);
  cursor: pointer;
  transition: transform .22s cubic-bezier(.4,0,.2,1), box-shadow .22s cubic-bezier(.4,0,.2,1);
}
.swatch:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(28,19,48,.16); }
.swatch--on { box-shadow: 0 0 0 2px #8D22C3, 0 0 0 5px #F0E2F8; }

.motion-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--ui, system-ui), sans-serif; font-size: 11px; font-weight: 600;
  letter-spacing: .04em;
  color: #6B1795; background: #F0E2F8;
  padding: 2px 8px; border-radius: 999px;
}