/* The demo site: an invented goldsmith, declared as an example, built like the real thing. A dark shop window: one warm light
   from above, each piece standing on a glossy floor with its reflection. It fills the screen: in the phone
   of the film it is the same page, scaled down and seen through a window (js/demo.js).
   --u follows the width and sets the sizes, --v follows the height and sets the rows, so a 390 × 660 phone keeps every
   piece in sight. Wide screens have their own --u. Only transform, opacity and clip-path move. */

@font-face {
  font-family: 'Bodoni Moda';
  src: url('../font/bodoni-moda-400.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Bodoni Moda';
  src: url('../font/bodoni-moda-400-italic.woff2') format('woff2');
  font-style: italic;
  font-display: swap;
}

.ds {
  --u: min(calc(100vw / 390), calc(100svh / 690));
  --v: calc(100svh / 820);
  --anello: min(calc(var(--u) * 280), calc(var(--v) * 350));
  /* the side of the first screen: the phone of the film shows only a central column of the page (--sicuro, js/demo.js) */
  --lato: max(calc(var(--u) * 22), calc((100vw - var(--sicuro, 100vw)) / 2 + var(--u) * 12));
  --notte: #0E0306;
  --crema: #F1E6D8;
  --rosa: #E9B7A0;
  --inchiostro: #1C0609;
  /* the room: a warm light from above fading into the dark */
  --stanza: radial-gradient(70% 55% at 50% 30%, #5A1420 0%, #2A080E 45%, #0E0306 100%);
  position: absolute; inset: 0; overflow: hidden; isolation: isolate; transform-origin: 0 0; will-change: transform;
  background: var(--notte); color: var(--crema);
  font-family: 'Bodoni Moda', 'Times New Roman', serif; line-height: 1.1;
}
.ds__pagina { position: absolute; top: 0; left: 0; right: 0; will-change: transform; }
/* the phone's own bar and notch: they stand on the window of the phone and leave as it opens */
.ds__stato {
  position: absolute; z-index: 4; top: 0; left: 50%; width: calc(var(--u0, 1px) * 390); height: calc(var(--u0, 1px) * 48); margin-left: calc(var(--u0, 1px) * -195);
  display: flex; align-items: center; justify-content: space-between; padding: calc(var(--u0, 1px) * 6) calc(var(--u0, 1px) * 30) 0 calc(var(--u0, 1px) * 38);
  color: var(--crema); font: 600 calc(var(--u0, 1px) * 15) / 1 'Montserrat', system-ui, sans-serif; letter-spacing: -0.01em;
}
.ds__stato svg { width: calc(var(--u0, 1px) * 70); height: auto; fill: currentColor; }
.ds__isola { position: absolute; z-index: 5; top: calc(var(--u0, 1px) * 13); left: 50%; width: calc(var(--u0, 1px) * 104); height: calc(var(--u0, 1px) * 30); margin-left: calc(var(--u0, 1px) * -52); border-radius: calc(var(--u0, 1px) * 16); background: #000; }
.ds__esempio {
  position: absolute; z-index: 5; top: 0; left: 0; padding: 5px 10px; border-radius: 3px; background: #F1E6D8; color: #1C0609;
  font: 600 13px / 1.2 'Montserrat', system-ui, sans-serif; letter-spacing: 0.01em; transform-origin: 100% 0; will-change: transform;
}

.dz { position: relative; height: 100svh; overflow: hidden; isolation: isolate; }

/* the site's own bar: it comes in once the first screen has gone, like a real site */
.ds__barra {
  position: absolute; z-index: 3; top: 0; left: 0; right: 0; height: calc(var(--u) * 58);
  display: flex; align-items: center; justify-content: center; opacity: 0; color: var(--crema); pointer-events: none;
}
/* once the page climbs under it the bar gets its ground, so the words of the page never run over the name (--fondo, js/demo.js) */
.ds__barra::before {
  content: ''; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: calc(100% + var(--u) * 14);
  background: linear-gradient(to bottom, var(--notte) calc(100% - var(--u) * 22), rgba(14, 3, 6, 0)); opacity: var(--fondo, 0);
}
.ds__barra b { font-size: calc(var(--u) * 21); font-weight: 400; letter-spacing: 0.01em; }
.ds__barra em { font-style: italic; }
.ds__barra i { position: absolute; left: calc(var(--u) * 22); top: 50%; width: calc(var(--u) * 22); height: calc(var(--u) * 7); margin-top: calc(var(--u) * -3.5); border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; }

/* each screen is the same room: the glossy floor starts at --pav, a hairline marks its edge */
.dz--eroe, .dz--pezzi, .dz--visita {
  background:
    linear-gradient(to bottom, rgba(14, 3, 6, 0) var(--pav), rgba(241, 230, 216, 0.14) var(--pav), rgba(241, 230, 216, 0.14) calc(var(--pav) + 1px), #1A0509 calc(var(--pav) + 1px), #0B0204 100%),
    var(--stanza);
}
/* the beam of the spotlight, soft, from the top of the screen down to the piece */
.dz--eroe::before, .dz--visita::before {
  content: ''; position: absolute; z-index: -1; left: 50%; top: -6%; width: 130%; height: calc(var(--pav) + 4%); transform: translateX(-50%); pointer-events: none;
  background: conic-gradient(from 180deg at 50% 0%, rgba(255, 220, 190, 0) 162deg, rgba(255, 220, 190, 0.1) 174deg, rgba(255, 224, 196, 0.14) 180deg, rgba(255, 220, 190, 0.1) 186deg, rgba(255, 220, 190, 0) 198deg);
  -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent); mask-image: linear-gradient(to bottom, #000 40%, transparent);
}
.dz--eroe::after, .dz--visita::after, .dz--pezzi::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.12; mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 1.2 -0.1'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.ds p, .ds h4, .ds figure { margin: 0; }
.ds em { font-style: italic; }

/* first screen: the name, the ring standing on the floor with its reflection, the promise under it */
/* the renders keep the ring's lowest point at 97% of their square: that point touches the floor, the reflection mirrors around it */
.dz--eroe { --pav: calc(var(--v) * 476); }
.dz-testata, .dz-nera { position: absolute; will-change: transform; }
.dz-testata { top: calc(var(--v) * 92); left: 0; right: 0; text-align: center; font-size: calc(var(--u) * 30); letter-spacing: 0.01em; white-space: nowrap; }
.dz-testata small { display: block; margin-top: calc(var(--v) * 12); font: 500 calc(var(--u) * 10.5) / 1 'Montserrat', system-ui, sans-serif; letter-spacing: 0.32em; text-transform: uppercase; opacity: 0.7; }
.dz-nera { top: calc(var(--pav) + var(--anello) * 0.19); left: var(--lato); right: var(--lato); text-align: center; text-wrap: balance; font-size: calc(var(--u) * 31); line-height: 1.06; letter-spacing: -0.01em; }
.dz-nera em, .dz-macro em, .dz-visita h4 em { color: var(--rosa); }
.dz-anello {
  position: absolute; top: calc(var(--pav) - var(--anello) * 0.97); left: 50%; width: var(--anello); height: var(--anello); margin-left: calc(var(--anello) / -2); transform-origin: 50% 20%; will-change: transform;
  -webkit-box-reflect: below calc(var(--anello) * -0.06) linear-gradient(to bottom, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, 0.28));
}
.dz-anello img, .dz-anello canvas, .dz-fine img, .dz-fine canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.dz-fondo { position: absolute; left: var(--lato); right: var(--lato); bottom: calc(var(--v) * 30); display: flex; flex-direction: column; align-items: center; gap: calc(var(--v) * 10); will-change: transform; }
.dz-fondo p { font-size: calc(var(--u) * 16); font-style: italic; opacity: 0.75; }
.ds-tasto {
  flex: none; display: inline-flex; align-items: center; padding: calc(var(--u) * 16) calc(var(--u) * 20);
  border-radius: calc(var(--u) * 2); background: var(--crema); color: var(--inchiostro);
  font: 650 calc(var(--u) * 14) / 1 'Montserrat', system-ui, sans-serif;
}
.ds-tasto--vuoto { background: none; color: var(--crema); box-shadow: inset 0 0 0 1px rgba(241, 230, 216, 0.6); }

/* the dive into the stone */
.dz-macro { position: absolute; inset: 0; opacity: 0; overflow: hidden; }
.dz-macro canvas { position: absolute; top: 0; left: 0; transform-origin: 0 0; will-change: transform; }
.dz-macro i { position: absolute; inset: 0; opacity: 0; background: linear-gradient(to top, rgba(14, 3, 6, 0.95), rgba(14, 3, 6, 0) 48%); }
.dz-macro p { position: absolute; z-index: 1; left: calc(var(--u) * 22); right: calc(var(--u) * 22); bottom: calc(var(--v) * 46); font-size: calc(var(--u) * 46); line-height: 1.02; letter-spacing: -0.012em; opacity: 0; will-change: opacity, transform; }

/* the collection slides sideways while the page stands still: every piece under its own light */
.dz--pezzi { --pav: calc(var(--v) * 536); }
.dz-titolo { position: absolute; top: calc(var(--v) * 70); left: calc(var(--u) * 22); font-size: calc(var(--u) * 21); font-style: italic; }
.dz-striscia { position: absolute; top: calc(var(--v) * 118); left: 0; display: flex; gap: calc(var(--u) * 20); padding: 0 calc(var(--u) * 22); will-change: transform; }
.dz-striscia figure { position: relative; flex: none; width: calc(var(--u) * 320); }
.dz-striscia img { position: relative; z-index: 1; width: 100%; height: calc(var(--v) * 430); object-fit: contain; }
/* the light falls on the piece and leaves a warm pool on the floor */
.dz-striscia figure::before { content: ''; position: absolute; left: 0; right: 0; top: calc(var(--v) * -40); height: calc(var(--v) * 500); background: radial-gradient(48% 42% at 50% 46%, rgba(160, 50, 60, 0.34), rgba(160, 50, 60, 0)); }
.dz-striscia figure::after { content: ''; position: absolute; left: 18%; right: 18%; top: calc(var(--v) * 400); height: calc(var(--v) * 40); border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 214, 170, 0.16), rgba(255, 214, 170, 0)); }
.dz-striscia figure:nth-child(2) img { transform: scale(1.34); }
.dz-striscia b { position: relative; display: block; margin-top: calc(var(--v) * 26); font-size: calc(var(--u) * 76); line-height: 1; font-weight: 400; letter-spacing: -0.02em; }
.dz-striscia span { position: relative; display: block; margin-top: calc(var(--v) * 12); font: 500 calc(var(--u) * 14) / 1.3 'Montserrat', system-ui, sans-serif; opacity: 0.72; }

/* the booking, the only place where the visitor does something */
.dz--visita { --fine: min(calc(var(--u) * 260), calc(var(--v) * 240)); --pav: calc(var(--v) * 58 + var(--fine) * 0.97); }
.dz-fine { position: absolute; top: calc(var(--v) * 58); left: 50%; width: var(--fine); aspect-ratio: 1; transform: translateX(-50%); -webkit-box-reflect: below calc(var(--fine) * -0.06) linear-gradient(to bottom, rgba(0, 0, 0, 0) 64%, rgba(0, 0, 0, 0.24)); }
.dz-visita { position: absolute; left: calc(var(--u) * 22); right: calc(var(--u) * 22); bottom: calc(var(--v) * 38); }
.dz-visita h4 { font-size: calc(var(--u) * 64); line-height: 0.98; font-weight: 400; letter-spacing: -0.02em; }
.dz-giorni { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: calc(var(--v) * 30); border-top: 1px solid rgba(241, 230, 216, 0.3); border-bottom: 1px solid rgba(241, 230, 216, 0.3); }
.dz-giorni i { padding: calc(var(--v) * 15) 0; text-align: center; font: 500 calc(var(--u) * 14) / 1.35 'Montserrat', system-ui, sans-serif; transition: background-color 240ms ease-out, color 240ms ease-out; }
.dz-giorni i b { display: block; font-family: 'Bodoni Moda', serif; font-size: calc(var(--u) * 30); font-weight: 400; line-height: 1.1; }
.dz-giorni i.scelto { background: var(--crema); color: var(--inchiostro); }
.dz-visita .ds-tasto { display: flex; justify-content: center; margin-top: calc(var(--v) * 18); }
.dz-visita small { display: block; margin-top: calc(var(--v) * 18); font: 500 calc(var(--u) * 15) / 1.3 'Montserrat', system-ui, sans-serif; opacity: 0.72; }

/* wide screens: the same site, laid out for the width. The first screen is one centred column, so the phone of the film
   shows it whole before it opens */
@media (min-aspect-ratio: 11/10) {
  .ds { --u: calc(100svh / 640); --v: calc(100svh / 640); --anello: calc(var(--v) * 300); }
  .dz--eroe { --pav: calc(var(--v) * 400); }
  .dz-testata { top: calc(var(--v) * 62); font-size: calc(var(--u) * 30); }
  .dz-nera { font-size: calc(var(--u) * 27); }
  .dz-fondo { bottom: calc(var(--v) * 24); }
  /* the stone stands to the right, the sentence on the dark */
  .dz-macro i { background: linear-gradient(90deg, rgba(14, 3, 6, 0.95) 30%, rgba(14, 3, 6, 0) 58%); }
  .dz-macro p { left: 7vw; right: auto; width: min(38vw, calc(var(--u) * 400)); bottom: auto; top: 50%; margin-top: calc(var(--v) * -90); font-size: min(calc(var(--u) * 46), 3.8vw); }
  .dz--pezzi { --pav: calc(var(--v) * 432); }
  .dz-titolo { top: calc(var(--v) * 62); left: 7vw; }
  .dz-striscia { top: calc(var(--v) * 78); gap: 6vw; padding: 0 7vw; }
  .dz-striscia figure { width: 38vw; }
  .dz-striscia img { height: calc(var(--v) * 370); }
  .dz-striscia figure::before { height: calc(var(--v) * 440); }
  .dz-striscia figure::after { top: calc(var(--v) * 340); height: calc(var(--v) * 32); }
  .ds__barra { height: calc(var(--u) * 44); }
  .ds__barra b { font-size: calc(var(--u) * 19); }
  .ds__barra i { left: 7vw; }
  .dz-striscia b { font-size: calc(var(--u) * 58); margin-top: calc(var(--v) * 18); }
  .dz-striscia span { font-size: calc(var(--u) * 11.5); margin-top: calc(var(--v) * 8); }
  .dz--visita { --fine: calc(var(--v) * 400); --pav: calc(50% + var(--fine) * 0.47); --stanza: radial-gradient(40% 60% at 28% 42%, #5A1420 0%, #2A080E 50%, #0E0306 100%); }
  .dz--visita::before { left: 28vw; width: 60vw; }
  .dz-fine { top: 50%; left: 28vw; transform: translate(-50%, -50%); }
  .dz-visita { left: 52vw; right: 7vw; bottom: auto; top: 50%; transform: translateY(-50%); }
  .dz-visita h4 { font-size: calc(var(--u) * 58); }
  .dz-giorni i { font-size: calc(var(--u) * 11.5); }
  .dz-giorni i b { font-size: calc(var(--u) * 24); }
  .dz-visita .ds-tasto { font-size: calc(var(--u) * 12); }
  .dz-visita small { font-size: calc(var(--u) * 11.5); }
}