:root {
  --color-bg: #FAF8F5;
  --color-bg-alt: #F4F0E9;
  --color-text: #2B2724;
  --color-text-muted: #7A6F66;
  --color-border: #E5DFD6;
  --color-accent: #A8593A;
  --color-accent-hover: #8E4730;

  --font-jp: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-en: "Source Serif 4", "Source Serif Pro", Georgia, serif;
  --font-base: var(--font-en), var(--font-jp);

  --max-width: 840px;
  --header-height: 64px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
}

body {
  font-family: var(--font-base);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.85;
  font-size: 16px;
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a {
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1), color 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

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

a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Header — hidden initially, fades in once the user has scrolled past the sidebar */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  background: transparent;
  border-bottom: 1px solid transparent;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    backdrop-filter 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    -webkit-backdrop-filter 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.site-header.scrolled {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  background-color: rgba(250, 248, 245, 0.78);
  -webkit-backdrop-filter: saturate(1.05) blur(12px);
  backdrop-filter: saturate(1.05) blur(12px);
  border-bottom-color: var(--color-border);
}

.header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-en);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-text);
  border: none;
  letter-spacing: 0.02em;
}

.brand:hover {
  color: var(--color-accent);
  border: none;
}

.brand-mark {
  width: 22px;
  height: 22px;
  color: var(--color-accent);
  flex-shrink: 0;
}

/* HL Ligature — open frame, structural stroke + accent ember */
.brand-mark .ligature-frame,
.sidebar-mark .ligature-frame,
.footer-mark .ligature-frame,
.brand-mark .ligature-stroke,
.sidebar-mark .ligature-stroke,
.footer-mark .ligature-stroke {
  stroke: var(--color-text);
  fill: none;
}

.brand-mark .ligature-ember,
.sidebar-mark .ligature-ember,
.footer-mark .ligature-ember {
  fill: var(--color-accent);
}

/* Sidebar mark only — inverted (filled dark stamp with light ligature) */
.sidebar-mark .ligature-frame {
  fill: var(--color-text);
  stroke: none;
}

.sidebar-mark .ligature-stroke {
  stroke: var(--color-bg);
}

.site-header nav {
  display: flex;
  gap: 28px;
}

.site-header nav a {
  font-family: var(--font-en);
  font-size: 0.92rem;
  color: var(--color-text-muted);
  border: none;
  letter-spacing: 0.02em;
}

.site-header nav a:hover {
  color: var(--color-accent);
  border: none;
}

/* Container */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* ===========================================
   Layout — sidebar + content (mobile default: stacked)
   =========================================== */
.layout {
  position: relative;
}

.sidebar {
  position: relative;
  padding: 72px 24px 56px;
}

.sidebar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 130vh;
  background: radial-gradient(
    ellipse 100% 55% at 75% 22%,
    rgba(184, 111, 74, 0.24) 0%,
    rgba(184, 111, 74, 0.11) 28%,
    rgba(184, 111, 74, 0.04) 55%,
    transparent 80%
  );
  pointer-events: none;
  z-index: 0;
}

.sidebar-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Horizontal wordmark: [mark] | title / tagline (stacked right of mark) */
.sidebar-intro {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 18px;
  row-gap: 12px;
  align-items: center;
}

.sidebar-mark {
  grid-column: 1;
  grid-row: 1;
  width: clamp(38px, 7vw, 48px);
  height: clamp(38px, 7vw, 48px);
  display: block;
}

.sidebar-title {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--font-en);
  font-size: clamp(1.8rem, 6vw, 2.8rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.15;
}

.sidebar-tagline {
  grid-column: 2;
  grid-row: 2;
  font-family: var(--font-jp);
  font-size: clamp(1rem, 2.4vw, 1.25rem);
  color: var(--color-text);
  line-height: 1.75;
  font-weight: 400;
}

/* Sidebar nav */
.sidebar-nav ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  padding: 0;
  margin: 0;
}

