:root {
  --gl-teal: #047b89;
  --gl-square: rgba(21,169,177,.15);
}

.gl-hero,
.gl-hero * { box-sizing: border-box; }

.gl-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 650px;
  overflow: hidden;
  background: url("https://www.giuliolazzarotto.com/wp-content/uploads/2026/10/bg-slider_2.jpg") center center / cover no-repeat;
  font-family: "DM Sans", Arial, sans-serif;
  isolation: isolate;
}

.gl-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.gl-copy {
  position: absolute;
  left: 10.6vw;
  top: 31.5%;
  z-index: 20;
  width: min(42vw, 680px);
}

.gl-title {
  margin: 0;
  color: var(--gl-teal);
  font-size: clamp(48px, 4.15vw, 78px);
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -.045em;
}

.gl-title-line {
  display: block;
  will-change: transform, opacity;
}

.gl-subtitle {
  margin-top: 18px;
  max-width: 510px;
  color: #000;
  font-size: clamp(20px, 1.55vw, 30px);
  font-weight: 400;
  line-height: 1.4;
  will-change: transform, opacity;
}

.gl-subtitle strong { font-weight: 700; }

.gl-square,
.gl-dots,
.gl-circle,
.gl-zigzag,
.gl-cross,
.gl-can,
.gl-shadow {
  position: absolute;
  will-change: transform, opacity;
}

.gl-square {
  left: 55.1%;
  top: 24%;
  width: 19.4%;
  aspect-ratio: 1 / 1;
  background: var(--gl-square);
  z-index: 2;
}

.gl-dots   { left: 48.1%; top: 16.5%; width: 9.3%; z-index: 4; }
.gl-circle { left: 41.3%; top: 51.5%; width: 7.5%; z-index: 4; }
.gl-zigzag { left: 80.2%; top: 46.5%; width: 13.8%; z-index: 4; }
.gl-cross  { left: 77.1%; top: 64.7%; width: 4.6%; z-index: 4; }
.gl-can    { left: 43.2%; top: 2.7%; width: 46.1%; z-index: 10; transform-origin: 50% 60%; }
.gl-shadow { left: 43.2%; top: 68.9%; width: 46.1%; z-index: 5; }

.gl-hint {
  position: absolute;
  left: 50%;
  bottom: 200px;
  z-index: 30;
  transform: translateX(-50%);
  white-space: nowrap;
  color: #000;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  opacity: .55;
}



.gl-hint-arrow {
    display: inline-block;
    margin-left: 6px;
    animation: glArrowMove 1.4s ease-in-out infinite;
}

@keyframes glArrowMove {
    0%, 100% {
        transform: translateY(0);
        opacity: 0.6;
    }

    50% {
        transform: translateY(7px);
        opacity: 1;
    }
}



/* Tablet / laptop stretto */
@media (max-width: 1200px) {
  .gl-copy { left: 8vw; width: min(46vw, 620px); }
  .gl-can, .gl-shadow { width: 49%; left: 41%; }
  .gl-square { width: 21%; left: 54%; }
}

/* Tablet portrait */
@media (max-width: 900px) {
  .gl-hero {
    min-height: 700px;
    height: 100svh;
  }
  .gl-copy {
    left: 7vw;
    top: 16%;
    width: 86vw;
  }
  .gl-title { font-size: clamp(43px, 11vw, 68px); }
  .gl-subtitle { font-size: clamp(18px, 3.7vw, 21px); max-width: 80vw; }

  .gl-square { left: 43%; top: 47%; width: 42%; }
  .gl-dots   { left: 32%; top: 41%; width: 19%; }
  .gl-circle { left: 10%; top: 62%; width: 16%; }
  .gl-zigzag { left: 70%; top: 72%; width: 24%; }
  .gl-cross  { left: 69%; top: 81%; width: 10%; }
  .gl-can,
  .gl-shadow { left: 29%; width: 67%; }
  .gl-can    { top: 37%; }
  .gl-shadow { top: 76%; }
  .gl-hint   { bottom: 18px; font-size: 28px; }
}

/* Smartphone */
@media (max-width: 600px) {
  .gl-hero { min-height: 620px; }
  .gl-copy {
    left: 6vw;
    top: 12%;
    width: 88vw;
  }
  .gl-title {
    font-size: clamp(39px, 12vw, 54px);
    line-height: 1.01;
  }
  .gl-subtitle {
    margin-top: 14px;
    max-width: 88vw;
    font-size: clamp(16px, 4.4vw, 19px);
    line-height: 1.35;
  }

  .gl-square { left: 38%; top: 44%; width: 51%; }
  .gl-dots   { left: 27%; top: 39%; width: 24%; }
  .gl-circle { left: 7%; top: 62%; width: 19%; }
  .gl-zigzag { left: 69%; top: 70%; width: 29%; }
  .gl-cross  { left: 68%; top: 81%; width: 12%; }
  .gl-can,
  .gl-shadow { left: 22%; width: 80%; }
  .gl-can    { top: 34%; }
  .gl-shadow { top: 75%; }

  .gl-hint {
    bottom: 14px;
    max-width: 90vw;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 28px;
  }
}

/* Niente parallax al mouse sui device touch. La timeline scroll rimane. */
@media (hover: none), (pointer: coarse) {
  .gl-can,
  .gl-shadow,
  .gl-square,
  .gl-dots,
  .gl-circle,
  .gl-zigzag,
  .gl-cross { will-change: transform, opacity; }
}

/* Accessibilità: composizione finale statica, senza animazioni. */
@media (prefers-reduced-motion: reduce) {
  .gl-hint { display: none; }
}




.gl-hint {
    font-size: 20px !important;
}