/* ============================================================
   Luxshine — Hair Texture Chart page (rebuilt 2026-10-14 on the design of
   "What Is Vietnamese Remy Hair?" and "Quality Standards", user comment
   cmv7rbxef4m90: minimalist, luxury, banner first, no section labels, a
   "How to choose" section that carries more text, and a new treatment
   for the photos at the end; no photos of models for the textures).
   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 way into the three families, the families
   themselves (a row, then copy beside a grid, then the grid beside copy),
   the reading section on choosing, and the gallery wall at the end with its reader.
   Markup: hair-textures.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 bundles lie on its left half, so the title stands on the
   empty cream to the right, one word per line ---------- */
.tex-hero .remy-hero__photo img { object-position: 50% 50%; }
.tex-hero .remy-hero__title .remy-line:nth-child(2) { --remy-dir: 1; }
/* The banner is as tall as About's (comment cmvoybectyrn4), and this title is three lines, so it takes the display size only
   as far as the banner holds it: (banner height less the head's padding) shared by three lines at 1.06, a touch under so
   rounding never pushes the banner taller. From 1025px the banner also runs behind the 72px header, and the head's padding
   is that header + 48 above, 64 below, which leaves the banner less 112px; below 1025px it is 48 + 48. */
.tex-hero .remy-hero__title { font-size: min(var(--display-1-size), calc((max(35.19vw, 240px) - var(--space-24)) / 3.2)); }
@media (min-width: 1025px) {
  .tex-hero .remy-hero__title { font-size: min(var(--display-1-size), calc((max(35.19vw, 240px) - var(--space-16) - var(--space-12)) / 3.2)); }
}

/* ---------- 2 · Introduction: the opening copy, then the three families as the way into the chart ---------- */
.tex-open { padding-block: var(--space-24) 0; }
.tex-jump { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(100%, 960px); margin-top: var(--space-4); border-block: 1px solid var(--remy-line-c); }
.tex-jump__link { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); padding-block: var(--space-6); color: var(--color-black); }
.tex-jump__link + .tex-jump__link { border-left: 1px solid var(--remy-line-c); }
.tex-jump__name { position: relative; z-index: 0; font-family: var(--font-heading); font-size: var(--h3-size); line-height: var(--h3-lh); text-transform: uppercase; }
/* The family under the pointer, or holding the focus, takes the page's gold bar. */
.tex-jump__name::after { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: .16em; height: .4em; background: var(--color-primary); transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s var(--remy-ease); }
.tex-jump__link:is(:hover, :focus-visible) .tex-jump__name::after { transform: none; }
.tex-jump__count { font-size: var(--body-size); line-height: var(--body-lh); color: var(--color-font); }

/* ---------- 3 · Definition: the Remy page's scene (.remy-def); the opening above has no film, so the
   section keeps its own space above ---------- */

/* ---------- 4–6 · The three families. Straight is one row with every other texture set lower; Wavy
   holds its copy still on the left while six textures pass; Curly turns that pair around. ---------- */
.tex-fam { --remy-curtain: var(--color-white); background: var(--color-white); padding-block: calc(var(--space-16) * 2); scroll-margin-top: var(--remy-header); }
.tex-fam--beige { --remy-curtain: var(--surface-beige); background: var(--surface-beige); }
.tex-fam__lead { max-width: 30em; margin-top: var(--space-6); font-size: var(--display-3-size); line-height: var(--display-3-lh); color: var(--color-black); text-wrap: pretty; }
.tex-fam__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-12) var(--space-6); align-items: start; margin: var(--space-16) 0 0; padding: 0; list-style: none; }
/* (The even tiles of a row no longer drop 64px: all four start level, comment cmvp0tpiyr9co "căn top hết".) */
.tex-fam__wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-6); align-items: start; }
.tex-fam--side .tex-fam__head { position: sticky; top: calc(var(--remy-header) + var(--space-12)); grid-column: 1 / span 4; grid-row: 1; }
.tex-fam--side .tex-fam__grid { grid-column: 6 / -1; grid-row: 1; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; }
.tex-fam--flip .tex-fam__head { grid-column: 9 / -1; }
.tex-fam--flip .tex-fam__grid { grid-column: 1 / span 7; }

