/* ============================================================
   Luxshine — OEM / ODM Manufacturing page (rebuilt 2026-10-14 on the design of
   "What Is Vietnamese Remy Hair?", user comment cmv7s1gkhb444: redesign with
   beautiful photos, strong motion, minimalist and luxury).
   css/remy.css carries the banner, the display type, the gold bars, the photo
   curtains, the contact block and the footer. This file holds what is this
   page's own: the factory band, the Gilroy step titles and the frame of the
   partners' message wall (the OEM / ODM pair, both step lists and the table were
   removed 2026-10-26, comments cmvormbcr0o07 · cmvormm9kdpgr · cmvorn0s4l2gl · cmvorn93ejo3p).
   Photos: the Luxshine factory and office (project folders "Nhà máy",
   "Văn phòng"), resized for the web.
   Markup: oem-odm.html. Tokens only; spacing on the 12-step scale; transform and
   opacity only. Same three layers as remy.css:
   1. layout, 2. entrances (.is-in from js/main.js), 3. desktop scroll scenes.
   ============================================================ */

/* ---------- 1 · Banner: the photo's top half is the white ceiling, so the title stands there ---------- */
.oemp-hero { align-items: start; }
.oemp-hero .remy-hero__photo img { object-position: 50% 40%; }
/* The ceiling carries lamps and rails: a white wash over its top half keeps the title clear of them. */
.oemp-hero::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(to bottom, color-mix(in srgb, var(--color-white) 64%, transparent), transparent 56%); pointer-events: none; }
.oemp-hero .remy-hero__head { z-index: 1; }

/* ---------- 2 · Opening: the introduction centred, then the factory floor across the whole screen ---------- */
.oemp-band { position: relative; overflow: hidden; height: clamp(320px, 72svh, 760px); margin: var(--space-16) 0 0; background: var(--surface-beige); }
.oemp-band img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.oemp-band::after { content: ""; position: absolute; inset: 0; background: var(--color-white); transform: scaleY(0); transform-origin: top; pointer-events: none; }

/* ---------- 3 · Real messages, real trust (comment cmvorni4n82c5, in place of the two ways, the OEM and ODM steps
   and the table, removed 2026-10-26): the partners' WhatsApp wall shared with Wholesale (css/sections.css). On beige,
   between the white foot of the OEM service and the white form, so the page keeps its white / beige rhythm. ---------- */
.oemp-trust { --remy-curtain: var(--surface-beige); background: var(--surface-beige); padding-block: calc(var(--space-16) * 2); }
.oemp-trust__title { text-align: center; }
.oemp-trust__intro { margin: var(--space-8) auto var(--space-16); text-align: center; }

/* ============================================================
   Layer 2 · Entrances (remy.css starts the lines, curtains and copy)
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .js .oemp-band[data-reveal]::after { transform: scaleY(1); transition: transform 1.2s var(--remy-ease) var(--remy-d, 0s); }
  .js .oemp-band[data-reveal].is-in::after { transform: scaleY(0); }
  .js .oemp-band[data-reveal] img { transform: scale(1.14); transition: transform 1.8s var(--remy-ease) var(--remy-d, 0s); }
  .js .oemp-band[data-reveal].is-in img { transform: none; }
}

/* ============================================================
   Layer 3 · Scroll scenes, desktop only (same conditions as remy.css):
   the factory band drifts inside its frame (the message wall's drift is in css/sections.css).
   ============================================================ */
@media (min-width: 1025px) and (min-height: 680px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .oemp-band.is-in img { animation: remy-drift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  }
}

/* ---------- OEM / ODM service: step titles in SVN-Gilroy (comment cmvovb873kxc5), with the line height a two-line Gilroy
   title needs. The four steps are back as on the homepage (comment cmvowo1ecrxzf rolled back the two-step cut). ---------- */
.oemp .hm-flow__title { font-family: var(--font-body); font-weight: 600; line-height: var(--h6-lh); }

/* ---------- Below 1025px ---------- */
@media (max-width: 1024px) {
  .oemp-trust { padding-block: var(--space-24); }
  .oemp-trust__intro { margin-bottom: var(--space-12); }
}
/* Tablets keep the wall at four columns: at two, eight 9:16 screenshots stood 3,300px tall at 834. */
@media (min-width: 768px) and (max-width: 1024px) {
  .oemp-trust .wh-chats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* ---------- Phone ---------- */
@media (max-width: 767px) {
  .oemp-trust { padding-block: var(--space-16); }
  .oemp-trust__intro { margin: var(--space-6) 0 var(--space-8); text-align: left; }
}