/* Hallmark · scope: hero section redesign · macrostructure: Photographic full-bleed poster
 * theme: site system preserved (pine ink + botanical paper · Noto Serif TC display)
 * composition: vertical-rl CJK headline (直書) top-left with annotation column, support copy bottom-left
 * motion: hero — one orchestrated load entrance · sections below — one-shot scroll reveals, each matched to its structure (no scrubbing)
 * pre-emit critique: P4 H5 E4 S5 R4 V5
 * ===================================================== */

/* =====================================================
   Homepage sections
   ===================================================== */

:root {
  /* Photo-legibility scrim stops — rgba mirrors of --pine-ink (#14271C).
     Sage matches the accent already used in the footer icons / prevention dashes. */
  --hero-scrim-deep: rgba(20, 39, 28, 0.8);
  --hero-scrim-left: rgba(20, 39, 28, 0.55);
  --hero-scrim-mid: rgba(20, 39, 28, 0.34);
  --hero-sage: rgba(185, 207, 169, 0.95);
  --hero-sage-dim: rgba(185, 207, 169, 0.55);
  /* Paper veil for the nav zone — rgba mirrors of --paper (#F5F4ED) */
  --hero-veil: rgba(245, 244, 237, 0.9);
  --hero-veil-soft: rgba(245, 244, 237, 0.42);
}

/* ===== Hero: full-bleed store photo, vertical (直書) headline =====
   The photo spans the whole viewport and runs under the transparent
   navbar. The headline is set vertical-rl — two serif columns read
   right-to-left, with the brand claim as a smaller annotation column
   (落款) to their left. Support copy sits bottom-left on the scrim. */
.hero {
  position: relative;
  height: min(100vh, 940px);
  height: min(100svh, 940px);
  min-height: 600px;
  background: var(--tint); /* pre-image paint, keeps the transparent nav legible */
  overflow: hidden;
}

.hero-media {
  position: absolute;
  inset: 0;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

/* Scrim graded from the left (headline zone) and bottom (support zone),
   plus a soft paper veil at the very top so the transparent navbar's ink
   text stays legible — it fades out well above the headline, so header
   and photo read as one continuous surface with no bar edge. */
.hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, var(--hero-veil) 0%, var(--hero-veil-soft) var(--nav-height), transparent calc(var(--nav-height) * 2 + 40px)),
    linear-gradient(to top, var(--hero-scrim-deep) 0%, var(--hero-scrim-mid) 30%, transparent 58%),
    linear-gradient(to right, var(--hero-scrim-left) 0%, var(--hero-scrim-mid) 34%, transparent 62%);
}

