/* ─── Tier C — Showcase Interactions ──────────────────────────────────
   Layers over styles.css. Only contains showcase-mode additions.
   All motion gated by prefers-reduced-motion: reduce.
─────────────────────────────────────────────────────────────────── */

/* ═════════ LOADER — Mark inks itself in ═════════ */
.loader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--paper);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 32px;
  pointer-events: none;
  transition: opacity 540ms ease 320ms, visibility 0ms linear 860ms;
}
.loader.gone { opacity: 0; visibility: hidden; }

.loader .mark-ink {
  width: clamp(180px, 28vw, 280px); height: auto;
  position: relative;
}
.loader .mark-ink img {
  width: 100%; height: auto; display: block;
  /* Clip the mark from a tiny center circle outward as ink bleeds */
  clip-path: circle(0% at 50% 55%);
  animation: ink-bleed 1400ms cubic-bezier(0.45, 0, 0.25, 1) 120ms forwards;
  filter: contrast(0.4) brightness(1.4);
}
.loader .mark-ink::after {
  /* Crimson ring that "stamps" around the mark at the end */
  content: ""; position: absolute; inset: -8%;
  border: 3px solid var(--rust); border-radius: 50%;
  opacity: 0; transform: scale(0.85) rotate(-4deg);
  animation: ring-impress 480ms cubic-bezier(0.16, 1, 0.3, 1) 1380ms forwards;
}
@keyframes ink-bleed {
  0%   { clip-path: circle(0% at 50% 55%); filter: contrast(0.4) brightness(1.4); }
  35%  { clip-path: circle(28% at 50% 55%); filter: contrast(0.7) brightness(1.2); }
  70%  { clip-path: circle(64% at 50% 55%); filter: contrast(1) brightness(1); }
  100% { clip-path: circle(75% at 50% 55%); filter: contrast(1) brightness(1); }
}
@keyframes ring-impress {
  0%   { opacity: 0; transform: scale(0.85) rotate(-8deg); }
  60%  { opacity: 1; transform: scale(1.04) rotate(-2deg); }
  100% { opacity: 1; transform: scale(1) rotate(-3deg); }
}
.loader .imprint-line {
  font-family: 'Special Elite', monospace;
  font-size: 0.75rem; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--rust); opacity: 0;
  animation: fade-in-up 500ms ease 1500ms forwards;
}
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .loader .mark-ink img { animation: none; clip-path: none; filter: none; }
  .loader .mark-ink::after { animation: none; opacity: 1; transform: scale(1) rotate(-3deg); }
  .loader .imprint-line { animation: none; opacity: 1; }
}

/* ═════════ IN-THE-SHOP TICKER ═════════ */
.shop-ticker {
  background: var(--ink); color: var(--paper-warm);
  border-top: 1px solid #2A1F15; border-bottom: 1px solid #2A1F15;
  padding: 8px 0;
  font-family: 'Special Elite', monospace;
  font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase;
  overflow: hidden;
}
.shop-ticker .row {
  display: flex; align-items: center; justify-content: center; gap: 14px;
}
.shop-ticker .dot {
  width: 7px; height: 7px; background: var(--gold); border-radius: 50%;
  flex-shrink: 0;
  animation: ticker-pulse 2.4s ease-in-out infinite;
}
@keyframes ticker-pulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
}
.shop-ticker .msg { transition: opacity 600ms ease; min-height: 1em; }
.shop-ticker .msg.fading { opacity: 0; }
.shop-ticker .label { color: var(--gold); margin-right: 6px; }

/* ═════════ LOCALE FLIP-CARD ═════════
   Single line of info, rotates between phrases via 3D rotateX flip.
   Header uses default (flips up); footer uses .reverse (flips down). */
.locale-flipper {
  background: var(--paper-warm);
  border-bottom: 1px solid var(--paper-deep);
  border-top: 1px solid var(--paper-deep);
  height: 44px;
  display: flex; align-items: center; justify-content: center;
  perspective: 800px;
  font-family: 'Special Elite', monospace;
  font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink);
  overflow: hidden;
  position: relative;
}
.locale-flipper .face {
  display: inline-flex; align-items: center; gap: 10px;
  white-space: nowrap;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  padding: 0 12px;
}
.locale-flipper .pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--olive-deep); display: inline-block;
  box-shadow: 0 0 0 2px rgba(122, 139, 76, 0.2);
  flex-shrink: 0;
}
.locale-flipper .pulse.closed {
  background: var(--rust);
  box-shadow: 0 0 0 2px rgba(166, 58, 40, 0.2);
}
.locale-flipper .live-status { font-weight: 700; letter-spacing: 0.2em; }
.locale-flipper .em { color: var(--rust); }

