/* ============================================================
   Vee Vee — home page only
   Section order follows the emotional arc in
   docs/WEBSITE_BLUEPRINT.md 1.5
   ============================================================ */

/* ---------- 1. Hero ---------- */
.hero {
  position: relative;
  /* เดิมสูงเต็มจอพอดี ซึ่งทำให้จอแรกไม่มีอะไรบอกว่าข้างล่างยังมีต่อ
     เหลือ 88% ทำให้เห็นขอบส่วนถัดไปโผล่มานิดหนึ่ง คนจึงรู้เองว่าต้องเลื่อน
     max() กันไม่ให้เตี้ยเกินไปบนจอแนวนอนเตี้ยๆ เช่นโน้ตบุ๊กจอเล็ก */
  min-height: max(520px, 88svh);
  display: grid;
  align-items: end;
  padding-top: var(--header-h);
  padding-bottom: clamp(3rem, 8vh, 6rem);
  overflow: hidden;
  isolation: isolate;
  color: var(--white);
}

/* Stands in for the golden-hour picnic photograph (shot 1). The gradient
   apes the light of that shot so the type contrast is already correct
   when the real image is dropped in behind it. */
/* The hero photo is the LCP element, so it is a real <img> rather than a CSS
   background — the browser's preload scanner finds it before stylesheets
   finish parsing, and srcset lets phones skip the 2400px file entirely. */
.hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--verdant-deep);
}
.hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
/* The photograph is a golden-hour shot that runs bright on the right, so the
   scrim is weighted to the bottom-left where the headline sits. */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(30, 36, 28, 0.88) 0%, rgba(30, 36, 28, 0.30) 45%, rgba(30, 36, 28, 0.45) 100%),
    linear-gradient(to right, rgba(30, 36, 28, 0.45) 0%, transparent 60%);
}
.hero-note {
  position: absolute;
  top: calc(var(--header-h) + var(--sp-5));
  right: var(--gutter);
  z-index: 2;
  max-width: 15rem;
  padding: var(--sp-3) var(--sp-4);
  border: 1px dashed rgba(232, 176, 75, 0.7);
  border-radius: var(--radius-sm);
  background: rgba(22, 48, 42, 0.55);
  color: var(--sage-light);
  font-size: 0.6875rem;
  line-height: 1.6;
  backdrop-filter: blur(4px);
}

/* Scent ribbon: the signature motif. A slow drifting line of scent
   rising out of the patch. Pure SVG so it costs nothing to load. */
.scent-ribbon {
  position: absolute;
  right: clamp(-6rem, -4vw, -2rem);
  bottom: -4rem;
  z-index: -1;
  width: clamp(320px, 46vw, 720px);
  opacity: 0.5;
  pointer-events: none;
}
.scent-ribbon path {
  fill: none;
  stroke: var(--citrus);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 6 14;
  animation: ribbon-drift 14s linear infinite;
}
.scent-ribbon path:nth-child(2) { stroke: var(--sage); animation-duration: 19s; opacity: 0.8; }
.scent-ribbon path:nth-child(3) { stroke: var(--sage-light); animation-duration: 24s; opacity: 0.55; }
@keyframes ribbon-drift {
  to { stroke-dashoffset: -400; }
}
@media (prefers-reduced-motion: reduce) {
  .scent-ribbon path { animation: none; }
}

.hero-inner { position: relative; z-index: 1; max-width: 44rem; }
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.4rem 0.9rem;
  margin-bottom: var(--sp-5);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-pill);
  font-size: var(--fs-tiny);
  letter-spacing: 0.04em;
  color: var(--white);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(6px);
}
.hero h1 {
  font-size: var(--fs-hero);
  color: var(--white);
  letter-spacing: -0.01em;
}
.hero-sub {
  margin-top: var(--sp-5);
  max-width: 34rem;
  font-size: var(--fs-lead);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.86);
}
.hero-actions { margin-top: var(--sp-7); }

.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: var(--sp-5);
  transform: translateX(-50%);
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: var(--sp-2);
  font-size: 0.6875rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.hero-scroll span:last-child {
  width: 1px; height: 34px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.6), transparent);
  animation: scroll-hint 2.4s var(--ease) infinite;
}
@keyframes scroll-hint {
  0%, 100% { transform: scaleY(0.4); transform-origin: top; opacity: 0.4; }
  50%      { transform: scaleY(1);   transform-origin: top; opacity: 1; }
}
@media (max-width: 640px) { .hero-scroll { display: none; } }