/* A texture: its product photo, square, then its name as the link and one line on what it is */
.tex-tile { min-width: 0; }
.tex-tile__link { display: block; color: var(--color-black); }
.tex-tile__shot { aspect-ratio: var(--ty-le-san_pham); background: var(--color-white); }
.tex-tile__name { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--remy-line-c); font-family: var(--font-body); font-weight: 700; font-size: var(--h5-size); line-height: var(--h5-lh); text-transform: uppercase; transition: border-color .4s ease; } /* SVN-Gilroy (comments cmvp0u0k70cxk, cmvp0u2jubdvm) */
.tex-tile__arrow { width: 20px; height: 20px; margin-top: var(--space-1); transition: transform .4s var(--remy-ease); }
.tex-tile__text { max-width: 34em; margin-top: var(--space-3); font-size: var(--body-size); line-height: var(--body-lh); color: var(--color-font); text-wrap: pretty; }
.tex-tile__link:is(:hover, :focus-visible) .tex-tile__name { border-bottom-color: var(--color-primary); }
.tex-tile__link:is(:hover, :focus-visible) .tex-tile__arrow { transform: translateX(var(--space-1)); }
.tex-tile__link:focus-visible { outline: 2px solid var(--color-black); outline-offset: var(--space-1); }

/* ---------- 7 · How to choose: a reading section. The principle holds still on the left; on the right one
   entry per kind of natural hair, each ending on the textures to reach for. ---------- */
.tex-guide { background: var(--color-white); padding-block: calc(var(--space-16) * 2); }
.tex-guide__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-6); align-items: start; }
.tex-guide__title { grid-column: 1 / -1; }
.tex-guide__intro { position: sticky; top: calc(var(--remy-header) + var(--space-12)); grid-column: 1 / span 5; margin-top: var(--space-16); }
.tex-guide__lead { max-width: 26em; font-size: var(--display-3-size); line-height: var(--display-3-lh); color: var(--color-black); text-wrap: pretty; }
.tex-guide__main { grid-column: 7 / -1; margin-top: var(--space-16); }
.tex-guide__list { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--remy-line-c); }
.tex-match { padding-block: var(--space-8); border-top: 1px solid var(--remy-line-c); }
/* The list opens on its first heading: no rule and no padding above it, as on the Remy page. */
.tex-match:first-child { padding-top: 0; border-top: 0; }
/* SVN-Gilroy (comment cmvp0u6zzym9l): the DS's Gilroy subhead, bold 28px (24 on phones). */
.tex-match__head { font-family: var(--font-body); font-weight: 700; font-size: var(--subhead-size); line-height: var(--subhead-lh); text-transform: uppercase; color: var(--color-black); }
.tex-match__text { max-width: 34em; margin-top: var(--space-3); font-size: var(--h6-size); line-height: var(--h6-lh); color: var(--color-black); text-wrap: pretty; }
.tex-match__picks { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-6) 0 0; padding: 0; list-style: none; }
/* A texture to reach for: its photo in small, then its name; the whole chip is the link (48px tall). */
.tex-pick { display: inline-flex; align-items: center; gap: var(--space-3); min-height: 48px; padding: var(--space-1) var(--space-4) var(--space-1) var(--space-1); border: 1px solid var(--remy-line-c); background: var(--color-white); font-size: var(--body-size); line-height: var(--body-lh); font-weight: 600; color: var(--color-black); transition: background-color .3s ease, border-color .3s ease; }
.tex-pick img { flex: none; width: 40px; height: 40px; aspect-ratio: var(--ty-le-san_pham); object-fit: cover; }
.tex-pick:is(:hover, :focus-visible) { background: var(--color-primary); border-color: var(--color-primary); }
.tex-pick:focus-visible { outline: 2px solid var(--color-black); outline-offset: var(--space-1); }
.tex-guide__ask { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-6); margin-top: var(--space-12); padding: var(--space-8); background: var(--surface-beige); }
.tex-guide__ask-text { flex: 1 1 18em; max-width: 26em; font-size: var(--h6-size); line-height: var(--h6-lh); color: var(--color-black); text-wrap: pretty; }

/* ---------- 8 · Why Luxshine: the claim centred, then three photos at three heights ---------- */
.tex-why { --remy-curtain: var(--surface-beige); background: var(--surface-beige); padding-block: calc(var(--space-16) * 2); }
.tex-why__title { text-align: center; }
.tex-why__lead { margin-inline: auto; text-align: center; text-wrap: balance; }
/* ---------- The gallery wall (user 2026-10-14, comment cmv7vsr7te6xh: "hiện đầy đủ ... dưới dạng gallery ... càng
   nhiều càng tốt. motion, animation, micro interactive"). 42 photos dealt into columns by js/main.js (texWall), as
   many as --wall-cols says. The wall is one screen tall and runs edge to edge; what it cannot show, the reader does
   ("View all 42 photos", or any photo). Square and tall (4:5) frames alternate so the columns fall out of step. */