@media (prefers-reduced-motion: reduce) {
  .locale-flipper .face { transition: opacity 200ms ease !important; transform: none !important; }
}

/* Footer variant: same band, sits at top of colophon, flips opposite direction */
footer.colophon .locale-flipper {
  margin-bottom: 32px;
  background: var(--ink); color: var(--paper-warm);
  border-top: 2px solid var(--rust);
  border-bottom: 1px solid #2A1F15;
}
footer.colophon .locale-flipper .pulse {
  background: #C6E0A6;
  box-shadow: 0 0 0 2px rgba(198, 224, 166, 0.15);
}
footer.colophon .locale-flipper .pulse.closed {
  background: #E68B85;
  box-shadow: 0 0 0 2px rgba(230, 139, 133, 0.18);
}
footer.colophon .locale-flipper .em { color: var(--gold); }

/* Shop ticker — mobile readability */
@media (max-width: 720px) {
  .shop-ticker { padding: 8px 0; font-size: 0.625rem; letter-spacing: 0.12em; }
  .shop-ticker .container { padding: 0 16px; }
  .shop-ticker .row { gap: 10px; }
}
@media (max-width: 720px) {
  .locale-flipper { height: 42px; font-size: 0.6875rem; letter-spacing: 0.16em; }
}

/* ═════════ FILM-GRAIN OVERLAY ═════════ */
.film-grain {
  position: fixed; inset: 0; z-index: 200; pointer-events: none;
  opacity: 0.04;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.22  0 0 0 0 0.15  0 0 0 0 0.09  0 0 0 0.7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
  transition: opacity 400ms ease;
}
@media (prefers-reduced-motion: reduce) { .film-grain { display: none; } }

/* ═════════ STAMP EASTER EGG ═════════ */
.stamp-mark {
  position: absolute;
  font-family: 'Rye', serif;
  font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--rust); border: 2px solid var(--rust);
  padding: 6px 14px;
  background: rgba(242, 232, 204, 0.85);
  pointer-events: none; z-index: 8000;
  opacity: 0; transform: translate(-50%, -50%) rotate(-7deg) scale(0.3);
  animation: stamp-press 480ms cubic-bezier(0.16, 1, 0.3, 1) forwards, stamp-settle 4s ease-out 480ms forwards;
}
@keyframes stamp-press {
  0%   { opacity: 0; transform: translate(-50%, -50%) rotate(-12deg) scale(0.3); }
  60%  { opacity: 1; transform: translate(-50%, -50%) rotate(-4deg) scale(1.08); }
  100% { opacity: 1; transform: translate(-50%, -50%) rotate(-7deg) scale(1); }
}
@keyframes stamp-settle {
  0%   { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0.45; }
}

/* ═════════ SHUTTER (form submit) ═════════ */
.shutter-overlay {
  position: fixed; inset: 0; z-index: 9500;
  background: var(--ink);
  opacity: 0; visibility: hidden;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 240ms ease, visibility 0ms linear 280ms;
}
.shutter-overlay.active {
  opacity: 1; visibility: visible;
  transition: opacity 240ms ease, visibility 0ms;
}
.shutter-overlay .iris {
  width: clamp(280px, 50vw, 540px); height: clamp(280px, 50vw, 540px);
  position: relative;
}
.shutter-overlay .iris .leaf {
  position: absolute; inset: 0;
  background: var(--paper);
  clip-path: polygon(50% 0, 100% 0, 50% 50%);
  transform-origin: 50% 50%;
  transform: rotate(var(--rot, 0deg)) scale(0);
  transition: transform 540ms cubic-bezier(0.65, 0, 0.35, 1);
}
.shutter-overlay.active .iris .leaf { transform: rotate(var(--rot, 0deg)) scale(1.6); }
.shutter-overlay.opening .iris .leaf { transform: rotate(var(--rot, 0deg)) scale(0); }
.shutter-overlay .confirm-card {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  text-align: center; padding: 32px;
  opacity: 0; transform: scale(0.94);
  transition: opacity 360ms ease 540ms, transform 360ms cubic-bezier(0.16, 1, 0.3, 1) 540ms;
  pointer-events: none;
}
.shutter-overlay.active .confirm-card { opacity: 1; transform: scale(1); pointer-events: auto; }
.shutter-overlay .confirm-card .stamp-glyph {
  display: inline-block; padding: 12px 28px;
  border: 2.5px solid var(--rust); color: var(--rust);
  font-family: 'Rye', serif; font-size: 1.25rem; letter-spacing: 0.18em;
  transform: rotate(-3deg); margin-bottom: 24px;
}
.shutter-overlay .confirm-card h2 {
  font-family: 'Rye', serif; color: var(--paper); font-size: 2rem; margin-bottom: 12px;
}
.shutter-overlay .confirm-card p {
  font-family: 'DM Serif Display', serif; font-style: italic;
  font-size: 1.0625rem; color: var(--paper-warm); max-width: 36ch;
}
.shutter-overlay .confirm-card .dismiss {
  margin-top: 24px;
  font-family: 'Special Elite', monospace; font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--paper-warm); background: transparent; border: 1px solid var(--paper-warm);
  padding: 10px 20px; cursor: pointer;
}
.shutter-overlay .confirm-card .dismiss:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
@media (prefers-reduced-motion: reduce) {
  .shutter-overlay { transition: opacity 100ms ease; }
  .shutter-overlay .iris .leaf, .shutter-overlay .confirm-card { transition: none; }
}

