/* --- Buttons --- */

/* Button Menu */
.button-menu{
	display: flex;
	width: fit-content;
}
.button-menu a{
	text-decoration: none;
	display: flex;
	flex-direction: column;
}
.button-menu a .name{
	font: var(--font-button-menu);
	color: var(--g400);
	padding: 0.825rem 2rem;
}
.button-menu a:hover .name{
	color: var(--g600);
}
.button-menu a:active .name{
	color: var(--g900);
}
.button-menu.current a .name, .button-menu.current a:hover .name{
	color: var(--g900);
}
.button-menu a .ind{
	display: flex;
	height: 0.5rem;
	width: inherit;
	border-radius: 0.125rem;
	overflow: hidden;
}
.button-menu a .ind span{
	flex-grow: 1;
	display: flex;
	height: 0.5rem;
	opacity: 0;
}
.button-menu a:hover .ind{
	animation: scale-up 0.3s ease-out forwards;
	transform-origin: center;
}
.button-menu.current a:hover .ind{;
	animation: none;
    transform: none;
}
.button-menu a:hover .ind span{
	opacity: 0.5;
}
.button-menu a:active .ind span{
	opacity: 1;
}
.button-menu.current a .ind span, .button-menu.current a:hover .ind span{
	opacity: 1;  
}
.button-menu a .ind.about span, .button-menu a .ind.home span:nth-child(1){
	background: var(--PUR);
}
.button-menu a .ind.work span, .button-menu a .ind.home span:nth-child(2){
	background: var(--ORG);
}
.button-menu a .ind.blog span, .button-menu a .ind.home span:nth-child(3){
	background: var(--YEL);
}
.button-menu a .ind.contact span, .button-menu a .ind.home span:nth-child(4){
	background: var(--GRE);
}
@media (max-width: 319.99px) {  
	.button-menu a .name{
		font: var(--font-button-menu-mob);
		padding: 1rem 0;
	}
}
@media (min-width: 320px) and (max-width: 480px) {  
	.button-menu a .name{
		font: var(--font-button-menu-mob);
		padding: 0.75rem 0.25rem;
	}
}
@media (min-width: 480.01px) and (max-width: 768px) {  
	.button-menu a .name{
		font: var(--font-button-menu-tab);
		padding: 0.75rem 0.825rem;
	}
}
@media (min-width: 768.01px) and (max-width: 1024px) {  
	.button-menu a .name{
		font: var(--font-button-menu-tab);
		padding: 0.75rem 1rem;
	}
}
@keyframes scale-up {
  0%,20% {
    transform: scaleX(0.8);
    opacity: 0.4;
  }
  80% {
    transform: scaleX(0.9);
    opacity: 0.5;
  }
  100% {
    transform: scaleX(1);
    opacity: 0.5;
  }
}

/* Button Primary */
.button-primary{
	display: flex;
	width: fit-content;
}
.button-primary a{
	text-decoration: none;
	display: flex;
    align-items: center;
}
.button-primary a .name{
	font: var(--font-button-menu);
	color: var(--g600);
	padding: 1rem 2rem 1rem 0.5rem;
}
.button-primary a:hover .name{
	color: var(--g800);
}
.button-primary a:active .name{
	color: var(--g900);
}
.button-primary.current a .name, .button-primary.current a:hover .name{
	color: var(--g900);
}
.button-primary a .bullet{
	display: flex;
	width: 2.5rem;
	height: 2.5rem;
	overflow: hidden;
	min-width: 2.5rem;
	min-height: 2.5rem;
}
.button-primary a .bullet span{
	display: flex;
    justify-content: center;
    align-items: center;
	width: inherit;
	height: inherit;
	background: var(--g600);
	border-radius: 0.125rem;
	transition: background-color 0.2s ease, border-radius 0.2s ease;
}
.button-primary a:hover .bullet span{
	background: var(--g800);
	border-radius: 1.25rem;
}
.button-primary a:active .bullet span{
	background: var(--g900);
	border-radius: 1.25rem;
}
.eye-container {
  width: 1.75rem;
  height: 1.75rem;
}

/* Base hidden state */
.eye {
  opacity: 0;
  visibility: hidden;
  transform: scaleY(1);
  transition: none;
}

/* Show and blink on hover */
.button-primary a:hover .bullet span .eye-container .eye {
  opacity: 0;
  visibility: visible;
  animation: eyeBlink 2s linear 1s 2 forwards;
}

