/* ===== Custom Properties ===== */
:root {
  --primary: #FF8C42;
  --primary-light: #FFB86C;
  --accent: #5A92B3;
  --surface: #F5F2EE;
  --on-surface: #3B3835;
  --surface-dim: #5C5856;
  --outline-variant: #DDC1B3;
}

/* ===== Smooth Scrolling ===== */
html {
  scroll-behavior: smooth;
}

/* ===== Selection ===== */
::selection {
  background-color: rgba(255, 140, 66, 0.2);
  color: var(--on-surface);
}

/* ===== Image defaults ===== */
img {
  max-width: 100%;
  height: auto;
}

/* ===== Hero Animation ===== */
.hero-image {
  transform: scale(1.08);
  transition: transform 2.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.hero-image.is-loaded {
  transform: scale(1);
}

.hero-text {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1s ease 0.6s, transform 1s ease 0.6s;
}
.hero-text.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.hero-subtitle {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.8s ease 1s, transform 0.8s ease 1s;
}
.hero-subtitle.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Mobile menu icon toggle ===== */
.menu-open .menu-icon-open { display: none; }
.menu-open .menu-icon-close { display: block; }
.menu-icon-close { display: none; }

/* ===== Focus visible ===== */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}