/* ==========================================================================
   Nailmaker — landing page (bản dựng lại quanh GSAP + Three.js)
   Nạp SAU style.css: dùng lại token màu, header, footer, .steps, .atelier…
   và ghi đè phần trang chủ.

   Quy ước z-index:  #gl (canvas 3D) = 0  ·  main/footer = 1  ·  header = 40
   Nhờ vậy WebGL nằm sau chữ, trước nền trang — các section phải trong suốt
   một phần thì mới thấy được lớp 3D bên dưới.
   ========================================================================== */

/* ---------- canvas 3D dùng chung cho cả 4 cảnh ---------- */
#gl{position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none;
  opacity:0; transition:opacity 1.1s ease}
html.gl-live #gl{opacity:1}
main.page{position:relative; z-index:1}
footer.site{position:relative; z-index:1}

/* section trong suốt một phần để lộ nền 3D */
.block.alt{background:color-mix(in srgb, var(--paper-2) 78%, transparent)}
.block.clear{background:transparent}

/* ---------- thanh tiến độ đọc ---------- */
.progress{position:fixed; top:0; left:0; right:0; height:2px; z-index:50; pointer-events:none}
.progress > i{display:block; height:100%; width:100%; transform:scaleX(0); transform-origin:0 50%;
  background:var(--grad)}

/* ---------- header: co lại & nép đi khi cuộn ---------- */
header.site{transition:transform .45s cubic-bezier(.2,.7,.2,1), height .3s, background .3s}
header.site.shrunk{background:color-mix(in srgb, var(--paper) 92%, transparent); box-shadow:0 10px 30px -24px rgba(60,20,90,.6)}
header.site.tucked{transform:translateY(-100%)}

/* ---------- failsafe: nếu motion.js không chạy, đừng ẩn nội dung ---------- */
html.js-motion [data-anim]{opacity:0; visibility:hidden}
html.js-motion.motion-ready [data-anim]{visibility:hidden}
html:not(.js-motion) [data-anim]{opacity:1 !important; visibility:visible !important; transform:none !important}

/* ==========================================================================
   Sân khấu 3D — thẻ giữ chỗ cho một cảnh WebGL
   ========================================================================== */
.stage{position:relative; touch-action:pan-y; user-select:none; -webkit-user-select:none}
.stage.dragging{cursor:grabbing}
/* Ảnh dự phòng nằm ngay dưới canvas: nếu không chặn, thao tác "kéo để xoay"
   sẽ kích hoạt kéo-thả ảnh của trình duyệt và lôi cả tấm ảnh đi theo con trỏ. */
.stage img, .stage-fallback, .polish-fallback{pointer-events:none; -webkit-user-drag:none; user-select:none}
.stage-fallback{display:block; width:100%; height:auto}
/* WebGL sống rồi thì ảnh dự phòng lui về sau */
html.gl-live .stage-fallback{opacity:0; transition:opacity .8s ease; pointer-events:none}
html.gl-live .stage-hint{opacity:1}
.stage-hint{position:absolute; left:50%; bottom:6px; transform:translateX(-50%); opacity:0;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
  transition:opacity .6s ease .6s; white-space:nowrap; pointer-events:none}

/* ==========================================================================
   HERO — khối gel 3D phía sau, ảnh app phía trước
   ========================================================================== */
.hero{position:relative; overflow:clip}
.hero .wrap{display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(24px,5vw,68px);
  align-items:center; padding-block:clamp(52px,8vw,104px) clamp(44px,6vw,76px); min-height:min(86svh,860px)}
.hero h1{font-size:clamp(2.15rem,8.4vw,4.9rem); line-height:1.08}
.hero h1 .hline{overflow:visible; padding-bottom:.04em}
.hero .sub{max-width:44ch}

.hero-visual{position:relative; justify-self:center; width:100%; max-width:360px;
  display:grid; place-items:center}
/* Sân khấu chùm sáng: một hình VUÔNG lớn lấy máy làm tâm. Vuông là cố ý —
   trường sáng tự co theo cạnh ngắn của khung, khung dẹt thì tia bị teo lại. */
