.drawlinkline {
  position: relative;
  text-decoration: none; 
}

.drawlinkline::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;        
  width: 0;            
  background-color: currentColor;
  transition: width 0.3s ease;
}

.drawlinkline:hover::after {
  width: 100%;      
}



  @keyframes drawArrow {
    to { stroke-dashoffset: 0; }
  }


@keyframes drawOutline {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes showText {
  to {
    color: #fff;
    opacity: 1;
  }
}




@keyframes revealClip2 {
  0% {
    clip-path: polygon(
      0 0,
      90% 0,
      90% 150px,
      50% 150px,
      50% 00%,
      50% 00%,
      50% 0,
      100% 0,
      100% 100%,
      0 100%
    );
  }

  100% {
    clip-path: polygon(
      0 0,
      90% 0,
      90% 150px,
      50% 150px,
      50% 80%,
      90% 80%,
      90% 0,
      100% 0,
      100% 100%,
      0 100%
    );
  }
}

@keyframes clipCutoutFromCenter {
  0% {
    clip-path: polygon(
       0 0,                    
    90% 0,                  
    90% 100%,              
    70% 100%,              
    70% 50%,               
    70% 50%,               
    70% 0,                  
    100% 0,
    100% 100%,
    0 100%
    );
  }
	50% {
    clip-path: polygon(
       0 0,
      90% 0,
      90% 49%,
      50% 49%,
      50% 51%,
      90% 51%,
      90% 0,
      100% 0,
      100% 100%,
      0 100%
    );
  }
  100% {
    clip-path: polygon(
      0 0,
      90% 0,
      90% 150px,
      50% 150px,
      50% 80%,
      90% 80%,
      90% 0,
      100% 0,
      100% 100%,
      0 100%
    );
  }
}



@keyframes revealLine {
  0% {
    clip-path: polygon(
		  0 50%, 100% 50%, 100% 50%, 0% 50%
    );
  }
  100% {
    clip-path: polygon(
      0 0, 100% 0, 100% 100%, 0% 100%
    );
  }
}




@keyframes drawPolygon {
 0% {    clip-path: polygon(0 0, 0 0, 0 0, 0 0);  }
  25% {    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);  }
  50% {    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 0);  }
  75% {    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);  }
  100% {    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);  }
}






.typewriter {
	color: transparent; 
	font-weight: inherit;
	display: inline-block; 
	white-space: pre-wrap;
	overflow-wrap: break-word;
	transition: color 0.3s ease;
	vertical-align: top;
	margin-bottom: 2em;
	flex-shrink: 0; 
	width: 100%;
	min-height: 2em;

	
	min-height: 2em;
	height: 2em;
	}

h1.typewriter {

	
	min-height: auto;
	height: auto;
	}

    .typewriter.typing {
      color: inherit; 
    }

    .cursor {
      display: inline-block;
      width: 0.12em;
      height: 1em;
      background-color: orange;
      margin-left: 3px;
      vertical-align: bottom;
      animation: blink 1s steps(2, start) infinite;
      border-radius: 1px;
      box-sizing: content-box;
      white-space: nowrap;
    }

    .cursor.hide {
      opacity: 0;
      animation: none;
      transition: opacity 0.5s ease;
    }

    @keyframes blink {
      0%, 100% { background-color: orange; }
      50% { background-color: transparent; }
    }


  #cutout-border-svg circle {
    opacity: 0;
  }

  /* Dot blinking animation */
  @keyframes dotblink {
    0%, 50%, 100% { opacity: 1; }
    25%, 75% { opacity: 0; }
  }

  /* Dot blinking for 1 second, 2 iterations */
  #cutout-border-svg.blinking circle {
    opacity: 1;
    animation: dotblink 0.5s step-start 2;
  }

  /* Hide dot after animation finished */
  #cutout-border-svg.finished circle {
    opacity: 0 !important;
  }




@keyframes arrowElastic {
  0%   { bottom:7%;  }
  100% { bottom:6%;  }  
}




/* PAGE REVEAL EFFECTS */


		
	.reveal-box {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0px auto; /* spacing for scroll demo */
}

.reveal-box img {
  width: 100%;
  height: 100%;
  display: block;
	opacity:0;
	transition: opacity 0.5s ease-in 1s;
}


	
.reveal-box.revealed img {

	opacity: 1;
	animation: slide-up 0.7s forwards 1s;
}	  



.slide-up-container {
	flex-wrap: wrap;
	gap: 8px;
	overflow: hidden;
	padding-bottom: 0.2em;	
}

.slide-up-container.right {
	justify-content: flex-end; /* aligns all words to the right */
}

.slide-up-container span.word {
  display: inline-block;
  transform: translateY(100%);
  opacity: 0;
  animation: slide-up 0.5s forwards;

  /* inherit parent styles */
  font: inherit;
  color: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  font-weight: inherit;
}
.slide-up-container .word {
  display: inline-block;       /* ensures transforms don't break alignment */
  vertical-align: baseline;    /* aligns nicely with text line */
  white-space: pre; 
	/* preserves spaces exactly */
  opacity: 0;
  transform: translateY(0.6em); /* adjust for slide-up start */
  will-change: transform, opacity;
}

