/* =========================================================
   Hero — full-bleed real footage / photography per product
   ========================================================= */
.hero3d { position: relative; min-height: 100svh; color: #fff; background: var(--navy-950); overflow: hidden; isolation: isolate; --mx: 0; --my: 0; --dur: 8000ms; }
.hero3d__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero3d__media { position: absolute; inset: -2%; width: 104%; height: 104%; max-width: none; object-fit: cover; opacity: 0;
  transform: scale(1.06) translate(calc(var(--mx) * -14px), calc(var(--my) * -10px));
  transition: opacity 1.4s var(--ease), transform 1.6s var(--ease); }
.hero3d__media.is-active { opacity: 1; transform: scale(1) translate(calc(var(--mx) * -14px), calc(var(--my) * -10px)); }
/* Slow cinematic push-in on still photographs */
.hero3d__media--photo.is-active { animation: heroKenBurns calc(var(--dur) + 2s) linear forwards; }
@keyframes heroKenBurns { from { scale: 1; } to { scale: 1.12; } }
.hero3d__shade { position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(2,8,20,.88) 0%, rgba(2,8,20,.6) 30%, rgba(2,8,20,.12) 58%, rgba(2,8,20,0) 75%),
  linear-gradient(180deg, rgba(2,8,20,.7) 0%, rgba(2,8,20,0) 20%, rgba(2,8,20,0) 60%, rgba(2,8,20,.92) 100%); }
.hero3d__grain { position: absolute; inset: 0; opacity: .06; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* Giant outlined word, bottom right above the navigation bar */
.hero3d__words { position: absolute; z-index: -1; right: 3vw; bottom: 150px; height: 0; pointer-events: none;
  transform: translate(calc(var(--mx) * -26px), calc(var(--my) * -14px)); transition: transform .6s var(--ease); }
.hero3d__word { position: absolute; right: 0; bottom: 0; display: flex; white-space: nowrap; overflow: hidden; padding: .05em .02em .08em;
  font-family: var(--font-head); font-weight: 800; font-size: clamp(4.5rem, 11vw, 13rem); line-height: .82; letter-spacing: -.045em; }
.hero3d__word i { font-style: normal; display: inline-block; color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.32);
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 85%); -webkit-background-clip: text; background-clip: text;
  transform: translateY(105%) rotate(6deg); opacity: 0; transition: transform 1s var(--ease), opacity .8s var(--ease); transition-delay: calc(var(--i) * 40ms); }
.hero3d__word.is-active i { transform: none; opacity: 1; transition-delay: calc(350ms + var(--i) * 50ms); }
.hero3d__word.is-leaving i { transform: translateY(-105%) rotate(-6deg); opacity: 0; transition-delay: calc(var(--i) * 25ms); }

.hero3d__grid { display: grid; align-items: center; min-height: 100svh; padding: calc(var(--header-h) + 20px) 0 170px; }
.hero3d__copy { display: grid; max-width: 640px; }
.hero3d__slide { grid-area: 1 / 1; visibility: hidden; pointer-events: none; }
.hero3d__slide.is-active { visibility: visible; pointer-events: auto; }
.hero3d__slide > * { opacity: 0; transform: translateY(34px); filter: blur(6px); transition: opacity .7s var(--ease), transform .9s var(--ease), filter .7s var(--ease); }
.hero3d__slide.is-active > * { opacity: 1; transform: none; filter: none; }
.hero3d__slide.is-active > :nth-child(1) { transition-delay: .35s; }
.hero3d__slide.is-active > :nth-child(2) { transition-delay: .45s; }
.hero3d__slide.is-active > :nth-child(3) { transition-delay: .58s; }
.hero3d__slide.is-active > :nth-child(4) { transition-delay: .7s; }
.hero3d__slide.is-active > :nth-child(5) { transition-delay: .82s; }
.hero3d__slide.is-leaving { visibility: visible; }
.hero3d__slide.is-leaving > * { opacity: 0; transform: translateY(-24px); transition-duration: .45s; transition-delay: 0s; }
.hero3d__kicker { display: inline-flex; align-items: center; gap: 14px; font-family: var(--font-head); font-size: .8rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--yellow); margin-bottom: 22px; }
.hero3d__kicker b { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,204,0,.5); letter-spacing: 0; font-size: .85rem; }
.hero3d__title { font-family: var(--font-head); font-size: clamp(2.5rem, 5vw, 5rem); font-weight: 800; line-height: 1.02; letter-spacing: -.035em; margin: 0 0 20px; max-width: 13ch;
  text-shadow: 0 8px 40px rgba(0,0,0,.45); }