.hero-visual .stage{position:absolute; left:50%; top:50%; z-index:0; pointer-events:none;
  width:min(1060px, 88vw); height:min(1060px, 88vw); transform:translate(-50%,-50%)}
.hero-visual .hero-shot{position:relative; z-index:1}
/* quầng sáng khi chưa có WebGL — trang vẫn có chiều sâu */
.hero-visual::before{content:""; position:absolute; inset:-14% -18%; z-index:0; border-radius:50%;
  background:radial-gradient(closest-side, color-mix(in srgb,var(--purple) 42%, transparent),
    color-mix(in srgb,var(--pink) 20%, transparent) 58%, transparent 74%);
  filter:blur(26px); transition:opacity .9s ease}
html.gl-live .hero-visual::before{opacity:0}

.scrollcue{display:inline-flex; align-items:center; gap:12px; margin-top:34px;
  font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-soft)}
.scrollcue i{display:block; width:1px; height:34px; background:linear-gradient(var(--purple),transparent);
  animation:cue 2.1s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.4); transform-origin:50% 0} 50%{transform:scaleY(1); transform-origin:50% 0}}

/* ==========================================================================
   STUDIO — móng 3D xoay 360, đổi màu sơn realtime
   ========================================================================== */
.studio-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,5vw,64px);
  align-items:center; margin-top:clamp(26px,4vw,44px)}
.studio-stage{position:relative; aspect-ratio:1/1; width:100%; max-width:520px; justify-self:center;
  border-radius:28px; cursor:grab;
  background:radial-gradient(120% 100% at 50% 18%, color-mix(in srgb,var(--card) 88%, transparent),
    color-mix(in srgb,var(--paper-2) 70%, transparent) 72%);
  border:1px solid var(--line); box-shadow:var(--shadow); overflow:hidden}
/* Canvas 3D nằm ở z-index 0, nội dung trang ở z-index 1 — nên nền thẻ này vẽ
   ĐÈ LÊN cảnh 3D. Để nguyên nền card 88% đục thì chiếc móng bị nhìn qua một
   tấm kính mờ. Có WebGL thì bỏ nền đi, chỉ giữ viền. */
html.gl-live .studio-stage{background:transparent;
  border-color:color-mix(in srgb, var(--line) 55%, transparent); box-shadow:none}
