/* Terrae Caravelli — cartographic interaction layer.
   Progressive enhancement: the historical documents remain complete without it. */

.terrae-territory-interaction {
  --ti-ink: #0A0F0D;
  --ti-paper: #F4F0E8;
  --ti-craie: #E8E3D8;
  --ti-terra: #2B211A;
  --ti-vinaccia: #3A1722;
  --ti-verde: #10241D;
  --ti-bronze: #8E7458;
  --ti-foglia: #71806C;
}

.terrae-interaction-layer {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.terrae-map > .terrae-interaction-layer {
  z-index: 4;
}

.terrae-territories__plate--map > .terrae-interaction-layer {
  z-index: 4;
}

.terrae-interaction-zone {
  --ti-zone: var(--ti-bronze);
  --ti-zone-deep: var(--ti-verde);
  pointer-events: auto;
  cursor: pointer;
  outline: none;
}

.terrae-interaction-zone__hit {
  fill: transparent;
  stroke: transparent;
  stroke-width: 74px;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  pointer-events: all;
}

.terrae-interaction-zone__wash,
.terrae-interaction-zone__trace,
.terrae-interaction-zone__point,
.terrae-interaction-zone__cardinal {
  vector-effect: non-scaling-stroke;
  pointer-events: none;
  transition-property: opacity, fill, stroke, stroke-width, transform;
  transition-duration: 260ms;
  transition-timing-function: cubic-bezier(.2, .65, .2, 1);
  transform-box: fill-box;
  transform-origin: center;
}

.terrae-interaction-zone__wash {
  fill: var(--ti-zone);
  opacity: .025;
}

.terrae-interaction-zone__trace {
  fill: none;
  stroke: var(--ti-zone);
  stroke-width: 1.05;
  stroke-dasharray: 6 10;
  opacity: .38;
}

.terrae-interaction-zone__point {
  fill: var(--ti-paper);
  stroke: var(--ti-zone-deep);
  stroke-width: .7;
  opacity: .68;
}

.terrae-interaction-zone__cardinal {
  stroke: var(--ti-zone);
  stroke-width: .72;
  opacity: .52;
}

.terrae-interaction-layer.has-active-zone .terrae-interaction-zone:not(.is-active) {
  opacity: .82;
}

.terrae-interaction-zone:is(:hover, :focus-visible, .is-active) .terrae-interaction-zone__wash {
  opacity: .11;
  transform: scale(1.012);
}

.terrae-interaction-zone:is(:hover, :focus-visible, .is-active) .terrae-interaction-zone__trace {
  stroke-width: 1.45;
  stroke-dasharray: 3 7;
  opacity: .9;
}

.terrae-interaction-zone:is(:hover, :focus-visible, .is-active) .terrae-interaction-zone__point {
  fill: var(--ti-zone);
  stroke: var(--ti-paper);
  stroke-width: 1;
  opacity: 1;
  transform: scale(1.18);
}

.terrae-interaction-zone:is(:hover, :focus-visible, .is-active) .terrae-interaction-zone__cardinal {
  stroke-width: 1.1;
  opacity: .94;
}

.terrae-interaction-zone:focus-visible .terrae-interaction-zone__trace {
  stroke-dasharray: 1 3;
}

.terrae-interaction-layer--firenze .terrae-interaction-zone {
  --ti-zone: var(--ti-bronze);
  --ti-zone-deep: var(--ti-verde);
}

.terrae-interaction-layer--firenze .terrae-interaction-zone__wash {
  mix-blend-mode: multiply;
}

.terrae-interaction-layer--firenze .terrae-interaction-zone:is(:hover, :focus-visible, .is-active) .terrae-interaction-zone__wash {
  opacity: .17;
}

.terrae-interaction-layer--napoli .terrae-interaction-zone {
  --ti-zone: var(--ti-bronze);
  --ti-zone-deep: var(--ti-vinaccia);
}

.terrae-interaction-layer--napoli .terrae-interaction-zone__wash {
  fill: var(--ti-vinaccia);
  mix-blend-mode: multiply;
}

.terrae-interaction-layer--napoli .terrae-interaction-zone:is(:hover, :focus-visible, .is-active) .terrae-interaction-zone__wash {
  opacity: .12;
}

.terrae-interaction-layer--reims .terrae-interaction-zone {
  --ti-zone: var(--ti-craie);
  --ti-zone-deep: var(--ti-bronze);
}

.terrae-interaction-layer--reims .terrae-interaction-zone__wash {
  fill: var(--ti-paper);
  mix-blend-mode: screen;
}

.terrae-interaction-layer--reims .terrae-interaction-zone__trace {
  stroke: var(--ti-bronze);
}

.terrae-interaction-layer--reims .terrae-interaction-zone:is(:hover, :focus-visible, .is-active) .terrae-interaction-zone__wash {
  opacity: .24;
}

.terrae-territories.terrae-interaction-ready .terrae-territories__sectors {
  opacity: 0 !important;
  pointer-events: none;
}

body:not([data-territory-phase="map"]):not([data-territory-phase="sectors"]) .terrae-territories .terrae-interaction-layer {
  visibility: hidden;
  pointer-events: none;
}

.terrae-interaction-cartouche {
  position: fixed;
  z-index: 18;
  top: 0;
  left: 0;
  min-width: 142px;
  max-width: min(230px, calc(100vw - 40px));
  padding: 9px 12px 10px;
  color: var(--ti-craie);
  background: rgba(10, 15, 13, .9);
  border: 1px solid rgba(142, 116, 88, .56);
  box-shadow: 0 14px 42px rgba(10, 15, 13, .24), inset 0 0 0 1px rgba(244, 240, 232, .045);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-120vw, -120vh, 0);
  transition: opacity 220ms cubic-bezier(.2, .65, .2, 1);
}