/* ═════════ LIVE QUOTE-ESTIMATE PANEL ═════════ */
.quote-estimate {
  background: var(--ink); color: var(--paper);
  padding: 28px 32px; margin-top: 32px;
  position: sticky; top: 100px;
}
.quote-estimate .label {
  font-family: 'Special Elite', monospace; font-size: 0.625rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 12px; display: block;
}
.quote-estimate .number {
  font-family: 'Rye', Georgia, serif; font-size: 2.5rem; color: var(--paper);
  line-height: 1; margin-bottom: 6px;
  font-variant-numeric: tabular-nums; letter-spacing: 0.01em;
}
.quote-estimate .number .currency { font-size: 0.6em; vertical-align: top; margin-right: 4px; opacity: 0.7; }
.quote-estimate .number .em-dash { color: var(--gold); }
.quote-estimate .note {
  font-family: 'DM Serif Display', serif; font-style: italic;
  font-size: 0.875rem; line-height: 1.5; color: var(--paper-warm);
  margin-top: 16px;
}

/* ═════════ KIT PAGE — pinned-category scroll ═════════ */
.category[data-pin] .head {
  position: sticky; top: 80px; z-index: 2;
  background: inherit;
  padding: 24px 0;
}
@media (max-width: 880px) {
  .category[data-pin] .head { position: static; }
}