.tex-wall { --wall-cols: 6; --wall-gap: var(--space-4); margin-top: var(--space-16); }
.tex-wall__pin { position: relative; height: min(100svh, 1080px); overflow: clip; }
.tex-wall__grid { display: grid; grid-template-columns: repeat(var(--wall-cols), minmax(0, 1fr)); align-items: start; gap: var(--wall-gap); padding-inline: var(--wall-gap); }
.tex-wall__grid.is-cols { display: flex; }
.tex-wall__col { display: flex; flex: 1 1 0; flex-direction: column; gap: var(--wall-gap); min-width: 0; }
.tex-wall__col:nth-child(even) { margin-top: var(--space-16); }
.tex-wall__tile { position: relative; display: block; width: 100%; padding: 0; border: 0; background: var(--grey-500); overflow: hidden; aspect-ratio: var(--ty-le-khoi_vuong); cursor: zoom-in; transition: opacity .5s var(--remy-ease), transform .3s var(--remy-ease); }
.tex-wall__tile--tall { aspect-ratio: var(--ty-le-editorial); }
.tex-wall__tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* The name on a gold bar, under the photo's lower edge until the pointer or the focus arrives. */
.tex-wall__cap { position: absolute; left: 0; bottom: 0; display: flex; flex-direction: column; align-items: flex-start; max-width: calc(100% - var(--space-4)); padding: var(--space-2) var(--space-3); background: var(--color-primary); color: var(--color-black); text-align: left; transform: translateY(101%); }
.tex-wall__name { font-family: var(--font-body); font-weight: 700; font-size: var(--h6-size); line-height: var(--h6-lh); text-transform: uppercase; } /* SVN-Gilroy (comment cmvp0ucgxlr67) */
.tex-wall__kind { font-size: var(--caption-size); line-height: var(--caption-lh); }
.tex-wall__tile:focus-visible { outline: 2px solid var(--color-black); outline-offset: 2px; }
.tex-wall__tile:focus-visible .tex-wall__cap { transform: none; }
@media (hover: hover) {
  .tex-wall__tile:hover .tex-wall__cap { transform: none; }
  .tex-wall__grid:has(.tex-wall__tile:hover) .tex-wall__tile:not(:hover) { opacity: .45; }
}
/* One way into the whole set from the keyboard (the photos themselves are out of the tab order while they drift). */
.tex-wall__all { display: none; position: absolute; left: 50%; bottom: var(--space-8); z-index: 2; transform: translateX(-50%); white-space: nowrap; }
.js .tex-wall__all { display: inline-flex; }

/* ---------- The reader: full screen, white (no black sections on this page), one photo at a time ---------- */
.tex-lb { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: var(--color-white); color: var(--color-black); overflow: hidden; }
.tex-lb[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.tex-lb::backdrop { background: var(--color-white); }
.tex-lb__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-6); }
.tex-lb__count { font-size: var(--body-size); line-height: var(--body-lh); font-weight: 600; font-variant-numeric: tabular-nums; }
.tex-lb__close, .tex-lb__nav { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid var(--color-black); background: var(--color-white); color: var(--color-black); cursor: pointer; transition: background-color .2s ease, border-color .2s ease, opacity .2s ease; }
.tex-lb__ico { display: block; width: 24px; height: 24px; }
.tex-lb__nav { position: absolute; top: 50%; z-index: 1; transform: translateY(-50%); }
.tex-lb__nav--prev { left: var(--space-6); }
.tex-lb__nav--next { right: var(--space-6); }
.tex-lb__nav:disabled { opacity: .3; cursor: default; }
@media (hover: hover) { :is(.tex-lb__close, .tex-lb__nav):not(:disabled):hover { background: var(--color-primary); border-color: var(--color-primary); } }
:is(.tex-lb__close, .tex-lb__nav):focus-visible { outline: 2px solid var(--color-black); outline-offset: 2px; }
.tex-lb__track { display: flex; min-height: 0; overflow-x: auto; overscroll-behavior: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.tex-lb__track::-webkit-scrollbar { display: none; }
.tex-lb__slide { display: flex; flex: 0 0 100%; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); min-height: 0; margin: 0; padding: 0 var(--space-24) var(--space-12); scroll-snap-align: center; scroll-snap-stop: always; }
.tex-lb__slide img { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100svh - 232px); object-fit: contain; background: var(--grey-500); }
.tex-lb__slide figcaption { display: flex; flex-direction: column; align-items: center; text-align: center; }
.tex-lb__name { font-family: var(--font-heading); font-size: var(--h4-size); line-height: var(--h4-lh); text-transform: uppercase; }
.tex-lb__kind { font-size: var(--body-size); line-height: var(--body-lh); color: var(--color-font); }

