/* ============================================================
   NEVYRA — base.css
   Base Typography & Global Styles
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

html {
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: var(--lh-normal);
  color: var(--color-text-primary);
  background-color: var(--color-base);
  overflow-x: hidden;
  transition: background-color var(--dur-slow) var(--ease-out),
              color var(--dur-slow) var(--ease-out);
}

/* ── Headings ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--color-text-primary);
}

h1 { font-size: var(--fs-5xl); }
h2 { font-size: var(--fs-4xl); }
h3 { font-size: var(--fs-3xl); }
h4 { font-size: var(--fs-2xl); }
h5 { font-size: var(--fs-xl); }
h6 { font-size: var(--fs-lg); }

/* ── Text Utilities ── */
p {
  color: var(--color-text-secondary);
  line-height: var(--lh-loose);
  max-width: 68ch;
}

strong, b {
  font-weight: 700;
  color: var(--color-text-primary);
}

em, i {
  font-style: italic;
}

small {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

/* ── Links ── */
a {
  transition: color var(--dur-fast) var(--ease-out);
}

a:hover {
  color: var(--color-accent);
}

/* ── Logo Text ── */
.logo-text {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: var(--ls-tight);
  color: var(--color-text-primary);
}

.logo-xi {
  color: var(--color-accent);
}

/* ── Section Headings ── */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-4);
}

.section-label::before {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background: var(--color-accent);
}

.section-title {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: var(--ls-tight);
}

.section-subtitle {
  font-size: var(--fs-lg);
  color: var(--color-text-secondary);
  line-height: var(--lh-loose);
  max-width: 56ch;
  margin-top: var(--space-4);
}

/* ── Accent Text ── */
.text-accent { color: var(--color-accent); }
.text-muted  { color: var(--color-text-muted); }
.text-gradient {
  background: linear-gradient(135deg, var(--color-accent), #7DD3FC, var(--color-accent));
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 4s ease infinite;
}

@keyframes gradientShift {
  0%   { background-position: 0% center; }
  50%  { background-position: 100% center; }
  100% { background-position: 0% center; }
}

/* ── HR / Divider ── */
hr {
  border: none;
  border-top: 1px solid var(--glass-border);
  margin: var(--space-8) 0;
}

/* ── Code ── */
code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
}

/* ══════════════════════════════════════════════════
   LIGHT MODE — body background gradient enhancement
   ══════════════════════════════════════════════════ */
[data-theme="light"] body {
  background: linear-gradient(160deg, #EDF2FF 0%, #E2EAFF 50%, #EDF2FF 100%);
  background-attachment: fixed;
}

/* Light mode gradient text stays vivid */
[data-theme="light"] .text-gradient {
  background: linear-gradient(135deg, #0094CC, #006EA0, #0094CC);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Hero specific ── */
.hero__content { position: relative; z-index: 1; }

.hero__eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-size: var(--fs-sm); font-weight: 600; color: var(--color-accent);
  letter-spacing: 0.08em; text-transform: uppercase;
  margin-bottom: var(--space-6);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--glass-border-accent-soft);
  border-radius: var(--radius-full);
  background: var(--color-accent-dim);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}

.hero__eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-accent);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%,100% { transform: scale(1); opacity:1; }
  50%      { transform: scale(1.4); opacity:0.6; }
}

.hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.0;
  color: var(--color-text-primary);
  margin-bottom: var(--space-6);
}

.hero__desc {
  font-size: var(--fs-xl);
  color: var(--color-text-secondary);
  max-width: 54ch;
  line-height: var(--lh-loose);
  margin-bottom: var(--space-10);
}

.hero__cta { display: flex; gap: var(--space-4); flex-wrap: wrap; }

/* (scroll-indicator styles in parallax.css) */

/* Hero section height */
.hero {
  min-height: 100vh;
  display: flex; align-items: center;
  padding-top: var(--header-h);
  overflow: hidden;
}

/* ── Modal open: スクロールロック ── */
/*
  iOS Safari 対応の確実な方法:
  1. html + body に overflow:hidden（デスクトップ・Android対応）
  2. body に position:fixed + top でスクロール位置保持（iOS Safari対応）
  3. overscroll-behavior で慣性スクロール制御
  JS側で data-scroll-y を body に記録し、閉じる時に復元する
*/
html.modal-open {
  overflow: hidden;
  overscroll-behavior: none;
}
body.modal-open {
  overflow: hidden;
  /* iOS Safari: position:fixed でスクロール位置を固定 */
  /* top の値はJSが --modal-scroll-y として設定する */
  position: fixed;
  top: var(--modal-scroll-y, 0);
  left: 0;
  right: 0;
  width: 100%;
}
/* モーダルの中はスクロール・タッチ許可 */
body.modal-open .modal-overlay,
body.modal-open .modal {
  -webkit-overflow-scrolling: touch;
}

.protected-image {
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  user-select: none;
  pointer-events: auto;
}