.hero3d__sub { font-size: clamp(1rem, 1.25vw, 1.15rem); color: rgba(255,255,255,.82); max-width: 520px; margin-bottom: 32px; text-shadow: 0 2px 16px rgba(0,0,0,.5); }
.hero3d__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero3d__specs { display: flex; flex-wrap: wrap; gap: 12px; margin: 34px 0 0; }
.hero3d__specs > div { min-width: 128px; padding: 14px 18px; border-radius: 16px; background: rgba(6,20,43,.38); border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); position: relative; overflow: hidden; }
.hero3d__specs > div::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px; background: var(--yellow); border-radius: 2px; }
.hero3d__specs dt { font-family: var(--font-head); font-size: 1.4rem; font-weight: 700; line-height: 1.1; color: #fff; }
.hero3d__specs dd { margin: 2px 0 0; font-size: .74rem; color: rgba(255,255,255,.65); text-transform: uppercase; letter-spacing: .08em; }

/* Bottom navigation with photo thumbnails */
.hero3d__bar { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 0 26px; z-index: 2; }
.hero3d__bar-inner { display: flex; align-items: center; gap: 22px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); }
.hero3d__counter { font-family: var(--font-head); display: flex; align-items: baseline; gap: 6px; min-width: 92px; }
.hero3d__counter b { font-size: 2.2rem; font-weight: 800; color: var(--yellow); line-height: 1; }
.hero3d__counter span { color: rgba(255,255,255,.5); font-size: .95rem; }
.hero3d__thumbs { flex: 1; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; }
.hero3d__thumb { position: relative; display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 14px; overflow: hidden; min-width: 0;
  background: rgba(6,20,43,.35); border: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.65); text-align: left; backdrop-filter: blur(10px);
  transition: background .4s, color .4s, border-color .4s, transform .4s var(--ease); }
.hero3d__thumb:hover { background: rgba(255,255,255,.1); color: #fff; transform: translateY(-3px); }
.hero3d__thumb.is-active { background: rgba(255,255,255,.14); border-color: rgba(255,204,0,.45); color: #fff; }
.hero3d__thumb img { width: 64px; height: 44px; border-radius: 9px; object-fit: cover; flex-shrink: 0; filter: saturate(.7) brightness(.8); transition: filter .4s, transform .5s var(--ease); }
.hero3d__thumb.is-active img, .hero3d__thumb:hover img { filter: none; }
.hero3d__thumb span { display: grid; min-width: 0; font-family: var(--font-head); font-size: .78rem; font-weight: 600; line-height: 1.25; }
.hero3d__thumb span, .hero3d__thumb small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero3d__thumb small { font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--yellow); opacity: .85; font-weight: 600; }
.hero3d__progress { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--yellow); transform: scaleX(0); transform-origin: left; }
.hero3d__thumb.is-active .hero3d__progress { animation: heroProgress var(--dur) linear forwards; }
.hero3d.is-paused .hero3d__progress, .hero3d.is-paused .hero3d__media--photo { animation-play-state: paused !important; }
@keyframes heroProgress { to { transform: scaleX(1); } }
.hero3d__arrows { display: flex; gap: 8px; }
.hero3d__arrows button { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: rgba(6,20,43,.3); color: #fff;
  display: grid; place-items: center; backdrop-filter: blur(10px); transition: .3s var(--ease); }
.hero3d__arrows button:hover { background: var(--yellow); border-color: var(--yellow); color: var(--navy-900); transform: scale(1.06); }
.hero3d__side { position: absolute; right: 22px; top: 50%; translate: 0 -50%; writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--font-head); font-size: .7rem; letter-spacing: .35em; text-transform: uppercase; color: rgba(255,255,255,.4); }
.hero3d__side::before { content: ""; display: inline-block; width: 1px; height: 60px; background: rgba(255,255,255,.3); margin-bottom: 14px; }

@media (max-width: 1180px) {
  .hero3d__side { display: none; }
  .hero3d__thumb span { display: none; }
  .hero3d__thumb { justify-content: center; }
  .hero3d__thumb img { width: 100%; height: 48px; }
}
@media (max-width: 980px) {
  .hero3d__grid { align-items: end; padding: calc(var(--header-h) + 20px) 0 120px; }
  .hero3d__shade { background: linear-gradient(180deg, rgba(2,8,20,.55) 0%, rgba(2,8,20,.05) 28%, rgba(2,8,20,.55) 55%, rgba(2,8,20,.96) 100%); }
  .hero3d__words { bottom: auto; top: calc(var(--header-h) + 30px); right: 16px; }
  .hero3d__word { font-size: 18vw; bottom: auto; top: 0; }
  .hero3d__counter { display: none; }
  .hero3d__title { max-width: none; }
}
@media (max-width: 640px) {
  .hero3d__title { font-size: 2.3rem; }
  .hero3d__specs { margin-top: 24px; gap: 8px; }
  .hero3d__specs > div { min-width: 0; flex: 1; padding: 10px 12px; }
  .hero3d__specs dt { font-size: 1.05rem; }
  .hero3d__specs dd { font-size: .62rem; }
  .hero3d__thumbs { gap: 6px; }
  .hero3d__thumb { padding: 4px; border-radius: 10px; }
  .hero3d__thumb img { height: 36px; border-radius: 7px; }
  .hero3d__arrows { display: none; }
  .hero3d__actions .btn--glass { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero3d__media--photo.is-active { animation: none; }
}