.hero-frame {
  position: relative;
  z-index: 1;
  height: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: calc(var(--nav-height) + clamp(24px, 4.5vh, 48px)) var(--container-pad) clamp(36px, 6.5vh, 64px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 28px;
}

/* Vertical writing block: h1 columns render right-to-left,
   the tagline lands leftmost as the annotation column */
.hero-vertical {
  writing-mode: vertical-rl;
}

.hero-title {
  font-family: var(--serif);
  font-size: clamp(46px, 6vw, 88px);
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1.06;
  color: var(--text-light);
}

.hero-title-col {
  display: block;
  overflow: hidden; /* mask for the entrance reveal */
}

.hero-title-col + .hero-title-col {
  margin-block-start: clamp(10px, 1.4vw, 22px);
}

.hero-title-glyphs {
  display: block;
}

.hero-tagline {
  margin-block-start: clamp(20px, 2.4vw, 36px);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.42em;
  line-height: 1.6;
  color: var(--hero-sage);
  border-inline-start: 1px solid var(--hero-sage-dim); /* small tick above the column */
  padding-inline-start: 18px;
}

.hero-foot {
  max-width: 560px;
}

.hero-subtitle {
  font-size: 17px;
  color: rgba(246, 245, 238, 0.92);
  line-height: 2;
  margin-bottom: 30px;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

/* CTA voice inverted for the on-photo context
   (same move the prevention panel makes with .btn-secondary) */
.hero .btn-primary {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--pine-ink);
}

.hero .btn-primary:hover {
  background: var(--tint);
  border-color: var(--tint);
}

.hero .link-arrow {
  color: var(--text-light);
  border-bottom-color: rgba(246, 245, 238, 0.38);
}

.hero .link-arrow:hover {
  color: var(--hero-sage);
  border-bottom-color: var(--hero-sage);
}

.hero :focus-visible {
  outline-color: var(--text-light);
}

/* Hero entrance — one orchestrated sequence on load.
   The headline columns slide DOWN through their masks, matching the
   top-to-bottom reading direction of vertical text. */
@media (prefers-reduced-motion: no-preference) {
  .hero-media {
    animation: hero-photo 1s var(--ease) both;
  }

  .hero-title-glyphs {
    animation: hero-column 0.8s var(--ease) 0.3s both;
  }

  .hero-title-col:nth-child(2) .hero-title-glyphs {
    animation-delay: 0.42s;
  }

  .hero-tagline {
    animation: hero-drift-down 0.7s var(--ease) 0.6s both;
  }

  .hero-foot {
    animation: hero-rise 0.7s var(--ease) 0.72s both;
  }
}

@keyframes hero-photo {
  from {
    opacity: 0;
    transform: scale(1.04);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes hero-column {
  from {
    transform: translateY(-104%);
  }
  to {
    transform: none;
  }
}

@keyframes hero-drift-down {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes hero-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ===== Skincare Knowledge: side head + numbered index =====
   The section head lives in a left column instead of stacking above,
   so the page doesn't repeat one head pattern section after section. */
.knowledge {
  padding: 128px 0 96px;
  background: var(--paper);
}

.knowledge-grid {
  display: grid;
  grid-template-columns: minmax(240px, 4fr) 8fr;
  gap: 32px 80px;
  align-items: start;
}

.knowledge-head h2 {
  font-family: var(--serif);
  font-size: clamp(30px, 3vw, 40px);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink);
  margin-bottom: 16px;
}

.knowledge-head p {
  font-size: 15px;
  color: var(--muted);
  max-width: 20em;
}

.knowledge-index {
  border-top: 1px solid var(--border);
}

.knowledge-row {
  display: grid;
  grid-template-columns: 44px minmax(160px, 5fr) 8fr 28px;
  gap: 28px;
  align-items: baseline;
  padding: 34px 4px;
  border-bottom: 1px solid var(--border);
}

.knowledge-num {
  font-family: var(--serif);
  font-size: 17px;
  color: var(--pine);
}

.knowledge-row h3 {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ink);
  transition: color 0.35s var(--ease);
}

.knowledge-row p {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.9;
}

.knowledge-row i {
  align-self: center;
  justify-self: end;
  font-size: 14px;
  color: var(--pine);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}

.knowledge-row:hover h3 {
  color: var(--pine);
}

.knowledge-row:hover i,
.knowledge-row:focus-visible i {
  opacity: 1;
  transform: translateX(0);
}

/* Touch devices get the arrow affordance without needing hover */
@media (hover: none) {
  .knowledge-row i {
    opacity: 1;
    transform: none;
  }
}

/* ===== Prevention: deep pine band, photo bleeds to the left edge =====
   Echoes the hero's full-bleed language at half width — no container,
   no radius on the bleed side. */
.prevention {
  background: var(--pine-deep);
  color: var(--text-light);
}

.prevention-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: stretch;
}

.prevention-img {
  min-height: 480px;
}

.prevention-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.prevention-text {
  max-width: 780px;
  padding: clamp(64px, 9vh, 112px) clamp(28px, 6vw, 120px);
}

.prevention h2 {
  font-family: var(--serif);
  font-size: clamp(30px, 3.2vw, 42px);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-light);
  margin-bottom: 34px;
}

.prevention-list {
  margin-bottom: 40px;
}

.prevention-list li {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 16px 0;
  font-size: 15px;
  line-height: 1.9;
  color: rgba(240, 242, 230, 0.88);
}

.prevention-list li:not(:last-child) {
  border-bottom: 1px solid rgba(240, 242, 230, 0.14);
}

