/* =========================================
   KalgoTeal - Luggage & Travel Gear
   Design language: inspired by Patagonia,
   Osprey and The North Face
   ========================================= */

:root {
  /* Brand palette */
  --teal-900: #0E3A3A;
  --teal-800: #114B49;
  --teal-700: #16605D;
  --teal-500: #2A7E78;
  --teal-200: #BBD7D5;
  --teal-50:  #EDF3F2;

  --cream:    #F4EFE5;
  --cream-2:  #ECE5D6;
  --bone:     #FBF8F1;

  --ink-900:  #14201F;
  --ink-700:  #2D3B39;
  --ink-500:  #5C6A68;
  --ink-300:  #A4AEAB;

  --terra:    #C26F4D;
  --terra-d:  #A85A3B;

  --white:    #FFFFFF;
  --black:    #000000;

  /* Type — font stacks per 素材/font.txt (Patagonia) */
  --font-sans: "Ridgeway Sans", system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans",
               "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
               sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
               "Segoe UI Symbol", "Noto Color Emoji";
  --font-serif: "Copernicus", "Palatino Linotype", Palatino, Palladio,
                "URW Palladio L", "Book Antiqua", Baskerville,
                "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L",
                Garamond, "Apple Garamond", "ITC Garamond Narrow",
                "New Century Schoolbook", "Century Schoolbook",
                "Century Schoolbook L", Georgia, serif;
  --font-special: "BT Belwe W01", system-ui, -apple-system, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans",
                  sans-serif;
  --font-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
               "Courier New", monospace;

  /* Layout */
  --max-w: 1280px;
  --gutter: clamp(20px, 4vw, 56px);
  --radius: 4px;
  --radius-lg: 8px;

  /* Motion */
  --ease: cubic-bezier(.2,.7,.3,1);
}

/* ---- Per-language font overrides (素材/font.txt) ---- */
html[lang="ja"] {
  --font-sans: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro W3",
               "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ",
               "Hiragino Kaku Gothic", "游ゴシック Medium", "游ゴシック体",
               YuGothic, "Yu Gothic Medium", Osaka, "メイリオ", Meiryo,
               "Hiragino Sans", system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans",
               sans-serif;
  --font-serif: "ヒラギノ角ゴ Pro W6", "ヒラギノ角ゴ Pro W3",
                "Hiragino Kaku Gothic Pro W6", "ヒラギノ角ゴ Pro",
                "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ",
                "Hiragino Kaku Gothic", "游ゴシック Medium", "游ゴシック体",
                YuGothic, "Yu Gothic Medium", Osaka, "メイリオ", Meiryo,
                "Hiragino Sans", system-ui, -apple-system, "Segoe UI", Roboto,
                "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans",
                sans-serif;
}
html[lang="zh"] {
  --font-sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
               "Noto Sans CJK SC", "Source Han Sans SC", "WenQuanYi Micro Hei",
               system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-serif: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
                "Noto Sans CJK SC", "Source Han Sans SC",
                "WenQuanYi Micro Hei", system-ui, -apple-system, "Segoe UI",
                Roboto, Arial, sans-serif;
}

/* -------- Reset -------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; }
ul { list-style: none; padding: 0; margin: 0; }
li { list-style: none; }

/* -------- Base -------- */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-900);
  background: var(--bone);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--teal-700); color: var(--white); }

/* =========================================
   HEADER
   ========================================= */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding: 18px var(--gutter);
  transition: background .35s var(--ease), box-shadow .35s var(--ease);
}
.site-header.is-scrolled {
  background: rgba(20, 32, 31, 0.85);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06);
}
.header-inner {
  /* Full width — logo aligns with hero title at viewport gutter */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand-logo {
  /* Logo PNG is now pre-cropped (no transparent padding),
     37px height = same visible size as before, now flush with gutter */
  height: 37px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
  transition: opacity .2s var(--ease);
}
.brand:hover .brand-logo { opacity: .85; }

/* -------- Language switcher -------- */
.lang-switcher { position: relative; }
.lang-current {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--white);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .02em;
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 999px;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.lang-current:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.6);
}
.lang-current .globe { opacity: .9; }
.lang-current .caret { transition: transform .25s var(--ease); }
.lang-current[aria-expanded="true"] .caret { transform: rotate(180deg); }

.lang-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 180px;
  background: var(--white);
  color: var(--ink-900);
  border-radius: var(--radius-lg);
  box-shadow: 0 14px 40px -8px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.06);
  padding: 6px;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.lang-menu.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.lang-menu li {
  font-size: 14px;
  font-weight: 500;
  padding: 9px 12px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background .15s var(--ease);
}
.lang-menu li:hover { background: var(--teal-50); }
.lang-menu li.is-active {
  background: var(--teal-50);
  color: var(--teal-800);
  font-weight: 600;
}
.lang-menu li.is-active::after {
  content: "";
  width: 14px; height: 14px;
  background: var(--teal-700);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12l5 5 9-11' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12l5 5 9-11' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
}

/* =========================================
   HERO
   ========================================= */