/* Move iris on hover*/
.button-primary a:hover .bullet span .eye-container .eye .iris {
  animation: irisMove 2s linear 1s 2 forwards;
}

.iris {
  width: 0.6rem;
  height: 0.8rem;
  background: radial-gradient(circle at center, var(--g800) 20%, var(--g800) 80%);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: inset 0 0 4px #0006;
}

.eye {
  width: 1.75rem;
  height: 1.75rem;
  background: #eee;
  border-radius: 50%;
  position: relative;
}

/* Eye blinking + disappear at end */
@keyframes eyeBlink {
  0% {
    transform: scaleY(0.8);
    border-radius: 50% ;
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  35% {
    transform: scaleY(0.8);
    border-radius: 50% ;
  }
  40% {
    transform: scaleY(0.1);
    border-radius: 50% / 10%;
  }
  45%,90% {
    transform: scaleY(0.8);
    border-radius: 50% ;
  }
  97% {
    transform: scaleY(0.1);
    border-radius: 50% / 10%;
    opacity: 1;
  }
  100% { 
	transform: scaleY(0);
    border-radius: 50% / 10%;  
    opacity: 0;
    visibility: hidden;
  }
}
@keyframes irisMove {
  0%,55% {
    transform: translate(-50%, -50%);
  }
  60%,85% {
    transform: translate(-15%, -50%); /* slight shift right */
  }
  90%,100% {
    transform: translate(-50%, -50%); /* slight shift right */
  }
}

/* Button Secondary */
.button-secondary{
	display: flex;
	width: fit-content;
}
.button-secondary a{
	text-decoration: none;
	display: flex;
    align-items: center;
}
.button-secondary a .name{
	font: var(--font-button-menu);
	color: var(--g400);
	padding: 1rem 2rem 1rem 0.5rem;
}
.button-secondary a:hover .name{
	color: var(--g600);
}
.button-secondary a:active .name{
	color: var(--g900);
}
.button-secondary.current a .name, .button-secondary.current a:hover .name{
	color: var(--g900);
}
.button-secondary a .bullet{
	display: flex;
	width: 2.5rem;
	height: 2.5rem;
	overflow: hidden;
	min-width: 2.5rem;
	min-height: 2.5rem;
}
.button-secondary a .bullet>span{
	display: flex;
	width: inherit;
	height: inherit;
	border-width: 0.25rem;
	border-style: solid;
	border-color: var(--g400);
	border-radius: 0.125rem;
	transition: border-color 0.2s ease, border-radius 0.2s ease;
}
.button-secondary a:hover .bullet>span{
	border-color: var(--g600);
	border-radius: 1.25rem;
}
.button-secondary a:active .bullet>span{
	border-color: var(--g900);
	border-radius: 1.25rem;
}
.peek-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.peek {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateY(100%);
  width: 1rem;
  height: 2rem;
  background: var(--g600);
  border-radius: 0.25rem;
  opacity: 0;
  visibility: hidden;
  transition: none;  
  display: flex;
  justify-content: space-evenly;
  align-items: start;
  padding-top: 0.4rem;
}
.eyem {
  width: 0.15rem;
  height: 0.15rem;
  background: var(--W);
  border-radius: 50%;
}
.button-secondary a:hover .peek {
  animation: peekUp 6s ease-out 1s 1 forwards;
  visibility: visible;
}
@keyframes peekUp {
  0% {
    transform: translateX(-50%) translateY(105%) scaleX(1);
    opacity: 0;
    border-radius: 0.25rem;
  }
  5% {
    transform: translateX(-50%) translateY(105%) scaleX(1);
    opacity: 0;
    border-radius: 0.25rem;
  }
  10% {
    transform: translateX(-50%) translateY(105%) scaleX(1);
    opacity: 1;
    border-radius: 0.25rem;
  }
  15%,26% {
    transform: translateX(-50%) translateY(30%) scaleX(1);
    border-radius: 0.25rem;
  }
  30%, 45% {
    transform: translateX(-50%) translateY(30%) scaleX(0.6);
    border-radius: 0.25rem 0.75rem 0 0;
  }
  55%, 65% {
    transform: translateX(-50%) translateY(30%) scaleX(1);
    border-radius: 0.25rem;
  }
  70%, 80% {
    transform: translateX(-50%) translateY(30%) scaleX(0.6);
    border-radius: 0.25rem 0.75rem 0 0;
  }
  85%,94% {
    transform: translateX(-50%) translateY(30%) scaleX(1);
    border-radius: 0.25rem;
  }
  95% {
    opacity: 1;
  }
  100% {
    transform: translateX(-50%) translateY(105%) scaleX(1);
    opacity: 0;
    border-radius: 0.25rem;
  }
}

/* Button Social */
.button-social{
	display: flex;
}
.button-social a{
	width: 2.5rem;
	height: 2.5rem;
	text-decoration: none;
	display: flex;
    align-items: center;
	justify-content: center;
}
.button-social a img{
	display: flex;
	width: 1.5rem;
	height: 1.5rem;
	opacity: 0.5;
}
.button-social a:hover img{
	opacity: 0.9;
}
.button-social a:active img{
	opacity: 1;
}

/* Button Link */
.button-link{
	display: flex;
}
.button-link a{
	width: inherit;
	height: 2.5rem;
	text-decoration: none;
	display: flex;
    align-items: center;
	justify-content: center;
}
.button-link a .name{
	font: var(--font-note);
	color: var(--g600);
	padding: 1rem 0.75rem 1rem 0.25rem;
}
.button-link a:hover .name{
	color: var(--g800);
}
.button-link a:active .name{
	color: var(--g900);
}
.button-link a .ind{
	display: flex;
	height: 0.5rem;
	width: 1rem;
	border-radius: 0.125rem;
	overflow: hidden;
}
.button-link a .ind span{
	flex-grow: 1;
	display: flex;
	height: 1rem;
	opacity: 0;
}
.button-link a:hover .ind span{
	opacity: 0.7;
}
.button-link a:active .ind span{
	opacity: 1;
}
.button-link.current a .ind span, .button-link.current a:hover .ind span{
	opacity: 1;
}
.button-link a .ind.about span, .button-link a .ind.home span:nth-child(1){
	background: var(--PUR);
}
.button-link a .ind.work span, .button-link a .ind.home span:nth-child(2){
	background: var(--ORG);
}
.button-link a .ind.blog span, .button-link a .ind.home span:nth-child(3){
	background: var(--YEL);
}
.button-link a .ind.contact span, .button-link a .ind.home span:nth-child(4){
	background: var(--GRE);
}

/* Button Footer Link */
.button-footer-link{
	display: flex;
}
.button-footer-link a{
	width: inherit;
	height: 2.5rem;
	text-decoration: none;
	display: flex;
    align-items: center;
	justify-content: center;
}
.button-footer-link a .name{
	font: var(--font-note-small);
	color: var(--g300);
	padding: 1rem 0.5rem;
}
.button-footer-link a:hover .name{
	color: var(--g400);
	text-decoration: underline;
}
.button-footer-link a:active .name{
	color: var(--g900);
	text-decoration: underline;
}

/* Go top */
.go-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 2.5rem;
  height: 2.5rem;
  border: none;
  border-radius: 50%;
  background: transparent; /* no background on button itself */
  color: white;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 999;
}

