@charset "UTF-8";

/* =====================================================
  HEADER – AKANE CORE
  Based on MYTHOS Header Architecture
===================================================== */

:root{
  --header-h: 78px;
  --header-pad-x: 60px;

  /* AKANE Brand */
  --brand-deep: #1a0f12;
  --brand-accent: #7a1e28;

  --header-bg: transparent;
  --header-bg-scrolled: var(--brand-deep);

  --header-line: rgba(255,255,255,.12);
  --header-ink: rgba(255,255,255,.92);

  --dur: 520ms;
  --ease: cubic-bezier(.16,1,.30,1);
}

/* =====================================================
  Header Base
===================================================== */

.site-header{
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 9999;

  height: var(--header-h);

  display: flex;
  align-items: center;

  background: var(--header-bg);
  border-bottom: 1px solid transparent;

  box-shadow: none;

  transition:
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

/* Scroll */

.site-header.is-scrolled{
  background: var(--header-bg-scrolled);
  border-bottom-color: var(--header-line);
}

/* =====================================================
  Inner
===================================================== */

.site-header__inner{
  width: 100%;
  max-width: 1400px;

  margin: 0 auto;
  padding: 0 var(--header-pad-x);

  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* =====================================================
  Logo
===================================================== */

.site-header__logo{
  display: inline-flex;
  align-items: center;
  position: relative;

  text-decoration: none;
  line-height: 1;
}

.site-header__logo .site-logo{
  height: 28px;
  width: auto;

  display: block;

  image-rendering: -webkit-optimize-contrast;

  transition: opacity 260ms var(--ease);
}

.site-header__logo .site-logo--black{
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

/* default */

.site-header .site-logo--white{ opacity:1; }
.site-header .site-logo--black{ opacity:0; }

/* light surface */

.site-header[data-surface="light"] .site-logo--white{ opacity:0; }
.site-header[data-surface="light"] .site-logo--black{ opacity:1; }

.site-header__logo:hover .site-logo{
  opacity:.72;
}

/* =====================================================
  Hamburger
===================================================== */

.hamburger{
  width: 34px;
  height: 20px; /* ← 18px → 20px */
  position: relative;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
}

.hamburger span{
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--header-ink);

  transition:
    transform var(--dur) var(--ease),
    opacity var(--dur) var(--ease);
}

/* line spacing : about 8px */

.hamburger span:first-child{ top: 6px; }
.hamburger span:last-child{ bottom: 6px; }

/* open */

html.is-menu-open .hamburger span:first-child{
  transform: translateY(4px) rotate(45deg);
}

html.is-menu-open .hamburger span:last-child{
  transform: translateY(-4px) rotate(-45deg);
}

/* =====================================================
  Responsive
===================================================== */

@media (max-width:768px){

  :root{
    --header-h:72px;
    --header-pad-x:28px;
  }

  .site-header__logo .site-logo{
    height:23px;
  }

  .hamburger{
    width:28px;
    height:18px;
  }

  .hamburger span:first-child{ top:5px; }
  .hamburger span:last-child{ bottom:5px; }

  html.is-menu-open .hamburger span:first-child{
    transform: translateY(3px) rotate(45deg);
  }

  html.is-menu-open .hamburger span:last-child{
    transform: translateY(-3px) rotate(-45deg);
  }
}