.studio-stage .polish-fallback{position:absolute; inset:0; display:grid; place-items:center;
  background:linear-gradient(155deg, color-mix(in srgb,var(--swatch,#c2185b) 26%, transparent), transparent 62%)}
.studio-stage .polish-fallback img{width:100%; height:100%; object-fit:cover; object-position:50% 42%}
/* Có WebGL thì ảnh dự phòng KHÔNG cần tải về chút nào: `display:none` đặt theo
   lớp `gl-on` (quyết định ngay trong <head>, trước khi trình duyệt gặp thẻ img)
   nên nó không bao giờ phát sinh một lượt tải 130 KB. Nếu WebGL hỏng, phao cứu
   sinh gỡ `gl-on` và ảnh hiện lại như thường. */
html.gl-on .studio-stage .polish-fallback{display:none}

.polish-name{display:block; font-family:var(--serif); font-weight:700; font-size:1.34rem;
  letter-spacing:-.01em; margin:0 0 4px; min-height:1.5em}
.swatches{display:flex; flex-wrap:wrap; gap:12px; margin:16px 0 22px}
.swatch{width:40px; height:40px; border-radius:50%; border:1px solid var(--line); cursor:pointer;
  padding:0; position:relative; box-shadow:inset 0 5px 8px -5px rgba(255,255,255,.9), 0 6px 14px -8px rgba(60,20,90,.6);
  transition:transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s}
.swatch:hover{transform:translateY(-3px) scale(1.06)}
.swatch[aria-pressed="true"]{box-shadow:0 0 0 2px var(--paper), 0 0 0 4px var(--rose)}
.swatch:focus-visible{outline:2px solid var(--rose); outline-offset:4px}
.finish-row{display:inline-flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; background:var(--card)}
.finish-btn{border:0; background:transparent; color:var(--ink-soft); font:inherit; font-size:.78rem;
  letter-spacing:.06em; padding:9px 17px; cursor:pointer; transition:background .25s,color .25s}
.finish-btn[aria-pressed="true"]{background:var(--grad); color:#fff}
.finish-btn:focus-visible{outline:2px solid var(--rose); outline-offset:-3px}

.studio-points{list-style:none; margin:24px 0 0; padding:0; display:grid; gap:14px; max-width:46ch}
.studio-points li{display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start;
  color:var(--ink-soft); font-size:.97rem}
.studio-points b{display:block; color:var(--ink); font-weight:600}
.studio-points .dot{width:9px; height:9px; border-radius:50%; background:var(--grad); margin-top:8px}

/* ==========================================================================
   LOOKBOOK — vòng ảnh 3D, ghim bằng position:sticky (không cần JS)
   ========================================================================== */
.lookbook{padding:0}
.lookbook-scroll{position:relative; height:300vh}
.lookbook-pin{position:sticky; top:0; height:100vh; display:grid; place-items:center; overflow:clip}
.lookbook-stage{position:absolute; inset:0; cursor:grab}
/* chữ nằm đè lên vòng ảnh nên cần một lớp nền mờ, nếu không sẽ không đọc nổi */
.lookbook-copy{position:relative; z-index:2; text-align:center; padding:30px clamp(22px,4vw,46px);
  max-width:620px; border-radius:26px;
  background:radial-gradient(120% 120% at 50% 50%,
    color-mix(in srgb, var(--paper) 88%, transparent) 0%,
    color-mix(in srgb, var(--paper) 74%, transparent) 55%, transparent 78%);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px)}
.lookbook-copy h2{margin-top:.2em}
.lookbook-copy .sub{margin:0 auto; max-width:44ch}
.lookbook-hint{display:inline-block; margin-top:20px; font-size:.72rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-soft)}

/* dự phòng khi không có WebGL: dải ảnh cuộn ngang, section thu về chiều cao thường */
html:not(.gl-on) .lookbook-scroll{height:auto}
html:not(.gl-on) .lookbook-pin{position:static; height:auto; padding:clamp(48px,7vw,92px) 0}
html:not(.gl-on) .lookbook-stage{display:none}
.lookbook-fallback{display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x proximity;
  padding:26px 0 8px; margin-top:24px; -webkit-overflow-scrolling:touch}
.lookbook-fallback::-webkit-scrollbar{height:0}
.lookbook-fallback img{flex:none; width:172px; scroll-snap-align:center; border-radius:22px;
  border:1px solid rgba(176,107,255,.25); box-shadow:0 30px 60px -34px rgba(20,5,20,.7)}
html.gl-on .lookbook-fallback{display:none}

/* Điện thoại: webgl.js không dựng cảnh lookbook (đỡ 13 texture + đỡ tốn pin),
   nên section trả về dạng thường + dải ảnh cuộn ngang. Bám class thay vì
   media query để lúc xoay ngang máy không lộ ra khung 3D rỗng. */
html.lookbook-flat .lookbook-scroll{height:auto}
html.lookbook-flat .lookbook-pin{position:static; display:block; place-items:normal; height:auto;
  padding:clamp(44px,7vw,80px) 0}
html.lookbook-flat .lookbook-stage{display:none}
html.lookbook-flat.gl-on .lookbook-fallback{display:flex}
html.lookbook-flat .lookbook-hint{display:none}
html.lookbook-flat .lookbook-copy{max-width:none; margin:0 auto; padding:0;
  background:none; backdrop-filter:none; -webkit-backdrop-filter:none}

/* ==========================================================================
   Tinh chỉnh phần tính năng cũ để hợp với lớp GSAP mới
   ========================================================================== */
.slide.on{animation:none}          /* GSAP lo phần chuyển slide */
.gtile{transform-style:preserve-3d; will-change:transform}
.atelier{background:radial-gradient(135% 120% at 16% -12%, rgba(39,26,41,.94), rgba(16,11,19,.96) 64%);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px)}

/* ==========================================================================
   Màn hẹp
   ========================================================================== */
@media (max-width:900px){
  .studio-grid{grid-template-columns:1fr}
  .studio-stage{max-width:420px}
}
@media (max-width:820px){
  .hero .wrap{grid-template-columns:1fr; gap:30px; min-height:0}
  /* trên điện thoại: tiêu đề + nút tải hiện trước, ảnh app xuống dưới */
  .hero-visual{max-width:272px; order:0}
  .studio-points{max-width:none}
}
@media (max-width:560px){
  .hero .wrap{padding-block:24px 28px}
  .hero-visual{max-width:236px}
  .scrollcue{display:none}          /* thừa trên mobile, chiếm chỗ của nút tải */
  .studio-grid{margin-top:20px}
  .studio-stage{max-width:none}
  .swatch{width:38px; height:38px}
  .finish-btn{padding:10px 15px}
  .studio-points{margin-top:20px}
  .lookbook-fallback{padding:18px 0 6px; margin-top:18px}
  .lookbook-fallback img{width:150px}
  .download-actions{margin-top:24px}
}

@media (prefers-reduced-motion:reduce){
  #gl{display:none}
  .scrollcue i{animation:none}
  .swatch,.finish-btn,.gtile,header.site{transition:none}
  .lookbook-scroll{height:auto}
  .lookbook-pin{position:static; height:auto; padding:clamp(48px,7vw,92px) 0}
  .lookbook-stage{display:none}
  .lookbook-fallback{display:flex !important}
}

/* ==========================================================================
   Khối "Chỉnh ảnh trên trình duyệt"
   ========================================================================== */
.online-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,64px);
  align-items:center; margin-top:clamp(24px,4vw,40px)}