.sidebar-nav a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-en);
  font-size: 0.92rem;
  color: var(--color-text-muted);
  border: none;
  letter-spacing: 0.04em;
  transition: color 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.sidebar-nav a:hover {
  color: var(--color-text);
  border: none;
}

.sidebar-nav a.active {
  color: var(--color-accent);
}

.sidebar-nav a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
  border-radius: 2px;
}

.sidebar-nav .nav-line {
  display: none;
}

/* Activities sub-nav — hidden on mobile (the top sidebar keeps a flat
   3-item row), revealed inside the desktop sticky sidebar below. The
   selector matches the .sidebar-nav ol specificity so display:none wins. */
.sidebar-nav .sidebar-subnav {
  display: none;
}

/* Sidebar footer (social) */
.sidebar-footer {
  margin-top: 4px;
}

.sidebar-social {
  display: flex;
  gap: 18px;
  align-items: center;
}

.sidebar-social a {
  color: var(--color-text-muted);
  border: none;
  display: inline-flex;
  align-items: center;
  transition: color 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.sidebar-social a:hover {
  color: var(--color-accent);
  border: none;
}

/* Content area */
.content {
  position: relative;
  min-width: 0;
}

/* ===========================================
   Desktop sidebar — sticky left column
   =========================================== */
@media (min-width: 960px) {
  html {
    scroll-padding-top: 32px;
  }

  .site-header {
    display: none;
  }

  .layout {
    display: grid;
    grid-template-columns: clamp(320px, 32%, 420px) 1fr;
    align-items: start;
  }

  .sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 0;
  }

  .sidebar::before {
    top: 0;
    left: 0;
    right: auto;
    width: 125vw;
    height: 100vh;
    background:
      radial-gradient(
        circle 300px at 5% 14%,
        rgba(184, 111, 74, 0.24) 0%,
        rgba(184, 111, 74, 0.10) 42%,
        rgba(184, 111, 74, 0.03) 78%,
        transparent 100%
      ),
      radial-gradient(
        ellipse 90% 65% at 7% 17%,
        rgba(184, 111, 74, 0.20) 0%,
        rgba(184, 111, 74, 0.14) 25%,
        rgba(184, 111, 74, 0.08) 50%,
        rgba(184, 111, 74, 0.035) 75%,
        transparent 100%
      );
  }

  .sidebar-inner {
    height: 100%;
    padding: 72px 56px 56px;
    gap: 0;
    overflow-y: auto;
  }

  .sidebar-intro {
    column-gap: 16px;
    row-gap: 8px;
  }

  .sidebar-mark {
    width: 44px;
    height: 44px;
  }

  .sidebar-title {
    font-size: clamp(1.6rem, 2.2vw, 2rem);
  }

  .sidebar-tagline {
    font-size: 0.98rem;
    line-height: 1.8;
  }

  .sidebar-nav {
    margin-top: 64px;
  }

  .sidebar-nav ol {
    flex-direction: column;
    gap: 0;
  }

  .sidebar-nav li {
    margin-bottom: 4px;
  }

  .sidebar-nav a {
    padding: 8px 0;
    font-size: 0.76rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
  }

  .sidebar-nav .nav-line {
    display: inline-block;
    width: 32px;
    height: 1px;
    background: currentColor;
    opacity: 0.5;
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                background-color 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .sidebar-nav a:hover .nav-line {
    width: 56px;
    opacity: 1;
  }

  .sidebar-nav a.active .nav-line {
    width: 64px;
    opacity: 1;
    background: var(--color-accent);
  }

  /* Sub-items under Activities — indented one step past the parent labels,
     in a quieter register. Specificity matches the mobile hide rule. */
  .sidebar-nav .sidebar-subnav {
    display: flex;
    flex-direction: column;
    list-style: none;
    padding: 0;
    margin: 4px 0 8px;
  }

  .sidebar-subnav li {
    margin-bottom: 0;
  }

  .sidebar-subnav a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 4px 0 4px 60px;
    font-family: var(--font-en);
    font-size: 0.66rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    opacity: 0.7;
    border: none;
    transition: color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* Mini nav-line: hidden at rest to keep the sidebar quiet — only
     emerges on hover / active to mark interaction or the current card. */
  .sidebar-subnav a::before {
    content: "";
    display: inline-block;
    width: 0;
    height: 1px;
    background: currentColor;
    opacity: 0;
    flex-shrink: 0;
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                background-color 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .sidebar-subnav a:hover {
    color: var(--color-text);
    opacity: 1;
    border: none;
  }

  .sidebar-subnav a:hover::before {
    width: 28px;
    opacity: 1;
  }

  .sidebar-subnav a.active {
    color: var(--color-accent);
    opacity: 1;
  }

  .sidebar-subnav a.active::before {
    width: 36px;
    opacity: 1;
    background: var(--color-accent);
  }

  .sidebar-footer {
    margin-top: auto;
    padding-top: 48px;
  }

  /* ===========================================
     Slide deck — one section visible at a time
     =========================================== */
  .slide-deck {
    position: relative;
    /* 7 steps: About + 5 Activities cards + Contact.
       Each step owns roughly 100vh of vertical scroll. */
    height: calc(100vh * 7);
  }

  .slide-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
  }

  .slide-stage > .section.slide {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .slide-stage > .section.slide.active {
    opacity: 1;
    pointer-events: auto;
  }

  /* Activities slide — each 01-05 is a discrete card, swipe rightward to advance */
  .slide-stage > #activities.slide {
    overflow: hidden; /* slide itself doesn't scroll; activities row does */
  }

  /* Keep default container width (matches About / Contact) — flex-column inside */
  .slide-stage > #activities.slide > .container {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
  }

  .slide-stage > #activities.slide .section-heading {
    flex-shrink: 0;
  }

  /* The cards row: JS animates scrollLeft via rAF (sine easing), and
     guarantees the final value is exactly a card offsetLeft — so we always
     land on a card, never a mid-position, regardless of scroll speed.
     position: relative makes the cards' offsetParent = .activities so
     card.offsetLeft is measured from .activities's left edge (not the
     positioned section ancestor). */
  .slide-stage > #activities.slide .activities {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: row;
    gap: 24px;
    overflow: hidden;
    min-height: 0;
    margin: 0;
    padding: 4px 0 16px;
  }

  .slide-stage > #activities.slide .activities::-webkit-scrollbar {
    display: none;
  }

  /* Each card: full container width — one at a time, no peek */
  .slide-stage > #activities.slide .activities .activity {
    flex: 0 0 100%;
    scroll-snap-align: start;
    border: none;
    border-top: none;
    border-radius: 0;
    background: transparent;
    padding: 8px 0 16px;
    margin: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
  }

  .slide-stage > #activities.slide .activities .activity:first-child {
    padding-top: 8px;
  }

  /* Activity number (01-05) sits at top of card */
  .slide-stage > #activities.slide .activities .activity::before {
    margin-bottom: 1.2em;
  }

}


