/* Parfums d’Jardestål — Top-class editorial polish
   Selectively adapted from React Bits interaction concepts.
   Loaded last; intentionally conservative and progressively enhanced. */

:root {
  --pdj-paper-grain: url('assets/textures/paper-grain.webp');
  --pdj-preview-line: rgba(23, 21, 18, .16);
  --pdj-preview-shadow: 0 26px 70px rgba(18, 15, 12, .16);
}

/* React Bits Noise / Texture Lab principle — static instead of animated canvas.
   The texture is deliberately almost imperceptible and never captures input. */
html::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
  background-image: var(--pdj-paper-grain);
  background-repeat: repeat;
  background-size: 160px 160px;
  opacity: .12;
  mix-blend-mode: multiply;
}

/* React Bits Masked Heading principle, reduced to one material-bearing word.
   Text remains real HTML; unsupported/touch layouts retain the normal title. */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  @supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .material-page .fc-hero h1 em.rb-material-mask {
      display: inline-block;
      color: transparent !important;
      -webkit-text-fill-color: transparent;
      -webkit-background-clip: text;
      background-clip: text;
      background-image:
        linear-gradient(rgba(20, 18, 15, .08), rgba(20, 18, 15, .08)),
        url('assets/images/editorial/iris-study-01d1de8ea4b7.webp');
      background-repeat: no-repeat;
      background-size: 190% auto;
      background-position: var(--rb-mask-x, 52%) var(--rb-mask-y, 49%);
      filter: saturate(.70) contrast(1.08) brightness(.78);
      -webkit-text-stroke: .2px rgba(23, 21, 18, .15);
      transition: background-position 220ms cubic-bezier(.2,.7,.2,1), filter 320ms ease;
    }
    .material-page .fc-hero h1 em.rb-material-mask:hover {
      filter: saturate(.78) contrast(1.09) brightness(.82);
    }
  }
}

/* Editorial image preview — a restrained adaptation of React Bits Image Trail.
   One image only, no trail, no stacking, no persistent animation. */
.journal-float-preview {
  position: fixed;
  left: 0;
  top: 0;
  width: clamp(250px, 24vw, 360px);
  aspect-ratio: 4 / 3;
  z-index: 120;
  pointer-events: none;
  overflow: hidden;
  background: #d8d1c4;
  border: 1px solid var(--pdj-preview-line);
  box-shadow: var(--pdj-preview-shadow);
  opacity: 0;
  visibility: hidden;
  clip-path: inset(8% 0 8% 0);
  transform: translate3d(var(--journal-preview-x, 0), var(--journal-preview-y, 0), 0) scale(.975);
  transition:
    opacity 180ms ease,
    visibility 0s linear 180ms,
    clip-path 320ms cubic-bezier(.2,.75,.2,1),
    transform 250ms cubic-bezier(.2,.75,.2,1);
  contain: layout paint style;
}

.journal-float-preview.is-visible {
  opacity: 1;
  visibility: visible;
  clip-path: inset(0 0 0 0);
  transform: translate3d(var(--journal-preview-x, 0), var(--journal-preview-y, 0), 0) scale(1);
  transition-delay: 0s;
}

.journal-float-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.76) contrast(.98) brightness(.94);
  transform: scale(1.018);
}

.journal-page .journal-minor[data-editorial-preview] {
  isolation: isolate;
}

.journal-page .journal-minor[data-editorial-preview]::before {
  content: "";
  position: absolute;
  left: 0;
  right: 30px;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, rgba(116,35,43,.46), rgba(116,35,43,0));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 420ms cubic-bezier(.2,.75,.2,1);
  pointer-events: none;
}

.journal-page .journal-minor[data-editorial-preview]:hover::before,
.journal-page .journal-minor[data-editorial-preview]:focus-visible::before {
  transform: scaleX(1);
}

/* Very small optical refinement for editorial links: the line grows from the copy,
   while the existing magnetic interaction remains the only physical displacement. */
.text-link,
.home-primary-link,
.home-card-link,
.hp-link,
.fc-link,
.journal-feature-copy i,
.journal-minor i {
  text-decoration-thickness: 1px;
  text-underline-offset: .28em;
}

@media (max-width: 1023px), (hover: none), (pointer: coarse) {
  .journal-float-preview { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .material-page .fc-hero h1 em.rb-material-mask {
    transition: none !important;
    background-position: 52% 49% !important;
  }
  .journal-float-preview { display: none !important; }
  .journal-page .journal-minor[data-editorial-preview]::before { transition: none !important; }
}

@media print {
  html::after,
  .journal-float-preview { display: none !important; }
}