/* Premium theme portal transition.
   Original artwork + motion system; inspired by cinematic portfolio transitions,
   but not copied from any reference site. */

/* Shared top navigation for standalone pages. */
#site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 72px;
  z-index: 50;
  background: rgba(12, 12, 14, 0.88);
  border-bottom: 1px solid var(--nav-border);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

html:not(.dark) #site-header {
  background: rgba(247, 243, 235, 0.84);
}

#site-header .topbar {
  width: 96%;
  min-height: 72px;
  margin: 0 auto;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

#site-header .top-brand {
  font-family: 'Playfair Display', serif;
  font-size: 21px;
  font-weight: 700;
  font-style: italic;
  letter-spacing: -0.045em;
  color: var(--text-primary);
  text-decoration: none;
  transition: color 0.25s ease;
}

#site-header .top-brand:hover { color: var(--gold); }

#site-header .topnav {
  display: flex;
  align-items: center;
  gap: 6px;
}

#site-header .topnav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 13px;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.25s ease, background 0.25s ease;
}

#site-header .topnav-link::after {
  content: '';
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 2px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.25s var(--ease);
}

#site-header .topnav-link:hover,
#site-header .topnav-link[aria-current="page"] {
  color: var(--text-primary);
  background: var(--gold-dim);
}

#site-header .topnav-link:hover::after,
#site-header .topnav-link[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

#site-header .topnav-contact {
  min-height: 32px;
  margin-left: 4px;
  padding: 0 15px;
  border: 1px solid var(--gold);
  border-radius: 8px;
  color: var(--text-primary);
  background: var(--gold-dim);
}

#site-header .topnav-contact::after { display: none; }
#site-header .topnav-contact:hover {
  color: var(--bg);
  background: var(--gold);
}

#site-header .theme-switch {
  position: relative;
  width: 58px;
  height: 32px;
  margin-left: 4px;
  padding: 0;
  display: inline-block;
  border: 1px solid var(--gold);
  border-radius: 999px;
  background: rgba(201, 150, 74, 0.08);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s var(--ease);
}

#site-header .theme-switch:hover {
  border-color: var(--gold-light, var(--gold));
  background: var(--gold-dim);
  transform: translateY(-1px);
}

#site-header .theme-switch:active { transform: translateY(0) scale(0.97); }
#site-header .theme-switch:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
#site-header .theme-switch-track { position: absolute; inset: 0; display: block; }
#site-header .theme-switch-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #F7F3EB;
  color: #8A5200;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s var(--ease), background 0.25s ease, color 0.25s ease;
}

html:not(.dark) #site-header .theme-switch-knob { transform: translateX(26px); }
#site-header .theme-switch-knob svg { width: 14px; height: 14px; }

#legacy-nav { display: none !important; }

.mobile-bubble-nav {
  display: none;
}

.site-footer {
  position: relative;
  z-index: 1;
  margin-top: 56px;
  overflow: hidden;
}

.site-footer-inner {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 20px;
}

.site-footer-credit {
  /* the art's negative top margin cancels its transparent headroom exactly,
     so this margin is the real gap between the line and the mascots' heads */
  margin: 0 0 30px;
  text-align: center;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: clamp(15px, 2.4vw, 20px);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text-secondary, rgba(237, 233, 224, 0.62));
}

/* "creativity" and "tokens" pick up the gold, but stay in the body face so the
   italic serif "Arya" is still the one signature in the line. */
.site-footer-hl {
  font-weight: 600;
  color: var(--gold, #C9964A);
}

.site-footer-name {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 700;
  font-size: 1.12em;
  letter-spacing: -0.02em;
  color: var(--gold, #C9964A);
}

/* Alpha bounds of the source art: content runs y 180-628 of 724, so 24.86%
   is empty above and 13.12% below. The image renders at width:100% with a
   3:1 box, so those bands are 8.29% and 4.37% of the container width. */
.site-footer-art {
  display: block;
  width: 100%;
  height: auto;
  margin: -8.29% 0 -4.37%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}


.home-intro-loader {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100000;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #EDE9E0;
  background: #08080A;
  pointer-events: auto;
}

html.home-intro-enabled body {
  overflow: hidden;
}

html.home-intro-enabled .home-intro-loader {
  display: flex;
}

html.home-intro-enabled .profile-avatar,
html.home-intro-enabled .profile-name {
  opacity: 0 !important;
}

.intro-content-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  padding: 0 24px;
}

.intro-greeting {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-family: 'Outfit', sans-serif;
  font-size: clamp(34px, 6.2vw, 68px);
  font-weight: 600;
  letter-spacing: -0.035em;
  color: #EDE9E0;
  user-select: none;
}

.intro-dot {
  width: clamp(10px, 1.8vw, 16px);
  height: clamp(10px, 1.8vw, 16px);
  border-radius: 50%;
  background: #EDE9E0;
  display: inline-block;
  flex-shrink: 0;
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.4);
}

