/* ==========================================================================
   THE BAZUS - VICTORIAN HERITAGE EFFECTS
   Curated, production-ready effects for block styles
   ========================================================================== */

/* --------------------------------------------------------------------------
   FILM FLICKER
   Apply to titles, hero text for subtle vintage animation
   Usage: .has-film-flicker or is-style-film-flicker
   -------------------------------------------------------------------------- */

.has-film-flicker,
.is-style-film-flicker {
  animation: filmFlicker 4s ease-in-out infinite;
}

@keyframes filmFlicker {
  0%, 100% { opacity: 1; }
  48% { opacity: 0.97; }
  50% { opacity: 0.88; }
  52% { opacity: 0.95; }
  54% { opacity: 0.9; }
  56% { opacity: 1; }
}

/* --------------------------------------------------------------------------
   LETTERPRESS HOVER
   Inverts on hover with embossed inner border - for cards, non-button elements
   Usage: .letterpress-hover (Button styles are in style.css)
   -------------------------------------------------------------------------- */

.letterpress-hover {
  position: relative;
  transition: all 0.3s ease;

  &::before {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1px solid currentColor;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
  }

  &:hover {
    background: var(--color-ink, #1A1A1A) !important;
    color: var(--color-cream, #FAF9F6) !important;
    transform: translateY(-2px);
    box-shadow: 3px 3px 0 var(--color-ink, #1A1A1A);

    &::before {
      opacity: 0.4;
    }
  }
}

/* --------------------------------------------------------------------------
   AGED PAPER HOVER
   Adds sepia + warm overlay on hover - for content cards
   Usage: .aged-paper-hover or is-style-aged-paper
   -------------------------------------------------------------------------- */

.aged-paper-hover,
.is-style-aged-paper {
  position: relative;
  transition: filter 0.5s ease;
}

.aged-paper-hover::after,
.is-style-aged-paper::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    transparent 0%,
    rgba(180, 160, 120, 0.08) 50%,
    rgba(140, 120, 80, 0.12) 100%
  );
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
  z-index: 1;
}

.aged-paper-hover:hover,
.is-style-aged-paper:hover {
  filter: sepia(0.1);
}

.aged-paper-hover:hover::after,
.is-style-aged-paper:hover::after {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   VINTAGE STAMP
   Circular badge with rotating dashed border - for dates, badges
   Usage: .vintage-stamp
   -------------------------------------------------------------------------- */

.vintage-stamp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100px;
  height: 100px;
  border: 2px solid var(--color-ink, #1A1A1A);
  border-radius: 50%;
  position: relative;
  transform: rotate(-6deg);
  transition: all 0.4s ease;
}

.vintage-stamp::before {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid var(--color-ink, #1A1A1A);
  border-radius: 50%;
}

.vintage-stamp::after {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px dashed var(--color-ink, #1A1A1A);
  border-radius: 50%;
  animation: stampRotate 25s linear infinite;
}

@keyframes stampRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.vintage-stamp:hover {
  transform: rotate(0deg) scale(1.05);
  border-color: var(--color-brass, #C9A227);
}

.vintage-stamp:hover::before,
.vintage-stamp:hover::after {
  border-color: var(--color-brass, #C9A227);
}

.vintage-stamp__year {
  font-family: var(--font-heading, 'Cormorant Garamond', serif);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
}

.vintage-stamp__text {
  font-size: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-top: 0.2rem;
}

/* --------------------------------------------------------------------------
   VICTORIAN FRAME (Double Border)
   Classic double-border treatment - for cards, info boxes, sections
   Usage: .victorian-frame or is-style-victorian
   -------------------------------------------------------------------------- */

.victorian-frame,
.is-style-victorian {
  position: relative;
  border: 2px solid var(--color-ink, #1A1A1A);
  padding: var(--space-l, 1.5rem);
  background: var(--color-cream, #FAF9F6);
}

.victorian-frame::before,
.is-style-victorian::before {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid var(--color-ink, #1A1A1A);
  pointer-events: none;
}

/* Optional inner dashed border variant */
.victorian-frame--full::after,
.is-style-victorian-full::after {
  content: '';
  position: absolute;
  inset: 12px;
  border: 1px dashed var(--color-ink, #1A1A1A);
  opacity: 0.4;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   SPECIMEN CARD
   Museum catalog style with dark header - for history, facts
   Usage: .specimen-card or is-style-specimen
   -------------------------------------------------------------------------- */

.specimen-card,
.is-style-specimen {
  border: 1px solid var(--color-ink, #1A1A1A);
  background: var(--color-cream, #FAF9F6);
  overflow: hidden;
}

.specimen-card__header,
.is-style-specimen .kt-blocks-info-box-title,
.is-style-specimen .kb-infobox-title {
  background: var(--color-ink, #1A1A1A);
  color: var(--color-cream, #FAF9F6);
  padding: 0.625rem 1rem;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0;
}

.specimen-card__body,
.is-style-specimen .kt-blocks-info-box-text,
.is-style-specimen .kb-infobox-text {
  padding: var(--space-m, 1rem);
}

/* --------------------------------------------------------------------------
   TRADE CARD
   Vintage advertisement style - for CTAs, feature highlights
   Usage: .trade-card or is-style-trade-card
   -------------------------------------------------------------------------- */

.trade-card,
.is-style-trade-card {
  position: relative;
  border: 2px solid var(--color-ink, #1A1A1A);
  padding: var(--space-xl, 2.5rem) var(--space-l, 1.5rem);
  background: var(--color-cream, #FAF9F6) !important;
  text-align: center;
}

/* Ensure Kadence info boxes get the background */
.kt-blocks-info-box-container.is-style-trade-card,
.kb-info-box-wrap.is-style-trade-card {
  background: var(--color-cream, #FAF9F6) !important;
}

.trade-card::before,
.is-style-trade-card::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid var(--color-ink, #1A1A1A);
  pointer-events: none;
}

/* Center ornament */
.trade-card::after,
.is-style-trade-card::after {
  content: '';
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: var(--color-brass, #C9A227);
}

/* --------------------------------------------------------------------------
   CABINET CARD
   Photo mount board style - for images with captions
   Usage: .cabinet-card or is-style-cabinet
   -------------------------------------------------------------------------- */

.cabinet-card,
.is-style-cabinet {
  background: var(--color-ink, #1A1A1A);
  padding: var(--space-m, 1rem);
  padding-bottom: var(--space-xl, 2.5rem);
}

.cabinet-card img,
.is-style-cabinet img {
  border: 4px solid var(--color-cream, #FAF9F6);
}

.cabinet-card figcaption,
.is-style-cabinet figcaption {
  color: var(--color-cream, #FAF9F6);
  text-align: center;
  margin-top: var(--space-m, 1rem);
  font-family: var(--font-accent, 'Libre Baskerville', serif);
  font-style: italic;
  font-size: var(--font-size-small, 0.875rem);
}

/* --------------------------------------------------------------------------
   SEPIA TREATMENT
   Aged photograph look - for images
   Usage: .sepia-treatment or is-style-sepia
   -------------------------------------------------------------------------- */

.sepia-treatment,
.is-style-sepia {
  filter: sepia(0.7) contrast(1.05);
  transition: filter 0.5s ease;
}

.sepia-treatment:hover,
.is-style-sepia:hover {
  filter: sepia(0) contrast(1);
}

/* Reverse: color to sepia on hover */
.sepia-on-hover,
.is-style-sepia-hover {
  transition: filter 0.5s ease;
}

.sepia-on-hover:hover,
.is-style-sepia-hover:hover {
  filter: sepia(0.5) contrast(1.05);
}

/* --------------------------------------------------------------------------
   FADE-IN ON SCROLL
   Elements fade up as they enter viewport (requires JS)
   Usage: .fade-in-scroll or is-style-fade-in
   -------------------------------------------------------------------------- */

.fade-in-scroll,
.is-style-fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.fade-in-scroll.is-visible,
.is-style-fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children variant */
.fade-in-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in-stagger.is-visible > *:nth-child(1) { transition-delay: 0s; }
.fade-in-stagger.is-visible > *:nth-child(2) { transition-delay: 0.1s; }
.fade-in-stagger.is-visible > *:nth-child(3) { transition-delay: 0.2s; }
.fade-in-stagger.is-visible > *:nth-child(4) { transition-delay: 0.15s; }

.fade-in-stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   BRASS ACCENT UTILITIES
   Quick brass color applications
   -------------------------------------------------------------------------- */

.brass-border {
  border-color: var(--color-brass, #C9A227) !important;
}

.brass-text {
  color: var(--color-brass, #C9A227);
}

.brass-bg {
  background-color: var(--color-brass, #C9A227);
}

/* ==========================================================================
   PAGE ATMOSPHERE - Site-wide texture treatments
   Applied via Customizer > Page Atmosphere
   ========================================================================== */

/* Base64 noise texture (128x128 grayscale PNG) */
:root {
  --noise-texture: url("data:image/png;base64,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");
}

/* Shared base for all page textures */
.has-page-texture::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background-image: var(--noise-texture);
  background-repeat: repeat;
  mix-blend-mode: overlay;
}

/* Grain Light */
body.page-texture-grain-light::after {
  opacity: 0.35;
}

/* Grain Animated */
body.page-texture-grain-animated::after {
  opacity: 0.4;
  animation: grainShift 0.15s steps(2) infinite;
}

@keyframes grainShift {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-10%, 10%); }
}

/* Paper Aged - warm corner tinting + heavy grain */
body.page-texture-paper-aged::after {
  background-image:
    var(--noise-texture),
    linear-gradient(135deg,
      rgba(120, 95, 55, 0.35) 0%,
      transparent 45%,
      transparent 55%,
      rgba(100, 80, 40, 0.3) 100%
    );
  opacity: 1;
}

/* Vintage - grain + warm tint combined */
body.page-texture-vintage::after {
  background-image:
    var(--noise-texture),
    linear-gradient(135deg,
      rgba(120, 95, 55, 0.3) 0%,
      transparent 40%,
      transparent 60%,
      rgba(100, 80, 40, 0.25) 100%
    );
  opacity: 1;
}

/* --------------------------------------------------------------------------
   PAGE VIGNETTE - Edge darkening overlay
   -------------------------------------------------------------------------- */

.has-page-vignette::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
}

body.page-vignette-vignette-soft::before {
  background: radial-gradient(ellipse at center, transparent 30%, rgba(26, 26, 26, 0.3) 100%);
}

body.page-vignette-vignette-warm::before {
  background: radial-gradient(ellipse at center, transparent 25%, rgba(80, 50, 20, 0.4) 100%);
}

/* ==========================================================================
   CUSTOM CURSOR - Gaslight inspired
   Center dot with circular border and warm glow
   ========================================================================== */

/* Hide default cursor on desktop */
@media (pointer: fine) {
  body.has-custom-cursor,
  body.has-custom-cursor * {
    cursor: none !important;
  }

  /* Restore pointer cursor on interactive elements */
  body.has-custom-cursor a,
  body.has-custom-cursor button,
  body.has-custom-cursor [role="button"],
  body.has-custom-cursor input[type="submit"],
  body.has-custom-cursor .wp-block-button__link {
    cursor: none !important;
  }
}

.bazus-cursor {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 99999;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.bazus-cursor.is-visible {
  opacity: 1;
}

/* Outer ring */
.bazus-cursor__ring {
  position: absolute;
  width: 28px;
  height: 28px;
  border: 1px solid var(--color-ink, #1A1A1A);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition:
    width 0.2s ease,
    height 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}

/* Center dot */
.bazus-cursor__dot {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--color-ink, #1A1A1A);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition:
    width 0.15s ease,
    height 0.15s ease,
    background 0.15s ease;
}

/* Warm gaslight glow */
.bazus-cursor__glow {
  position: absolute;
  width: 80px;
  height: 80px;
  background: radial-gradient(
    circle,
    rgba(201, 162, 39, 0.15) 0%,
    rgba(201, 162, 39, 0.05) 40%,
    transparent 70%
  );
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Hover state - subtle brass micro interaction */
.bazus-cursor.is-hovering .bazus-cursor__ring {
  width: 24px;
  height: 24px;
  border: 1.5px solid rgba(201, 162, 39, 0.9);
  background: rgba(255, 255, 255, 0.95);
  box-shadow:
    0 0 6px rgba(201, 162, 39, 0.5),
    0 0 12px rgba(201, 162, 39, 0.2);
}

.bazus-cursor.is-hovering .bazus-cursor__dot {
  width: 3px;
  height: 3px;
  background: var(--color-brass, #C9A227);
}

.bazus-cursor.is-hovering .bazus-cursor__glow {
  opacity: 0;
}

/* Click state - quick pulse */
.bazus-cursor.is-clicking .bazus-cursor__ring {
  width: 24px;
  height: 24px;
}

.bazus-cursor.is-clicking .bazus-cursor__dot {
  width: 6px;
  height: 6px;
}