/* =============================================================
   Any.i 2026-10-01 — แอนิเมชันชุดเดียวกับเว็บอินซูลิน + เลย์เอาต์จอ PC
   อ้างอิง https://ar.rajavithi.srv1168222.hstgr.cloud/ (repo Q/Rajavithi_ARInsulinBrochure: src/style.css, src/motion.js)
   แยกไฟล์จาก app.css ของทีมพัฒนา — ไม่แก้ค่าเดิมบนมือถือ (เลย์เอาต์มือถือยังเป็นของเดิมทุกพิกเซล)
   ============================================================= */

/* ---------- เข้าหน้า: opacity เป็นของ CSS (anime.js คุมแค่การเคลื่อนที่) ----------
   มีผลเฉพาะเมื่อ src/lib/motion.js โหลดแล้ว (html.has-motion) — ถ้าเน็ตช้าจนไฟล์นั้นมาไม่ทัน หน้าก็ยังขึ้นแบบเดิม */
html.has-motion .screen [data-a] { opacity: 0; transition: opacity .5s ease var(--d, 0ms); }
html.has-motion .screen.is-in [data-a] { opacity: 1; }
/* สามหน้านี้เข้าทีละชิ้นแล้ว ไม่ต้องเลื่อนทั้งหน้าซ้อนอีกชั้น (screen-in ของ app.css) */
html.has-motion #screen-landing.is-active,
html.has-motion #screen-howto.is-active,
html.has-motion #screen-permission.is-active { animation: none; }
@media (prefers-reduced-motion: reduce) { html.has-motion .screen [data-a] { transition: none; opacity: 1; } }

/* ภาพหลักลอย/มีประกาย/วงคลื่น — ต้องไม่ตัดขอบ และเป็นกรอบอ้างอิงตำแหน่งของประกาย */
html.has-motion .hero--primary { position: relative; overflow: visible; }

/* ---------- ของตกแต่ง (ชุดเดียวกับเว็บอินซูลิน) ---------- */
.anyi-decor { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
#screen-permission > .anyi-decor { position: absolute; z-index: 0; } /* app.css ตั้ง #screen-permission > * เป็น relative */
.anyi-plus { position: absolute; width: 44px; height: 44px; }
.anyi-plus--sm { width: 24px; height: 24px; }
.anyi-plus svg { display: block; width: 100%; height: 100%; }
.anyi-dots { position: absolute; width: 48px; height: 48px;
  background: radial-gradient(circle, rgba(236, 150, 195, .6) 2px, transparent 2.5px) 0 0 / 12px 12px; }
/* ตำแหน่งบนมือถือ — วางในที่ว่างข้างภาพ/หัวข้อ (วัดจากหน้าจอ 390×844 และ 360×640) */
#screen-landing .anyi-decor > :nth-child(1) { right: 8%; top: 11%; }
#screen-landing .anyi-decor > :nth-child(2) { right: 4.5%; top: 17%; }
#screen-landing .anyi-decor > :nth-child(3) { left: 6%; top: 15%; }
#screen-landing .anyi-decor > :nth-child(4) { left: 9%; top: 26%; }
#screen-howto .anyi-decor > :nth-child(1) { right: 5%; top: 1.2%; }
#screen-howto .anyi-decor > :nth-child(2) { right: 16%; top: 3.6%; }
#screen-howto .anyi-decor > :nth-child(3) { left: 18%; top: .8%; }
#screen-permission .anyi-decor > :nth-child(1) { right: 7%; top: 17%; }
#screen-permission .anyi-decor > :nth-child(2) { right: 4%; top: 24%; }
#screen-permission .anyi-decor > :nth-child(3) { left: 6%; top: 20%; }

.anyi-spark { position: absolute; width: 18px; height: 18px; pointer-events: none; transform: scale(0); z-index: 2; }
.anyi-spark svg { display: block; width: 100%; height: 100%; }
.anyi-spark:nth-of-type(1) { left: 26%; top: 12%; }
.anyi-spark:nth-of-type(2) { left: 70%; top: 6%; }
.anyi-spark:nth-of-type(3) { left: 74%; top: 66%; }
.anyi-spark:nth-of-type(4) { left: 24%; top: 72%; }
.anyi-spark:nth-of-type(5) { left: 50%; top: -4%; }
.anyi-spark:nth-of-type(6) { left: 60%; top: 90%; }

.anyi-ring { position: absolute; left: 50%; top: 50%; z-index: 0; height: 96%; aspect-ratio: 1; border-radius: 50%;
  border: 2px solid rgba(225, 111, 170, .5); translate: -50% -50%; opacity: 0; pointer-events: none; }
html.has-motion #screen-permission .hero--primary img { position: relative; z-index: 1; }

/* ---------- ปุ่ม: แสงวาบ + ระลอกน้ำ อยู่ในชั้นที่ตัดขอบตามปุ่ม (ไม่ตัดเงา ::after ของปุ่ม) ---------- */
.anyi-fx { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.anyi-shine { position: absolute; top: 0; bottom: 0; width: 40%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); }
.anyi-ripple { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .5); transform: translate(-50%, -50%); }
.btn--ghost .anyi-ripple { background: rgba(238, 81, 156, .2); }