.slide-up-container .word.animate {
  animation-name: slide-up;
  animation-duration: 480ms;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.2,.8,.2,1);
}



@media (max-width: 768px) {

	
	.slide-up-container.right {
		justify-content: flex-start !important;
	}
	.slide-up-container {
		padding-bottom: 0.5em; !important;
	}
	
	.underhalfr {
		text-align: left;
	}
	
}

@keyframes slide-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
	 
	 
	 /* Section reveal */
section.reveal-section,
.section-content {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

section.reveal-section.visible,
.section-content.visible
{
  opacity: 1;
  transform: translateY(0);
}

/* Inner content base state */
section.reveal-section p,
.section-content p,

section.reveal-section a.button,
.section-content a.button,

section.reveal-section ul li,
.section-content ul li {
  opacity: 0;
  transform: translateY(20px);
}

/* Animate on reveal */
section.reveal-section.visible p,
.section-content.visible p,

section.reveal-section.visible ul li,
.section-content.visible ul li {
  animation: fadeSlideUp 0.6s ease forwards;
}


/* --- Stagger paragraphs --- */
section.reveal-section.visible p:nth-of-type(1),
.section-content.visible p:nth-of-type(1),
section.reveal-section.visible ul li:nth-child(1),
.section-content.visible ul li:nth-child(1) {
  animation-delay: 0.7s; 
}
section.reveal-section.visible p:nth-of-type(2),
.section-content.visible p:nth-of-type(2),
section.reveal-section.visible ul li:nth-of-type(2),
.section-content.visible ul li:nth-of-type(2) {
  animation-delay: 0.9s; 
}
section.reveal-section.visible p:nth-of-type(3),
.section-content.visible p:nth-of-type(3),
section.reveal-section.visible ul li:nth-of-type(3),
.section-content.visible ul li:nth-of-type(3) {
  animation-delay: 1.1s; 
}
section.reveal-section.visible p:nth-of-type(4),
.section-content.visible p:nth-of-type(4),
section.reveal-section.visible ul li:nth-of-type(4),
.section-content.visible ul li:nth-of-type(4) {
  animation-delay: 1.3s; 
}
section.reveal-section.visible p:nth-of-type(5),
.section-content.visible p:nth-of-type(5),
section.reveal-section.visible ul li:nth-of-type(5),
.section-content.visible ul li:nth-of-type(5) {
  animation-delay: 1.5s; 
}
section.reveal-section.visible p:nth-of-type(6),
.section-content.visible p:nth-of-type(6),
section.reveal-section.visible ul li:nth-of-type(6),
.section-content.visible ul li:nth-of-type(6) {
  animation-delay: 1.7s; 
}
section.reveal-section.visible p:nth-of-type(7),
.section-content.visible p:nth-of-type(7),
section.reveal-section.visible ul li:nth-of-type(7),
.section-content.visible ul li:nth-of-type(7) {
  animation-delay: 1.9s; 
}
section.reveal-section.visible p:nth-of-type(8),
.section-content.visible p:nth-of-type(8),
section.reveal-section.visible ul li:nth-of-type(8),
.section-content.visible ul li:nth-of-type(8) {
  animation-delay: 2.1s; 
}
section.reveal-section.visible p:nth-of-type(9),
.section-content.visible p:nth-of-type(9),
section.reveal-section.visible ul li:nth-of-type(9),
.section-content.visible ul li:nth-of-type(9) {
  animation-delay: 2.3s; 
}
section.reveal-section.visible p:nth-of-type(10),
.section-content.visible p:nth-of-type(10),
section.reveal-section.visible ul li:nth-of-type(10),
.section-content.visible ul li:nth-of-type(10) {
  animation-delay: 2.5s; 
}
section.reveal-section.visible p:nth-of-type(11),
.section-content.visible p:nth-of-type(11),
section.reveal-section.visible ul li:nth-of-type(11),
.section-content.visible ul li:nth-of-type(11) {
  animation-delay: 2.7s; 
}



/* Initial hidden state */
.reveal-section p,
.reveal-section h3,
.reveal-section ul li,
.reveal-section a.button,
.section-content p,
.section-content h3,
.section-content ul li,
.section-content a.button {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Visible state */
.reveal-section.visible p,
.reveal-section.visible h3,
.reveal-section.visible ul li,
.section-content.visible p,
.section-content.visible h3,
.section-content.visible ul li{
  opacity: 1;
  transform: translateY(0);
}

.reveal-section.visible a.button:last-child {
  animation: fadeSlideUp 0.6s ease forwards;
  /* Delay = first paragraph delay + (count × step) */
  animation-delay: calc(0.5s + var(--para-count) * 0.2s);
}

.section-content .btn-cascade {
	opacity: 0;
  transform: translateY(20px);
}

/* Animate button when visible */
.section-content.visible .btn-cascade {
  animation: fadeSlideUp 0.6s ease forwards;
  animation-delay: 1.8s; /* Choose a delay slightly after your last paragraph/list item */
}	 
	 


/* PAGE REVEAL EFFECTS */