.hero {
  position: relative;
  color: var(--white);
  isolation: isolate;
}
.hero-visual {
  position: relative;
}
.hero-img {
  width: 100%;
  height: auto;
  display: block;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(14, 38, 38, 0.66) 0%, rgba(14, 38, 38, 0.36) 45%, rgba(14, 38, 38, 0.14) 100%),
    linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.2) 100%);
  z-index: 1;
  pointer-events: none;
}

/* ---- Scroll hint (bottom-left, hides after scrolling) ---- */
.scroll-hint {
  position: fixed;
  right: var(--gutter);
  bottom: 20px;
  z-index: 40;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--teal-200);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--teal-900);
  box-shadow: 0 4px 16px rgba(20, 32, 31, 0.14);
  cursor: pointer;
  transition: opacity .35s var(--ease), transform .35s var(--ease),
              background-color .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease);
}
.scroll-hint svg {
  animation: hint-bounce 1.8s var(--ease) infinite;
}
.scroll-hint:hover {
  background: var(--teal-900);
  border-color: var(--teal-900);
  color: var(--white);
}
.scroll-hint.is-hidden {
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
}
@keyframes hint-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(5px); }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-hint svg { animation: none; }
}

.hero-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: clamp(24px, 4vw, 40px) var(--gutter) clamp(28px, 3vw, 44px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  z-index: 2;
}

.hero-title {
  margin: 0;
  font-weight: 700;
  font-size: clamp(36px, 6.5vw, 84px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  max-width: 18ch;
  text-shadow: 0 2px 30px rgba(0,0,0,0.25);
}

.hero-sub {
  margin: 0;
  font-size: clamp(16px, 1.4vw, 19px);
  color: rgba(255,255,255,0.85);
  max-width: 52ch;
}

.btn-explore {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 28px;
  background: var(--white);
  color: var(--teal-900);
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
  box-shadow: 0 10px 30px -10px rgba(0,0,0,0.4);
}
.btn-explore:hover {
  background: var(--teal-700);
  color: var(--white);
  transform: translateY(-1px);
}
.btn-explore svg { transition: transform .25s var(--ease); }
.btn-explore:hover svg { transform: translateX(4px); }

/* =========================================
   PRODUCTS
   ========================================= */
.products {
  background: var(--white);
  padding: clamp(24px, 3.5vw, 48px) var(--gutter) clamp(64px, 8vw, 120px);
}
.products-inner {
  max-width: var(--max-w);
  margin: 0 auto;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 2.4vw, 36px) clamp(20px, 2vw, 28px);
}

.product-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform .35s var(--ease);
}
.product-card:hover { transform: translateY(-4px); }
.product-card:hover .card-image img { transform: scale(1.04); }

.card-image {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--cream);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease);
}

.card-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 6px 10px;
  background: var(--white);
  color: var(--ink-900);
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.card-tag[hidden] { display: none; }

.card-name {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  color: var(--ink-900);
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.card-meta {
  margin: -6px 0 0;
  font-size: 13px;
  color: var(--ink-500);
}

/* =========================================
   FOOTER
   ========================================= */
.site-footer {
  background: var(--teal-900);
  color: rgba(255,255,255,0.85);
  padding: 56px var(--gutter) 36px;
}
.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
}
.footer-brand { display: flex; align-items: center; gap: 16px; }
.footer-logo { height: 22px; filter: brightness(0) invert(1); }
.footer-brand p { margin: 0; font-size: 13px; color: rgba(255,255,255,0.6); }
.footer-meta p { margin: 0; font-size: 12px; color: rgba(255,255,255,0.5); }

/* =========================================
   RESPONSIVE
   ========================================= */
@media (max-width: 1024px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .card-tag {
    top: 6px;
    left: 6px;
    font-size: 7px;
    padding: 2px 4px;
    letter-spacing: .06em;
    border-radius: 2px;
  }
  .hero-visual {
    height: calc(100svh - 210px);
    min-height: 460px;
    overflow: hidden;
  }
  .hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 65% center;
  }
  .hero-content { padding: clamp(18px, 3vw, 28px) var(--gutter) clamp(20px, 3vw, 28px); gap: 14px; }
  .hero-title { max-width: 100%; font-size: clamp(28px, 7vw, 48px); }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { flex-direction: column; align-items: flex-start; }
  .lang-menu { right: 0; left: auto; }
}
@media (max-width: 480px) {
  .site-header { padding: 14px var(--gutter); }
  .brand-logo { height: 27px; }
  .lang-current { padding: 7px 12px; font-size: 12px; }
  .hero-content { padding: 16px 20px 18px; gap: 12px; }
  .scroll-hint { width: 40px; height: 40px; bottom: 14px; }
  .scroll-hint svg { width: 20px; height: 20px; }
  .hero-title { font-size: clamp(24px, 8vw, 36px); line-height: 1.1; }
  .hero-sub { font-size: 14px; }
  .btn-explore { padding: 12px 20px; font-size: 13px; margin-top: 6px; }
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 16px 12px; }
  .card-name { font-size: 14px; }
  .card-meta { font-size: 12px; }
}

/* =========================================
   REDUCED MOTION
   ========================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}