.prevention-list li::before {
  content: '';
  width: 16px;
  height: 1px;
  background: rgba(185, 207, 169, 0.9);
  flex-shrink: 0;
  transform: translateY(-5px);
}

.prevention .btn-secondary {
  color: var(--text-light);
}

.prevention .btn-secondary:hover {
  background: var(--text-light);
  border-color: var(--text-light);
  color: var(--pine-deep);
}

/* ===== Product Categories: staggered shelf grid ===== */
.categories {
  padding: 112px 0 136px;
  background: var(--surface);
}

.categories-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px 32px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  padding-bottom: 22px;
  margin-bottom: 64px;
}

.categories-head h2 {
  font-family: var(--serif);
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink);
}

.categories-head p {
  font-size: 15px;
  color: var(--muted);
}

.categories-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
}

.category-card {
  display: block;
}

/* Alternate cards sit lower — a shelf rhythm instead of a flat row */
.category-card:nth-child(even) {
  margin-top: 56px;
}

.category-media {
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 18px;
}

.category-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}

.category-card:hover .category-media img {
  transform: scale(1.05);
}

.category-card h3 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin-bottom: 4px;
  transition: color 0.35s var(--ease);
}

.category-card:hover h3 {
  color: var(--pine);
}

.category-card .category-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 14px;
  transition: color 0.35s var(--ease);
}

.category-card .category-more i {
  font-size: 12px;
  transition: transform 0.35s var(--ease);
}

.category-card:hover .category-more {
  color: var(--pine);
}

.category-card:hover .category-more i {
  transform: translateX(5px);
}

/* ===== Featured Products: department rule + flat tiles ===== */
.featured {
  padding: 96px 0 120px;
  background: var(--paper);
}

.featured-head {
  border-top: 1px solid var(--border);
  padding-top: 26px;
  margin-bottom: 56px;
}

.featured-head h2 {
  font-family: var(--serif);
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink);
  margin-bottom: 10px;
}

.featured-head p {
  font-size: 15px;
  color: var(--muted);
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 36px 28px;
}

.product-img {
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}

.product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}

.product-card:hover .product-img img {
  transform: scale(1.04);
}

.product-info {
  padding: 18px 4px 0;
}

.product-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--pine);
  margin-bottom: 6px;
}

.product-info h3 {
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 8px;
  transition: color 0.35s var(--ease);
}

.product-card:hover .product-info h3 {
  color: var(--pine);
}

.price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-variant-numeric: tabular-nums;
}

.price-current {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
}

.price-original {
  font-size: 13px;
  color: var(--muted);
  text-decoration: line-through;
}

/* =====================================================
   Scroll reveals — sections below the hero
   One move per section, matched to what it reveals: the
   knowledge index cascades under its drawing hairline,
   the prevention photo wipes in from the edge it bleeds
   to, grid tiles ripple, department rules draw across.
   Hidden states engage only under html.reveal-ready
   (see main.css) — without JS nothing is ever hidden.
   Sections marked data-reveal-scene choreograph their
   children; the observer flips .visible on the section.
   ===================================================== */