/* ---------- 2. The interruption ---------- */
.interrupt { background: var(--verdant-deep); color: var(--sage-light); }
.interrupt h2 { color: var(--white); max-width: 18ch; }
.interrupt-grid {
  display: grid;
  gap: var(--sp-8);
  align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}
.interrupt-lead { font-size: var(--fs-lead); color: var(--sage); margin-top: var(--sp-5); }

/* รูปแนวตั้งที่วางคู่กับข้อความ ไม่ให้เป็นตัวกำหนดความสูงของทั้งส่วน

   รูปพอร์ตเทรต 3:4 ที่ความกว้างคอลัมน์ 524px จะสูงถึง 699px
   ขณะที่ข้อความข้างๆ สูง 462px ส่วนนั้นจึงถูกรูปดันให้สูงขึ้นเปล่าๆ 237px
   จำกัดความสูงแล้วครอบภาพ สองคอลัมน์จึงสูงใกล้เคียงกัน
   ใช้เฉพาะจอกว้าง เพราะบนมือถือทุกอย่างเรียงลงมาคอลัมน์เดียวอยู่แล้ว
   และรูปเต็มสัดส่วนบนมือถือดูดีกว่ารูปที่ถูกครอบ */
@media (min-width: 900px) {
  .grid > .reveal > img,
  .product-intro-grid > .reveal > img {
    width: 100%;
    max-height: 30rem;
    object-fit: cover;
  }
}

/* Draggable comparison. The "after" layer is clipped to --pos, which the
   range input drives. The range itself stays the accessible control. */
.compare {
  --pos: 50%;
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
/* Both photographs occupy the same grid cell so they sit exactly on top of
   each other; the top one is then clipped to reveal the one beneath. */
.compare-layer { grid-area: 1 / 1; width: 100%; height: auto; display: block; }
.compare-stack { display: grid; }

/* ภาพเปรียบเทียบเป็นแนวตั้ง 4:5 ที่ความกว้างคอลัมน์จึงสูง 660px
   ขณะที่ข้อความข้างๆ สูง 388px ส่วนนี้เลยถูกภาพดันขึ้นไป 272px เปล่าๆ
   จำกัดความสูงแล้วครอบภาพทั้งสองชั้นเท่ากัน ตัวเลื่อนยังทำงานเหมือนเดิม
   เพราะทั้งสองชั้นยังทับกันสนิทในช่องกริดเดียวกัน */
@media (min-width: 900px) {
  /* ต้องเป็น height ไม่ใช่ max-height
     max-height แค่ตัดส่วนเกินทิ้ง แถวของกริดยังสูงเท่าเดิม รูปจึงโดนตัดครึ่งล่าง
     ส่วน height กำหนดความสูงแถวจริง object-fit จึงย่อภาพให้พอดีกรอบอย่างที่ควร */
  /* grid-template-rows: 100% จำเป็นด้วย
     ลำพัง height บนกล่อง แถวของกริดยังยึดขนาดตามรูป (660px) แล้วล้นออกไป
     บอกให้แถวสูงเท่ากล่องพอดี ชั้นภาพถึงจะได้ 480px จริงและย่อภาพให้พอดี */
  .compare-stack { height: 30rem; grid-template-rows: 100%; }
  .compare-layer { height: 100%; object-fit: cover; }
}
.compare-after {
  clip-path: inset(0 0 0 var(--pos));
}
.compare-divider {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--pos);
  width: 2px;
  background: var(--white);
  transform: translateX(-1px);
  pointer-events: none;
}
.compare-divider::after {
  content: "↔";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--white);
  color: var(--verdant-deep);
  font-size: 1rem;
  box-shadow: var(--shadow);
}
.compare-range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}
.compare-caption {
  position: absolute;
  bottom: var(--sp-4);
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-pill);
  background: rgba(28, 35, 33, 0.72);
  color: var(--white);
  font-size: var(--fs-tiny);
  backdrop-filter: blur(4px);
  pointer-events: none;
}
.compare-caption.is-left { left: var(--sp-4); }
.compare-caption.is-right { right: var(--sp-4); }

/* ---------- 3. Why spray is not the answer ---------- */
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
}
.compare-table caption {
  text-align: left;
  color: var(--text-muted);
  font-size: var(--fs-tiny);
  padding-bottom: var(--sp-4);
}
.compare-table th, .compare-table td {
  padding: var(--sp-4) var(--sp-3);
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}
.compare-table thead th {
  font-family: var(--font-body);
  font-size: var(--fs-tiny);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom-width: 2px;
}
.compare-table tbody th { font-weight: 600; color: var(--verdant-deep); width: 30%; }
.compare-table .col-us {
  background: var(--sage-wash);
  color: var(--verdant-deep);
  font-weight: 500;
}
.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td { border-bottom: 0; }