/* Section */
.section {
  padding: 72px 0;
}

.section-heading {
  margin-bottom: 56px;
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  font-weight: normal;
  position: relative;
  padding-top: 28px;
}

.section-heading::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  height: 2px;
  background: var(--color-accent);
}

.section-heading .en {
  font-family: var(--font-en);
  font-size: 1.65rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.section-heading .ja {
  font-family: var(--font-jp);
  font-size: 0.95rem;
  color: var(--color-text-muted);
  font-weight: 400;
}

/* Section illustrations — "Hearthside Scenes"
   Two small line-drawing vignettes that echo each other across the page:
   the About section opens with a small fire (fire.png) centered under the
   heading, and the Contact section opens with a cat curled up by the
   hearth (cat.png) tucked against the left edge. Both blend into the warm
   cream background so they read in the same hushed register as the
   surrounding type. */
.about-illustration {
  display: block;
  height: auto;
  width: clamp(360px, 78%, 580px);
  margin: 24px auto 44px;
}

.about-illustration .hearth-fire {
  opacity: 0.85;
  mix-blend-mode: multiply;
}

/* The Contact cat sits just under the section heading, left-aligned to
   the container, so it reads like a small companion to the contact info
   rather than competing with it for the center axis. */
.contact-illustration {
  display: block;
  height: auto;
  width: clamp(110px, 22%, 160px);
  margin: 16px auto 32px 0;
  opacity: 0.85;
  mix-blend-mode: multiply;
}

@media (max-width: 768px) {
  .about-illustration {
    width: clamp(300px, 94%, 480px);
    margin: 18px auto 30px;
  }

  .contact-illustration {
    width: clamp(100px, 26%, 140px);
    margin: 10px auto 24px 0;
  }
}

/* Prose (About / Contact text) */
.prose p {
  margin-bottom: 1.5em;
}

.prose p:last-child {
  margin-bottom: 0;
}

/* Activities */
.activities {
  display: flex;
  flex-direction: column;
  counter-reset: activity;
}

.activity {
  position: relative;
  counter-increment: activity;
  padding: 56px 0;
  border-top: 1px solid var(--color-border);
}

.activity:first-child {
  border-top: none;
  padding-top: 0;
}

.activity:last-child {
  padding-bottom: 0;
}

.activity::before {
  content: counter(activity, decimal-leading-zero);
  display: block;
  font-family: var(--font-en);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--color-accent);
  letter-spacing: 0.18em;
  margin-bottom: 1em;
}

