/* ============================================================
   New Cards of the Month — tiles + open-card viewer
   Used by index.html and collection.html (with new-cards.js)
   ============================================================ */

/* ---------- Grid tiles ---------- */
/* Keeps the heading clear of the fixed nav when jumping to #new */
#new.catalog-collection { scroll-margin-top: 6rem; }
/* Badge moves to the top when the card art has text along the bottom */
.card-img.nc-badge-top .card-badge { top: 0.75rem; bottom: auto; }

/* The homepage styles tile images inline, so set the fill here for both pages */
[data-new-cards] .card-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* The cards have a printed white border, so each one sits on the tile like a
   card on a table (same 3:4 tile as the rest of the catalog, so rows line up). */
.card-img.nc-tile--card img {
  width: 84%;
  height: auto;
  object-fit: cover;
  box-shadow: 0 8px 22px rgba(28, 35, 51, 0.22);
}
.card-img.nc-tile--card.nc-tile--landscape img { width: 90%; }
.card-item[data-nc]:focus-visible {
  outline: 2px solid var(--gold, #BFA06A);
  outline-offset: 4px;
}

/* ---------- Existing cards printed with a white border ---------- */
.card-img.nc-tile--framed > img.nc-tile-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.18);
  filter: blur(22px) saturate(1.08) brightness(0.93);
}
.nc-tile-card {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 84%;
  padding: 5.46%;                 /* about 6.5% of the card's own width, like the printed border */
  box-shadow: 0 8px 20px rgba(28, 35, 51, 0.28);
}
.nc-tile-card--landscape { width: 88%; padding: 5.72%; }
.nc-tile-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Viewer overlay ---------- */
.nc-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 600;
  background: rgba(28, 35, 51, 0.9);
  backdrop-filter: blur(8px);
  overflow-y: auto;
  padding: 2rem 1rem;
}
.nc-overlay.open { display: block; }

