/* Mr. Insaf — site-wide motion enhancements (additive, CSS-only).
   Framer's inline styles keep priority on its animated nodes; these rules
   only touch elements Framer leaves static (links, images, selection, page). */

html { scroll-behavior: smooth; }

/* No body-level animation: transforms break the site's position:sticky
   sections and opacity lets the dark stage backdrop bleed through. */

/* Link micro-interactions — Framer rarely inlines transforms on <a> */
a[href] {
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.25s ease;
}
a[href]:hover { transform: translateY(-2px); }
a[href]:active { transform: translateY(0); }

/* Gentle photo life on hover for imagery inside links/cards */
a[href] img, a[href] .framer-image {
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.6s ease;
}
a[href]:hover img { transform: scale(1.03); filter: saturate(1.05); }

/* Brand selection color */
::selection { background: #111; color: #f2f2f0; }

/* Fix: the About paragraph's word-by-word scroll reveal leaves a long white
   gap before the portrait when scrolling at normal speed. Keep the words
   visible at all times — !important beats Framer's inline opacity. */
[data-framer-name="about"] p span,
[data-framer-name="about"] h2 span,
[data-framer-name="about"] h3 span {
  opacity: 1 !important;
}

/* Fix: the BASED IN / FOCUS / APPROACH columns in About are collapsed to
   1px wide by a scroll-linked expansion that rarely runs — text renders
   into an invisible sliver, leaving a long blank stretch. Give them real
   width so the info is always readable. */
[data-framer-name="about"] .framer-mw1c8p,
[data-framer-name="about"] .framer-mw1c8p div,
[data-framer-name="about"] .framer-mw1c8p p {
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
}

/* Hide the runtime-injected "Made in Framer" badge (self-hosted site) */
#__framer-badge-container,
.__framer-badge,
[id*="framer-badge"],
div[class*="framer-badge"],
a[href*="framer.com"][class*="badge"] {
  display: none !important;
}

/* Journal replaced in place: keep the section's box (collapsing it exposed
   the pinned hero behind the stacked-scroll layout) but hide its original
   children; the NFT grid is appended inside it (#nft-categories). */
section[data-framer-name="focus"] > *:not(#nft-categories) {
  display: none !important;
}
section[data-framer-name="focus"] {
  background: #111111 !important;
  height: auto !important;
  min-height: 0 !important;
}

/* NFT categories section — matches the site's monochrome theme */
#nft-categories {
  background: #111111;
  color: #f2f2f0;
  padding: clamp(56px, 9vw, 120px) clamp(20px, 5vw, 64px);
  font-family: "Helvetica Neue", Inter, Arial, sans-serif;
}
#nft-categories .nftc-label {
  font-size: 12px; letter-spacing: .28em; text-transform: uppercase;
  color: #8a8a84; margin-bottom: 14px;
}
#nft-categories h2 {
  font-size: clamp(30px, 5vw, 56px); font-weight: 500; line-height: 1.05;
  margin: 0 0 clamp(28px, 5vw, 56px);
}
#nft-categories .nftc-grid {
  display: grid; gap: clamp(16px, 2.5vw, 28px);
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 899px) { #nft-categories .nftc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 559px) { #nft-categories .nftc-grid { grid-template-columns: 1fr; } }
#nft-categories .nftc-card {
  background: #181818; border: 1px solid rgba(242,242,240,.08);
  overflow: hidden; display: flex; flex-direction: column;
}
#nft-categories .nftc-card .nftc-media {
  aspect-ratio: 4 / 5; overflow: hidden; background: #0c0c0c;
}
#nft-categories .nftc-card img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(1) contrast(1.05);
  transition: filter .5s ease, transform .6s cubic-bezier(.22,1,.36,1);
}
#nft-categories .nftc-card:hover img { filter: none; transform: scale(1.03); }
#nft-categories .nftc-rwa {
  aspect-ratio: 4 / 5; display: flex; flex-direction: column;
  align-items: flex-start; justify-content: flex-end;
  padding: 24px; background:
    radial-gradient(circle at 70% 20%, rgba(242,242,240,.10), transparent 55%), #0c0c0c;
}
#nft-categories .nftc-rwa .nftc-rwa-big {
  font-size: clamp(56px, 7vw, 96px); font-weight: 700; letter-spacing: .02em;
  line-height: .9; color: #f2f2f0;
}
#nft-categories .nftc-rwa .nftc-rwa-sub {
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  color: #8a8a84; margin-top: 10px;
}
#nft-categories .nftc-body { padding: 18px 20px 22px; }
#nft-categories .nftc-body h3 {
  margin: 0; font-size: 20px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em;
}
#nft-categories .nftc-body p {
  margin: 6px 0 0; font-size: 14px; color: #8a8a84; line-height: 1.5;
}

/* Respect users who opt out of motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body { animation: none; }
  a[href], a[href] img, a[href] .framer-image { transition: none; }
  a[href]:hover { transform: none; }
  a[href]:hover img { transform: none; filter: none; }
}