/* Metanoici imagery v3 integration layer.
   Load after /styles.css. Direction derived from the verified public profile
   "Lost in Metaverse by Metanoici": dark cosmic palette, without copying art. */

:root {
  --ink: #f6f2ff;
  --paper: #060716;
  --paper-2: #0d1230;
  --signal: #ff3dc8;
  --signal-dark: #29e8ff;
  --line: rgba(134, 119, 255, .3);
}

body {
  color: #f6f2ff;
  background:
    radial-gradient(circle at 15% 12%, rgba(91, 48, 204, .38), transparent 28rem),
    radial-gradient(circle at 88% 72%, rgba(255, 61, 200, .2), transparent 32rem),
    #02030c;
}

.shell {
  color: #f6f2ff;
  background: linear-gradient(90deg, rgba(5, 7, 24, .98), rgba(9, 12, 36, .94) 55%, rgba(5, 7, 24, .98));
  box-shadow: 0 0 100px rgba(65, 37, 175, .34);
}

.masthead { border-color: rgba(246, 242, 255, .32); }
.masthead::after { background: linear-gradient(90deg, #29e8ff, #7b49ff, #ff3dc8); box-shadow: 0 0 20px rgba(41, 232, 255, .45); }
.wordmark { color: #fff; text-shadow: 0 0 24px rgba(255, 61, 200, .28); }
.nav a { color: #c9fbff; }
.nav a:hover { color: #ff74dc; }
.eyebrow, .meta { color: #58efff; }
.intro { color: #d9d6e9; }

.opener {
  color: #f8f5ff;
  background:
    linear-gradient(90deg, rgba(3, 4, 16, .97) 0 42%, rgba(11, 9, 38, .52) 72%, rgba(3, 4, 16, .92)),
    radial-gradient(circle at 74% 32%, rgba(255, 61, 200, .42), transparent 28%),
    url("/assets/vr-experiences-v3.webp") 54% center / cover no-repeat;
  background-blend-mode: normal, screen, normal;
}

.opener::before { border-color: rgba(41, 232, 255, .4); box-shadow: 28px 28px 0 rgba(123, 73, 255, .15), -18px -18px 0 rgba(255, 61, 200, .09); }
.opener > div { background: linear-gradient(135deg, rgba(3, 4, 16, .92), rgba(17, 13, 54, .64)); }
.opener .dek { color: #dcd9e9; }
.opener .reading-link { color: #62f2ff; }
.margin-note { border-color: rgba(98, 242, 255, .44); background: rgba(4, 5, 19, .8); box-shadow: 18px 18px 0 rgba(255, 61, 200, .2); }
.margin-note .number { color: #ff59d5; text-shadow: 0 0 20px rgba(255, 61, 200, .5); }

.essay {
  color: #f6f2ff;
  border-color: rgba(98, 242, 255, .36);
  background: linear-gradient(145deg, rgba(14, 16, 48, .9), rgba(6, 7, 22, .95));
  box-shadow: 22px 25px 0 rgba(123, 73, 255, .15);
}

.essay::after { border-color: rgba(98, 242, 255, .3); box-shadow: -28px -28px 0 rgba(255, 61, 200, .16), -56px -56px 0 rgba(123, 73, 255, .08); }
.essay .reading-link { color: #58efff; }
.essay:hover { box-shadow: 30px 38px 0 rgba(255, 61, 200, .16); }

.invitation { background: linear-gradient(120deg, #07091d, #1a1044 58%, #09091b); }
.invitation::before { border-color: rgba(98, 242, 255, .25); box-shadow: -40px 40px 0 rgba(123, 73, 255, .15), -80px 80px 0 rgba(255, 61, 200, .08); }
.invitation h2 { color: #ff59d5; text-shadow: 0 0 30px rgba(255, 61, 200, .28); }
.invitation p { color: #d9d7e7; }
.invitation .reading-link { color: #62f2ff; }

.site-footer { border-color: rgba(246, 242, 255, .25); }
.site-footer .legal-note { color: #aaa6c0; }
.article::before { border-color: #5ceeff; box-shadow: 18px 18px 0 rgba(255, 61, 200, .3); }
.article .standfirst { border-color: #ff3dc8; }
.article-body p:first-child:first-letter { color: #62f2ff; background: #100c2e; }
.sources { border-color: rgba(98, 242, 255, .42); background: rgba(11, 13, 42, .78); box-shadow: 14px 14px 0 rgba(123, 73, 255, .24); }
.article-cta { border-color: #ff3dc8; background: linear-gradient(120deg, #0a0c29, #1d1044); box-shadow: 17px 17px 0 rgba(41, 232, 255, .16); }
.article-cta a { color: #62f2ff; }
.related { border-color: rgba(246, 242, 255, .24); }
.about::after { border-color: #5ceeff; box-shadow: -25px 25px 0 rgba(255, 61, 200, .22); }

.v3-home-visual,
.v3-article-cover {
  position: relative;
  margin: 0;
  overflow: hidden;
  isolation: isolate;
  background: #040510;
}

.v3-home-visual {
  aspect-ratio: 16 / 9;
  margin: 0 0 clamp(3rem, 7vw, 7rem) clamp(2rem, 8vw, 8rem);
  border: 1px solid rgba(98, 242, 255, .48);
  box-shadow: -28px 28px 0 rgba(123, 73, 255, .2), 0 0 55px rgba(255, 61, 200, .16);
  transform: perspective(1400px) rotateY(-2deg);
}

.v3-home-visual::before {
  content: "CORPI  /  LUOGHI  /  MEMORIA";
  position: absolute;
  z-index: 3;
  left: 0;
  top: 0;
  padding: .6rem .85rem;
  color: transparent;
  background: rgba(3, 4, 16, .88);
  -webkit-text-stroke: 1px #ff59d5;
  text-shadow: 0 0 14px rgba(255, 61, 200, .7);
  font: 800 clamp(.76rem, 1.2vw, 1rem)/1.2 var(--sans, Arial, sans-serif);
  letter-spacing: .17em;
}

.v3-home-visual::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 4%;
  border: 1px solid rgba(98, 242, 255, .38);
  border-radius: 50%;
  box-shadow:
    0 0 0 2.5rem rgba(123, 73, 255, .07),
    0 0 0 5rem rgba(255, 61, 200, .045),
    0 0 34px rgba(41, 232, 255, .22);
  pointer-events: none;
}

.v3-home-visual picture,
.v3-home-visual img,
.v3-article-cover picture,
.v3-article-cover img {
  display: block;
  width: 100%;
  height: 100%;
}

.v3-home-visual img {
  object-fit: cover;
  object-position: 50% 48%;
  filter: saturate(1.08) contrast(1.08);
}

.v3-home-visual figcaption {
  position: absolute;
  z-index: 4;
  right: 1.25rem;
  bottom: 1.25rem;
  max-width: 31rem;
  padding: .65rem .8rem;
  color: #f4f1ff;
  background: rgba(4, 5, 20, .9);
  border-left: 3px solid #29e8ff;
  font: .78rem/1.45 var(--sans, Arial, sans-serif);
}

.v3-article-cover {
  aspect-ratio: 16 / 9;
  margin: 2.5rem -5vw 3.75rem 3vw;
  border: 1px solid rgba(98, 242, 255, .46);
  box-shadow: -18px 18px 0 rgba(123, 73, 255, .22), 0 0 38px rgba(255, 61, 200, .12);
  transform: perspective(1200px) rotateY(1.5deg);
}

.v3-article-cover::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 1rem;
  border: 1px solid rgba(255, 61, 200, .34);
  border-radius: 50%;
  box-shadow: 0 0 0 1.8rem rgba(123, 73, 255, .05);
  pointer-events: none;
}

.v3-article-cover img { object-fit: cover; filter: saturate(.92) contrast(1.1); }
.v3-cover-identity img { object-position: 18% 50%; }
.v3-cover-place img { object-position: 52% 48%; }
.v3-cover-memory img { object-position: 82% 50%; }

.v3-article-cover figcaption {
  position: absolute;
  z-index: 3;
  left: 1rem;
  bottom: 1rem;
  max-width: 34rem;
  padding: .55rem .75rem;
  color: #f7f4ff;
  background: rgba(4, 5, 20, .9);
  border-left: 3px solid #ff3dc8;
  font: .75rem/1.4 var(--sans, Arial, sans-serif);
}

@media (max-width: 800px) {
  .v3-home-visual,
  .v3-article-cover { aspect-ratio: 4 / 3; transform: none; }

  .v3-home-visual {
    margin: 0 0 3rem;
    box-shadow: -10px 10px 0 rgba(123, 73, 255, .22), 0 0 32px rgba(255, 61, 200, .12);
  }

  .v3-home-visual::after {
    inset: 1rem;
    box-shadow: 0 0 0 1.2rem rgba(123, 73, 255, .07), 0 0 26px rgba(41, 232, 255, .18);
  }

  .v3-home-visual::before { font-size: .65rem; }
  .v3-home-visual img { object-position: 50% 50%; }
  .v3-home-visual figcaption { left: 1rem; right: 1rem; max-width: none; }

  .v3-article-cover {
    margin: 2rem 0 3rem;
    box-shadow: -10px 10px 0 rgba(123, 73, 255, .24);
  }

  .v3-cover-identity img { object-position: 16% 50%; }
  .v3-cover-place img { object-position: 50% 50%; }
  .v3-cover-memory img { object-position: 84% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .v3-home-visual,
  .v3-article-cover { transform: none; }
}

.v3-card-thumb{display:block;aspect-ratio:4/3;overflow:hidden;margin:0 0 1.4rem;border:1px solid rgba(130,110,220,.3)}
.v3-card-thumb img{display:block;width:100%;height:100%;object-fit:cover;object-position:22% 50%}
.story-card:nth-child(2) .v3-card-thumb img,.essay:nth-child(2) .v3-card-thumb img{object-position:82% 50%}