.activity-title {
  margin-bottom: 0.4em;
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  font-weight: normal;
}

.activity-stance {
  font-size: 0.95rem;
  color: var(--color-accent);
  font-weight: 500;
  margin-bottom: 1.6em !important;
  letter-spacing: 0.02em;
  line-height: 1.7;
}

/* Expand toggle */
.activity-extra {
  margin-top: 1.8em;
}

.activity-extra > :first-child {
  margin-top: 0;
}

.activity-extra > :last-child {
  margin-bottom: 0;
}

.activity-title .en {
  font-family: var(--font-en);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.activity-title .ja {
  font-family: var(--font-jp);
  font-size: 0.85rem;
  color: var(--color-text-muted);
  font-weight: 400;
}

.activity p {
  margin-bottom: 0.8em;
}

.activity p:last-child {
  margin-bottom: 0;
}

.activity h4 {
  font-family: var(--font-jp);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text);
  margin-top: 1.8em;
  margin-bottom: 0.8em;
  letter-spacing: 0.02em;
}

.activity .dash-list {
  margin: 0.4em 0 0.5em;
}

.tech-stack {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 6px;
  margin: 0.4em 0 0.5em;
  padding: 0;
}

.tech-stack li {
  font-family: var(--font-en);
  font-size: 0.82rem;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
  line-height: 1;
  padding: 6px 11px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: transparent;
  white-space: nowrap;
}

.research-venue {
  font-weight: 500;
  margin-bottom: 0.4em !important;
}

.research-title {
  color: var(--color-text);
  font-size: 0.95rem;
  line-height: 1.75;
}

.app-block {
  margin-top: 1.8em;
  padding-left: 1.2em;
  border-left: 2px solid var(--color-border);
}

.app-name {
  font-family: var(--font-en);
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 0.5em;
  letter-spacing: 0.01em;
}

.app-name a {
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  border-bottom: none;
}

.app-name a:hover {
  color: var(--color-accent);
  border-bottom: none;
}

.app-name-text {
  border-bottom: 1px solid var(--color-border);
  transition: border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1), color 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.app-name a:hover .app-name-text {
  border-bottom-color: var(--color-accent);
}

.app-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  flex-shrink: 0;
  display: block;
}

.app-features-heading {
  font-family: var(--font-jp);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text-muted);
  margin-top: 1.6em;
  margin-bottom: 0.6em;
  letter-spacing: 0.02em;
}

.feature-name {
  font-weight: 500;
  color: var(--color-text);
}

.app-tagline {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  margin-bottom: 0.9em !important;
}

.app-block p:last-child {
  margin-bottom: 0;
}

.social-icon {
  width: 22px;
  height: 22px;
  fill: currentColor;
  display: block;
}

