/* Hero: the product occupies the center and all three hats share pointer motion. */
.hero {
  display: block;
  min-height: 760px;
  height: 100svh;
  max-height: 1020px;
  padding: 0;
}
.hero-watermark {
  z-index: 0;
  width: min(98vw, 1450px);
  left: 50%;
  top: 51%;
  opacity: .03;
  transform: translate(-50%, -50%);
}
.hero-copy {
  position: absolute;
  z-index: 4;
  top: clamp(105px, 14vh, 140px);
  left: 50%;
  width: min(880px, calc(100% - 40px));
  padding: 0;
  text-align: center;
  transform: translateX(-50%);
}
.hero h1 {
  margin: 12px 0 10px;
  font-family: "Noto Serif SC", "Songti SC", serif;
  font-size: clamp(43px, 4.3vw, 66px);
  font-weight: 500;
  letter-spacing: -.038em;
  line-height: 1.17;
  white-space: normal;
}
.hero-desc {
  margin: 0 0 9px;
  font-size: 14px;
  letter-spacing: .08em;
}
.hero-slogan {font-size: 11px;letter-spacing: .22em}
.hero-gallery {
  position: absolute;
  z-index: 3;
  inset: 320px 0 28px;
  width: 100%;
  height: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
}
.gallery-stage {
  flex: none;
  min-height: 0;
  height: 316px;
  width: 100%;
  cursor: grab;
  perspective: 1100px;
}
.gallery-stage.dragging {cursor: grabbing}
.hat-card {
  width: min(47vw, 475px);
  height: 100%;
  min-height: 0;
}
.hat-card.active {transform: translate(-50%, -50%) scale(1)}
.hat-card.before {transform: translate(calc(-50% - min(30vw, 360px)), -50%) scale(.66) rotate(-7deg)}
.hat-card.after {transform: translate(calc(-50% + min(30vw, 360px)), -50%) scale(.66) rotate(7deg)}
.hat-card .visor-canvas {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  transform: translateY(-50%) translateX(var(--pointer-shift, 0px)) rotateY(var(--pointer-tilt, 0deg));
  transform-style: preserve-3d;
  transition: transform .22s ease-out;
  pointer-events: none;
}
.hat-card .visor-photo {width: 100%;height: 100%;object-fit: contain}
.front45 .front-logo,
.turn-front .front-logo {
  position: absolute;
  left: 31%;
  top: 34%;
  width: 30%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 1px .5px rgba(6,8,13,.45));
  mix-blend-mode: normal;
  transform: rotate(6deg) skewX(-3deg);
  transform-origin: left center;
  pointer-events: none;
}
.front45.ivory .front-logo,
.turn-front.ivory .front-logo {filter: brightness(.39) contrast(1.1) drop-shadow(0 1px .5px rgba(0,0,0,.28));mix-blend-mode: normal}
.site-header,.wordmark {background: var(--paper)}
.wordmark img {filter: brightness(1.12) contrast(1.15)}
.product-card-image .visor-canvas.front45 {width: 100%;aspect-ratio: 1}
.product-card .visor-canvas {transition: transform .5s ease}
.product-card:hover .visor-photo {transform: none}
.gallery-bottom {
  position: absolute;
  z-index: 8;
  top: 39%;
  left: 0;
  width: 100%;
  padding: 0 clamp(30px, 6vw, 90px);
  margin: 0;
  justify-content: space-between;
  pointer-events: none;
}
.gallery-bottom .arrow-button {pointer-events: auto;background: rgba(255,255,255,.62)}
.gallery-meta {position: absolute;right: clamp(30px, 6vw, 90px);top: 100px;text-align: right}
.gallery-dots {justify-content: flex-end}
.hero-cta {
  position: absolute;
  z-index: 8;
  bottom: 30px;
  left: 50%;
  width: min(260px, 72%);
  min-height: 50px;
  margin: 0;
  transform: translateX(-50%);
}
.hero-cta:hover {transform: translate(-50%, -2px)}
.gesture-hint {position: absolute;bottom: 5px;left: 50%;transform: translateX(-50%);margin: 0}
.scroll-cue {z-index: 4}

/* Two photographic angles blend as the pointer moves across the preview. */
.preview-image-wrap {cursor: ew-resize;touch-action: pan-y}
.turn-stage {transform: none !important;transition: none}
.turn-face {backface-visibility: visible;transform: none;transition: opacity .42s ease;pointer-events: none}
.turn-front {opacity: 1}
.turn-back {opacity: 0}
.turn-stage.turned .turn-front {opacity: 0}
.turn-stage.turned .turn-back {opacity: 1}
.turn-stage.interactive {transform: perspective(850px) rotateY(var(--preview-tilt, 0deg)) !important}
.turn-stage.interactive .turn-front {opacity: calc(1 - var(--view-progress, 1))}
.turn-stage.interactive .turn-back {opacity: var(--view-progress, 1)}
.turn-front .front-logo {z-index: 2}
#digitOverlay {left: 15%;top: 29%}

@media (max-width: 900px) {
  .hero {height: 100svh;min-height: 760px;padding: 0}
  .hero-copy {top: 100px;width: calc(100% - 34px)}
  .hero h1 {font-size: clamp(40px, 6.5vw, 57px)}
  .hero-gallery {top: 285px;bottom: 32px;margin: 0;height: auto}
  .gallery-stage {height: 350px}
  .hat-card {width: min(72vw, 540px);height: 100%}
  .hat-card.before {transform: translate(calc(-50% - 33vw), -50%) scale(.66) rotate(-7deg)}
  .hat-card.after {transform: translate(calc(-50% + 33vw), -50%) scale(.66) rotate(7deg)}
  .hero-watermark {width: 115vw;left: 50%;top: 50%;opacity: .027}
}
@media (max-width: 620px) {
  .hero {min-height: 760px;height: 100svh;padding: 0}
  .hero-copy {top: 93px;width: calc(100% - 30px)}
  .hero-copy .eyebrow {font-size: 9px;letter-spacing: .12em}
  .hero h1 {font-size: clamp(37px, 9.5vw, 50px);margin: 11px 0 9px}
  .hero-desc {font-size: 12px;margin-bottom: 6px}
  .hero-slogan {font-size: 10px}
  .hero-gallery {top: 273px;bottom: 45px}
  .gallery-stage {height: 390px}
  .hat-card {width: min(92vw, 410px);height: 100%}
  .hat-card.before {transform: translate(calc(-50% - 44vw), -50%) scale(.6) rotate(-7deg)}
  .hat-card.after {transform: translate(calc(-50% + 44vw), -50%) scale(.6) rotate(7deg)}
  .gallery-bottom {gap: 22px}
  .gallery-bottom {top: 42%;padding: 0 15px}
  .gallery-meta {top: 155px;right: 22px}
  .hero-cta {width: min(250px, 72%);bottom: 26px}
  .gesture-hint {font-size: 10px;bottom: 5px}
  .hero-watermark {width: 142vw;top: 51%;opacity: .024}
  .scroll-cue {position: absolute;bottom: 15px;left: 24px;margin: 0}
  #digitOverlay {left: 15%;top: 29%}
}