/* ============================================================
   Layer 2 · Entrances (remy.css starts the photos, lines and copy).
   Here: the hero's third line, and the photos of the textures on hover.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .tex-hero .remy-hero__title .remy-line:nth-child(3) .remy-line__in { animation-delay: .39s; }
  /* Once a texture's photo is in, it answers the pointer quickly and without delay. */
  .js .tex-tile .remy-shot[data-reveal].is-in img { transition: transform .9s var(--remy-ease); }
  .js .tex-tile__link:is(:hover, :focus-visible) .remy-shot[data-reveal].is-in img { transform: scale(1.06); }
  /* The textures to reach for come up one after another once their entry is in. */
  .js .tex-match[data-reveal] .tex-match__picks > li { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--remy-ease), transform .6s var(--remy-ease); }
  .js .tex-match[data-reveal].is-in .tex-match__picks > li { opacity: 1; transform: none; }
  .js .tex-match[data-reveal].is-in .tex-match__picks > li:nth-child(1) { transition-delay: .3s; }
  .js .tex-match[data-reveal].is-in .tex-match__picks > li:nth-child(2) { transition-delay: .4s; }
  .js .tex-match[data-reveal].is-in .tex-match__picks > li:nth-child(3) { transition-delay: .5s; }
}

/* ============================================================
   Layer 3 · The wall in motion (every screen size; reduced motion and browsers without scroll timelines keep the
   still wall above). The block is three screens tall and its frame holds still for two of them; as the page
   scrolls, the wall settles from 1.12 to its size while it comes in, then its columns drift against each other:
   odd ones up, even ones down, the second and fifth slower. Each column travels its own height less one screen,
   so the frame is never empty. Transform only, tied to the scroll by a view timeline. Pointer and press answer
   here too: the photo under the pointer grows a little, a press sinks it, the reader fades in.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .tex-wall__tile img { transition: transform 1s var(--remy-ease); }
  .tex-wall__cap { transition: transform .5s var(--remy-ease); }
  .tex-wall__tile:active { transform: scale(.98); }
  @media (hover: hover) { .tex-wall__tile:hover img { transform: scale(1.06); } }
  .tex-lb { opacity: 0; transform: scale(.98); transition: opacity .4s var(--remy-ease), transform .4s var(--remy-ease), overlay .4s allow-discrete, display .4s allow-discrete; }
  .tex-lb[open] { opacity: 1; transform: none; }
  @starting-style { .tex-lb[open] { opacity: 0; transform: scale(.98); } }
  @supports (animation-timeline: view()) {
    .tex-why:has(.tex-wall__grid.is-cols) { padding-bottom: 0; }
    .tex-wall:has(.tex-wall__grid.is-cols) { height: 300vh; view-timeline: --tex-wall block; }
    /* Pinned just under the header, not under it (comment cmvadviq85m7s); --header-h is measured by js/main.js. */
    .tex-wall:has(.tex-wall__grid.is-cols) { --tex-pin-h: calc(100svh - var(--header-h, 0px)); }
    .tex-wall:has(.tex-wall__grid.is-cols) .tex-wall__pin { position: sticky; top: var(--header-h, 0px); height: var(--tex-pin-h); }
    .tex-wall__grid.is-cols { transform-origin: 50% 0; animation: tex-wall-in linear both; animation-timeline: --tex-wall; animation-range: entry 0% entry 100%; }
    .tex-wall__grid.is-cols .tex-wall__col { margin-top: 0; animation: tex-wall-up linear both; animation-timeline: --tex-wall; animation-range: contain 0% contain 100%; }
    .tex-wall__grid.is-cols .tex-wall__col:nth-child(even) { animation-name: tex-wall-down; }
    .tex-wall__grid.is-cols .tex-wall__col:nth-child(3n + 2) { --k: .65; }
  }
}
@keyframes tex-wall-in { from { transform: scale(1.12); } to { transform: none; } }
@keyframes tex-wall-up { from { transform: none; } to { transform: translateY(calc((var(--tex-pin-h, 100svh) - 100%) * var(--k, 1))); } }
@keyframes tex-wall-down { from { transform: translateY(calc((var(--tex-pin-h, 100svh) - 100%) * var(--k, 1))); } to { transform: none; } }

