/*
 * Component: Logo (SD-56)
 * Figma: components / logo
 * Desktop-first: default = L (≥1025px), @max-width 1024px = M, @max-width 375px = S
 */

/* ---- Sizing tokens ---- */
:root {
  --logo-size:        180px;
  --logo-size-scroll: 120px;
  --year-w:           173px;
  --year-h:           104px;
}

@media (max-width: 79.9375rem) {
  :root {
    --logo-size:        96px;
    --logo-size-scroll: 80px;
    --year-w:           93px;
    --year-h:           56px;
  }
}

@media (max-width: 63.9375rem) {
  :root {
    --logo-size:        72px;
    --logo-size-scroll: 64px;
    --year-w:           73px;
    --year-h:           44px;
  }
}

/* ---- Logo link ---- */
.logo-link {
  position: fixed;
  top:  env(safe-area-inset-top,  0px);
  left: env(safe-area-inset-left, 0px);
  z-index: 100;
  display: block;
  width:  var(--logo-size);
  height: var(--logo-size);
  overflow: hidden;
  transition: width 0.3s ease, height 0.3s ease;
}

.logo-link svg {
  display: block;
  width:  100%;
  height: 100%;
}

.logo-bg {
  fill: var(--dk-color-brand-primary);
}

/* focus-visible ring: 2px black / 4px white / 8px blue */
.logo-link:focus { outline: none; }
.logo-link:focus-visible {
  outline: none;
  background-color: var(--dk-color-white);
  box-shadow:
    0 0 0 2px var(--dk-color-black),
    0 0 0 4px var(--dk-color-white),
    0 0 0 8px #008eff;
}

/* ---- Logo scroll state ---- */
.is-scrolled .logo-link {
  width:  var(--logo-size-scroll);
  height: var(--logo-size-scroll);
}

/* ---- Year ---- */
.logo-year {
  position: fixed;
  bottom: env(safe-area-inset-bottom, 0px);
  right:  env(safe-area-inset-right,  0px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  width:  var(--year-w);
  height: var(--year-h);
  background-color: var(--dk-color-brand-primary);
  color: var(--dk-color-black);
  font-family: var(--dk-font-family-display);
  font-weight: var(--dk-font-weight-super);
  font-size: 6.25rem; /* 100px at L */
  line-height: 1;
  transition: transform 0.3s ease;
  pointer-events: none;
  user-select: none;
}

@media (max-width: 79.9375rem) {
  .logo-year { font-size: 3.25rem; }
}

@media (max-width: 63.9375rem) {
  .logo-year { font-size: 2.25rem; }
}

/* ---- Year scroll state ---- */
.is-scrolled .logo-year {
  transform: translateY(calc(100% + env(safe-area-inset-bottom, 0px)));
}

/* ---- prefers-reduced-motion ---- */
@media (prefers-reduced-motion: reduce) {
  .logo-link,
  .logo-year {
    transition: none;
  }
}