.nc-modal {
  position: relative;
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: 3.25rem 1.5rem 2.25rem;
  background: var(--parchment, #F7F4EF);
  text-align: center;
  animation: ncIn 0.4s cubic-bezier(0.2, 0, 0, 1);
}
@keyframes ncIn {
  from { opacity: 0; transform: scale(0.96) translateY(14px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.nc-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: rgba(28, 35, 51, 0.6);
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
}
.nc-close:hover { background: var(--gold, #BFA06A); }
.nc-close:focus-visible,
.nc-view:focus-visible,
.nc-card:focus-visible {
  outline: 2px solid var(--gold, #BFA06A);
  outline-offset: 3px;
}

/* ---------- The card (3D open animation) ---------- */
.nc-stage {
  position: relative;
  width: 100%;
  height: var(--stage-h, 420px);
  margin: 0 auto;
  perspective: 1800px;
}
.nc-stage { transition: height 0.9s cubic-bezier(0.45, 0, 0.2, 1); }
.nc-stage.is-open { height: var(--stage-open-h, var(--stage-h, 420px)); }
.nc-stage[hidden] { display: none; }

.nc-card {
  position: absolute;
  left: 50%;
  top: var(--card-top, 0px);
  width: var(--w, 300px);
  height: var(--h, 420px);
  margin-left: calc(var(--w, 300px) / -2);
  transform-style: preserve-3d;
  transition: transform 0.9s cubic-bezier(0.45, 0, 0.2, 1);
  cursor: pointer;
}
.nc-card.is-open {
  transform: translate(var(--shift-x, 0px), var(--shift-y, 0px));
}

/* Inside panel (stays put; the cover swings away from it) */
.nc-inside {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background-color: #F7F7F5;
  box-shadow: 0 0 0 1px rgba(28, 35, 51, 0.1), 0 12px 32px rgba(0, 0, 0, 0.28);
}
.nc-inside img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.nc-inside::after {               /* soft fold shadow along the hinge */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to right, rgba(0,0,0,0.14), rgba(0,0,0,0) 14%);
}

/* Inside panel set with a typed message (cards without an inside image) */
.nc-inside--text {
  display: flex;
  align-items: center;
  justify-content: center;
}
.nc-message {
  padding: 0 calc(var(--w, 300px) * 0.11);
  font-family: 'Cormorant Garamond', serif;
  font-size: calc(var(--w, 300px) * 0.062);
  font-style: italic;
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink, #1C2333);
  text-align: center;
}

/* Paper grain for blank panels */
.nc-paper {
  background-color: #F7F7F5;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45  0 0 0 0 .42  0 0 0 0 .38  0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Framed cards: paper border around the photo on the cover */
.nc-face--front.nc-framed {
  box-sizing: border-box;
  padding: calc(var(--w, 300px) * 0.065);
}

/* Cover: front face = card art, back face = blank inside of the cover */
.nc-cover {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform-origin: left center;
  transform: translateZ(1px);
  transition: transform 0.9s cubic-bezier(0.45, 0, 0.2, 1);
}
.nc-card.is-open .nc-cover { transform: translateZ(1px) rotateY(-180deg); }

.nc-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.nc-face--front { box-shadow: 0 0 0 1px rgba(28, 35, 51, 0.1), 0 12px 32px rgba(0, 0, 0, 0.28); }
.nc-face--front img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.nc-face--back {
  transform: rotateY(180deg);
  box-shadow: 0 0 0 1px rgba(28, 35, 51, 0.1), 0 12px 32px rgba(0, 0, 0, 0.28);
}
.nc-face--back::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to left, rgba(0,0,0,0.14), rgba(0,0,0,0) 14%);
}

/* Landscape cards fold along the top edge */
.nc-stage[data-hinge="top"] .nc-cover { transform-origin: center top; }
.nc-stage[data-hinge="top"] .nc-card.is-open .nc-cover { transform: translateZ(1px) rotateX(180deg); }
.nc-stage[data-hinge="top"] .nc-face--back { transform: rotateX(180deg); }
.nc-stage[data-hinge="top"] .nc-face--back::after {
  background: linear-gradient(to top, rgba(0,0,0,0.14), rgba(0,0,0,0) 14%);
}
.nc-stage[data-hinge="top"] .nc-inside::after {
  background: linear-gradient(to bottom, rgba(0,0,0,0.14), rgba(0,0,0,0) 14%);
}

/* ---------- Folded (mockup) view ---------- */
.nc-mockup-wrap { margin: 0 auto; }
.nc-mockup-wrap[hidden] { display: none; }
.nc-mockup-wrap img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  max-height: 480px;
  width: auto;
  height: auto;
  mix-blend-mode: multiply;   /* lets the mockup's light backdrop melt into the parchment */
}

/* ---------- Controls + info ---------- */
.nc-hint {
  margin-top: 1.2rem;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted, #8A9BB0);
}
.nc-views {
  display: inline-flex;
  margin-top: 1rem;
  border: 1px solid rgba(191, 160, 106, 0.5);
}
.nc-view {
  padding: 0.55rem 1.3rem;
  border: none;
  background: transparent;
  color: var(--ink-soft, #4A5568);
  font-family: 'Inter', sans-serif;
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}
.nc-view + .nc-view { border-left: 1px solid rgba(191, 160, 106, 0.5); }
.nc-view.is-active { background: var(--gold, #BFA06A); color: var(--parchment, #F7F4EF); }

.nc-info { max-width: 440px; margin: 0 auto; }
.nc-desc-label {
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(191, 160, 106, 0.2);
  font-size: 0.6rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold, #BFA06A);
}
.nc-desc {
  margin-top: 0.4rem;
  font-size: 0.82rem;
  font-weight: 300;
  line-height: 1.8;
  color: var(--ink-soft, #4A5568);
}
.nc-format {
  margin-top: 1.2rem;
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted, #8A9BB0);
}
.nc-info .btn { margin-top: 1.2rem; display: inline-block; }

@media (max-width: 520px) {
  .nc-modal { padding: 3rem 1rem 1.75rem; overflow-x: clip; }   /* on phones the open cover swings off the left edge */
}

@media (prefers-reduced-motion: reduce) {
  .nc-card, .nc-cover, .nc-stage { transition: none; }
  .nc-modal { animation: none; }
}

/* ---------- Sparkles on the New Cards of the Month (full collection page) ---------- */
.nc-spark {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 0C12.8 7.6 16.4 11.2 24 12C16.4 12.8 12.8 16.4 12 24C11.2 16.4 7.6 12.8 0 12C7.6 11.2 11.2 7.6 12 0Z' fill='white'/></svg>") center / contain no-repeat;
  filter: drop-shadow(0 0 3px rgba(255, 236, 170, 0.95)) drop-shadow(0 0 7px rgba(255, 214, 120, 0.7));
  animation: ncTwinkle var(--d, 3s) ease-in-out var(--delay, 0s) infinite;
}
.nc-spark--gold {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 0C12.8 7.6 16.4 11.2 24 12C16.4 12.8 12.8 16.4 12 24C11.2 16.4 7.6 12.8 0 12C7.6 11.2 11.2 7.6 12 0Z' fill='%23C9A45C'/></svg>");
  filter: drop-shadow(0 0 3px rgba(201, 164, 92, 0.6));
}
@keyframes ncTwinkle {
  0%, 100% { opacity: 0; transform: scale(0) rotate(0deg); }
  35%      { opacity: 1; transform: scale(1) rotate(40deg); }
  55%      { opacity: 0.9; transform: scale(0.8) rotate(75deg); }
  80%      { opacity: 0; transform: scale(0.15) rotate(110deg); }
}
/* a slow shimmer that sweeps across each card */
.card-img.nc-sparkle::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,0) 38%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 62%);
  transform: translateX(-120%);
  animation: ncSheen 7s ease-in-out var(--sheen-delay, 0s) infinite;
}
@keyframes ncSheen {
  0%, 55%   { transform: translateX(-120%); }
  85%, 100% { transform: translateX(120%); }
}
@media (prefers-reduced-motion: reduce) {
  .nc-spark, .card-img.nc-sparkle::after { display: none; }
}