/* Herojus: kaip AirPods Pro puslapio pradžia, tik produktas yra puokštės nuotrauka. */
.hero { position: relative; height: 240vh; background: var(--bg-alt); margin-top: calc(-1 * var(--nav-h)); }
.hero-sticky { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; }
.hero-macro { position: absolute; inset: 0; z-index: 2; will-change: transform, opacity; transform-origin: 50% 46%; }
.hero-macro img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.hero-prod {
  position: absolute; left: 50%; top: calc(var(--nav-h) + 3vh);
  height: min(64vh, 74vw); aspect-ratio: 904 / 898; transform: translateX(-50%);
  perspective: 1600px;
}
.hero-tilt { width: 100%; height: 100%; will-change: transform; transform-origin: 50% 34%; }
.hero-tilt img { width: 100%; height: 100%; object-fit: contain; }
.prod-shadow {
  position: absolute; left: 50%; bottom: 0.5%; width: 34%; height: 5%; transform: translateX(-50%); z-index: -1;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.12) 55%, rgba(0, 0, 0, 0));
  filter: blur(2px);
}
.hero-copy {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 6vh;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 32px;
}
.hero-intro { position: absolute; z-index: 3; left: 0; right: 0; bottom: 8vh; text-align: center; color: var(--text); will-change: opacity, transform; }
.hero-intro span { display: block; }
.hero-intro-sub { margin-top: 8px; font-size: 17px; font-weight: 600; letter-spacing: -0.022em; }
.hero-text .t-marquee-eyebrow { margin-bottom: 8px; }
.hero-sub { margin-top: 10px; }
.hero-text > *, .hero-pill { will-change: transform, opacity; }

@media (max-width: 734px) {
  .hero { height: 180vh; }
  .hero-prod { top: calc(var(--nav-h) + 9vh); height: auto; width: 88vw; }
  .hero-copy { bottom: 7vh; flex-direction: column; align-items: center; text-align: center; gap: 20px; }
  .hero-sub { font-size: 14px; }
  .hero-pill { padding: 6px 6px 6px 20px; gap: 14px; }
  .hero-pill .btn { font-size: 14px; padding: 8px 15px; }
}
/* žemi, platūs ekranai: puokštė mažesnė, kad tilptų antraštė */
@media (min-width: 735px) and (max-aspect-ratio: 4/3) { .hero-prod { height: min(56vh, 70vw); } }

/* Sudedamosios dalys: prisegtas skyrius */
.parts { position: relative; height: 300vh; background: var(--bg); }
.parts-sticky { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; }
.parts-head { position: absolute; left: 0; right: 0; top: calc(var(--nav-h) + 7vh); text-align: center; z-index: 3; will-change: transform, opacity; }
.parts-head .t-eyebrow { margin-bottom: 6px; }
.parts-stage { position: absolute; left: 50%; top: 66%; width: min(47vh, 32vw); aspect-ratio: 904 / 898; transform: translate(-50%, -50%); }
.part { position: absolute; will-change: transform, opacity; }
.part img { width: 100%; height: 100%; object-fit: contain; }
.part-main { inset: 0; z-index: 2; }
.part-main .prod-shadow { bottom: 0; }
.part-roze { left: 30%; top: 2%; width: 34%; aspect-ratio: 743 / 1174; z-index: 1; }
.part-paper { left: 0; right: 0; bottom: 0; height: 50%; z-index: 3; }
.part-makro { left: 36%; top: 12%; width: 28%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; z-index: 4; box-shadow: 0 0 0 4px #fff, 0 12px 40px rgba(0, 0, 0, 0.12); }
.part-makro img { object-fit: cover; object-position: 54% 44%; transform: scale(1.25); }
.callouts { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.co { position: absolute; opacity: 0; will-change: opacity, transform; }
.co-line { position: absolute; height: 1px; background: var(--gray-2); transform-origin: 0 50%; }
.co-dot { position: absolute; width: 7px; height: 7px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--text); }
.co-label { position: absolute; white-space: nowrap; font-size: 17px; line-height: 1.23536; font-weight: 600; letter-spacing: -0.022em; color: var(--text); transform: translateY(-50%); }
.co-label small { display: block; font-size: 14px; font-weight: 400; color: var(--gray); letter-spacing: -0.016em; }
.parts-steps { position: absolute; left: 0; right: 0; bottom: 7vh; z-index: 3; }
.parts-steps p { position: absolute; left: 0; bottom: 0; max-width: 360px; opacity: 0; will-change: opacity, transform; }
@media (max-width: 734px) {
  .parts { height: 250vh; }
  .parts-head { top: calc(var(--nav-h) + 4vh); }
  .parts-stage { width: 50vw; top: 58%; }
  .co-label { font-size: 14px; }
  .co-label small { font-size: 12px; }
  .parts-steps p { max-width: none; right: 0; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .hero { height: auto; min-height: 100vh; }
  .hero-sticky { position: relative; }
  .hero-macro, .hero-intro { display: none; }
  .parts { height: auto; }
  .parts-sticky { position: relative; height: auto; min-height: 130vh; }
  .parts-stage { top: 60%; }
  .parts-steps p:last-child { opacity: 1 !important; }
}
.part-main img { position: absolute; inset: 0; }
.pm-top { opacity: 0; -webkit-mask-image: linear-gradient(#000 0, #000 52%, transparent 61%); mask-image: linear-gradient(#000 0, #000 52%, transparent 61%); }
.parts-head .t-super { color: var(--text); }
.parts-steps { height: 0; }
.parts-steps .t-tile { width: 100%; }
@media (max-width: 734px) { .co-label small { display: none; } }

/* Ramus variantas: herojus stovi, jokio prisegimo */
.hero { height: auto; padding: calc(var(--nav-h) + 48px) 0 72px; }
.hero-sticky { position: relative; height: auto; overflow: visible; }
.hero-prod { position: relative; left: auto; top: auto; transform: none; margin: 0 auto; height: min(60vh, 66vw); }
.hero-copy { position: relative; bottom: auto; margin-top: 28px; }
@media (max-width: 734px) {
  .hero { height: auto; padding-top: calc(var(--nav-h) + 24px); padding-bottom: 48px; }
  .hero-prod { top: auto; width: 86vw; height: auto; }
  .hero-copy { bottom: auto; margin-top: 20px; }
}