@media (min-width: 769px) {
  #bk3d-wrapper {
    display: none;
  }

  .hero-book > img {
    display: none;
  }

  .bk3d-desktop-wrapper {
    --bk-w: 320px;
    --bk-h: 430px;
    --bk-d: 20px;
    --bk-core-bg:
      linear-gradient(135deg, rgba(255,255,255,0.09), transparent 42%),
      linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
    --bk-core-shadow:
      inset 0 0 0 1px rgba(255,255,255,0.05),
      inset 0 -12px 24px rgba(0,0,0,0.12);
    --bk-face-shadow:
      0 18px 40px rgba(0,0,0,0.24),
      inset 0 0 0 1px rgba(255,255,255,0.12);
    perspective: 1600px;
    margin-top: 25px;
    position: relative;
    overflow: visible;
  }

  #bk3d-book-desktop {
    position: relative;
    width: var(--bk-w);
    height: var(--bk-h);
    transform-style: preserve-3d;
    will-change: transform;
  }
}

@media (max-width: 768px) {
  .hero-book {
    display: none !important;
  }

  .hero {
    min-height: auto;
    padding: 90px 30px 30px;
  }

  .hero-text .flip-gif {
    position: relative !important;
    right: auto;
    top: auto;
    transform: none;
    float: right;
    max-width: 115px;
    margin: 0 -20px 0 14px;
    z-index: 1;
  }
}

#bk3d-wrapper {
  --bk-w: 240px;
  --bk-h: 330px;
  --bk-d: 18px;
  --bk-section-height: 40vh;
  --bk-core-bg: linear-gradient(135deg, rgba(255,255,255,0.09), transparent 42%), linear-gradient(180deg, #fff 0%, #fbfbfb 100%);
  --bk-core-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), inset 0 -12px 24px rgba(0,0,0,0.12);
  --bk-face-shadow: 0 18px 40px rgba(0,0,0,0.24), inset 0 0 0 1px rgba(255,255,255,0.12);
}

#bk3d-section {
  position: relative;
  height: var(--bk-section-height);
}

#bk3d-sticky {
  position: sticky;
  top: 0;
  height: 55vh;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1600px;
  overflow: visible;
}

/* word highlights — sweep left→right */
.bk3d-hl {
  display: inline;
  border-radius: 3px;
  padding: 0 5px 2px;
  background-image: linear-gradient(var(--bk3d-hl-color, transparent), var(--bk3d-hl-color, transparent));
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
}

.bk3d-hl.active {
  background-size: 100% 100%;
}

.bk3d-hl-char {
  transition: color 0.06s linear;
}

.bk3d-hl-char.active {
  color: white;
}

/* section title underline — scroll-triggered */
.bk3d-ul-inner {
  display: inline-block;
  position: relative;
}

.bk3d-ul-inner::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: var(--bk3d-ul-origin, left);
  transition: transform var(--bk3d-ul-dur, 0.55s) var(--bk3d-ul-ease, cubic-bezier(0.34, 1.56, 0.64, 1));
}

.bk3d-ul-active .bk3d-ul-inner::after {
  transform: scaleX(1);
}

/* circles: fuori da media query, si applica a mobile e desktop */
.bk3d-deco-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform, opacity;
  opacity: 0;
}

#bk3d-scene {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transform-style: preserve-3d;
}

#bk3d-book {
  position: relative;
  width: var(--bk-w);
  height: var(--bk-h);
  transform-style: preserve-3d;
  will-change: transform;
}

.bk3d-core {
  position: absolute;
  inset: 0;
  background: var(--bk-core-bg);
  box-shadow: var(--bk-core-shadow);
  transform: translateZ(0px);
}

.bk3d-face {
  position: absolute;
  left: 50%;
  top: 50%;
  backface-visibility: hidden;
  overflow: hidden;
  transform-style: preserve-3d;
}

.bk3d-front,
.bk3d-back {
  width: var(--bk-w);
  height: var(--bk-h);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: var(--bk-face-shadow);
}

.bk3d-front {
  transform: translate(-50%, -50%) translateZ(calc(var(--bk-d) / 2));
}

.bk3d-back {
  transform: translate(-50%, -50%) rotateY(180deg) translateZ(calc(var(--bk-d) / 2));
}

.bk3d-spine {
  width: calc(var(--bk-d) + 2px);
  height: var(--bk-h);
  
  border-left: 0.5px solid rgba(0, 0, 0, 0.185);
  transform: translate(-50%, -50%) rotateY(-90deg) translateZ(calc(var(--bk-w) / 2));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.bk3d-pages {
  width: var(--bk-d);
  height: var(--bk-h);
  transform: translate(-50%, -50%) rotateY(90deg) translateZ(calc(var(--bk-w) / 2));
  background: repeating-linear-gradient(90deg, #f7f2e8 0px, #f7f2e8 2px, #efe5d7 2px, #efe5d7 6px);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
}

.bk3d-top-face {
  width: var(--bk-w);
  height: var(--bk-d);
  transform: translate(-50%, -50%) rotateX(90deg) translateZ(calc(var(--bk-h) / 2));
  background: #e8dccb;
}

.bk3d-bottom-face {
  width: var(--bk-w);
  height: var(--bk-d);
  transform: translate(-50%, -50%) rotateX(-90deg) translateZ(calc(var(--bk-h) / 2));
  background: #d8cbb6;
}