.terrae-interaction-cartouche.is-visible {
  opacity: 1;
}

.terrae-interaction-cartouche strong,
.terrae-interaction-cartouche span {
  display: block;
}

.terrae-interaction-cartouche strong {
  color: var(--ti-paper);
  font-family: var(--cv-typo-current-ff, "Cormorant Garamond", Georgia, serif);
  font-size: var(--cv-typo-current-fs, 13px);
  font-weight: var(--cv-typo-current-fw, 500);
  line-height: var(--cv-typo-current-lh, 1.08);
  letter-spacing: var(--cv-typo-current-ls, .11em);
  text-transform: var(--cv-typo-current-tt, uppercase);
}

.terrae-interaction-cartouche span {
  margin-top: 4px;
  color: rgba(232, 227, 216, .7);
  font-family: var(--cv-typo-current-ff, "Inter", Arial, sans-serif);
  font-size: var(--cv-typo-current-fs, 7px);
  font-weight: var(--cv-typo-current-fw, 500);
  line-height: var(--cv-typo-current-lh, 1.35);
  letter-spacing: var(--cv-typo-current-ls, .17em);
  text-transform: var(--cv-typo-current-tt, uppercase);
}

.terrae-interaction-cursor {
  position: fixed;
  z-index: 2147483000;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  opacity: 0;
  pointer-events: none;
  will-change: transform;
  transition: opacity 240ms cubic-bezier(.2, .65, .2, 1);
}

.terrae-interaction-cursor.is-visible { opacity: .78; }

.terrae-interaction-cursor__ring,
.terrae-interaction-cursor__dot,
.terrae-interaction-cursor__cardinal {
  position: absolute;
  display: block;
  transition: border-color 260ms, background-color 260ms, opacity 260ms, transform 340ms cubic-bezier(.2, .65, .2, 1);
}

.terrae-interaction-cursor__ring {
  inset: 2px;
  border: 1px solid rgba(232, 227, 216, .78);
  border-radius: 50%;
}