@media screen and (prefers-reduced-motion: no-preference) {

  /* -- Knowledge: head leads, the index rule draws, rows follow -- */
  html.reveal-ready .knowledge .knowledge-head,
  html.reveal-ready .knowledge .knowledge-row {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.65s var(--ease), transform 0.65s var(--ease);
  }

  html.reveal-ready .knowledge .knowledge-row:nth-child(1) { transition-delay: 0.12s; }
  html.reveal-ready .knowledge .knowledge-row:nth-child(2) { transition-delay: 0.24s; }
  html.reveal-ready .knowledge .knowledge-row:nth-child(3) { transition-delay: 0.36s; }

  /* The hairline the rows hang from draws while they land.
     The real border is handed to a pseudo so it can scale. */
  html.reveal-ready .knowledge .knowledge-index {
    position: relative;
    border-top-color: transparent;
  }

  html.reveal-ready .knowledge .knowledge-index::before {
    content: '';
    position: absolute;
    inset: -1px 0 auto 0;
    height: 1px;
    background: var(--border);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform 1.1s var(--ease) 0.1s;
  }

  html.reveal-ready .knowledge.visible .knowledge-head,
  html.reveal-ready .knowledge.visible .knowledge-row {
    opacity: 1;
    transform: none;
  }

  html.reveal-ready .knowledge.visible .knowledge-index::before {
    transform: scaleX(1);
  }

  /* -- Prevention: the photo wipes in from its bleed edge and
        settles; each list dash draws once its line has landed -- */
  html.reveal-ready .prevention .prevention-img {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1s var(--ease);
  }

  html.reveal-ready .prevention .prevention-img img {
    transform: scale(1.06);
    transition: transform 1.4s var(--ease);
  }

  html.reveal-ready .prevention .prevention-text h2 {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.65s var(--ease) 0.1s, transform 0.65s var(--ease) 0.1s;
  }

  html.reveal-ready .prevention .prevention-list li {
    opacity: 0;
    transition: opacity 0.6s var(--ease);
  }

  html.reveal-ready .prevention .prevention-list li::before {
    transform: translateY(-5px) scaleX(0);
    transform-origin: 0 50%;
    transition: transform 0.5s var(--ease);
  }

  html.reveal-ready .prevention .prevention-list li:nth-child(1) { transition-delay: 0.2s; }
  html.reveal-ready .prevention .prevention-list li:nth-child(2) { transition-delay: 0.28s; }
  html.reveal-ready .prevention .prevention-list li:nth-child(3) { transition-delay: 0.36s; }
  html.reveal-ready .prevention .prevention-list li:nth-child(4) { transition-delay: 0.44s; }
  html.reveal-ready .prevention .prevention-list li:nth-child(5) { transition-delay: 0.52s; }

  html.reveal-ready .prevention .prevention-list li:nth-child(1)::before { transition-delay: 0.4s; }
  html.reveal-ready .prevention .prevention-list li:nth-child(2)::before { transition-delay: 0.48s; }
  html.reveal-ready .prevention .prevention-list li:nth-child(3)::before { transition-delay: 0.56s; }
  html.reveal-ready .prevention .prevention-list li:nth-child(4)::before { transition-delay: 0.64s; }
  html.reveal-ready .prevention .prevention-list li:nth-child(5)::before { transition-delay: 0.72s; }

  /* Fade only — transform stays free for :active, colors for hover */
  html.reveal-ready .prevention .btn-secondary {
    opacity: 0;
    transition: opacity 0.65s var(--ease) 0.62s, transform 0.35s var(--ease),
      background 0.35s var(--ease), border-color 0.35s var(--ease), color 0.35s var(--ease);
  }

  html.reveal-ready .prevention.visible .prevention-img {
    clip-path: inset(0 0 0 0);
  }

  html.reveal-ready .prevention.visible .prevention-img img {
    transform: none;
  }

  html.reveal-ready .prevention.visible .prevention-text h2,
  html.reveal-ready .prevention.visible .prevention-list li {
    opacity: 1;
    transform: none;
  }

  html.reveal-ready .prevention.visible .prevention-list li::before {
    transform: translateY(-5px) scaleX(1);
  }

  html.reveal-ready .prevention.visible .btn-secondary {
    opacity: 1;
  }

  /* -- Section heads: the department rule draws as the head rises.
        The heads themselves reveal via .animate-on-scroll (main.css);
        their structural hairline is handed to a pseudo to scale. -- */
  html.reveal-ready .categories-head {
    position: relative;
    border-bottom-color: transparent;
  }

  html.reveal-ready .categories-head::after {
    content: '';
    position: absolute;
    inset: auto 0 -1px 0;
    height: 1px;
    background: var(--border);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform 1.1s var(--ease) 0.15s;
  }

  html.reveal-ready .categories-head.visible::after {
    transform: scaleX(1);
  }

  html.reveal-ready .featured-head {
    position: relative;
    border-top-color: transparent;
  }

  html.reveal-ready .featured-head::before {
    content: '';
    position: absolute;
    inset: -1px 0 auto 0;
    height: 1px;
    background: var(--border);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform 1.1s var(--ease) 0.15s;
  }

  html.reveal-ready .featured-head.visible::before {
    transform: scaleX(1);
  }
}