/* ---------- ระดับแอนิเมชันตามความลื่นของเครื่อง (src/lib/perf.js) ---------- */
/* min: หยุดทุกอย่างที่วนเอง ยกเว้นวงหมุนตอนโหลด (บอกว่ากำลังทำงาน) */
html[data-perf='min'] .scan-frame--pulse,
html[data-perf='min'] .hotspot::after,
html[data-perf='min'] .rotate-gate__icon { animation: none !important; }
html[data-perf='lite'] .anyi-pcbg .anyi-blob,
html[data-perf='min'] .anyi-pcbg .anyi-blob { filter: none; }

/* ---------- พื้นหลังจอ PC (มือถือใช้ภาพพื้นหลังแนวตั้งของทีมออกแบบเหมือนเดิม) ----------
   ภาพ bg-main.webp เป็นแนวตั้ง ถ้ายืดเต็มจอแนวนอน คลื่นสีเข้มด้านล่างจะกินพื้นที่เกือบทั้งจอ
   ⇒ จอ PC วาดพื้นหลังเองด้วยสีชุดเดียวกัน: พื้นไล่สีอ่อน + ก้อนสีฟุ้ง + คลื่นน้ำเงิน→ชมพูด้านล่าง */
.anyi-pcbg { display: none; position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background: linear-gradient(180deg, #f8f8fd 0%, #f0f0f9 55%, #ecebf7 100%); }
.anyi-blob { position: absolute; border-radius: 50%; filter: blur(18px); opacity: .8; }
.anyi-blob--pink { width: 46vmax; height: 46vmax; right: -16vmax; top: -24vmax; background: radial-gradient(circle, #f6aad2 0 40%, transparent 70%); }
.anyi-blob--blue { width: 36vmax; height: 36vmax; left: -18vmax; top: 18vh; background: radial-gradient(circle, #c9d7fb 0 45%, transparent 70%); }
.anyi-blob--rose { width: 26vmax; height: 26vmax; right: 18vw; bottom: 6vh; background: radial-gradient(circle, #fbd3e7 0 40%, transparent 70%); }
.anyi-waves { position: absolute; left: -2%; right: -2%; bottom: -1%; height: 19%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 200' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='d' x2='1'%3E%3Cstop offset='0' stop-color='%232d3489'/%3E%3Cstop offset='.55' stop-color='%23452f8e'/%3E%3Cstop offset='1' stop-color='%23ee5298'/%3E%3C/linearGradient%3E%3ClinearGradient id='m' x2='1'%3E%3Cstop offset='0' stop-color='%236c74c9'/%3E%3Cstop offset='1' stop-color='%23f08cbd'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 70C260 20 520 120 820 70S1260 10 1440 40V200H0Z' fill='%23d9d4f2' opacity='.6'/%3E%3Cpath d='M0 110C300 60 560 160 880 105S1300 60 1440 85V200H0Z' fill='url(%23m)' opacity='.45'/%3E%3Cpath d='M0 150C320 105 620 190 940 140S1320 115 1440 130V200H0Z' fill='url(%23d)'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat; }

/* =============================================================
   จอ PC (กว้าง ≥ 900px และจอนอน) — วิธีเดียวกับเว็บอินซูลิน:
   ออกแบบบนกรอบ 1280×800 แล้วย่อขยายตามหน้าต่างด้วยหน่วย --pcs (= 1px ของกรอบนั้น)
   ============================================================= */
@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
  :root { --pcs: min(calc(100vw / 1280), calc(100vh / 800)); }
  @supports (height: 100dvh) { :root { --pcs: min(calc(100vw / 1280), calc(100dvh / 800)); } }

  .anyi-pcbg { display: block; }
  .stage { max-width: none; background: transparent; }

  #screen-landing, #screen-howto, #screen-permission {
    padding: calc(30 * var(--pcs)) calc(72 * var(--pcs)) calc(130 * var(--pcs)) !important;
  }
  #screen-landing .spacer, #screen-howto .spacer, #screen-permission .spacer, #screen-permission > .gap-3 { display: none; }
  /* ไล่สีขาวบน-ล่างของหน้าขออนุญาต (app.css) ทำไว้กันลายพื้นหลังมือถือ — บน PC มันกลบคลื่นด้านล่างจนซีด */
  #screen-permission::before { display: none; }
  #screen-howto > .topbar .icon-btn, #screen-permission > .topbar .icon-btn { width: calc(52 * var(--pcs)); height: calc(52 * var(--pcs)); }
  #screen-howto > .topbar .icon-btn svg, #screen-permission > .topbar .icon-btn svg { width: calc(30 * var(--pcs)); height: calc(30 * var(--pcs)); }
  #screen-howto > .topbar, #screen-permission > .topbar { position: absolute; top: calc(22 * var(--pcs)); left: calc(28 * var(--pcs)); }

  /* ของตกแต่งบน PC */
  .anyi-plus { width: calc(58 * var(--pcs)); height: calc(58 * var(--pcs)); }
  .anyi-plus--sm { width: calc(30 * var(--pcs)); height: calc(30 * var(--pcs)); }
  .anyi-dots { width: calc(64 * var(--pcs)); height: calc(64 * var(--pcs)); background-size: calc(16 * var(--pcs)) calc(16 * var(--pcs)); }
  .anyi-spark { width: calc(24 * var(--pcs)); height: calc(24 * var(--pcs)); }
  #screen-landing .anyi-decor > :nth-child(1) { right: 7%; top: 12%; }
  #screen-landing .anyi-decor > :nth-child(2) { right: 4%; top: 19%; }
  #screen-landing .anyi-decor > :nth-child(3) { left: 47%; top: 9%; }
  #screen-landing .anyi-decor > :nth-child(4) { left: 5%; top: 68%; }
  #screen-howto .anyi-decor > :nth-child(1) { right: 9%; top: 10%; }
  #screen-howto .anyi-decor > :nth-child(2) { right: 6%; top: 17%; }
  #screen-howto .anyi-decor > :nth-child(3) { left: 9%; top: 12%; }
  #screen-permission .anyi-decor > :nth-child(1) { right: 8%; top: 13%; }
  #screen-permission .anyi-decor > :nth-child(2) { right: 5%; top: 20%; }
  #screen-permission .anyi-decor > :nth-child(3) { left: 46%; top: 16%; }

  /* ---- หน้าแรก: ภาพประกอบซ้าย · ไอคอน + ข้อความ + ปุ่มขวา ---- */
  #screen-landing.is-active {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    grid-template-rows: 1fr auto auto auto auto 1fr;
    grid-template-areas: 'art .' 'art icon' 'art title' 'art lead' 'art dock' 'art .';
    column-gap: calc(64 * var(--pcs));
    align-items: center;
    justify-items: start;
  }
  .brand-mark { top: calc(28 * var(--pcs)); left: calc(40 * var(--pcs)); width: calc(84 * var(--pcs)); height: calc(84 * var(--pcs)); }
  #screen-landing .hero--primary { grid-area: icon; height: calc(150 * var(--pcs)); width: auto; justify-content: flex-start; margin: 0; }
  #landing-title { grid-area: title; text-align: left; font-size: calc(56 * var(--pcs)); margin-top: calc(10 * var(--pcs)); }
  #screen-landing .lead--landing { grid-area: lead; text-align: left; font-size: calc(22 * var(--pcs)); margin-top: calc(12 * var(--pcs)); }
  #screen-landing .hero--secondary { grid-area: art; justify-self: stretch; height: calc(440 * var(--pcs)); margin: 0; }
  #screen-landing .hero--secondary img { max-width: 100%; }
  #screen-landing .screen-dock { grid-area: dock; width: calc(400 * var(--pcs)); gap: calc(18 * var(--pcs)); padding-top: calc(26 * var(--pcs)); }
  #screen-landing .btn--start { min-height: calc(64 * var(--pcs)); font-size: calc(23 * var(--pcs)); }
  #screen-landing .btn--start svg { width: calc(32 * var(--pcs)); height: calc(32 * var(--pcs)); }
  #screen-landing .brand-bar { font-size: calc(15 * var(--pcs)); justify-content: flex-start; padding: calc(4 * var(--pcs)) calc(16 * var(--pcs)); }
  #screen-landing .brand-bar img { width: calc(46 * var(--pcs)); height: calc(46 * var(--pcs)); }
  /* บนมือถือบรรทัดนี้อยู่บนคลื่นสีเข้มจึงเป็นตัวขาว — บน PC อยู่บนพื้นอ่อน ต้องเป็นตัวเข้ม */
  #screen-landing .copyright-note { text-align: left; color: var(--c-text-muted); text-shadow: none; font-size: calc(13 * var(--pcs)); margin-top: 0; }

  /* ---- วิธีใช้: การ์ด 4 ใบเรียงแถวเดียว ไอคอนอยู่บน ---- */
  #screen-howto.is-active { justify-content: center; align-items: center; gap: calc(34 * var(--pcs)); }
  .howto-title { font-size: calc(46 * var(--pcs)); margin: 0; }
  .howto-steps { flex: none; width: min(100%, calc(1120 * var(--pcs))); grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(22 * var(--pcs)); }
  .step-card { --step-fig: calc(104 * var(--pcs)); grid-template-columns: 1fr; grid-template-rows: auto auto; justify-items: center;
    text-align: center; padding: calc(28 * var(--pcs)) calc(18 * var(--pcs)); gap: calc(14 * var(--pcs)); }
  .step-card__rule { display: none; }
  .step-card__head { justify-content: center; gap: calc(10 * var(--pcs)); }
  .step-card__title { font-size: calc(24 * var(--pcs)); }
  .step-card__desc { font-size: calc(16 * var(--pcs)); margin-top: calc(6 * var(--pcs)); }
  .step-badge { width: calc(34 * var(--pcs)); height: calc(34 * var(--pcs)); font-size: calc(18 * var(--pcs)); }
  #screen-howto .screen-dock { width: calc(340 * var(--pcs)); padding-top: 0; }
  #screen-howto .btn { min-height: calc(64 * var(--pcs)); font-size: calc(22 * var(--pcs)); }

  /* ---- ขออนุญาตกล้อง: ภาพกล้องซ้าย · ข้อความ + ปุ่มขวา ---- */
  #screen-permission.is-active {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr auto auto auto auto auto 1fr;
    grid-template-areas: '. .' 'art lockup' 'art title' 'art lead' 'art notice' 'art dock' '. .';
    column-gap: calc(56 * var(--pcs));
    align-items: center;
    justify-items: start;
  }
  #screen-permission > .brand-lockup { grid-area: lockup; justify-content: flex-start; }
  .brand-lockup img { width: calc(64 * var(--pcs)); }
  .brand-lockup b { font-size: calc(17 * var(--pcs)); }
  .brand-lockup span { font-size: calc(12 * var(--pcs)); }
  #screen-permission > .hero--primary { grid-area: art; justify-self: stretch; height: calc(400 * var(--pcs)); margin: 0; }
  #perm-title { grid-area: title; text-align: left; font-size: calc(52 * var(--pcs)); margin-top: calc(14 * var(--pcs)); }
  #screen-permission > .lead--permission { grid-area: lead; text-align: left; font-size: calc(22 * var(--pcs)); }
  #screen-permission > .notice { grid-area: notice; margin-top: calc(12 * var(--pcs)); }
  #screen-permission > .screen-dock { grid-area: dock; width: calc(380 * var(--pcs)); padding-top: calc(26 * var(--pcs)); }
  #screen-permission .btn { min-height: calc(62 * var(--pcs)); font-size: calc(22 * var(--pcs)); }
  #screen-permission .stack-3 { gap: calc(20 * var(--pcs)); }

  /* ---- โหมด AR: คงเป็นคอลัมน์แนวตั้งกลางจอ (หน้าจอ AR ออกแบบมาสำหรับมือถือแนวตั้ง) ---- */
  #screen-ar { left: 50%; right: auto; width: min(100%, 480px); translate: -50% 0;
    box-shadow: 0 0 0 1px rgba(36, 36, 107, .06), 0 24px 60px rgba(36, 36, 107, .18); }
}