/* ---------- 4. Product introduction ---------- */
.product-intro-grid {
  display: grid;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}
/* ส่วนแนะนำสินค้ามีรายละเอียดเยอะ ฝั่งข้อความจึงสูงกว่าฝั่งรูป 347px
   ที่ว่างนั้นอยู่ใต้รูปพอดี ซึ่งตาเห็นเป็นรูโหว่
   ให้รูปยืดเต็มความสูงของแถวแทน ส่วนนี้ไม่ได้เตี้ยลงแต่ไม่มีรูโหว่แล้ว
   และรูปสินค้าที่ใหญ่ขึ้นก็เหมาะกับส่วนที่สำคัญที่สุดของหน้าอยู่แล้ว */
@media (min-width: 900px) {
  .product-intro-grid { align-items: stretch; }
  /* :has(> img) สำคัญมาก ถ้าเขียนเป็น .reveal เฉยๆ คอลัมน์ข้อความจะกลายเป็น
     flex ไปด้วย แล้วหัวข้อกับย่อหน้าจะเรียงเป็นแนวนอนจนล้นจอ */
  .product-intro-grid > .reveal:has(> img) { display: flex; }
  .product-intro-grid > .reveal > img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
  }
}
/* .spec-list and .price-tag live in main.css — the product page uses them too */