.go-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.button-up {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: var(--g600, #333);
  transition: background-color 0.3s ease;
}

.go-top:hover .button-up {
  background-color: var(--g900, #000);
  animation: flip 0.8s ease-in-out;
}

.chevron-up {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border-right: 3px solid white;
  border-top: 3px solid white;
  transform: rotate(-45deg);
  margin-top: 0.5rem;
  border-radius: 2px; /* soften the corners */
}

/* Pop Up */
.pop-up{
	flex-direction: column;
	display:none;
	position:fixed;
	top:0;
	left:0;
	width:100vw;
	height:100vh;
	background: linear-gradient(90deg, rgba(218, 40, 109, 0.1) 0%, rgba(255, 125, 66, 0.1) 33%, rgba(253, 187, 62, 0.1) 66%, rgba(39, 191, 163, 0.1) 100%), rgba(255, 255, 255, 0.97);
	justify-content:center;
	align-items:center;
	z-index:1000;
}

.pop-image-wrapper{
	max-width: 90%;
	max-height: 75%;
	border-radius: 1rem;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
	transition: transform 0.3s ease;
	will-change: transform;
	cursor: grab;
}
.pop-image-wrapper::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 1rem;
    background: linear-gradient(90deg, rgba(218, 40, 109, 0.3) 0%, rgba(255, 125, 66, 0.3) 33%, rgba(253, 187, 62, 0.3) 66%, rgba(39, 191, 163, 0.3) 100%), rgba(255, 255, 255, 0.85);
    filter: blur(15px); /* makes it look like a shadow */
    z-index: -1; /* behind the wrapper */
}
.pop-image{
	max-width:100%;
	max-height:100%;
	object-fit: contain;
	border-radius: 1rem;  
	transition: transform 0.3s ease;
	will-change: transform;
	
}
.pop-image-details{
	max-width: 90%;
	display: flex;
	flex-direction: column;
	width: 100%;
    align-items: center;
	gap: 0.5rem;
	padding: 0.5rem;
}
.pop-image-details>div{
	display: flex;
	flex-wrap: wrap;
    gap: 0.5rem 2.5rem;
    align-items: center;
}
.pop-image-title{
	font: var(--font-text-b);
	letter-spacing: var(--tr-text-b);
	color: var(--g900);
	min-width: 240px;
}

/* Preview Button */
.button-preview{
	display: flex;
}
a.button-preview{
	width: inherit;
	height: 2.5rem;
	text-decoration: none;
	display: flex;
    align-items: center;
	justify-content: center;
}
a.button-preview .name{
	font: var(--font-note);
	color: var(--g600);
	padding: 1rem 0.75rem 0.875rem 0.25rem;
}
a.button-preview:hover .name{
	color: var(--g800);
}
a.button-preview:active .name{
	color: var(--g900);
}
a.button-preview svg path{
	fill: var(--g400);
}
a.button-preview:hover svg path{
	fill: var(--g800);
}
a.button-preview:active svg path{
	fill: var(--g900);
}
@media (max-width: 768px){
	.pop-image-details>div{
		justify-content: center;
	}
	.pop-image-title{
		text-align: center;
	}
}


/* Pop Nav */
.pop-nav{	
	position: fixed;
	bottom: 2rem;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
	min-width: 230px;
}
.pop-nav a{
	display: block;
	width: 2rem;
	height: 2rem;
	background: var(--g300);
	border-radius: 0.25rem;
	transition: background-color 0.2s ease, border-radius 0.2s ease;  
	text-indent: -9999px; /* hide numbers, keep accessible */
	overflow: hidden;
	
}
.pop-nav .active{
	border-radius: 1rem;
}
.pop-nav a:hover{
	border-radius: 1rem;
}
.pop-nav a:active{
	border-radius: 1rem;
}
.pop-nav a.pur  { background: var(--pur400); }
.pop-nav a.org  { background: var(--org400); }
.pop-nav a.yel  { background: var(--yel400); }
.pop-nav a:hover.pur  { background: var(--pur600); }
.pop-nav a:hover.org  { background: var(--org600); }
.pop-nav a:hover.yel  { background: var(--yel600); }

.no-scroll {
  overflow: hidden !important;
  height: 100% !important;
}


/* Pop Help */
.pop-help{	
	position: fixed;
	top: 1.5rem;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
    justify-content: center;
	align-items: center;
	min-width: 230px;
	font: var(--font-note);
	color: var(--g400);
	line-height: 1rem;
}    
.pop-help span {
    display: flex;
    justify-content: center;
	align-items: center;
}
.pop-help svg path{
	fill: var(--g400);
}
/* Desktop-like devices with hover capability */
@media (hover: hover) and (pointer: fine) {
    .pop-help span {
        display: flex;
    }
}

/* Touch-only devices (likely no hardware keyboard) */
@media (hover: none) and (pointer: coarse) {
    .pop-help span {
        display: none;
    }
}

/* Close pop */
.close-pop {
	position: fixed;
	top: 2rem;
	right: 2rem;
	width: 2.5rem;
	height: 2.5rem;
	border: none;
	border-radius: 50%;
	background: transparent; /* no background on button itself */
	color: white;
	cursor: pointer;
	opacity: 1;
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.button-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-color: var(--g600, #333);
	transition: background-color 0.3s ease;
}

.close-pop:hover .button-close {
	background-color: var(--g900, #000);
	animation: flip 0.8s ease-in-out;
}

.close-icon {
	position: relative;
	width: 1.2rem;
	height: 1.2rem;
	margin-top: 1px;
	cursor: pointer;
}

.close-icon::before,
.close-icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1.2rem;
	height: 3px;
	background-color: white;
	border-radius: 2px;
	transform-origin: center;
}
.close-icon::before {
	transform: translate(-50%, -50%) rotate(45deg);
}
.close-icon::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

/* Pop button */