.online-list{list-style:none; margin:26px 0 0; padding:0; display:grid; gap:14px; max-width:46ch}
.online-list li{display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start;
  color:var(--ink-soft); font-size:.97rem}
.online-list b{display:block; color:var(--ink); font-weight:600}
.online-list .dot{width:9px; height:9px; border-radius:50%; background:var(--grad); margin-top:8px}
.online-actions{display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:28px}
.online-actions .note{font-size:.82rem; color:var(--ink-soft)}
.online-actions .arw{transition:transform .25s}
.online-actions .btn:hover .arw{transform:translateX(4px)}

/* ba tấm ảnh xếp chồng, nghiêng nhẹ như đang bày trên bàn */
.online-shots{position:relative; display:grid; grid-template-columns:repeat(3,1fr);
  align-items:center; justify-self:center; width:100%; max-width:560px}
.online-shots img{width:118%; height:auto; border-radius:12px; display:block;
  box-shadow:0 34px 60px -30px rgba(40,10,60,.62), 0 0 0 1px color-mix(in srgb,var(--line) 70%, transparent);
  transition:transform .45s cubic-bezier(.2,.7,.2,1)}
/* Chồng vừa đủ để thành một chồng ảnh, KHÔNG được che mất dòng chữ trên tấm
   hai bên — chữ bị cắt ngang trông như lỗi chứ không ra chủ ý. */
.online-shots img:nth-child(1){transform:rotate(-8deg) translateY(14px); z-index:1}
.online-shots img:nth-child(2){transform:scale(1.1); z-index:3; position:relative; margin-left:-6%}
.online-shots img:nth-child(3){transform:rotate(8deg) translateY(14px); z-index:2; margin-left:-6%}
.online-shots:hover img:nth-child(1){transform:rotate(-12deg) translateY(6px) translateX(-6px)}
.online-shots:hover img:nth-child(3){transform:rotate(12deg) translateY(6px) translateX(6px)}

@media (max-width:900px){
  .online-grid{grid-template-columns:1fr; gap:30px}
  .online-shots{order:-1; max-width:420px}
}
@media (prefers-reduced-motion:reduce){ .online-shots img{transition:none} }