/* YOU.INK · the motion of the site. Everything sits under html.m-on, set by motion.js: without it the page stands still and complete. */
html.m-on { --m-curva: cubic-bezier(.2, .9, .1, 1); }
::selection { background: var(--dawn); color: #0B0810; }

/* ---------- Coming in: a slanted cut from left to right, at the angle of the buttons ---------- */
html.m-on [data-m]:not([data-m="s"]) {
  clip-path: polygon(calc(var(--m-o) * -1) -15%, 0 -15%, calc(var(--m-o) * -1) 115%, calc(var(--m-o) * -1) 115%);
}
html.m-on [data-m="t"] { translate: -14px 0; }
html.m-on [data-m="f"] { translate: 0 20px; }
html.m-on [data-m="c"] { translate: 0 12px; }
html.m-on [data-m][data-m-in]:not([data-m="s"]) {
  clip-path: polygon(calc(var(--m-o) * -1) -15%, calc(100% + var(--m-o)) -15%, 100% 115%, calc(var(--m-o) * -1) 115%);
  translate: 0 0;
  transition: clip-path .62s var(--m-curva) calc(var(--i, 0) * 70ms), translate .62s var(--m-curva) calc(var(--i, 0) * 70ms);
}

/* ---------- The words written with the marker: one pass of the nib after the other ---------- */
html.m-on .scritta[data-m] path { opacity: 0; }
html.m-on .scritta[data-m][data-m-in] path {
  opacity: 1;
  animation: m-tratto 1ms steps(1) backwards;
  animation-delay: calc(var(--n) * var(--m-passo, 42ms) + var(--i, 0) * 60ms);
}
@keyframes m-tratto { from, to { opacity: 0; } }

/* ---------- Inside the photos: room for the picture to move, so its edges never show ---------- */
html.m-on .gal-img img, html.m-on .tu-tile img { transform: scale(1.08); }

/* ---------- The running band ---------- */
html.m-on .marquee-set { transform: skewX(calc(var(--m-sk, 0) * 1deg)); }

/* ---------- The bar over the night ---------- */
html.m-on .nav { transition: background-color .2s linear, border-color .2s linear, color .2s linear; }
html[data-nav="notte"] .nav {
  --ink: #EDE8FF; --bg: #0B0810; --rule: rgba(237, 232, 255, .4); --muted: #A29EAE;
  color: #EDE8FF; background-color: transparent; border-bottom-color: transparent;
  background-image: linear-gradient(180deg, rgba(11, 8, 16, .96), rgba(11, 8, 16, .84) 62%, rgba(11, 8, 16, 0)); background-origin: border-box;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}

/* ---------- The clock of the night: in the gutter, along the right edge ---------- */
.m-ora { position: fixed; top: 0; right: 0; bottom: 0; z-index: 4; width: 16px; pointer-events: none; color: #0B0810; transition: color .2s linear; }
.m-ora[hidden] { display: none; }
.m-ora[data-buio] { color: #EDE8FF; }
.m-ora i { position: absolute; top: var(--nav-h); right: 0; bottom: 0; width: 2px; background: var(--dawn); transform: scaleY(0); transform-origin: 0 0; will-change: transform; }
.m-ora span {
  position: absolute; top: 0; right: 4px; writing-mode: vertical-rl; will-change: transform;
  font: 500 10px/1 var(--mono); letter-spacing: .14em; font-variant-numeric: tabular-nums;
}
@media (min-width: 1100px) {
  .m-ora { width: 24px; }
  .m-ora span { right: 8px; font-size: 11px; }
}

/* ---------- The grain of the film: one fixed layer, on while the night fills the screen. It moves only where there is a mouse ---------- */
.m-grana { position: fixed; inset: 0; z-index: 4; pointer-events: none; opacity: 0; visibility: hidden; background-size: 128px 128px; /* the tile is 256 px: on a phone one speck of it is about one pixel, never a grid of squares */ transition: opacity .3s linear, visibility 0s linear .3s; }
.m-grana[data-on] { opacity: .16; visibility: visible; transition: opacity .3s linear; }
@media (hover: hover) and (pointer: fine) {
  .m-grana { inset: -130px; will-change: transform; }
  .m-grana[data-on] { animation: m-grana .9s steps(1) infinite; }
}
@keyframes m-grana {
  0% { transform: translate3d(0, 0, 0); } 11% { transform: translate3d(-47px, 31px, 0); } 22% { transform: translate3d(63px, -18px, 0); }
  33% { transform: translate3d(-12px, -74px, 0); } 44% { transform: translate3d(88px, 52px, 0); } 55% { transform: translate3d(-96px, -9px, 0); }
  66% { transform: translate3d(25px, 101px, 0); } 77% { transform: translate3d(71px, -83px, 0); } 88% { transform: translate3d(-64px, 66px, 0); }
}

/* ---------- The stroke the pointer leaves ---------- */
.m-traccia { position: fixed; inset: 0; z-index: 4; width: 100%; height: 100%; pointer-events: none; opacity: .65; } /* see-through, so the words under the stroke can be read */

/* ---------- Buttons: a slanted sweep inside the parallelogram, a squeeze when pressed ---------- */
html.m-on .btn { position: relative; --m-tinta: currentColor; --m-txt: var(--bg); transition: transform .12s var(--m-curva), filter .15s, background-color .15s; }
html.m-on .inv .btn, html.m-on .foot .btn { --m-txt: var(--inv); }
html.m-on .menu .btn { --m-txt: var(--menu-bg); }
html.m-on .btn-dawn { --m-tinta: #0B0810; --m-txt: var(--dawn); }
html.m-on .btn-ink { --m-tinta: var(--dawn); --m-txt: #0B0810; }
html.m-on .btn::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--m-tinta); clip-path: inset(0 100% 0 0); transition: clip-path .32s var(--m-curva);
}
html.m-on .btn-dawn::before { inset: 1.5px; }                /* the orange stays as a line around it */
html.m-on .btn > span { transition: color .16s linear; }
html.m-on .btn:not([aria-disabled="true"]):active { transform: skewX(-24deg) scale(.97, .9); }
html.m-on .btn:not([aria-disabled="true"]):not(.is-on):not(.on):active::before { clip-path: inset(0); transition-duration: .06s; }
html.m-on .btn:not([aria-disabled="true"]):not(.is-on):not(.on):active > span { color: var(--m-txt); }
@media (hover: hover) and (pointer: fine) {
  html.m-on .btn-dawn:hover, html.m-on .btn-ink:hover { filter: none; }
  html.m-on .btn:not([aria-disabled="true"]):not(.is-on):not(.on):hover::before { clip-path: inset(0); }
  html.m-on .btn:not([aria-disabled="true"]):not(.is-on):not(.on):hover > span { color: var(--m-txt); }
}

/* ---------- Links: a chisel underline that draws itself ---------- */
html.m-on .tlink, html.m-on .menu-link, html.m-on .lang-item { position: relative; }
html.m-on .tlink::after, html.m-on .menu-link::after, html.m-on .lang-item::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; pointer-events: none;
  background: var(--dawn); transform: skewX(-24deg) scaleX(0); transform-origin: 0 50%; transition: transform .28s var(--m-curva);
}
html.m-on .foot-links .tlink::after { bottom: 3px; }
html.m-on .menu-link::after, html.m-on .lang-item::after { bottom: -1px; }
html.m-on .tlink[aria-current]::after { transform: skewX(-24deg) scaleX(1); }
@media (hover: hover) and (pointer: fine) {
  html.m-on .tlink:hover::after, html.m-on .menu-link:hover::after, html.m-on .lang-item:hover::after { transform: skewX(-24deg) scaleX(1); }
}

/* The menu comes in line by line. */
html.m-on .menu-link { animation: m-riga .5s var(--m-curva) backwards; }
html.m-on .menu-link:nth-child(2) { animation-delay: .06s; }
html.m-on .menu-link:nth-child(3) { animation-delay: .12s; }
html.m-on .menu-link:nth-child(4) { animation-delay: .18s; }
html.m-on .menu-link:nth-child(n+5) { animation-delay: .24s; }
@keyframes m-riga { from { clip-path: polygon(0 -10%, 0 -10%, -6% 110%, -6% 110%); translate: -18px 0; } to { clip-path: polygon(0 -10%, 106% -10%, 100% 110%, -6% 110%); translate: 0 0; } }

/* ---------- On a card: the name opens up, the word writes itself again. The row keeps its height ---------- */
@media (hover: hover) and (pointer: fine) {
  html.m-on .card-tile:hover .scritta:not([data-m]) path { animation: m-tratto 1ms steps(1) backwards; animation-delay: calc(var(--n) * 20ms); }
}
@media (hover: hover) and (pointer: fine) and (min-width: 1100px) {
  html.m-on .h-card, html.m-on .h-pairname { transition: font-variation-settings .28s var(--m-curva), color .15s; }
  html.m-on .card:hover .h-card, html.m-on .pair-link:hover .h-pairname { white-space: nowrap; font-variation-settings: 'wdth' 88; }
}

/* ---------- A photo under the mouse: the smallest flash, and it comes a little closer ---------- */
@media (hover: hover) and (pointer: fine) {
  html.m-on .gal-img .photo, html.m-on .tu-tile .photo { transition: transform .5s var(--m-curva); }
  html.m-on .gal-img:hover .photo, html.m-on .tu-tile:hover .photo { transform: scale(1.035); }
  html.m-on .gal-img::after, html.m-on .tu-tile::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: #FFF6F0; opacity: 0; }
  html.m-on .gal-img:hover::after, html.m-on .tu-tile:hover::after { animation: m-lampo .16s linear; }
}
@keyframes m-lampo { from { opacity: .24; } to { opacity: 0; } }

/* ---------- From page to page: a slanted curtain the colour of the night, with an orange thread on its edge ---------- */
html.m-on::view-transition { background-color: #0B0810; background-repeat: no-repeat; background-size: 300vw 100vh; }
html.m-on::view-transition {
  background-image: linear-gradient(114deg, transparent calc(50% - 1.5px), #F26A00 calc(50% - 1.5px), #F26A00 calc(50% + 1.5px), transparent calc(50% + 1.5px));
  animation: m-filo .45s cubic-bezier(.62, .02, .18, 1) both;
}
html.m-on::view-transition-group(root) { animation: none; }
html.m-on::view-transition-image-pair(root) { isolation: auto; }
html.m-on::view-transition-old(root) { mix-blend-mode: normal; animation: m-pagina-via .45s cubic-bezier(.62, .02, .18, 1) both; }
html.m-on::view-transition-new(root) { mix-blend-mode: normal; animation: m-pagina-qui .45s cubic-bezier(.62, .02, .18, 1) both; }
/* 44.52vh: how far an edge at −24° leans over the height of the screen. 26vw: the width of the curtain. */
@keyframes m-pagina-via {
  from { clip-path: polygon(0 0, 100% 0, 100% 100%, calc(-1 * 44.52vh) 100%); }
  to { clip-path: polygon(calc(126vw + 44.52vh) 0, 100% 0, 100% 100%, 126vw 100%); }
}
@keyframes m-pagina-qui {
  from { clip-path: polygon(0 0, -26vw 0, calc(-26vw - 44.52vh) 100%, 0 100%); }
  to { clip-path: polygon(0 0, calc(100vw + 44.52vh) 0, 100vw 100%, 0 100%); }
}
@keyframes m-filo {
  from { background-position: calc(-150vw - 26vw - 22.26vh) 0; }
  to { background-position: calc(-50vw + 22.26vh) 0; }
}

@media print { .m-ora, .m-grana, .m-traccia { display: none; } }