@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./assets/pesca/anton-regular.ttf') format('truetype');
}

/* Keep the cropped end of the rod outside the scene, including its entrance. */
.scene-pesca .pesca-product {
  height: calc(100% + 160px);
  width: auto;
  max-width: none;
  left: -60px;
  bottom: -70px;
}

/* The fixed slant belongs to the heading; GSAP only moves its inner layers. */
.scene-pesca .pesca-copy { top: 25%; }
.pesca-copy .eyebrow { margin: 0; }
.pesca-copy .pesca-title {
  position: relative;
  isolation: isolate;
  width: max-content;
  margin: 36px 0 22px;
  font-family: 'Anton', Impact, 'Arial Narrow', sans-serif;
  font-size: clamp(150px, min(20vw, 40svh), 390px);
  font-style: normal;
  font-weight: 400;
  font-synthesis: none;
  line-height: .94;
  letter-spacing: -.018em;
  transform: skewX(-10deg) scaleX(.78);
  transform-origin: left center;
}
.pesca-copy .pesca-title::after { content: none; }
.pesca-title-mask { display: block; overflow: hidden; padding: .12em .09em .1em; margin: -.12em -.09em -.1em; }
.pesca-title-face { display: block; white-space: nowrap; }
.pesca-letter { display: inline-block; }
.pesca-title-outline { position: absolute; z-index: -1; left: .025em; top: -.1em; pointer-events: none; color: transparent; }
.pesca-title-outline::before {
  content: attr(data-word);
  display: block;
  white-space: nowrap;
  -webkit-text-stroke: 1px #f6f2dd48;
  transform: scaleY(1.2);
  transform-origin: center 35%;
}
.pesca-copy .scene-detail p {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 27px;
  font-size: clamp(11px, .9vw, 15px);
  letter-spacing: .12em;
  line-height: 1.5;
}
.pesca-rule { display: block; flex: 0 0 48px; height: 2px; background: #d5eb78; transform-origin: left center; }

@media (min-width: 761px) and (max-height: 780px) {
  .scene-pesca .pesca-copy { top: 24%; }
  .pesca-copy .pesca-title { margin-top: 30px; margin-bottom: 20px; }
}
@media (max-width: 760px), (max-width: 1100px) and (max-aspect-ratio: 1/1) {
  .scene-pesca .pesca-product {
    width: 120%;
    height: auto;
    left: -18%;
    bottom: -4%;
    rotate: -45deg;
    transform-origin: 45% 85%;
  }
  .scene-pesca .pesca-copy { top: 14%; }
  .pesca-copy .pesca-title { font-size: clamp(146px, 39vw, 310px); margin: 32px 0 23px; }
  .pesca-copy .scene-detail p { font-size: clamp(10px, 2.55vw, 14px); letter-spacing: .1em; gap: 11px; }
  .pesca-rule { flex-basis: 35px; }
}