.intro-greeting-text {
  display: inline-block;
  line-height: 1.1;
}

.intro-personal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2.2vw, 22px);
  flex-wrap: nowrap;
  user-select: none;
}

.intro-hey {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(26px, 4.5vw, 44px);
  font-weight: 400;
  color: rgba(237, 233, 224, 0.72);
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.intro-avatar {
  width: clamp(56px, 7.5vw, 84px);
  height: clamp(56px, 7.5vw, 84px);
  border-radius: clamp(14px, 2vw, 20px);
  padding: 0;
  background: transparent;
  border: 1.5px solid rgba(201, 150, 74, 0.35);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  flex-shrink: 0;
  overflow: hidden;
  box-sizing: border-box;
}

.intro-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: clamp(14px, 2vw, 20px);
  display: block;
}

.intro-name {
  font-family: 'Playfair Display', serif;
  font-size: clamp(30px, 5.5vw, 56px);
  font-weight: 700;
  letter-spacing: -0.045em;
  color: #EDE9E0;
  white-space: nowrap;
}

/* Staggered rise-in for each top-level block of a page. The cubic-bezier
   overshoots past 1 so blocks settle with a small bounce. */
.page-enter-item {
  animation: pageEnterUp 0.66s cubic-bezier(0.22, 1.28, 0.32, 1) both;
  animation-delay: calc(var(--enter-i, 0) * 62ms);
}

@keyframes pageEnterUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: 0.28s ease both viewFadeOut;
}

::view-transition-new(root) {
  animation: 0.62s cubic-bezier(0.16, 1, 0.3, 1) both viewFadeIn;
}

@keyframes viewFadeOut {
  to { opacity: 0; transform: scale(0.992); }
}

@keyframes viewFadeIn {
  from { opacity: 0; transform: translateY(12px); }
}

/* Phones render the desktop layout at a forced 820px viewport, so a width
   query alone never fires there — match coarse pointers too. */
@media (max-width: 560px), (pointer: coarse) {
  #main-nav,
  #site-header {
    min-height: 68px;
    background: #101012;
    border-bottom-color: transparent;
    box-shadow: none;
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  }

  html:not(.dark) #main-nav,
  html:not(.dark) #site-header {
    background: #FFFEFD;
  }

  #main-nav.is-scrolled,
  #site-header.is-scrolled {
    background: rgba(16, 16, 18, 0.72);
    border-bottom-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(20px) saturate(125%);
    -webkit-backdrop-filter: blur(20px) saturate(125%);
  }

  html:not(.dark) #main-nav.is-scrolled,
  html:not(.dark) #site-header.is-scrolled {
    background: rgba(255, 254, 253, 0.74);
    border-bottom-color: rgba(25, 20, 16, 0.08);
    box-shadow: 0 10px 34px rgba(70, 45, 22, 0.08);
  }

  #main-nav .topbar,
  #site-header .topbar {
    width: 100%;
    min-height: 68px;
    padding: 0 22px;
    gap: 8px;
  }

  #main-nav .topnav,
  #site-header .topnav {
    margin-left: auto;
    gap: 0;
  }

  #main-nav .topnav-link,
  #site-header .topnav-link {
    display: none;
  }

  #main-nav .theme-switch,
  #site-header .theme-switch {
    width: 52px;
    height: 30px;
    margin-left: 0;
  }

  #main-nav .theme-switch-knob,
  #site-header .theme-switch-knob {
    top: 2px;
    left: 2px;
    width: 24px;
    height: 24px;
  }

  html:not(.dark) #main-nav .theme-switch-knob,
  html:not(.dark) #site-header .theme-switch-knob {
    transform: translateX(22px);
  }

  #main-nav .top-brand,
  #site-header .top-brand {
    font-size: 20px;
  }

  .mobile-bubble-nav {
    position: fixed;
    left: 50%;
    bottom: max(14px, env(safe-area-inset-bottom, 14px));
    z-index: 90;
    width: min(396px, calc(100vw - 22px));
    height: 68px;
    padding: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(25, 25, 27, 0.88);
    box-shadow: 0 18px 52px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(24px) saturate(130%);
    -webkit-backdrop-filter: blur(24px) saturate(130%);
    transform: translateX(-50%);
  }

  html:not(.dark) .mobile-bubble-nav {
    border-color: rgba(26, 20, 16, 0.1);
    background: rgba(255, 254, 253, 0.84);
    box-shadow: 0 18px 48px rgba(64, 42, 22, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }

  .mobile-bubble-link {
    min-width: 48px;
    height: 52px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border-radius: 999px;
    color: rgba(237, 233, 224, 0.58);
    text-decoration: none;
    white-space: nowrap;
    transition: flex 0.32s cubic-bezier(0.16, 1, 0.3, 1), color 0.24s ease, background 0.24s ease, transform 0.18s ease;
  }

  html:not(.dark) .mobile-bubble-link {
    color: rgba(26, 20, 16, 0.48);
  }

  .mobile-bubble-link svg {
    width: 21px;
    height: 21px;
    flex: 0 0 auto;
    stroke-width: 1.8;
  }

  .mobile-bubble-link:active { transform: scale(0.96); }

  .mobile-bubble-link[aria-current="page"] {
    flex: 1 1 108px;
    color: #F7F3EB;
    background: rgba(255, 255, 255, 0.13);
  }

  html:not(.dark) .mobile-bubble-link[aria-current="page"] {
    color: #1A1410;
    background: rgba(26, 20, 16, 0.08);
  }

  .mobile-bubble-label {
    display: none;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 500;
  }

  .mobile-bubble-link[aria-current="page"] .mobile-bubble-label {
    display: inline;
  }

  body {
    padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  }
}