/* Two SKUs sit side by side: x4 (one scent) and Duo (two scents) */
.sku-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  margin-top: var(--sp-6);
}
.sku {
  padding: var(--sp-5);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.sku-name {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 1.0625rem;
  margin-bottom: var(--sp-2);
}
.sku-desc { font-size: var(--fs-small); color: var(--text-muted); }
/* .sku-badge and .is-soon live in main.css — the product page uses them too */

/* ---------- 5. Scent notes ---------- */
/* ปุ่มเลือกหัวข้อทางซ้าย เนื้อหาทางขวา

   เดิมสองคอลัมน์กว้างเท่ากันคอลัมน์ละ 528px ทั้งที่ฝั่งปุ่มสูงแค่ 310px
   ส่วนฝั่งเนื้อหาสูง 741px จึงมีที่ว่างใต้ปุ่มค้างอยู่ 431px
   ให้ฝั่งปุ่มแคบลงเท่าที่มันต้องใช้จริง แล้วยกพื้นที่ที่เหลือให้เนื้อหา
   เนื้อหาได้ความกว้างมากขึ้นจึงเตี้ยลง ช่องว่างที่ค้างอยู่จึงหายไปเอง */
.scent-layout {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  align-items: start;
}
@media (min-width: 900px) {
  .scent-layout { grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); }
}
.note-tabs {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.note-tab {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  width: 100%;
  padding: var(--sp-4) var(--sp-5);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
@media (hover: hover) {
  .note-tab:hover { border-color: var(--sage); transform: translateX(4px); }
}
/* แท็บต้องเข้มขึ้นทันทีที่นิ้วแตะ ไม่ต้องรอให้แผงเนื้อหาสลับเสร็จ
   เพราะช่วงที่รออยู่คือช่วงที่คนสงสัยว่ากดติดหรือเปล่า */
.note-tab:active {
  border-color: var(--verdant-soft);
  background: var(--sage-wash);
  transition-duration: var(--dur-instant);
}
.note-tab[aria-selected="true"] {
  background: var(--white);
  border-color: var(--verdant);
  box-shadow: var(--shadow-sm);
}
.note-leaf {
  flex: 0 0 42px;
  height: 42px;
  display: grid;
  place-content: center;
  border-radius: 50%;
  background: var(--sage-light);
  font-size: 1.25rem;
}
.note-tab[aria-selected="true"] .note-leaf { background: var(--citrus); }
.note-tab-title { font-weight: 600; color: var(--verdant-deep); }
.note-tab-sub { font-size: var(--fs-tiny); color: var(--text-muted); }

.note-panel {
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.note-panel h3 { margin-bottom: var(--sp-3); }
.note-panel .ph { margin-bottom: var(--sp-5); }

/* ในแผงเนื้อหา เดิมรูปวางทับอยู่บนข้อความ ความสูงจึงเป็นรูปบวกข้อความ
   พอแผงกว้างขึ้นแล้ว วางรูปไว้ข้างข้อความได้ ความสูงจึงเหลือแค่ด้านที่สูงกว่า
   รูปเป็นสี่เหลี่ยมจัตุรัส ข้อความสั้น ผลคือแผงเตี้ยลงเกือบครึ่ง */
@media (min-width: 900px) {
  .note-panel {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
    column-gap: clamp(1.5rem, 3vw, 2.25rem);
    align-content: start;
  }
  .note-panel > img {
    grid-column: 1;
    grid-row: 1 / span 99;   /* ให้รูปกินทุกแถวของคอลัมน์ซ้าย */
    align-self: start;
    margin-bottom: 0 !important;  /* ทับ margin ที่ตั้งมาในแอตทริบิวต์ style */
  }
  .note-panel > :not(img) { grid-column: 2; }
}

/* ---------- 6. Hotspots ---------- */
.hotspot-layout {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  align-items: center;
}
/* ภาพเวทีเป็นจัตุรัส ยิ่งกว้างยิ่งสูง เดิมกว้าง 532px จึงสูง 532px
   ขณะที่คำอธิบายข้างๆ สูงแค่ 215px เหลือช่องว่าง 317px คาอยู่
   จำกัดความกว้างไว้ ภาพจึงเตี้ยลงและคำอธิบายได้ที่ทางมากขึ้น สองฝั่งใกล้กันขึ้น */
.hotspot-stage { position: relative; max-width: 26rem; }
.hotspot {
  position: absolute;
  width: 34px; height: 34px;
  display: grid;
  place-content: center;
  padding: 0;
  border: 2px solid var(--white);
  border-radius: 50%;
  background: var(--citrus);
  color: var(--ink);
  font-size: var(--fs-tiny);
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
@media (hover: hover) {
  .hotspot:hover { transform: scale(1.15); }
}
/* ย่อลงเล็กน้อยตอนกด เป็นสัญญาณว่าจุดรับแรงกดแล้ว
   ต่างจาก hover ที่ขยายออก ทำให้แยกออกว่ากำลังชี้อยู่หรือกำลังกดอยู่

   เปลี่ยนสีพื้นด้วย ไม่ใช่ย่ออย่างเดียว เพราะผู้ใช้ที่ตั้งค่าลดการเคลื่อนไหว
   จะไม่ได้รับสัญญาณจากขนาดที่เปลี่ยน ต้องเหลืออะไรให้เขารู้ว่ากดติดแล้ว */
.hotspot:active {
  transform: scale(0.94);
  background: var(--citrus-deep);
  transition-duration: var(--dur-instant);
}
.hotspot[aria-pressed="true"] { background: var(--verdant); color: var(--white); transform: scale(1.15); }
/* The dot stays 34px for the look, but the tappable area is padded out to
   46px so it clears the 44px minimum without changing the design. */
.hotspot::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
}
.hotspot::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid var(--citrus);
  opacity: 0;
  animation: pulse 2.6s var(--ease) infinite;
}
.hotspot[aria-pressed="true"]::after { animation: none; opacity: 0; }
@keyframes pulse {
  0%   { opacity: 0.9; transform: scale(0.85); }
  70%  { opacity: 0;   transform: scale(1.35); }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .hotspot::after { animation: none; } }

.hotspot-readout {
  padding: var(--sp-6);
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  min-height: 11rem;
}
.hotspot-title { font-size: var(--fs-h4); margin-bottom: var(--sp-3); }
.hotspot-text { color: var(--text-muted); }

/* ---------- 7. Beliefs ---------- */
.belief-quote {
  /* 36rem ในคอนเทนเนอร์ 1120px ทิ้งที่ว่างด้านขวาไว้ 544px
     กว้างขึ้นเป็น 46rem แล้วคำคมใช้บรรทัดน้อยลง ส่วนนี้จึงเตี้ยลงตาม
     และยังอยู่ในระยะที่ตากวาดอ่านได้สบายเพราะเป็นตัวอักษรขนาดใหญ่ */
  max-width: 46rem;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.4vw, 2.25rem);
  line-height: 1.5;
  color: var(--white);
}
.pillar-grid { margin-top: var(--sp-8); }
/* .pillar lives in main.css — the about page uses it on its dark section too */

/* ---------- 9. Moment wall ---------- */
.moment-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr));
}
.moment-grid .ph:nth-child(3n+1) { aspect-ratio: 3 / 4; }
.moment-grid .ph:nth-child(3n+2) { aspect-ratio: 1 / 1; }
.moment-grid .ph:nth-child(3n)   { aspect-ratio: 4 / 5; }

/* .closing lives in main.css — every page ends with the same block */