/* ═════════ KONAMI / RYE EASTER EGG ═════════ */
.rye-rain {
  position: fixed; inset: 0; z-index: 8500; pointer-events: none;
  overflow: hidden;
}
.rye-rain .ch {
  position: absolute; top: -10vh;
  font-family: 'Rye', serif; font-size: clamp(2rem, 5vw, 4rem);
  color: var(--rust); opacity: 0.85;
  animation: fall var(--dur, 3.6s) linear forwards;
  text-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
@keyframes fall {
  to { transform: translateY(120vh) rotate(var(--rot, 180deg)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .rye-rain .ch { animation: none; display: none; } }

/* ═════════ CLAPBOARD TRANSITION ═════════ */
.slate {
  position: fixed; inset: 0; z-index: 10000;
  pointer-events: none;
  display: grid; grid-template-rows: 0fr 1fr 0fr;
  transition: grid-template-rows 380ms cubic-bezier(0.6, 0, 0.3, 1), visibility 0ms linear 380ms;
  visibility: hidden;
}
.slate.closing, .slate.opening, .slate.opened {
  visibility: visible;
  transition: grid-template-rows 380ms cubic-bezier(0.6, 0, 0.3, 1);
}
.slate .slate-top {
  background: var(--ink);
  position: relative;
  border-bottom: 6px solid var(--rust);
}
.slate .slate-top::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -20px; height: 20px;
  background: repeating-linear-gradient(45deg,
    var(--ink) 0, var(--ink) 16px,
    var(--paper) 16px, var(--paper) 32px
  );
}
.slate .slate-middle {
  display: flex; align-items: center; justify-content: center;
  background: transparent;
}
.slate.closing {
  grid-template-rows: 1fr 0fr 0fr;
}
.slate.opening {
  grid-template-rows: 1fr 0fr 0fr;
  transition: grid-template-rows 0ms;
}
.slate.opened {
  grid-template-rows: 0fr 1fr 0fr;
  transition: grid-template-rows 460ms cubic-bezier(0.6, 0, 0.3, 1) 60ms;
}

/* ═════════ VIEWFINDER CURSOR ═════════ */
.cursor {
  position: fixed; top: 0; left: 0;
  pointer-events: none; z-index: 9000;
  width: 36px; height: 36px;
  transform: translate3d(-50%, -50%, 0);
  transition: transform 80ms cubic-bezier(0.2, 0, 0, 1), width 240ms, height 240ms;
  mix-blend-mode: multiply;
}
.cursor .frame {
  position: absolute; inset: 0;
  pointer-events: none;
}
.cursor .frame::before, .cursor .frame::after,
.cursor .frame > span::before, .cursor .frame > span::after {
  content: ""; position: absolute; width: 8px; height: 8px;
  border: 1.5px solid var(--ink);
}
.cursor .frame::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.cursor .frame::after { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.cursor .frame > span::before { bottom: 0; left: 0; border-right: 0; border-top: 0; position: absolute; }
.cursor .frame > span::after { bottom: 0; right: 0; border-left: 0; border-top: 0; position: absolute; }
.cursor .crosshair {
  position: absolute; top: 50%; left: 50%; width: 8px; height: 1px;
  background: var(--ink); transform: translate(-50%, -50%);
}
.cursor .crosshair::after {
  content: ""; position: absolute; top: -3.5px; left: 3.5px;
  width: 1px; height: 8px; background: var(--ink);
}

/* Cursor over CTA — becomes a crimson stamp shape */
.cursor.over-cta {
  width: 56px; height: 56px;
  mix-blend-mode: normal;
}
.cursor.over-cta .frame { border-radius: 50%; }
.cursor.over-cta .frame::before, .cursor.over-cta .frame::after,
.cursor.over-cta .frame > span::before, .cursor.over-cta .frame > span::after { display: none; }
.cursor.over-cta::before {
  content: ""; position: absolute; inset: 4px;
  border: 2px solid var(--rust); border-radius: 50%;
}
.cursor.over-cta::after {
  content: "STAMP"; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Rye', serif; font-size: 8px; letter-spacing: 0.16em;
  color: var(--rust);
}

/* Cursor over text-link — becomes a typesetter's caret */
.cursor.over-link {
  width: 4px; height: 22px; mix-blend-mode: normal;
}
.cursor.over-link .frame, .cursor.over-link .crosshair { display: none; }
.cursor.over-link::before {
  content: ""; position: absolute; inset: 0;
  background: var(--rust);
}

/* Cursor over input/textarea — becomes a typesetter caret */
.cursor.over-input {
  width: 2px; height: 26px; mix-blend-mode: normal;
}
.cursor.over-input .frame, .cursor.over-input .crosshair { display: none; }
.cursor.over-input::before { content: ""; position: absolute; inset: 0; background: var(--ink); }

/* Hide native cursor when our cursor is active */
.has-cursor, .has-cursor * { cursor: none !important; }
@media (hover: none), (pointer: coarse) { .cursor { display: none !important; } }

/* ═════════ LETTERPRESS HERO TYPE ═════════ */
.letterpress {
  display: inline;
}
.letterpress .lp-word {
  display: inline-block;
  white-space: nowrap;
  vertical-align: baseline;
}
.letterpress .letter {
  display: inline-block;
  opacity: 0; transform: translateY(-60%);
  animation: letterpress-drop 540ms cubic-bezier(0.16, 1.1, 0.3, 1) forwards;
  will-change: transform, opacity;
}
@keyframes letterpress-drop {
  0%   { opacity: 0; transform: translateY(-80%) scaleY(0.9); }
  55%  { opacity: 1; transform: translateY(6%) scaleY(1.04); filter: contrast(1.15); }
  75%  { transform: translateY(-2%) scaleY(0.98); }
  100% { opacity: 1; transform: translateY(0) scaleY(1); filter: contrast(1); }
}
@media (prefers-reduced-motion: reduce) {
  .letterpress .letter { opacity: 1; transform: none; animation: none; }
}

/* ═════════ STAMP CTAs (magnetic + impression) ═════════ */
.btn-primary, button[type="submit"] {
  position: relative;
  transition: transform 180ms cubic-bezier(0.2, 0, 0, 1), background 200ms, border-color 200ms;
  will-change: transform;
}
.btn-primary[data-stamp]::before, button[data-stamp]::before {
  content: attr(data-stamp);
  position: absolute; top: calc(100% + 10px); left: 50%;
  transform: translate(-50%, 0) rotate(-3deg) scale(0.85);
  font-family: 'Rye', serif; font-size: 0.6875rem; letter-spacing: 0.2em;
  color: var(--rust); border: 2px solid var(--rust); padding: 4px 12px;
  opacity: 0; pointer-events: none;
  transition: opacity 260ms ease 0ms, transform 380ms cubic-bezier(0.16, 1, 0.3, 1) 0ms;
  white-space: nowrap;
  background: var(--paper);
}
.btn-primary[data-stamp].stamped::before, button[data-stamp].stamped::before {
  opacity: 1; transform: translate(-50%, 6px) rotate(-3deg) scale(1);
}

/* Hover halo — crimson ink-bloom behind primary CTAs */
.btn-primary::after {
  content: ""; position: absolute; inset: -4px;
  border: 2px solid var(--rust); opacity: 0;
  transform: scale(0.96) rotate(-1deg);
  transition: opacity 240ms, transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.btn-primary:hover::after { opacity: 0.6; transform: scale(1.04) rotate(-1.5deg); }

/* ═════════ INVENTORY LEDGER HOVER ═════════ */
[data-ledger] {
  position: relative;
  transition: transform 240ms cubic-bezier(0.2, 0, 0, 1);
}
[data-ledger]:hover { transform: translateY(-2px); }
[data-ledger]::after {
  content: attr(data-ledger);
  position: absolute; top: 12px; right: -8px;
  font-family: 'Special Elite', monospace;
  font-size: 0.625rem; letter-spacing: 0.14em;
  color: var(--rust); border: 1.5px solid var(--rust); padding: 4px 10px;
  background: var(--paper);
  transform: rotate(-3deg) scale(0.6); transform-origin: center;
  opacity: 0; pointer-events: none;
  transition: opacity 220ms, transform 360ms cubic-bezier(0.16, 1.1, 0.3, 1);
  white-space: nowrap; z-index: 5;
}
[data-ledger]:hover::after {
  opacity: 0.95;
  transform: rotate(-3deg) scale(1);
}

/* ═════════ FILM-PERFORATION MARQUEE ═════════ */
.film-perf {
  position: relative;
  height: 56px;
  background: var(--ink);
  overflow: hidden;
  display: flex; align-items: center;
}
.film-perf::before, .film-perf::after {
  content: ""; position: absolute; left: 0; right: 0; height: 12px;
  background-image: radial-gradient(circle, var(--paper) 0 4px, transparent 4.5px);
  background-size: 24px 12px;
  background-repeat: repeat-x;
}
.film-perf::before { top: 0; }
.film-perf::after { bottom: 0; }
.film-perf .track {
  display: flex;
  white-space: nowrap;
  animation: marquee-slide 38s linear infinite;
  will-change: transform;
  padding: 0 32px;
}
.film-perf .track .item {
  font-family: 'Rye', Georgia, serif;
  font-size: 1.0625rem; letter-spacing: 0.08em;
  color: var(--paper-warm);
  padding: 0 28px;
  display: inline-flex; align-items: center; gap: 28px;
}
.film-perf .track .item::after {
  content: "★"; color: var(--gold); font-size: 0.875rem;
}
@keyframes marquee-slide {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .film-perf .track { animation: none; }
}

/* ═════════ SCROLL REVEAL ═════════ */
[data-reveal] {
  opacity: 0; transform: translateY(24px);
  transition: opacity 720ms cubic-bezier(0.16, 1, 0.3, 1), transform 720ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
}

/* ═════════ 3D CAMERA CANVAS ═════════ */
.camera-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
  max-width: 580px;
  margin-left: auto;
}
.camera-stage canvas {
  width: 100%; height: 100%; display: block;
  cursor: none; /* let the custom cursor render */
}
.camera-stage .caption {
  position: absolute; bottom: 0; left: 0;
  font-family: 'Special Elite', monospace;
  font-size: 0.625rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--rust);
}

/* (audio toggle removed) */

/* ═════════ HERO: ART-COL with 3D + LOGO ═════════ */
.kit-3d-row {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: center;
}
@media (max-width: 880px) {
  .kit-3d-row { grid-template-columns: 1fr; }
}