.theme-portal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  overflow: hidden;
  isolation: isolate;
  contain: layout paint style;
  --portal-x: 50%;
  --portal-y: 50%;
  --portal-wash: linear-gradient(135deg, #08080a 0%, #17110a 55%, #c9964a 140%);
  --portal-blob-a: rgba(201, 150, 74, 0.45);
  --portal-blob-b: rgba(13, 148, 136, 0.28);
  --portal-particle: rgba(232, 185, 107, 0.9);
}

.theme-portal.is-active {
  visibility: visible;
  opacity: 1;
}

.theme-portal__wash,
.theme-portal__blob,
.theme-portal__particles,
.theme-portal__girl {
  position: absolute;
  will-change: transform, opacity, filter, clip-path;
}

.theme-portal__wash {
  inset: -16vmax;
  z-index: 1;
  background: var(--portal-wash);
  clip-path: circle(0vmax at var(--portal-x) var(--portal-y));
  transform: translateZ(0);
}

.theme-portal__blob {
  z-index: 2;
  width: 34vmax;
  aspect-ratio: 1;
  border-radius: 999px;
  filter: blur(24px);
  opacity: 0;
  mix-blend-mode: screen;
  transform: translate3d(0, 0, 0) scale(0.72);
}

.theme-portal__blob--one {
  left: 7vw;
  top: 10vh;
  background: radial-gradient(circle, var(--portal-blob-a), transparent 68%);
}

.theme-portal__blob--two {
  right: 4vw;
  bottom: 4vh;
  background: radial-gradient(circle, var(--portal-blob-b), transparent 70%);
}

.theme-portal__particles {
  inset: 0;
  z-index: 5;
}

.theme-portal__particle {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  border-radius: 999px;
  background: var(--portal-particle);
  box-shadow: 0 0 18px var(--portal-particle);
  opacity: 0;
  transform: translate3d(0, 0, 0) scale(0);
  will-change: transform, opacity;
}

.theme-portal__girl {
  z-index: 4;
  left: 50%;
  top: 50%;
  width: min(34vmin, 320px);
  opacity: 0;
  transform: translate3d(-50%, -42%, 0) scale(0.86) rotate(-5deg);
  transform-origin: 50% 78%;
  filter: drop-shadow(0 28px 42px rgba(0, 0, 0, 0.32));
}

.theme-portal__girl svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.portal-girl__hair-back,
.portal-girl__hair-front,
.portal-girl__hair-strand,
.portal-girl__head,
.portal-girl__torso,
.portal-girl__dress,
.portal-girl__arm-left,
.portal-girl__arm-right,
.portal-girl__leg-left,
.portal-girl__leg-right {
  transform-box: fill-box;
  will-change: transform;
}

.portal-girl__hair-back,
.portal-girl__hair-front {
  transform-origin: 50% 10%;
}

.portal-girl__hair-strand {
  transform-origin: 50% 0%;
}

.portal-girl__head {
  transform-origin: 50% 80%;
}

.portal-girl__torso,
.portal-girl__dress {
  transform-origin: 50% 10%;
}

.portal-girl__arm-left {
  transform-origin: 88% 14%;
}

.portal-girl__arm-right {
  transform-origin: 12% 14%;
}

.portal-girl__leg-left,
.portal-girl__leg-right {
  transform-origin: 50% 0%;
}

html.theme-transitioning body {
  cursor: progress;
}

html.theme-transitioning #theme-toggle {
  pointer-events: none;
}

/* Phones render the desktop layout at a forced 820px viewport, so a width
   query alone never fires there — match coarse pointers too. */
@media (max-width: 560px), (pointer: coarse) {
  .theme-portal__girl {
    width: min(56vmin, 260px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .theme-portal,
  .home-intro-loader {
    display: none;
  }

  .page-enter-item,
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }

  .mobile-bubble-link,
  #main-nav,
  #site-header {
    transition: none !important;
  }
}