/* ============================================================
   STUDIO Butter — Design System Base
   ============================================================
   CSS Custom Properties, Reset, Typography, Utilities
   ============================================================ */

/* ---- Google Fonts Import ---- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Noto+Sans+JP:wght@200;300;400;500&display=swap');

/* ============================================================
   1. Design Tokens (CSS Custom Properties)
   ============================================================ */
:root {
  /* --- Colors (Light Theme) --- */
  --color-bg:             #ffffff;
  --color-bg-elevated:    #f8f8f8;
  --color-bg-surface:     #f4f4f4;
  --color-bg-overlay:     rgba(255, 255, 255, 0.9);
  --color-border:         #e0e0e0;
  --color-border-subtle:  #eeeeee;

  --color-text-primary:   #222222;
  --color-text-secondary: #555555;
  --color-text-muted:     #888888;

  --color-accent:         #c8a97e;
  --color-accent-hover:   #b59368;
  --color-accent-muted:   rgba(200, 169, 126, 0.15);

  /* --- Typography --- */
  --font-display:  'Cormorant Garamond', 'Georgia', serif;
  --font-body:     'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  --font-en:       var(--font-display);

  --fs-hero-title:   clamp(2.4rem, 5vw, 4.8rem);
  --fs-section-title: clamp(1.6rem, 3vw, 2.8rem);
  --fs-subtitle:     clamp(1rem, 1.8vw, 1.4rem);
  --fs-body:         clamp(0.875rem, 1.2vw, 1rem);
  --fs-small:        clamp(0.75rem, 1vw, 0.875rem);
  --fs-caption:      0.75rem;

  --fw-thin:     200;
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;

  --lh-tight:    1.3;
  --lh-normal:   1.7;
  --lh-relaxed:  2.0;

  --ls-tight:    -0.01em;
  --ls-normal:   0.04em;
  --ls-wide:     0.12em;
  --ls-ultra:    0.25em;

  /* --- Spacing --- */
  --space-3xs: 0.25rem;   /* 4px */
  --space-2xs: 0.5rem;    /* 8px */
  --space-xs:  0.75rem;   /* 12px */
  --space-sm:  1rem;      /* 16px */
  --space-md:  1.5rem;    /* 24px */
  --space-lg:  2rem;      /* 32px */
  --space-xl:  3rem;      /* 48px */
  --space-2xl: 5rem;      /* 80px */
  --space-3xl: 8rem;      /* 128px */
  --space-4xl: 12rem;     /* 192px */

  /* --- Layout --- */
  --header-height:     100px;
  --container-max:     1200px;
  --container-narrow:  800px;
  --container-padding: clamp(1.5rem, 4vw, 3rem);

  /* --- Transitions --- */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:    200ms;
  --duration-normal:  400ms;
  --duration-slow:    700ms;
  --duration-slower:  1200ms;

  /* --- Borders & Shadows --- */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-full: 9999px;

  --shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-medium: 0 4px 20px rgba(0, 0, 0, 0.4);
  --shadow-heavy:  0 12px 40px rgba(0, 0, 0, 0.5);
}


/* ============================================================
   2. Modern CSS Reset
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-normal);
  color: var(--color-text-primary);
  background-color: var(--color-bg);
  overflow-x: hidden;
}

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

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

ul, ol {
  list-style: none;
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

input,
textarea,
select {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
}


/* ============================================================
   3. Typography
   ============================================================ */

/* Display / Hero Headings */
.text-display {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: var(--fs-hero-title);
  letter-spacing: var(--ls-wide);
  line-height: var(--lh-tight);
}

/* Section Headings */
.text-section-title {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-section-title);
  letter-spacing: var(--ls-ultra);
  text-transform: uppercase;
  color: var(--color-text-primary);
}

/* Subtitles */
.text-subtitle {
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: var(--fs-subtitle);
  letter-spacing: var(--ls-normal);
  color: var(--color-text-secondary);
}

/* Body Japanese */
.text-body-ja {
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-normal);
}

/* Small / Captions */
.text-small {
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
  letter-spacing: var(--ls-normal);
}

.text-caption {
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

/* Accent color text */
.text-accent {
  color: var(--color-accent);
}


/* ============================================================
   4. Layout Utilities
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

.container--narrow {
  max-width: var(--container-narrow);
}

.section {
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-3xl);
}

.section--compact {
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-2xl);
}


/* ============================================================
   5. Reveal Animation Utilities
   ============================================================ */

/* Initial hidden state for scroll-triggered reveals */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity var(--duration-slow) var(--ease-out),
    transform var(--duration-slow) var(--ease-out);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children animation */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--duration-slow) var(--ease-out),
    transform var(--duration-slow) var(--ease-out);
}

.reveal-stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delay for children */
.reveal-stagger.is-visible > *:nth-child(1)  { transition-delay: 0ms; }
.reveal-stagger.is-visible > *:nth-child(2)  { transition-delay: 100ms; }
.reveal-stagger.is-visible > *:nth-child(3)  { transition-delay: 200ms; }
.reveal-stagger.is-visible > *:nth-child(4)  { transition-delay: 300ms; }
.reveal-stagger.is-visible > *:nth-child(5)  { transition-delay: 400ms; }
.reveal-stagger.is-visible > *:nth-child(6)  { transition-delay: 500ms; }
.reveal-stagger.is-visible > *:nth-child(7)  { transition-delay: 600ms; }
.reveal-stagger.is-visible > *:nth-child(8)  { transition-delay: 700ms; }

/* Fade only (no transform) */
.reveal-fade {
  opacity: 0;
  transition: opacity var(--duration-slower) var(--ease-out);
}

.reveal-fade.is-visible {
  opacity: 1;
}

/* Horizontal slide reveal */
.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition:
    opacity var(--duration-slow) var(--ease-out),
    transform var(--duration-slow) var(--ease-out);
}

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition:
    opacity var(--duration-slow) var(--ease-out),
    transform var(--duration-slow) var(--ease-out);
}

.reveal-left.is-visible,
.reveal-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}


/* ============================================================
   6. Visual Utilities
   ============================================================ */

/* Separator line */
.separator {
  width: 60px;
  height: 1px;
  background-color: var(--color-accent);
  border: none;
  margin: var(--space-lg) 0;
}

.separator--center {
  margin-left: auto;
  margin-right: auto;
}

/* Overlay for images */
.overlay {
  position: relative;
}

.overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(10, 10, 10, 0.3) 0%,
    rgba(10, 10, 10, 0.7) 100%
  );
  pointer-events: none;
}

/* Screen reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}