* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
:root {
  --image-max-height: 100dvh;
  --body-gap: 0px;
}

::selection {
  background: transparent;
  color: inherit;
}
a::selection,
p::selection,
text-box::selection{
  background-color: rgb(0, 174, 255);
  color: rgb(255, 255, 255);
}

a,p,button,.text-box{
  color: rgb(0, 0, 0);
  font-size: 12px;
  font-weight: 400;
  line-height: 13px;
  font-family: Arial, sans-serif;
  text-decoration: none;
}

.button:hover, .info a:hover, .project-info a:hover{
  border: 2px solid transparent;
  color: white;
  border-radius: 16px;
  background:
    linear-gradient(to bottom, rgb(180, 235, 255), rgb(104, 146, 242)) padding-box,
    linear-gradient(180deg, rgb(118, 119, 122), rgb(220, 220, 234)) border-box;
  background-clip: padding-box, border-box;
}

.description a:hover{
  color: rgb(0, 174, 255);

}

body.disable-hover a:hover,
body.disable-hover .button:hover {
  color: rgb(0, 0, 0);
  cursor: default;
}

body {
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding-top: var(--body-gap);
  padding-bottom: var(--body-gap);
  display: block;
  box-sizing: border-box;
  align-items: center;
  background: rgb(255, 255, 255);
  text-align: center;
  text-transform: lowercase;
  line-height: 13px;
}

.name{
  position: sticky;
  top: 0px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  z-index: 10;
}
.name button{
  background: none;
  border: none;
  color: rgb(255, 255, 255);
  cursor: pointer;
  padding: 0;
  margin: 0;
  padding: 2px 6px;
  border: 2px solid transparent;
  border-radius: 16px;
  background:
    linear-gradient(to bottom, rgb(95, 212, 255), rgb(2, 40, 130)) padding-box,
    linear-gradient(180deg, rgb(118, 119, 122), rgb(220, 220, 234)) border-box;
  background-clip: padding-box, border-box;
}

.info{
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0px;
  position: sticky;
  top: 21px;
}
.info a{
  padding: 2px 6px;
  color: white;
  border: 2px solid transparent;
  border-radius: 16px;
  background:
    linear-gradient(to bottom, rgb(95, 212, 255), rgb(2, 40, 130)) padding-box,
    linear-gradient(180deg, rgb(118, 119, 122), rgb(220, 220, 234)) border-box;
  background-clip: padding-box, border-box;
}

.description{
  position: relative;
  margin-bottom: 25dvh;
  margin-top: 20px;
  z-index: 1;
  width: 100%;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

section {
  position: relative;
}


.project-info {
  position: sticky;
  top: calc(100dvh - 100px);
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  align-items: center;
  padding: 0px 40px;
  justify-content: center;
  display: flex;
  flex-wrap: wrap-reverse;
  gap: 0px !important;
  height: 0px;
  overflow: visible;
  z-index: 4;
  transform: translateY(-12px);
  transition: top 200ms ease;
}
body:has(.zoom-dial:hover) .project-info {
  top: calc(100dvh - 200px);
  transition: top 200ms ease;
}

.project-info .text-box {
  display: inline-block;
  line-height: 12px;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 12px;
  padding: 2px 2px;
  border: 1px solid rgb(80, 80, 85);
  border-radius: 0xpx;
  background-color: #ffffffd8;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  align-items: center;
  width: fit-content;
}

.project-info a{
  display: inline-block;
  line-height: 12px;
  padding: 2px 6px;
  border-radius: 16px;
  border: 2px solid transparent;
  background:
    linear-gradient(to bottom, rgb(252, 254, 255), rgb(182, 235, 255)) padding-box,
    linear-gradient(180deg,rgb(118, 119, 122), rgb(229, 229, 255)) border-box;
  background-clip: padding-box, border-box;
  white-space: nowrap;
  margin-right: 0;
}

.image-container {
  width: 100%;
  max-height: var(--image-max-height);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}
.image-container img, video {
  padding: 0;
  margin: 0;
  display: block;
  width: auto;
  max-width: 130%;
  height: auto;
  max-height: var(--image-max-height);
  object-fit: contain;
  object-position: center;
  background-color: #ebecef;
}

footer {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: transparent;
  padding-top: 32px;
  height: 35dvh;
  padding-bottom: 0;
}

footer p{
  padding-top: 20px;
}
footer button {
   transform: translateY(-32px);
  padding: 2px 6px;
  color: white;
  border: 2px solid transparent;
  border-radius: 16px;
  background:
    linear-gradient(to bottom, rgb(95, 212, 255), rgb(2, 40, 130)) padding-box,
    linear-gradient(180deg, rgb(118, 119, 122), rgb(220, 220, 234)) border-box;
  background-clip: padding-box, border-box;
  cursor: pointer;
}

.zoom-range-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
}


/* Dial fissata in basso al centro */
.zoom-dial {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 85%); /* centro sul bordo inferiore */
  width: min(105vmin, 500px);
  height: min(105vmin, 500px);
  border-radius: 50%;
  z-index: 30;
  outline: none;

  border: 3px solid transparent;
  background:
    radial-gradient(rgb(2, 40, 130),rgb(95, 212, 255),rgb(95, 212, 255),rgb(2, 40, 130), rgb(2, 40, 130)) padding-box,
    linear-gradient(180deg, rgb(196, 198, 202), rgb(233, 233, 246)) border-box;
  background-clip: padding-box, border-box;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
  transition: transform 220ms ease;
  touch-action: none; /* <<< blocca lo scroll durante il gesto */
  cursor: none;
}

/* desktop: hover/focus/active = su del 50% */
@media (hover: hover) and (pointer: fine) {
  .zoom-dial:hover,
  .zoom-dial:focus-visible,
  .zoom-dial:active {
    transform: translate(-50%, 65%);
  }
}

.dial-svg{
  width: 100%;
  height: 100%;
  display: block;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  will-change: transform;
}


/* Tacche: sottili e vicino al bordo */
.tick{
  stroke: #f5f5f5;
  stroke-linecap: square;
}
.tick.major{ stroke-width: 0.8; }
.tick.minor{ stroke-width: 0.3; }

#tickGroup{
  will-change: transform;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  shape-rendering: geometricPrecision; /* più “morbido” */
  /* alternativa più netta: crispEdges (ma a volte peggiora su rotazione) */
  /* shape-rendering: crispEdges; */
}

/* Etichette tacche major */
.dial-label {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-weight: 400;
  fill: #ffffff;
  pointer-events: none;
}

/* Mobile: rimuovi completamente la rotella e il cursore zoom */
@media (pointer: coarse), (max-width: 767px) {
  :root {
    --image-max-height: 100dvh !important;
    --body-gap: 0px !important;
  }
  .zoom-dial, .cursor-zoom { display: none !important; }
  .project-info {top: calc(100dvh - 40px); transition: none;}
  .name { top: 6px;}
  .info { top: 27px;}
  footer button{margin-top: 6px;}
}