.terrae-interaction-cursor__dot {
  top: 50%;
  left: 50%;
  width: 2px;
  height: 2px;
  margin: -1px;
  border-radius: 50%;
  background: var(--ti-craie);
}

.terrae-interaction-cursor__cardinal {
  top: -2px;
  left: 50%;
  width: 1px;
  height: 6px;
  background: var(--ti-bronze);
  transform: translateX(-50%);
}

.terrae-interaction-cursor.is-zone .terrae-interaction-cursor__ring {
  border-color: var(--ti-bronze);
  transform: scale(1.28);
}

.terrae-interaction-cursor.is-zone .terrae-interaction-cursor__dot {
  background: var(--ti-bronze);
}

.terrae-interaction-cursor.is-archive .terrae-interaction-cursor__ring {
  opacity: .6;
  transform: scale(.9);
}

@media (hover: hover) and (pointer: fine) {
  body.has-terrae-interaction-cursor .terrae-territory-interaction,
  body.has-terrae-interaction-cursor .terrae-interaction-zone {
    cursor: none;
  }
}

@media (max-width: 700px), (hover: none), (pointer: coarse) {
  .terrae-interaction-cursor { display: none; }

  .terrae-interaction-cartouche {
    top: auto;
    right: max(18px, env(safe-area-inset-right));
    bottom: max(68px, calc(env(safe-area-inset-bottom) + 56px));
    left: 50%;
    width: max-content;
    min-width: 0;
    padding: 8px 11px 9px;
    transform: translateX(-50%) !important;
  }

  .terrae-interaction-zone__trace { stroke-width: 1.5; }
  .terrae-interaction-zone__point { stroke-width: 1.2; }

  .terrae-territories.terrae-interaction-ready .terrae-territories__sectors {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .terrae-interaction-zone__wash,
  .terrae-interaction-zone__trace,
  .terrae-interaction-zone__point,
  .terrae-interaction-zone__cardinal,
  .terrae-interaction-cartouche,
  .terrae-interaction-cursor,
  .terrae-interaction-cursor * {
    animation: none !important;
    transition-duration: 160ms !important;
  }
}

/* Direct, non-production preview states used only for the four interaction captures. */
.terrae-territories[data-terrae-interaction-preview] .terrae-territories__chapter {
  opacity: 0 !important;
  pointer-events: none !important;
}

.terrae-territories[data-terrae-interaction-preview="firenze"] [data-archive-city="firenze"],
.terrae-territories[data-terrae-interaction-preview="napoli"] [data-archive-city="napoli"],
.terrae-territories[data-terrae-interaction-preview="reims"] [data-archive-city="reims"] {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.terrae-territories[data-terrae-interaction-preview] .terrae-territories__plate--map {
  visibility: visible !important;
  opacity: 1 !important;
}

.terrae-territories[data-terrae-interaction-preview] .terrae-territories__plate--view,
.terrae-territories[data-terrae-interaction-preview] .terrae-territories__sectors,
.terrae-territories[data-terrae-interaction-preview] .terrae-territories__expression,
.terrae-territories[data-terrae-interaction-preview] .terrae-territories__seal {
  opacity: 0 !important;
  pointer-events: none !important;
}

.terrae-territories[data-terrae-interaction-preview] .terrae-interaction-layer {
  visibility: visible !important;
  pointer-events: none;
}

body[data-territory-phase="view"] .terrae-territories[data-terrae-interaction-preview] .terrae-territories__plate--map {
  visibility: hidden !important;
  opacity: 0 !important;
}

body[data-territory-phase="view"] .terrae-territories[data-terrae-interaction-preview] .terrae-territories__plate--view {
  visibility: visible !important;
  opacity: 1 !important;
}

body[data-territory-phase="view"] .terrae-territories[data-terrae-interaction-preview] .terrae-interaction-layer,
body[data-territory-phase="view"] .terrae-interaction-cartouche {
  visibility: hidden !important;
  opacity: 0 !important;
}