/* Side-slide gallery layout — loaded only by index.html (the side-slide gallery design), on top of style.css */

/* ---------- Pinned horizontal strips (Exterior / Interior / Scale Models) ---------- */
.strip-section { padding: 0 !important; }
.hscroll {
  --h: clamp(260px, calc(100svh - 330px), 720px);   /* strip height */
  --gap: clamp(12px, 1.4vw, 20px);
  position: relative;
}
/* model photos are small originals — a shorter strip keeps them crisp */
.hscroll[data-strip="models"] { --h: clamp(240px, calc(100svh - 330px), 470px); }
.hscroll__sticky { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding-top: 64px; }

/* section title sits inside the pinned screen, so it takes no extra scrolling */
.hscroll .chapter { padding: 0 0 clamp(14px, 2vh, 26px); overflow: visible; }
.hscroll .chapter .section-tag { margin-bottom: 10px; }
.hscroll .chapter__title { font-size: clamp(34px, 5.4vw, 92px); }
.hscroll .chapter__meta { margin-top: 8px; font-size: 14px; }
.hscroll .waves--chapter { top: -80px; height: 300px; opacity: .55; }

.hscroll__track { display: flex; gap: var(--gap); height: var(--h); padding: 0 var(--gutter); will-change: transform; }
.hscroll__track::after { content: ""; flex: 0 0 calc(var(--gutter) - var(--gap)); }   /* breathing room after the last column */

.hcol { flex: 0 0 auto; height: 100%; display: flex; flex-direction: column; gap: var(--gap); }
.hcol--single { width: calc(var(--h) * var(--ar)); }
.hcol--stack { width: calc((var(--h) - (var(--n, 2) - 1) * var(--gap)) / var(--n, 2) * var(--ar)); }
.hcol--stack .hslide { flex: 1 1 0; min-height: 0; }

/* columns glide in when the section arrives */
.hscroll .hcol { opacity: 0; transform: translateX(90px); transition: opacity .9s var(--ease), transform 1.2s var(--ease); transition-delay: calc(min(var(--i), 6) * 70ms); }
.hscroll__track.in .hcol { opacity: 1; transform: none; }

.hslide { position: relative; display: block; height: 100%; border-radius: var(--radius); overflow: hidden; cursor: none; background: var(--surface); }
.hslide img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.12); transition: transform 1.2s var(--ease), opacity .7s; }
.hslide img.loaded { opacity: 1; transform: scale(1.04); }
.hslide:hover img.loaded { transform: scale(1.1); }
.hslide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.55)); pointer-events: none; }
.hslide__idx { position: absolute; left: 16px; bottom: 10px; z-index: 1; font-family: var(--f-display); font-weight: 800; font-size: clamp(28px, 3.4vw, 54px); line-height: 1; color: rgba(255,255,255,.92); text-shadow: 0 6px 30px rgba(0,0,0,.5); transition: color .4s; }
.hcol--stack .hslide__idx { font-size: clamp(22px, 2.2vw, 34px); }
.hslide:hover .hslide__idx { color: var(--accent-2); }

.hscroll__foot { display: flex; align-items: center; gap: 20px; margin: clamp(14px, 2.4vh, 28px) var(--gutter) 0; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.hscroll__count { font-family: var(--f-display); letter-spacing: .08em; font-size: 14px; white-space: nowrap; }
.hscroll__count b { color: var(--accent-2); font-weight: 700; }
.hscroll__bar { flex: 1; height: 2px; background: var(--line); position: relative; }
.hscroll__bar span { position: absolute; inset: 0; background: var(--accent-2); transform-origin: 0 50%; transform: scaleX(0); }
.hscroll__hint { white-space: nowrap; }
.hscroll__hint i { display: inline-block; font-style: normal; color: var(--accent-2); animation: nudge 1.6s var(--ease) infinite; }
@keyframes nudge { 50% { transform: translateX(6px); } }

/* Phones / reduced motion: no pinning — swipe the strip sideways instead */
@media (max-width: 800px), (prefers-reduced-motion: reduce) {
  .hscroll { --h: min(72vw, 440px); height: auto !important; padding: clamp(60px, 12vw, 100px) 0 20px; }
  .hscroll[data-strip="models"] { --h: min(64vw, 380px); }
  .hscroll__sticky { position: relative; height: auto; padding-top: 0; }
  .hscroll__track { overflow-x: auto; scroll-snap-type: x mandatory; transform: none !important; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .hscroll__track::-webkit-scrollbar { display: none; }
  .hcol { scroll-snap-align: center; }
  .hscroll__hint { display: none; }
}
@media (max-width: 800px) {
  .hcol--single { max-width: 86vw; }
}
@media (hover: none) { .hslide { cursor: pointer; } }
@media (prefers-reduced-motion: reduce) {
  .hscroll .hcol { opacity: 1; transform: none; }
  .hslide img { transform: none !important; }
}

/* ---------- Walkthrough films as slides ---------- */
.hslide--film { isolation: isolate; }
.hslide--film img { filter: contrast(1.05) brightness(.8); }
.hslide--film:hover img.loaded { filter: contrast(1.1) brightness(.6); }
.hslide--film:hover .film__tint { opacity: .45; }
.hslide--film:hover .film__play { transform: scale(1.12); background: var(--accent); border-color: var(--accent); }
.hslide--film:hover .film__cta svg { transform: translate(3px, -3px); }
.hslide--film .film__tint { z-index: 1; }
.hslide--film .hslide__idx { display: none; }      /* the film title carries the number */
.hslide--film::after { background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.75)); }
.hscroll[data-strip="walkthrough"] { --h: clamp(260px, calc(100svh - 330px), 640px); }
@media (max-width: 800px), (prefers-reduced-motion: reduce) {
  .hscroll[data-strip="walkthrough"] { --h: min(62vw, 400px); }
}