/* Contact */
.contact-email {
  font-family: var(--font-en);
  font-size: 1.15rem;
  margin: 1.5em 0 !important;
}

.contact-email a {
  border-bottom: 1px solid var(--color-border);
}

.dash-list {
  list-style: none;
  margin: 0.5em 0 1.5em;
}

.dash-list li {
  padding-left: 1.4em;
  position: relative;
  margin-bottom: 0.4em;
}

.dash-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--color-text-muted);
}

.contact-note {
  font-size: 0.92rem;
  color: var(--color-text-muted);
}

.prose hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 2em 0 1.5em;
}

.contact-link a {
  font-family: var(--font-en);
}

/* Footer — fixed to viewport bottom-right, visible on every section */
.site-footer {
  position: fixed;
  bottom: 16px;
  right: 24px;
  z-index: 50;
  pointer-events: none;
  user-select: none;
}

.site-footer p {
  font-family: var(--font-en);
  font-size: 0.72rem;
  color: var(--color-text-muted);
  letter-spacing: 0.06em;
  margin: 0;
  opacity: 0.7;
}

/* Mobile / tablet — the slide-deck only runs on desktop, so on smaller
   viewports the footer flows naturally at the end of the document instead
   of floating fixed bottom-right (which left scrollable space below it). */
@media (max-width: 959px) {
  .site-footer {
    position: static;
    bottom: auto;
    right: auto;
    padding: 32px 20px 28px;
    text-align: center;
    pointer-events: auto;
    user-select: text;
  }

  .site-footer p {
    opacity: 1;
  }
}

/* Responsive */
@media (max-width: 768px) {
  body {
    font-size: 15px;
    line-height: 1.8;
  }

  .header-inner {
    padding: 0 16px;
  }

  .site-header nav {
    gap: 18px;
  }

  .brand-mark {
    width: 24px;
    height: 24px;
  }

  .container {
    padding: 0 20px;
  }

  .section {
    padding: 56px 0;
  }

  .section-heading {
    margin-bottom: 40px;
    gap: 12px;
  }

  .section-heading .en {
    font-size: 1.45rem;
  }

  .activity {
    padding: 44px 0;
  }
}

@media (max-width: 520px) {
  .brand-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .brand-mark {
    width: 26px;
    height: 26px;
  }

  .site-header nav {
    gap: 14px;
  }

  .site-header nav a {
    font-size: 0.85rem;
  }
}

/* ===========================================
   Hero flame breathing (pure CSS, always on)
   =========================================== */
.sidebar-mark .flame-body,
.sidebar-mark .flame-core {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  will-change: transform, opacity;
}

.sidebar-mark .flame-body {
  animation: flame-breathe-body 3.8s ease-in-out infinite;
}

.sidebar-mark .flame-core {
  animation: flame-breathe-core 2.6s ease-in-out infinite;
}

@keyframes flame-breathe-body {
  0%, 100% {
    transform: scale(1, 1);
    opacity: 1;
  }
  50% {
    transform: scale(1.015, 1.03);
    opacity: 0.96;
  }
}

@keyframes flame-breathe-core {
  0%, 100% {
    transform: scale(1, 1);
    opacity: 1;
  }
  50% {
    transform: scale(0.96, 1.06);
    opacity: 0.86;
  }
}

/* ===========================================
   Scroll-triggered reveal (requires JS)
   =========================================== */
.js-anim .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 1000ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 1000ms cubic-bezier(0.16, 1, 0.3, 1);
}

.js-anim .reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Section heading line draw-in (scoped to .reveal so non-JS keeps line visible) */
.js-anim .section-heading.reveal::before {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 200ms;
}

.js-anim .section-heading.reveal.in-view::before {
  transform: scaleX(1);
}

/* ===========================================
   Reduced motion
   =========================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .js-anim .reveal,
  .js-anim .reveal.in-view {
    opacity: 1;
    transform: none;
  }

  .js-anim .section-heading.reveal::before,
  .js-anim .section-heading.reveal.in-view::before {
    transform: scaleX(1);
  }
}