/* ---------- Below 1025px: the families keep their composition with less space; the copy of the side
   families no longer stays in view ---------- */
@media (max-width: 1279px) {
  .tex-wall { --wall-cols: 5; }
}
@media (max-width: 1024px) {
  .tex-fam, .tex-guide, .tex-why { padding-block: var(--space-24); }
  .tex-fam--side .tex-fam__head, .tex-guide__intro { position: static; }
  .tex-fam--side .tex-fam__head { grid-column: 1 / span 4; }
  .tex-fam--side .tex-fam__grid { grid-column: 5 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tex-fam--flip .tex-fam__head { grid-column: 9 / -1; }
  .tex-fam--flip .tex-fam__grid { grid-column: 1 / span 8; }
  .tex-guide__intro { grid-column: 1 / -1; margin-top: var(--space-8); }
  .tex-guide__main { grid-column: 1 / -1; margin-top: var(--space-12); }
}
/* ---------- Below 900px: everything stacks; textures two to a row ---------- */
@media (max-width: 899px) {
  .tex-open { padding-block: var(--space-16) 0; }
  .tex-jump__name { font-size: var(--h4-size); line-height: var(--h4-lh); }
  .tex-fam__wrap { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-12); }
  .tex-fam--side .tex-fam__head, .tex-fam--side .tex-fam__grid, .tex-fam--flip .tex-fam__head, .tex-fam--flip .tex-fam__grid { grid-column: 1; grid-row: auto; }
  .tex-fam__grid, .tex-fam--side .tex-fam__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8) var(--space-4); margin-top: var(--space-12); }
  .tex-fam--side .tex-fam__grid { margin-top: 0; }
  .tex-wall { --wall-cols: 4; margin-top: var(--space-12); }
}
/* ---------- Phone ---------- */
@media (max-width: 767px) {
  .tex-fam, .tex-guide, .tex-why { padding-block: var(--space-16); }
  /* The wall on a phone: three columns a little wider than the screen, cut at both edges; the reader's turn buttons
     move to the foot of the screen, under the photo. */
  .tex-wall { --wall-cols: 3; --wall-gap: var(--space-2); }
  .tex-wall__grid { width: 130%; margin-inline: -15%; }
  .tex-wall__col:nth-child(even) { margin-top: var(--space-12); }
  .tex-wall__all { bottom: var(--space-6); }
  .tex-lb__bar { padding-inline: var(--space-4); }
  .tex-lb__slide { padding: 0 var(--space-4) calc(var(--space-16) + var(--space-8)); }
  .tex-lb__slide img { max-height: calc(100svh - 280px); }
  .tex-lb__name { font-size: var(--h5-size); line-height: var(--h5-lh); }
  .tex-lb__nav { top: auto; bottom: var(--space-6); transform: none; }
  .tex-lb__nav--prev { left: var(--space-4); }
  .tex-lb__nav--next { right: var(--space-4); }
  .tex-fam__lead, .tex-guide__lead { font-size: var(--h6-size); line-height: var(--h6-lh); }
  .tex-tile__name { font-size: var(--h6-size); line-height: var(--h6-lh); }
  .tex-tile__arrow { width: 16px; height: 16px; }
  .tex-match__text { font-size: var(--body-size); line-height: var(--body-lh); }
  .tex-guide__ask { padding: var(--space-6); }
  .tex-guide__ask .btn { width: 100%; justify-content: center; }
}
/* Small phones: one texture per row, its photo small on the left, so the copy keeps a readable measure. */
@media (max-width: 480px) {
  .tex-fam__grid, .tex-fam--side .tex-fam__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .tex-tile { position: relative; min-height: 112px; padding-left: calc(var(--space-16) * 2); }
  .tex-tile__shot { position: absolute; top: 0; left: 0; width: 112px; }
  .tex-tile__name { margin-top: 0; }
  .tex-jump__name { font-size: var(--h5-size); line-height: var(--h5-lh); }
  .tex-jump__count { font-size: var(--caption-size); line-height: var(--caption-lh); }
}