/* Shared finishing layer: positioning, responsive artwork and interactions. */
.page-matrix { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.hero { z-index: 3; }
.hero-nav { width: 100%; margin: 0; padding: 18px 4%; min-height: 94px; background: #100004; color: #ff5269; border-bottom: 2px solid #ff5269; gap: 22px; isolation: isolate; }
.hero-nav::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(110deg,transparent 15%,#ff304824 40%,transparent 65%); background-size: 240% 100%; animation: header-glow 8s ease-in-out infinite alternate; }
.hero-nav__brand { flex-shrink: 0; }
.hero-nav__brand>span { font-size: 9px; letter-spacing: .18em; }
.hero-nav__brand strong { font: 32px/1.15 var(--font-display); display: flex; align-items: center; gap: 8px; }
.hero-nav__brand .hero-nav__versus { font: 11px var(--font-mono); display: inline-grid; place-items: center; width: 26px; height: 26px; border: 1px solid #ff5269; transform: rotate(-8deg); animation: allegiance 4s ease-in-out infinite alternate; }
.hero-nav__links { gap: clamp(8px,1.6vw,24px); font-size: 18px; }
.hero-nav__links a { min-height: 44px; align-items: center; gap: 5px; }
.hero-nav__index { color: #ffb8c1; font-size: 10px; }
.hero-nav__wallet { background: #ff5269; color: #100004; border: 1px solid #ff94a4; min-height: 44px; padding: 10px 14px; font-size: 16px; box-shadow: 4px 4px 0 #872034; }
.hero-nav__arrow { animation: arrow-nudge 2.8s ease-in-out infinite; }
.frame { z-index: 3; margin-inline: auto; }
#about-landing { position: absolute; top: 4%; left: 0; width: 1px; height: 1px; pointer-events: none; }
.motion-art { display: contents; }
.collection-info__art { display: block; grid-column: 2; grid-row: 1; align-self: start; }
.collection-info__crest { width: 100%; height: auto; max-height: 38cqw; object-fit: contain; object-position: center top; }
.gallery { --gallery-row-gap: clamp(12px,3cqw,45px); overflow: visible; }
.gallery__grid { row-gap: var(--gallery-row-gap); margin-inline: auto; }
.gallery__hand-cell { position: relative; top: var(--gallery-row-gap); }
.gallery__hand-cell img { width: 100%; height: auto; object-fit: contain; }
.gallery__butterfly { right: 0; bottom: 0; width: 30%; height: auto; max-height: 43%; object-fit: contain; object-position: right bottom; pointer-events: none; }
.frame:has(.nft-card:is(.is-active,:focus-visible)) { z-index: 20; }
.gallery:has(.nft-card:is(.is-active,:focus-visible)) { z-index: 30; }
.nft-card { --card-accent: #ff3048; --frame-gap: 11px; cursor: pointer; transform-origin: center 65%; transition: transform 1.8s cubic-bezier(.16,1,.3,1),filter 1s ease 1.5s; }
.nft-card:nth-child(4) { --card-accent: #ff73b9; }
.nft-card:is(.is-active,:focus-visible) { z-index: 100; transform: translateY(-10px) rotate(-2deg) scale(1.035); filter: drop-shadow(0 0 12px color-mix(in srgb,var(--card-accent) 24%,transparent)); }
.nft-card::before,.nft-card::after { border-color: var(--card-accent); transition: width .85s ease, height .85s ease .75s, opacity .25s; }
.nft-card::before { top: calc(-1 * var(--frame-gap)); left: calc(-1 * var(--frame-gap)); }
.nft-card::after { bottom: calc(-1 * var(--frame-gap)); right: calc(-1 * var(--frame-gap)); }
.nft-card:is(.is-active,:focus-visible)::before,.nft-card:is(.is-active,:focus-visible)::after { width: calc(100% + var(--frame-gap) * 2); height: calc(100% + var(--frame-gap) * 2); }
.nft-card__price { top: 1px; left: 40%; right: 40%; font-size: clamp(7px,1cqw,14px); letter-spacing: 0; line-height: 1; background: var(--card-accent); padding: 0 1px; }
.nft-card__media { overflow: hidden; }
.nft-card__media>img:first-child { transition: filter 1.6s ease; }
.nft-card__media::after { content: ''; position: absolute; inset: -30%; z-index: 4; pointer-events: none; opacity: 0; background: linear-gradient(110deg,transparent 38%,#fff2 49%,#fff4 50%,transparent 63%); transform: translateX(-90%); }
.nft-card:is(.is-active,:focus-visible) .nft-card__media::after { animation: card-shine 4s ease-in-out 1.7s infinite; }
.site-footer { background-image: url('../assets/optimized/footer-art.webp'); }
.footer-castle { position: absolute; left: 50%; top: 10%; transform: translateX(-50%); height: 85%; width: 65%; object-fit: contain; z-index: 1; }
.loader-weapon { width: 280px; height: 210px; }
.loader-bow { width: 280px; height: 210px; }
.loader-bow__string,.loader-bow__arrow { animation: none; transform: none; }
.loader-bow__string { stroke-width: 1.2; }
@keyframes card-shine { 0% { opacity: 0; transform: translateX(-90%); } 15% { opacity: .6; } 45% { opacity: .6; } 60%,100% { opacity: 0; transform: translateX(90%); } }
@keyframes header-glow { to { background-position: 100% 0; } }
@keyframes allegiance { to { transform: rotate(8deg); background: #ff5269; color: #100004; } }
@keyframes arrow-nudge { 50% { transform: translate(3px,-3px); } }
@media(max-width:1050px) { .hero-nav { flex-wrap: wrap; }.hero-nav__brand { flex: 1; }.hero-nav__links { order: 3; width: 100%; justify-content: space-between; } }
@media(max-width:600px) {
 .hero-nav { padding: 12px; gap: 10px; }.hero-nav__brand strong { font-size: 26px; }.hero-nav__brand>span { font-size: 8px; }.hero-nav__wallet { font-size: 13px; padding: 8px; gap: 5px; }.hero-nav__links { gap: 2px; font-size: 13px; border-top: 1px solid #ff526933; padding-top: 4px; }.hero-nav__links a { padding: 2px; }.hero-nav__index { display: none; }
 .collection-info__art { position: absolute; top: 0; right: 0; width: 34%; }.collection-info__crest { position: static; width: 100%; max-height: none; }
 .nft-card { --frame-gap: 6px; }.nft-card:is(.is-active,:focus-visible) { transform: translateY(-5px) rotate(-1deg) scale(1.02); }.gallery__hand-cell img { width: 100%; height: auto; }.nft-card__title { font-size: clamp(10px,2.8cqw,16px); }
 .frame-nav__toggle { min-width: 40px; min-height: 40px; justify-content: center; align-items: center; }.frame-nav__menu a { min-height: 44px; display: flex; align-items: center; }
 .page-loader__caption { font-size: 11px; letter-spacing: .1em; }
}
@media(prefers-reduced-motion:reduce) { .nft-card__media::after { display: none; } }

.nft-card:nth-child(4) .nft-card__price { background: #ffa037; filter: hue-rotate(320deg) saturate(1.5); }

/* The About teeth must paint over the hero's lower edge, never behind it. */
.about { z-index: 4; }
.frame { z-index: 5; }
.product-hero__wordmark-band { top: 42%; height: 27%; background: transparent; border-top: 1px solid #090000; border-bottom: 1px solid #090000; }
.product-hero__wordmark { font-size: 18cqw; line-height: 1; transform: translateY(.025em) scaleX(1.5); letter-spacing: -.025em; color: #ff5269; text-align: center; text-shadow: 2px 2px 0 #100004; }
.product-hero__taglines { top: 34%; font-size: 1.6cqw; align-items: end; }
.product-hero__tagline { width: 38%; }
.product-hero__tagline span { background: transparent; color: #100004; }
.product-hero__tagline br { display: none; }
.footer-castle { mix-blend-mode: multiply; }
@media(max-width:600px) { .product-hero__taglines { font-size: 2cqw; top: 32%; } .product-hero__wordmark { text-shadow: 1px 1px 0 #100004; } }

/* Align the title to the reserved strip in the supplied crown artwork. */
.product-hero__wordmark-band { top: 58.5%; height: 19.6%; }
.product-hero__wordmark { font-size: 14cqw; transform: translateY(.025em) scaleX(1.8); color: #100004; text-shadow: none; }
.product-hero__taglines { top: 54.5%; font-size: 1.8cqw; }
@media(max-width:600px) { .product-hero__taglines { top: 54%; font-size: 2.2cqw; } }

/* Compact footer: the black rain starts at this boundary after the roadmap. */
.frame { margin-bottom: 0; }
.site-footer { aspect-ratio: auto; min-height: 120px; background: var(--bg-red); clip-path: none; }
.site-footer .page-matrix { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.footer-links { position: relative; z-index: 1; min-height: 120px; width: 90%; margin: auto; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; gap: 12px; font: clamp(13px,1.65vw,24px)/1.2 'Fayte Pixel', var(--font-mono); color: #000; }
.footer-links>:nth-child(2) { text-align: center; }
.footer-links>:last-child { text-align: right; }
.footer-links a { padding-block: 14px; }
.product-hero__wordmark-band { background: #000; border: 1px solid #000; }
.product-hero__wordmark { display: flex; align-items: center; justify-content: center; gap: 1.6cqw; font-size: 11cqw; line-height: 1; transform: none; color: #ff5269; letter-spacing: 0; }
.product-hero__or { display: inline-grid; place-items: center; width: 5cqw; height: 5cqw; border: 1px solid currentColor; font-size: 2.6cqw; line-height: 1; transform: rotate(-8deg); }
@media(max-width:600px) { .footer-links { width: 94%; min-height: 96px; gap: 8px; font-size: clamp(10px,2.8vw,16px); }.site-footer { min-height: 96px; } }

/* Footer labels share the exact outer width and cap of the central frame. */
.footer-links { width: 90%; max-width: 1500px; }
.site-footer { background: transparent; isolation: auto; }
.footer-links { z-index: 3; }
.product-hero__wordmark { padding: .5cqw 2cqw; border: 1px solid #ff526980; background: #000; }
.product-hero__or { animation: allegiance 4s ease-in-out infinite alternate; }
@media(max-width:600px) { .footer-links { width: 94%; } }

.footer-links { font-family: var(--font-mono); }
/* Opacity only: text remains readable and its geometry never changes. */
.text-shimmer { animation: text-shimmer 6s ease-in-out infinite; animation-delay: var(--text-delay,0s); animation-play-state: paused; }
.text-shimmer.is-in-view { animation-play-state: running; }
@keyframes text-shimmer { 0%,100% { opacity: 1; } 50% { opacity: .8; } }
@media(prefers-reduced-motion:reduce) { .text-shimmer { animation: none; } }