:root { --global-nav-h: 82px; }

.hero__nav,
.talk-nav,
.rtc-nav,
.projects-nav,
#mobile-menu { display: none !important; }

.global-nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1002;
  height: var(--global-nav-h);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
  padding: 0 clamp(22px, 4vw, 68px);
  color: #f6f6f2;
  background: linear-gradient(180deg, rgba(5, 6, 9, .88), rgba(5, 6, 9, .5));
  border-bottom: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: opacity .45s ease, transform .45s ease, background .3s ease;
}

body.is-intro-active .global-nav { opacity: 0; transform: translateY(-100%); pointer-events: none; }

.global-nav__brand { display: inline-flex; align-items: center; gap: 13px; color: inherit; text-decoration: none; }
.global-nav__monogram { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.36); border-radius: 50%; font: 500 11px/1 Arial, sans-serif; letter-spacing: .08em; }
.global-nav__name { font: 600 12px/1 Arial, sans-serif; letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; }
.global-nav__links { justify-self: center; display: flex; align-items: center; gap: clamp(18px, 2.1vw, 34px); }
.global-nav__links a { position: relative; color: rgba(255,255,255,.63); text-decoration: none; font: 600 10px/1 Arial, sans-serif; letter-spacing: .15em; text-transform: uppercase; transition: color .25s ease; }
.global-nav__links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -10px; height: 1px; background: #c9c6ff; transition: right .35s cubic-bezier(.2,.8,.2,1); }
.global-nav__links a:hover, .global-nav__links a.is-active { color: #fff; }
.global-nav__links a:hover::after, .global-nav__links a.is-active::after { right: 0; }
.global-nav__cta { color: #0a0b0e; background: #f2f2ed; padding: 14px 18px; text-decoration: none; font: 700 10px/1 Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.global-menu-toggle { display: none; width: 48px; height: 48px; padding: 0; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; background: transparent; color: #fff; cursor: pointer; }
.global-menu-toggle span { display: block; width: 18px; height: 1px; margin: 5px auto; background: currentColor; transition: transform .3s ease; }

.global-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 1001;
  display: grid;
  align-content: center;
  padding: calc(var(--global-nav-h) + 40px) clamp(28px, 8vw, 70px) 44px;
  color: #f8f8f4;
  background: radial-gradient(circle at 80% 15%, rgba(131,126,255,.18), transparent 30%), #07080b;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-18px);
  transition: opacity .35s ease, visibility .35s, transform .45s cubic-bezier(.16,1,.3,1);
}
.global-mobile-menu::before { content: ""; position: absolute; inset: 0; opacity: .28; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 72px 72px; }
.global-mobile-menu.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.global-mobile-menu__close { position: absolute; top: calc(17px + env(safe-area-inset-top)); right: 22px; z-index: 2; width: 48px; height: 48px; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; background: rgba(0,0,0,.28); color: #fff; font: 300 28px/1 Arial, sans-serif; cursor: pointer; }
.global-mobile-menu__eyebrow { position: relative; margin: 0 0 28px; color: rgba(255,255,255,.48); font: 600 10px/1.4 Arial, sans-serif; letter-spacing: .24em; text-transform: uppercase; }
.global-mobile-menu__links { position: relative; display: grid; }
.global-mobile-menu__links a { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.7); text-decoration: none; font: 300 clamp(30px, 8vw, 52px)/1.02 Arial, sans-serif; letter-spacing: -.04em; }
.global-mobile-menu__links a::after { content: "\2197"; font-size: 16px; opacity: .48; }
.global-mobile-menu__links a.is-active { color: #fff; }
.global-mobile-menu__footer { position: relative; margin-top: 32px; color: rgba(255,255,255,.38); font: 500 10px/1.4 Arial, sans-serif; letter-spacing: .17em; text-transform: uppercase; }
body.global-menu-open { overflow: hidden; }

.daniel-transition { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; overflow: hidden; background: rgba(4,5,8,0); opacity: 0; visibility: hidden; pointer-events: none; }
.daniel-transition__veil { position: absolute; width: 8vmax; height: 8vmax; border-radius: 50%; background: radial-gradient(circle, #11141a 0 42%, #050609 72%); transform: scale(0); }
.daniel-transition__mark { position: relative; z-index: 3; width: 148px; height: 148px; display: grid; place-items: center; border: 1px solid rgba(226,229,237,.72); border-radius: 50%; color: #f4f4f0; font: 300 26px/1 Georgia, serif; letter-spacing: .08em; opacity: 0; transform: scale(.72) rotate(-14deg); }
.daniel-transition__mark::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(255,255,255,.16); border-radius: inherit; }
.daniel-transition__mark i { position: absolute; left: 50%; top: -21px; width: 2px; height: 190px; background: #e01f35; box-shadow: 0 0 18px rgba(224,31,53,.86); transform: rotate(38deg) scaleY(0); transform-origin: 50% 0; }
.daniel-transition__mark b { position: absolute; inset: -24px; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; }
.daniel-transition__identity { position: absolute; z-index: 4; inset: auto 0 calc(50% - 145px); display: flex; justify-content: center; gap: clamp(18px,3.2vw,52px); color: rgba(238,239,244,.74); font: 700 9px/1 Arial,sans-serif; letter-spacing: .22em; }
.daniel-transition__identity span { opacity: 0; transform: translateY(8px); }
.daniel-transition.is-leaving { visibility: visible; pointer-events: all; animation: dcTransitionBackdrop 1.3s both; }
.daniel-transition.is-leaving .daniel-transition__mark { animation: dcTransitionMark 1.22s cubic-bezier(.16,1,.3,1) both; }
.daniel-transition.is-leaving .daniel-transition__mark i { animation: dcTransitionCrack .38s .38s cubic-bezier(.2,.8,.2,1) both; }
.daniel-transition.is-leaving .daniel-transition__mark b { animation: dcTransitionRing .7s .46s ease-out both; }
.daniel-transition.is-leaving .daniel-transition__veil { animation: dcTransitionPortal .72s .62s cubic-bezier(.72,0,.2,1) both; }
.daniel-transition.is-leaving .daniel-transition__identity span { animation: dcTransitionWord .34s both; }
.daniel-transition.is-leaving .daniel-transition__identity span:nth-child(1){animation-delay:.18s}.daniel-transition.is-leaving .daniel-transition__identity span:nth-child(2){animation-delay:.27s}.daniel-transition.is-leaving .daniel-transition__identity span:nth-child(3){animation-delay:.36s}.daniel-transition.is-leaving .daniel-transition__identity span:nth-child(4){animation-delay:.45s}.daniel-transition.is-leaving .daniel-transition__identity span:nth-child(5){animation-delay:.54s}
.daniel-transition.is-arriving { visibility: visible; pointer-events: all; background:#050609; animation: dcTransitionArrival .86s cubic-bezier(.16,1,.3,1) both; }
.daniel-transition.is-arriving .daniel-transition__mark { opacity: 1; transform: scale(1); animation: dcTransitionArrivalMark .72s ease-out both; }
@keyframes dcTransitionBackdrop { 0%{opacity:0;background:rgba(4,5,8,0)} 18%,100%{opacity:1;background:rgba(4,5,8,.82)} }
@keyframes dcTransitionMark { 0%{opacity:0;transform:scale(.72) rotate(-14deg)} 28%{opacity:1} 67%{opacity:1;transform:scale(1) rotate(0)} 100%{opacity:0;transform:scale(1.65)} }
@keyframes dcTransitionCrack { to{transform:rotate(38deg) scaleY(1)} }
@keyframes dcTransitionRing { 0%{opacity:.65;transform:scale(.86)} 100%{opacity:0;transform:scale(1.48)} }
@keyframes dcTransitionPortal { 0%{transform:scale(0)} 100%{transform:scale(36)} }
@keyframes dcTransitionWord { 0%{opacity:0;transform:translateY(8px)} 45%,75%{opacity:1;transform:none} 100%{opacity:0;transform:translateY(-5px)} }
@keyframes dcTransitionArrival { 0%,28%{opacity:1;clip-path:circle(100% at 50% 50%)} 100%{opacity:0;clip-path:circle(0 at 50% 50%)} }
@keyframes dcTransitionArrivalMark { from{opacity:1;transform:scale(1)} to{opacity:0;transform:scale(.6) rotate(12deg)} }

@media (max-width: 1120px) {
  :root { --global-nav-h: 76px; }
  .global-nav { padding-top: env(safe-area-inset-top); height: calc(var(--global-nav-h) + env(safe-area-inset-top)); }
  .global-nav__links, .global-nav__cta { display: none; }
  .global-nav { grid-template-columns: 1fr auto; }
  .global-menu-toggle { display: block; }
}

@media (max-width: 480px) {
  .global-nav { padding-inline: 18px; }
  .global-nav__name { font-size: 10px; letter-spacing: .16em; }
  .global-nav__monogram { width: 40px; height: 40px; }
  .global-mobile-menu { padding-inline: 28px; }
  .daniel-transition__mark { width: 112px; height: 112px; font-size: 21px; }
  .daniel-transition__mark i { top: -16px; height: 146px; }
  .daniel-transition__identity { bottom: calc(50% - 132px); display: grid; grid-template-columns: 1fr 1fr; gap: 11px 24px; width: 250px; margin:auto; text-align:center; font-size:7px; }
  .daniel-transition__identity span:last-child { grid-column:1/-1; }
  .daniel-transition.is-leaving .daniel-transition__veil { animation-duration: .62s; }
}

@media (prefers-reduced-motion: reduce) {
  .global-nav, .global-mobile-menu, .global-nav__links a::after { transition-duration: .01ms !important; }
  .daniel-transition { display:none !important; }
}
