:root {
	--background-color: #454545;
	--box-color: #1a1a23;
	--alt-box-color: #a1a1a6;
	--medium-color: #6a6a6e;
	--primary-text: #DDDCE5;
	--digi-green: rgb(0, 255, 0);
	--small-border: 1px solid var(--primary-text);
	--large-border: 3px solid var(--primary-text);
	--med-lg-border: 5px solid var(--medium-color);
	--dark-lg-border: 3px solid var(--box-color);
	--green-filter: drop-shadow(0 0 2px rgba(0, 255, 0, 0.8)) brightness(1.2);
	--decorative-font: Chakra Petch, Space Mono, monospace;
	--heading-font: Londrina Outline, Archivo, sans serif;
	--body-font: Inter, Opens Sans, sans serif;
	--alt-heading-font: Archivo, sans-serif;
	font-size: 16px;
}

/**************************************************************/
/*********** Essential Elements of  ***************************/
/**********  PRIMARY LANDING PAGE SECTIONS ********************/
/***************** Begining w/ Mobile-First *******************/
/**************************************************************/

/************************* Base Styles ************************/

body.landing-body {
	background: linear-gradient(rgba(26, 26, 35, 0.75), rgba(26, 26, 35, 0.75)),
		url("../../assets/images/MarbleBackGround.webp") no-repeat center center fixed;
	background-size: cover;
	display: flex;
	flex-direction: column;
	gap: 1em;
	padding-top: 1rem;
	min-height: 100dvh; /* Back to min-height */
	position: relative;
	overflow-x: hidden;
	overflow-y: hidden;
	justify-content: flex-end;
}

header.landing-header {
	width: 95vw;
	display: flex;
	flex-direction: column;
}

nav.landing-nav {
	opacity: 0;
	will-change: contents, transform, opacity;
	display: flex;
	flex-direction: row;
	align-items: center;
	transform: translateX(-100%);
	animation: 1000ms ease-out 3.28339ms 1 normal forwards running slideInNav;
	background: var(--box-color);
	border-top: var(--small-border);
	border-right: var(--small-border);
	border-bottom: var(--small-border);
	justify-content: center;
}

#nav-animation {
    /* Placeholder - ensures .show class doesn't cause issues */
}

#nav-animation.show {
    opacity: 1 !important;
    transform: translateX(0) !important;
    animation: none !important; /* Overrides slideInNav for instant display */
}

@keyframes slideInNav {
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

nav.landing-nav ul.nav-links {
	list-style: none;
	padding: .75rem;
	margin: 0;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	gap: 1.5rem;
	font-size: 1.15rem;
	transition: all 0.8s ease-out;
}

/* Individual nav links smooth repositioning */
nav.landing-nav ul.nav-links li {
    transition: all 0.8s ease-out;
}

#logo-container {
	opacity: 0;
	pointer-events: none;
	width: 110px;
	height: 110px;
	flex-shrink: 0;
	transform: translateX(-100px);
	transition: transform 1s ease-out, opacity 1s ease-out, width 1s ease-out, height 1s ease-out;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding: 0;
}

#logo-container img {
    width: 100%;
    height: auto;
    object-fit: contain;
}


#logo-container.show {
	opacity: 1;
	pointer-events: auto;
	transform: translateX(0);
}

.logo-link {
	transition: transform 0.3s ease-in-out;
	display: flex;
}

main.landing-main {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

/*Slides in from right*/

h1.landing {
	font-family: var(--body-font);
	font-weight: 100;
	color: var(--primary-text);
	line-height: 1.2;
	text-align: center;
	margin: 0 0 0 auto;
	padding: .5rem;
}

.break1 {
	display: none;
}
.break1-5 {
	display: inline;
}
.break2 {
	display: none;
}

#h1-animation {
	opacity: 0;
	transform: translateX(100%);
	transition: transform 0.8s ease-out, opacity 0.8s ease-out;
	background-color: var(--box-color);
	border-left: var(--small-border);
	border-top: var(--small-border);
	border-bottom: var(--small-border);
	width: 95vw;
	will-change: transform, opacity;
}

#h1-animation.show {
	opacity: 1;
	transform: translateX(0);
}

/*Slides up from bottom*/

#landing-content {
    opacity: 0;
    transform: translateY(100%);
    transition: transform 0.8s ease-out, opacity 0.8s ease-out;
    display: flex;
    flex-direction: column;
    background: var(--box-color);
    border-left: var(--small-border);
    border-top: var(--small-border);
    border-right: var(--small-border);
    text-align: center;
    will-change: transform, opacity;
    width: 80vw;
    max-width: 800px;
    margin: auto auto 0 auto;
    min-height: 0;              /* let content determine height */
    padding: 1.25rem 1rem 1.5rem;
    gap: 1.5rem;                
    /* THIS IS THE KEY — makes children respond to actual space */
    container-type: size;
    container-name: landing-box;
    height: 60vh;
}

#landing-content.show {
	opacity: 1;
	transform: translateY(0);
}

/*Inside landing-content*/

h2.landing {
	font-family: var(--decorative-font);
	color: var(--primary-text);
	font-weight: lighter;
	line-height: 1.3;
}

.landing-intro {
	font-family: var(--body-font);
	letter-spacing: 0.015em;
	color: var(--primary-text);
	font-size: 1rem;
}

.landing-intro-br1 {
	display: inline;
}

.landing-thanks {
	font-family: var(--body-font);
	font-weight: bold !important;
	color: var(--primary-text);
	font-size: 1.125rem;
}

h2.landing,
.landing-intro,
.landing-thanks {
    flex-shrink: 1;
}

/***********************************************/
/*********** Small Screens: 576px+ *************/
/***********************************************/

@media (min-width: 576px) {
	nav.landing-nav {
		justify-content: space-around;
	}

	nav.landing-nav ul.nav-links {
		width: 100%;
		justify-content: space-evenly;
		font-size: 1.5rem
	}

	.break1 {
	    display: inline;
	}

	.break1-5 {
	    display: none;
	}

	#landing-content {
		justify-content: space-around;
		padding: 0 2rem;
	}

	h2.landing {
		font-size: 2.5rem;
	}
	.landing-intro, .landing-thanks {
		font-size: 1.5rem;
	}
}

/***********************************************/
/*************** Landing Page ******************/
/******** Media Queries for iPads/Tablets ******/
/***********************************************/

@media (min-width: 800px) and (max-width: 1050px) and (min-height: 1100px) and (max-height: 1400px) {
	#h1-animation {
		grid-row: 2/span 2;
		margin: 4rem 0;
		padding: 1rem;
		font-size: 2.5rem;
	}
}

/***********************************************/
/*********** Medium Screens: 768px+ ************/
/***********************************************/

@media (min-width: 768px){

	html:has(body.landing-body) {
	    overflow-y: hidden; /* Prevent vertical scrollbar during animation */
	  }

	body.landing-body {
		display: grid;
		grid-template-columns: repeat(12, minmax(0, 1fr));
		grid-template-rows: repeat(4, minmax(0, 1fr));
		gap: 24px;
		padding-top: 24px;
		 /* Keep this */
		position: relative;
		overflow-x: hidden;
		overflow-y: hidden;
		height: 100dvh;
		box-sizing: border-box;
	}

	header.landing-header {
		grid-column: 2/4;
		grid-row: 1 / span 3;
		margin-top: -24px;
		display: flex;
		width: auto;
		justify-content: space-evenly;
	}

	nav.landing-nav {
		opacity: 0;
		will-change: contents,transform, opacity;
		display: flex;
		flex-direction: column;
		align-items: center;
		overflow: hidden;
		width: 100%;
		min-height: 100%;
		padding: 0;
		transform: translateY(-100%);
		animation: slideInNav 1s ease-out forwards;
		background: var(--box-color);
		border-top:  0;
		border-left: 3px solid var(--primary-text);
		border-right: 3px solid var(--primary-text);
		border-bottom: 3px solid var(--primary-text);
	}

	nav.landing-nav ul.nav-links {
		flex-direction: column;
		align-items: center;
		height: 100%;
		justify-content: space-around;
	}

	#logo-container {
        transform: translateY(-100px);
		height: 80px;
        width: 80px;
    }
    
    #logo-container.show {
        transform: translateY(0);
        height: auto;
    }

	.logo-link {
		padding-top: 2em;
	}

	main.landing-main {
		grid-column: 1/-1;
		grid-row: 1/-1;
		display: grid;
		grid-template-columns: repeat(12, minmax(0, 1fr));
		grid-template-rows: repeat(8, minmax(0, 1fr));
		pointer-events: none;
	}

	h1.landing {
		grid-column: span 8/-1;
		grid-row: 2/span 2;
		display: flex;
		font-size: 2rem;
		line-height: 1.1;
		align-items: center;
		text-align: left;
		padding-top: 1rem;
		padding-right: 1rem;
		padding-bottom: 1rem;
		padding-left: 5%;
		margin: 1em 0;
	}
	
	.break1 {
	    display: inline;
	}

	.break1-5 {
	    display: none;
	}

	.break2 {
		display: none;
	}

	#h1-animation {
		width: auto
	}

	#landing-content {
        opacity: 0;
        pointer-events: none;
        transform: translateY(100%);
        transition: transform 0.8s ease-out, opacity 0.8s ease-out;
        grid-column: 6/span 6;
        grid-row: 4/ span 5;
        display: flex;
        flex-direction: column;
        background: var(--box-color);
        border-left: 3px solid var(--primary-text);
        border-top: 3px solid var(--primary-text);
        border-right: 3px solid var(--primary-text);
        justify-content: space-evenly;
        text-align: justify;
        padding: 0 2rem;
        margin: 0 0 2rem 0;
        will-change: transform, opacity;
        width: auto;
        min-height: auto;
    }

	h2.landing {
		font-size: 3vw;
		text-align: center;
	}

	.landing-intro, .landing-thanks {
			font-size: 1.25rem;
			text-align:  center;
	}
}

/***********************************************/
/************ Large Screens: 1200px+ ***********/
/***********************************************/

@media (min-width: 1200px) {

	#logo-container.show {
        height: auto;
        width: 8vw;
    }
	h1.landing {
		justify-content: left;
		padding-left: 2rem;
		font-size: 2.25rem;
		grid-column: 5/13;
	}

	.break1 {
		display: inline;
	}

	.break1-5 {
		display: none;
	}

	.break2 {
		display: none;
	}


}

/***********************************************/
/************ Large Screens: 1750px+ ***********/
/***********************************************/

@media (min-width: 1750px) {

	nav.landing-nav ul.nav-links {
		font-size: 2vw;
	}

	h1.landing {
		font-size: 4rem;
	}

    .landing-intro, .landing-thanks {
        font-size: 2.25rem;
        text-align: center;
    }
}

/****************************************/
/*********** CONTAINER QUERIES **********/
/***** Replace height media queries *****/
/****************************************/

/* When the box itself is short (covers iPhone SE, iPad landscape, etc.) */
@container landing-box (max-height: 300px) {
	
    h2.landing { 
		font-size: 1.5em;
	}
	
    .landing-intro {
		font-size: 1.1em;
	}
	
    .landing-thanks  { 
        font-size: 1.1em; 
        margin-top: 0.5rem;  /* fixed, not auto — prevents pushdown */
    }
}

/* When the box has moderate space */
@container landing-box (min-height: 301px) and (max-height: 500px) {
    
}

/* When the box is tall — let it breathe */
@container landing-box (min-height: 501px) {
	h2.landing {
		font-size: 2.25rem;
	}

	.landing-intro {
		font-size: 1.25em;
	}

	.landing-thanks {
		font-size: 1.25rem;
	}
}

/***********************************************/
/**** Exceptions: Associated LANDING Styles ****/
/**** Not Needing Adjustment w/Viewport ********/
/***********************************************/
nav a {
	font-family: var(--body-font);
	font-weight: 100;
	color: var(--primary-text);
	text-decoration: none;
}

nav a:hover {
	filter: var(--green-filter);
}

.logo-link:hover {
	transform: scale(.9);
}

main.landing-main > * {
	pointer-events: auto;
}

/*************** Landing-Info-Box ****************/

.landing-intro,
.landing-thanks {
	opacity: 0;
	transform: translateY(20px);
	/* Starting position for slide-up */
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.landing-intro.show,
.landing-thanks.show {
	opacity: 1;
	transform: translateY(0);
}

.hidden {
	opacity: 0 !important;
	pointer-events: none;
}

/********************************************/
/*************** End: Exceptions*************/
/********************************************/


/****************************************************/
/****** Essential Elements of HEART ANIMATIONS ******/
/***** For Styling Across Viewport Breakpoints ******/
/****************************************************/

.heart-animation-container {
	display: inline-block;
	position: relative;
	width: 1.5em;
	height: 1em;
	vertical-align: middle;
	margin: 0 0.2em;
}

/* Rain Column Positioning */

.heart-column {
	position: absolute;
	width: 0.3em;
	height: 0.3em;
	opacity: 0;
}

/* Small falling hearts */
.heart-small {
	width: 0.3em;
	height: 0.3em;
	display: block;
	filter: drop-shadow(0 0 2px rgba(0, 255, 0, 0.8)) brightness(1.2);
}
	
/* Large static heart */
.heart-large {
	position: absolute;
	width: 2em;
	height: auto;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	opacity: 0;
	filter: drop-shadow(0 0 4px rgba(0, 255, 0, 0.6));
}
/*********************************************/
/**** Exceptions: Associated HEART Styles ****/
/**** Do Not Need Adjustment w/Viewport ******/
/*********************************************/

/* Horizontal positions */
.l10 {
	left: 10%;
}

.l50 {
	left: 50%;
	transform: translateX(-50%);
}

/* Center align */
.l90 {
	left: 90%;
	transform: translateX(-100%);
}

/* Starting positions (above container) */
.t1 {
	top: -0.5em;
}

.t2 {
	top: -0.5em;
}

.t3 {
	top: -0.5em;
}

/* Animation States - Added via JS */
.heart-column.animate {
	animation: heart-fall 3s ease-in forwards;
}

.heart-column.animate .heart-small {
    animation: heart-spin 1s linear infinite;
}

.heart-column.animate.delay-1 {
	animation: heart-fall 3.5s ease-in forwards; /* Slower */
	animation-delay: 0s;
}

.heart-column.animate.delay-2 {
	animation: heart-fall 2.5s ease-in forwards; /* Faster */
	animation-delay: 0.3s;
}

.heart-column.animate.delay-3 {
	animation-delay: 0.6s;
}

.heart-large.show {
	animation: heart-fade-in 0.8s ease-out 2.5s forwards;
}
/**********************************/
/****** Keyframe Animations *******/
/**********************************/
@keyframes heart-fall {
	0% {
		top: -0.5em;
		opacity: 0;
	}

	5% {
		opacity: 1;
	}

	85% {
		opacity: 1;
	}

	100% {
		top: calc(100% + 2em);
		opacity: 0;
	}
}

@keyframes heart-spin {
	to {
		transform: rotateY(180deg);
	}
}

@keyframes heart-fade-in {
	from {
		opacity: 0;
		transform: translate(-50%, -50%) scale(0.8);
	}

	to {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}
}
/********************************************/
/*************** End: Exceptions*************/
/********************************************/

/*************************************************/
/*************************************************/
/******** End: Heart Animation Sequence **********/
/*************************************************/
/*************************************************/

/*********** No Animations on Reload *************/
.skip-animations * {
    animation-delay: 0s !important;
    transition-delay: 0s !important;
    animation-duration: 0s !important;
    transition-duration: 0s !important;
}

/*************************************************/
/*************************************************/
/*************** Global Pages Styles *************/
/*************************************************/
/*************************************************/

body.pages-body {
	background-color: #1a1a23;
	display: flex;
	flex-direction: column;
	gap: 12px;
	position: relative;
	align-items: center;
	margin: 0 auto;
	width: 100%;
	overflow-y: scroll;  /* Always show scroll behavior */
	scrollbar-width: none;  /* Firefox */
	--ms-overflow-style: none;  /* IE/Edge */
}

body.pages-body::-webkit-scrollbar {
    display: none;  /* Chrome/Safari */	
}

header.pages-header {
	display: flex;
	width: 90vw;
	justify-content: space-evenly;
	margin: 0 auto;
}

.pages-logo-link {
	align-self: flex-start; 
	margin-top: 0;
	padding: .5rem;
}

.pages-logo-container {
	animation: slideInFromTop 0.6s ease-out;
	transition: transform 0.5s ease-in-out;
}

.pages-logo-container:hover {
	transform: scale(.9);
}

nav.pages-nav {
	background: var(--box-color);
	border-left: 3px solid var(--primary-text);
	border-right: 3px solid var(--primary-text);
	border-bottom: 3px solid var(--primary-text);
	animation: slideInFromTop 0.6s ease-out 0.6s backwards;
	width: 100%;
	display: flex;
	align-self: stretch;
}

nav.pages-nav ul {
    display: flex;
    flex-direction: row;
    font-size: clamp(1.25rem, 5vw, 2rem);
    list-style: none;
    padding: 0;
    justify-content: space-evenly;
    width: 100%;
    align-items: center;
}

footer {
	display: flex;
	flex-direction: column;
	background: var(--box-color);
	border-top: 3px solid var(--primary-text);
	width:  100%;
	gap: 3vh;
	padding: 1em;
	color: var(--primary-text);
	font-family: var(--body-font);
	align-items: center;
	animation: upFromBottom 0.6s ease-in backwards;
	animation-delay: 1.4s;
}

.footer-left {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	align-items: center;
	justify-content: center;
}

.footer-break1 {
	display: inline;
}

.footer-break2 {
	display: inline;
}

.footer-title {
	font-family: var(--alt-heading-font);
	font-size: 1.5em;
	font-weight: bolder;
	border: var(--small-border);
	padding: .5rem;
}

address {
	text-align: center;
	font-style: normal;
	margin-bottom: 1vh;
}
footer h3 {
	font-size: calc(1rem + .75vw);
	font-style: italic;
	color: var(--digi-green);
}

nav.footer-nav {
	width: 100%;
	margin-bottom: 2vh;
}

nav.footer-nav a {
	font-size: 1rem;
	filter: var(--green-filter);
}



nav.footer-nav ul {
	list-style-type: none;
	display: flex;
	width: 100%;
	justify-content: space-evenly;
}

/*********************************************/
/******* Gobal Pages Media Queryies **********/
/*********************************************/

/***********************************************/
/*********** Small Screens: 576px+ *************/
/***********************************************/
@media (min-width: 576px) {

	.footer-break1 {
		display: none;
	}
	
	.footer-break2 {
		display: none;
	}
	
	nav.footer-nav a:hover {
		filter: var(--green-filter);
		color: var(--digi-green);
	}
}

/***********************************************/
/*********** Medium Screens: 768px+ ************/
/***********************************************/
@media (min-width: 768px) {

	.pages-logo-container {
		padding-left: 1rem;
	}

	footer {
		flex-direction: row;
		gap: 2.5rem;
		justify-content: space-evenly;
		padding: 2rem 8% 2rem 8%;
		align-items: flex-end;
		position:  relative;
	}

	.footer-left {
		align-items: flex-start;
		flex: 1;
	}
	address {
		text-align: left;
	}

	.footer-break1 {
		display: inline;
	}

	.footer-center {
	align-self: center;
	flex: 1;
	}
	nav.footer-nav {
		width: auto;
		margin: 0 auto;
		line-height: 1.5;
		/* flex: 1; */
	}

	nav.footer-nav ul {
		flex-direction: column;
		align-items: flex-end;
	}

	nav.footer-nav a {
		font-size: 1.25rem;
	}


}

/*********************************************/
/************* Digital--Portfolio ************/
/*********************************************/

main.main-digimedi {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-auto-rows: auto;
	gap: 24px;
	margin-top: 5%;
	font-family: var(--body-font);
	font-size: clamp(4rem, 7vw, 16rem);
	opacity: 0;
	animation: fadeIn 0.6s ease-in forwards;
	animation-delay: 0.9s;
	margin: 9vh auto;
	width: 95vw;
	max-width: 460px;
}

/*Contiained in main.main-digimedi Grid*/
h1#digimedi-h1 {
	text-wrap: nowrap;
	grid-column: 1/13;
	grid-row: 1;
	align-items: center;
	font-family: var(--heading-font);
	font-size: clamp(3.75rem, 16vw, 7rem);
	color: var(--primary-text);
	text-align: center;
	width: 90%;
	padding: 0 !important;
	margin: 0 auto;
	line-height: 1;
}



/*Contiained in main.main-digimedi Grid*/
main.main-digimedi .illus-container {
	grid-column: 1/13;
	grid-row: 2;
}

/***********************************************/
/*********** Small Screens: 576px+ *************/
/***********************************************/

@media (min-width: 576px) {
	main.main-digimedi {
		width: 95vw;
		max-width: 100%;
	}

	h1#digimedi-h1 {
	    font-size: clamp(6rem, 14vw, 9rem);
	    text-wrap: nowrap;
	}	

	.main-digimedi .illus-container p {
		color: var(--primary-text);
		display: inline;
	}

}

/***********************************************/
/*********** Medium Screens: 768px+ ************/
/***********************************************/

@media (min-width: 768px){
	main.main-digimedi {
	width: 88vw;
	max-width: 774px;
	}
	
}

/***********************************************/
/*********** Regular Screens: 992px+ ***********/
/***********************************************/

/*@media (min-width: 992px) {
	main.main-digimedi {
	width: 873px;
	}
}*/

/*****************************************/
/******** Global Portfolio Stylings ******/
/*****************************************/

/* Base portfolio entry structure */
.portfolio-entry {
  position: relative;
  border: var(--med-lg-border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--box-color);
	   /* Red tint */
   /* Temporary - forces visibility */
}

.portfolio-section {
	font-family: var(--alt-heading-font);
	font-size: clamp(2rem, 7vw, 16rem);
	color: var(--primary-text);
	gap: 1rem;
	overflow: hidden;
	padding: 7vh 0 0 0;
	width: 88%;
	justify-self: center;
	position: relative;
	opacity: 0;
	transform: translateY(40px);
	transition: opacity 1s ease-out,
	            transform 1s ease-out,
	            filter 1s ease-out;
}

.portfolio-section.in-view {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.portfolio-section h2 {
	grid-column: 1 / 13;
	grid-row: 1;
	text-wrap: nowrap;
	font-size: clamp(2.25rem, 8vw, 16rem);
}

.portfolio-section h3 {
	grid-column: 1 / 13;
	grid-row: 2;
	text-wrap: wrap;
	font-family: var(--body-font);
	font-weight: 100;
	font-size: .65em;
	font-style: italic;
	align-self: start;
	margin: -12px 0 0 0; /* Pull up half the gap (24px / 2) */
}

.h2-break {
	display: inline;
}

	.h3-break1 {
		display: inline;
	}

.h3-break2 {
	display: inline;
}

/* Image container */
.portfolio-image {
  width: 100%;
  height: 100%;	
	position: relative;
}

.portfolio-image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.portfolio-image video {
	object-fit: fill;
	object-position: center;
	display: block;
	width: 100%;
	height: 100%;
}

/* Bottom gradient overlay with title */
.portfolio-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 70%, transparent 100%);
  padding-left: .5rem;
  padding-bottom: .5rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  z-index: 1;
  height: 30%;
}

.portfolio-title {
  color: white;
  font-size: 1.05rem;
  margin: 0;
  font-weight: 600;
  text-wrap: nowrap;
}

/*********************************************************************/
/* Controls testament boxes for #bespoke & #animations-intergrations */
.headline-divider {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  gap: 0.5rem;
  font-size: clamp(1.25rem, 5.33vw, 1.5rem);
  background-color: var(--primary-text);
  color: var(--background-color);
  line-height: 1.25;
}

.headline-divider span {
  display: block;
  font-weight: 700;
}

.headline-divider:not(#platform-3 .headline-divider) span:nth-child(2)::after {
  content: '';
  display: block;
  width: 95%;
  height: 3px;
  background-color: var(--background-color);
  margin: 0.5em auto 0;
}

/************************************/
/* Controls testament box #platform */

#platform .headline-divider {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.group-left span,
.group-right span {
    display: block;
}

.group-left::after {
    content: '';
    display: block;
    width: 95%;
    height: 3px;
    background-color: var(--background-color);
    margin: 0.5em auto 0;
}

/********************************************************/
/********* Pop out panel with mini case studies *********/
/********************************************************/

/* Info toggle button triggers information panel to open */
.info-toggle {
  background: none;
  border: none;
  color: white;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
}

.info-toggle:hover,
.info-toggle:focus {
  transform: scale(1.1);
  color: #4A90E2; /* Adjust to your accent color */
}

.info-toggle:focus {
  outline: 2px solid #4A90E2;
  outline-offset: 2px;
  border-radius: 50%;
}


/* Info panel positioning - larger than grid area, centered */
.info-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90vw;
  max-width: 500px;
  aspect-ratio: 1 / 1;
  background: rgba(69, 69, 69, 0.95);
  padding: 3rem 2rem 2rem 2rem;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.info-panel[hidden] {
  display: flex; /* Override hidden for animation */
}

.info-panel.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* Close button - upper right corner, same position as toggle */
.info-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: none;
  border: none;
  color: white;
  font-size: 1.75rem;
  cursor: pointer;
  padding: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, color 0.2s ease;
  z-index: 10;
}

.info-close:hover,
.info-close:focus {
  transform: scale(1.1);
  color: #4A90E2;
}

.info-close:focus {
  outline: 2px solid #4A90E2;
  outline-offset: 2px;
  border-radius: 50%;
}

/* Content wrapper for scrolling if needed */
.info-content {
  overflow-y: auto;
  max-height: 100%;
  padding-right: 0.5rem;
  flex: 1;
  /* Hide scrollbar for all browsers */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

.info-content::-webkit-scrollbar {
  display: none; /* Chrome/Safari/Opera */
}

/* Tech stack styling */
.tech-stack {
  color: var(--primary-text);
  font-size: 0.85rem;
  font-weight: 600;
  margin: 13px 0 1.25rem 0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: center;
}

/* Info list adjustments for the panel */
.info-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem 0;
  color: white;
  text-align: left;
}

.info-list li {
  padding: 0.65rem 0;
  font-size: 0.95rem;
  line-height: 1.6;
  position: relative;
  padding-left: 1.5rem;
  text-wrap: balance;
}

.info-list li::before {
  content: "\f138";
  font-family: "Font Awesome 6 Free";
  position: absolute;
  left: 1%;
  top: 40%;
  color: var(--box-color);
  filter: var(--green-filter);
  font-size: .8rem;
  font-weight: 900; /* Required for solid icons */
  text-align: left;
}

/* Project link */
.project-link {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background: var(--primary-text);
  color: #333;
  text-decoration: none;
  border-radius: 4px;
  font-weight: 600;
  text-align: center;
  transition: transform 0.2s ease, background 0.2s ease;
  align-self: center;
  width: 100%;
  max-width: 200px;
  margin: 0 auto;
}

.project-link:hover,
.project-link:focus {
  transform: translateY(-2px);
  color: var(--primary-text);
  filter: var(--green-filter);
  background: linear-gradient(120deg, var(--digi-green), var(--box-color), var(--background-color));
  background-size: 200% 100%;
  background-position: 100% 0;
  transition: background-position .5s;
}

.project-link:focus {
  outline: 2px solid #4A90E2;
  outline-offset: 2px;
}

.scroll-indicator {
  position: absolute;
  bottom: 1.5rem;
  right: 1.5rem;
  color: var(--box-color);
  filter: var(--green-filter);
  font-size: 1rem;
  pointer-events: auto; 
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1001;
  cursor: pointer; 
}

.scroll-indicator.visible {
  opacity: 1;
  animation: pulse-glow 2s ease-in-out infinite;
}

/***********************************************/
/*********** Small Screens: 576px+ *************/
/***********************************************/

@media (min-width: 576px) {
	.project-link {
		font-size: 2rem;
	}

	.info-list {
		margin: 0;
	}
}


@keyframes pulse-glow {
  0%, 100% { 
    opacity: 0.4;
    transform: translateY(0);
  }
  50% { 
    opacity: 1;
    transform: translateY(4px);
  }
}

/***********************************************/
/********* End Info Panel Selectors ************/
/**********************************************/

/***********************************************/
/************ Lightbox Selectors ***************/
/***********************************************/


/* Lightbox styles */
.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox.is-open {
  opacity: 1;
}

.lightbox-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  cursor: zoom-out;
}

.lightbox-content {
  position: relative;
  z-index: 1;
  animation: lightboxZoomIn 0.3s ease;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

@keyframes lightboxZoomIn {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.lightbox-content img {
  display: block;
  background: #000;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0;
}

.lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 50%;
  font-size: 2rem;
  width: 44px;
  height: 44px;
  border: none;
  color: white;
  cursor: pointer;
  transition: transform 0.2s ease, color 0.2s ease;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-close:focus {
  outline: 2px solid #4A90E2;
  outline-offset: 4px;
}

/***********************************************/
/*********** Small Screens: 576px+ *************/
/***********************************************/

@media (min-width: 576px) {
  /* Transition: slightly smaller than full screen */
  .lightbox-content {
    width: 90vw;
    height: 90vh;
  }
  
  .lightbox-content img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    border-radius: 4px;
  }
}

/***********************************************/
/*********** Medium Screens: 768px+ ************/
/***********************************************/

@media (min-width: 768px) {
  /* Desktop: 5/8ths of screen, centered */
  .lightbox-content {
    max-width: 62.5%; /* 5/8ths */
    max-height: 62.5%;
  }
  
  .lightbox-close {
    top: -60px;
    right: 0;
    background: none;
    font-size: 2.5rem;
    width: 48px;
    height: 48px;
  }
  
  .lightbox-close:hover,
  .lightbox-close:focus {
    transform: scale(1.15);
    color: #4A90E2;
  }
}

/***********************************************/
/*********** Regular Screens: 992px+ ***********/
/***********************************************/

@media (min-width: 992px) {
  /* Slightly larger on bigger screens */
  .lightbox-content {
    max-width: 70%;
    max-height: 70%;
  }
}

/***********************************************/
/************ Large Screens: 1200px+ ***********/
/***********************************************/

@media (min-width: 1200px) {
  /* Keep comfortable size, not too large */
  .lightbox-content {
    max-width: 75%;
    max-height: 75%;
  }
}

/***********************************************/
/********* End og Lightbox Selectors ***********/
/***********************************************/

/***********************************************/
/*********** Small Screens: 576px+ *************/
/***********************************************/

@media (min-width: 576px) {
	.headline-divider {
		font-size: 1.35rem;
	}
}

/***********************************************/
/*********** Medium Screens: 768px+ ************/
/***********************************************/

@media (min-width: 768px){

	.h3-break2 {
	display: none;
	}
	
    .portfolio-section h3 {
		font-size: .5em;
	}
	
	.info-panel {
    max-width: 600px;
  }
  
  .tech-stack {
    font-size: 0.85rem;
  }

	.info-list {
		margin-bottom: 1em; 
	}
  
  .info-list li {
    font-size: 1rem;
    padding-left: 2rem;
  }
	
	.project-link {
        font-size: 3rem;
        text-wrap: nowrap;
        max-width: 300px;
    }

	/************************************/
	/* Controls testament box #platform */
	
   #platform .headline-divider {
        flex-direction: row;
        align-items: center;
        justify-content: space-evenly;
    }
    
    .group-left {
        text-align: center;
        order: 1;
    }
    
    .group-right {
        text-align: center;
        order: 3;
    }
    
    /* Remove horizontal line, add vertical pipe */
    .group-left::after {
        display: none;
    }

	/* Remove dividing line specifically for platform-3 */
	#platform-3 .headline-divider span:nth-child(2)::after {
	    display: none;
	}

	#platform-3 .headline-divider::after {
        content: '';
        display: block;
        width: 3px;
        height: 80%; /* Or use a fixed height like 60px */
        background-color: var(--background-color);
        order: 2;
        flex-shrink: 0; /* Prevents it from shrinking */
    }
	
}

/***********************************************/
/*********** Regular Screens: 992px+ ***********/
/***********************************************/

@media (min-width: 992px) { 

	header.pages-header {
	    width: 50rem;
	}

	main.main-digimedi {
        max-width: 988px;
        margin-top: 6vh;
    }
	
    main.main-digimedi .illus-curly-left path {
        transform: translateX(-32px);
    }
    
    main.main-digimedi .illus-curly-right path {
        transform: translateX(32px);
    }

	.portfolio-section h3 {
	        font-size: 42px;
	   }	

    .info-list {
        margin-bottom: .75rem;
    }
}

@media (min-width: 1024px) and (max-width: 1366px) and (max-height: 900px) {
  main.main-digimedi {
    margin-top: 2vh;
  }

	main.main-digimedi .illus-container {
		width: 92%;
	}
}

/***********************************************/
/************ Large Screens: 1200px+ ***********/
/***********************************************/

@media (min-width: 1200px) {
	.info-list {
        margin-bottom: .25em;
    }
}

/***********************************************/
/************ Large Screens: 1750px+ ***********/
/***********************************************/

@media (min-width: 1750px) {
	.info-list {
        margin-bottom: 0;
    }
}


/*********************************************/
/*********************************************/
/******** Individual Portfolio Sections ******/
/*********************************************/
/*********************************************/

/*****************************************/
/************** Bespoke Built ************/
/*****************************************/

/*Contiained in main.main-digimedi Grid*/
/* Main section grid - mobile */
#bespoke {
   grid-column: 1/13;
   grid-row: 3;
   display: grid;
   grid-template-columns: repeat(12, 1fr);
   grid-template-rows: repeat(16, 56px);
    /* No gaps - items connect with waves */
}

/***** Contained in #bespoke internal grid ******/
#bespoke-1 {
  grid-column: 1 / 13;
  grid-row: 3/6;
}

#bespoke-2 {
	grid-column: 1/7;
	grid-row: 6/10;
	position: relative;
}

#bespoke-2 .headline-divider span:nth-child(1) {
  letter-spacing: 0.6rem;
  padding-left: 0.6rem; /* Match letter-spacing */
}
#bespoke-2 .headline-divider span:nth-child(2) {
  letter-spacing: 0.3rem;
  padding-left: 0.3rem;
}
#bespoke-2 .headline-divider span:nth-child(3) {
  letter-spacing: 0.05rem;
  padding-left: 0.05rem;
}
#bespoke-2 .headline-divider span:nth-child(4) {
  letter-spacing: 0.6rem;
  padding-left: 0.6rem;
  margin-top: -3px;
}

#bespoke-icon1 {
	display: none;
}

#bespoke-icon2 {
	display: none;
}

#bespoke-icon3 {
	display: none;
}

#bespoke-3 {
	grid-column: 7/13;
	grid-row: 6/10;
}

#bespoke-4 {
	grid-column: 1/7;
	grid-row: 10/14;
}

#bespoke-5 {
	grid-column: 7/13;
	grid-row: 10/12;
}

#bespoke-icon2 {
	display: none;
}

#bespoke-6 {
	grid-column: 7/13;
	grid-row: 12/14;
}

#bespoke-6 .portfolio-image img {
  width: auto; /* Let width adjust */
  height: 95%; /* Fill container height */
  max-width: none; /* Allow overflow */
  object-fit: cover;
  object-position: center;
  display: block;
  position: absolute;
  left: 50%;
  transform: translateX(-50%); /* Center horizontally */
  bottom: 2%;
}

#bespoke-7 {
	grid-column: 1/13;
	grid-row: 14/17;
}

/***********************************************/
/*********** Small Screens: 576px+ *************/
/***********************************************/

@media (min-width: 576px) {
  #bespoke {
	width: 90%;
    gap: 2vh; /* Reduce gap to tighten */
    grid-template-rows: auto auto repeat(10, 60px);
  }

  .portfolio-section h2 {
    font-size: clamp(3rem, 7vw, 11rem);
  } 
	
	.h2-break {
		display: none;
	}

	.h3-break1 {
		display: none;
	}

  .portfolio-section h3 {
    margin: -16px 0 0 0;
  }

  #bespoke-1 {
    grid-column: 1 / 9;
    grid-row: 3 / 6;
  }

  #bespoke-1 img {
	  aspect-ratio: 16/9;
  }

  #bespoke-2 {
    grid-column: 9 / 13;
    grid-row: 3 / 7;
  }

  #bespoke-icon1 {
    grid-column: 9/13;
    grid-row: 7/9;
    display: block;
    margin: 0 auto;
    width: 100%;
    align-self: center;
  }
	
  #bespoke-3 {
    grid-column: 1 / 5;
    grid-row: 6/10;
  }

  #bespoke-4 {
    grid-column: 9 / 13;
    grid-row: 9/13;
  }

  #bespoke-5 {
    grid-column: 5 / 9;
    grid-row: 6/8;
  }   

  #bespoke-6 {
    grid-column: 5 / 9;
    grid-row: 8/10;
  }

  #bespoke-7 {
    grid-column: 1 / 9;
    grid-row: 10/13;
  }
}

/***********************************************/
/*********** Medium Screens: 768px+ ************/
/***********************************************/

@media (min-width: 768px){
    #bespoke {
		width: 100%;
		grid-template-rows: auto auto repeat(8, 60px);
	}

	#bespoke-1 {
	    grid-column: 1 / 7;
	    grid-row: 3 / 6;
	  }

	 #bespoke-2 {
	    grid-column: 10/13;
	    grid-row: 8/11;
	  }
	
	  #bespoke-icon1 {
	    grid-column: 1/4;
	    grid-row: 6/8;
	    width: 100%;
	  }

		#bespoke-icon2 {
			grid-column: 7/10;
			grid-row: 5/7;
			display: block;
			width: 66%;
			align-self: center;
		}

	#bespoke-icon3 {
			grid-column: 10/13;
			grid-row: 7;
			display: block;
			width: 100%;
			align-self: center;
			transform: scaleX(-1);
	}
	
	  #bespoke-3 {
	    grid-column: 10 / 13;
	    grid-row: 3 / 7;
	  }
	
	  #bespoke-4 {
	    grid-column: 7/10;
	    grid-row: 7/11;
	  }
	
	  #bespoke-5 {
	    grid-column: 4/7;
	    grid-row: 6/8;
	  }   
	
	  #bespoke-6 {
	    grid-column: 7 / 10;
	    grid-row: 3 / 5;
	  }
	
	  #bespoke-7 {
	    grid-column: 1/7;
	    grid-row: 8 / 11;
	  }
}

/***********************************************/
/*********** Regular Screens: 992px+ ***********/
/***********************************************/

@media (min-width: 992px) { 

    .portfolio-section h2 {
        font-size: 4rem;
    }

    .h3-break2 {
        display: inline;
    }

	#bespoke {
		width: 733px;
	}
}	
	
/*Contiained in main.main-digimedi Grid*/
#platform {
	grid-column:1/13;
	grid-row: 4;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-auto-rows: auto;
	gap: 1rem; /* No gaps - items connect with waves */
	overflow: hidden;
	padding: 7vh 0 0 0;
	width: 88%;
	justify-self: center;
	position: relative;
}

/*Contiained in #platform Internal Grid*/

#platform-1 {
	grid-column: 1/13;
	grid-row: 3/5;
}


#platform-icon1 {
    display: none;
} 

#platform-2 {
	grid-column: 1/7;
	grid-row: 5/8;
}

#platform-3 {
	grid-column: 7/13;
	grid-row: 5/8;
}

#platform-3 .headline-divider span:nth-child(1) {
  letter-spacing: 0.1rem;
  padding-left: 0.1rem; /* Match letter-spacing */
}
#platform-3 .headline-divider span:nth-child(2) {
  letter-spacing: 0.09rem;
  padding-left: 0.09rem;
}
#platform-3 .headline-divider span:nth-child(3) {
  letter-spacing: 0.15rem;
  padding-left: 0.15rem;
}
#platform-3 .headline-divider span:nth-child(4) {
  letter-spacing: 0.5rem;
  padding-left: 0.5rem;
  margin-top: -3px;
}

#platform-icon2 {
    display: none;
} 

#platform-4 {
	grid-column: 1/13;
	grid-row: 8/10;
}

#platform-5 {
	grid-column: 1/7;
	grid-row: 10/13;
}

#platform-6 {
	grid-column: 7/13;
	grid-row: 10/13;
}

/***********************************************/
/*********** Small Screens: 576px+ *************/
/***********************************************/

@media (min-width: 576px) {
	#platform {
		width: 90%;
		gap: 2vh;
		grid-template-rows: auto auto repeat(11, 60px);
	}

	#platform-1 {
	    grid-column: 1 / 9;
	    grid-row: 3 / 6;
	}

	#platform-icon1 {
	    grid-column: 9/13;
	    grid-row: 3/6;
	    display: block;
	    margin: 0 auto;
	    width: clamp(120px, 20vw, 125px);
	    align-self: center;
	} 

	#platform-4 {
		grid-column: 5/13;
		grid-row: 6/9;
	}

	#platform-3 {
		grid-column: 5/9;
		grid-row: 10/14;
	}

	#platform-icon2 {
        grid-column: 5/13;
        grid-row: 9/10;
        display: block;
        margin: 0 auto;
        width: 78%;
        align-self: center;
 } 

	#platform-2 {
		grid-column: 1/5;
		grid-row: 6/10;
	}

	#platform-5 {
		grid-column: 1/5;
		grid-row: 10/14;
	}
	
	#platform-6 {
		grid-column: 9/13;
		grid-row: 10/14;
	}
}

/***********************************************/
/*********** Medium Screens: 768px+ ************/
/***********************************************/

@media (min-width: 768px){
	#platform {
		width: 100%;
		grid-template-rows: auto auto repeat(8, 60px);
	}
	#platform-1 {
		grid-column: 1/7;
		grid-row: 3/6;
	}
	
	
	#platform-icon1 {
	grid-column: 7/10;
	grid-row: 3/6;
	width: clamp(118px, 13vw, 124px);
	} 
	
	#platform-2 {
		grid-column: 10/13;
		grid-row: 3/7;
	}
	
	#platform-3 {
		grid-column: 4/10;
		grid-row: 6/8;
	}

	#platform-icon2 {
	grid-column: 1/4;
	grid-row: 6;
	width: 95%;
	} 

	#platform-4 {
		grid-column: 4/10;
		grid-row: 8/11;
	}
	
	#platform-5 {
		grid-column: 1/4;
		grid-row: 7/11;
	}
	
	#platform-6 {
		grid-column: 10/13;
		grid-row: 7/11;
	}
}

/***********************************************/
/*********** Regular Screens: 992px+ ***********/
/***********************************************/

@media (min-width: 992px) { 	
	#platform {
		width: 733px;	
	}
}	
	
/*Contiained in main.main-digimedi Grid*/
#animations-integrations {
	grid-column:1/13;
	grid-row: 5;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-auto-rows: auto;
	gap: 1rem; /* No gaps - items connect with waves */
	overflow: hidden;
	padding: 7vh 0 0 0;
	width: 88%;
	justify-self: center;
	position: relative;
}

/*Contaiined in #animations-integrations Internal Grid*/

#anima-integra-icon1 {
	display: none;
}

#anima-integra-icon2 {
	display: none;
}

#animations-integrations-1 {
	grid-column: 1/13;
	grid-row: 3/5;
}

#animations-integrations-2 {
	grid-column: 1/13;
	grid-row: 5/8;
}

#animations-integrations-3 {
	grid-column: 1/7;
	grid-row: 8/10;
}

#animations-integrations-4 {
	grid-column: 7/13;
	grid-row: 8/10;
}

#animations-integrations-4 .headline-divider span:nth-child(1) {
  letter-spacing: 0.3rem;
  padding-left: 0.3rem; /* Match letter-spacing */
}
#animations-integrations-4 .headline-divider span:nth-child(2) {
  letter-spacing: 0.15rem;
  padding-left: 0.15rem;
}
#animations-integrations-4 .headline-divider span:nth-child(3) {
  letter-spacing: 0.2rem;
  padding-left: 0.2rem;
}
#animations-integrations-4 .headline-divider span:nth-child(4) {
  letter-spacing: 0.2rem;
  padding-left: 0.2rem;
  margin-top: -3px;
}

#animations-integrations-5 {
	grid-column: 1/7;
	grid-row: 10/12;
}

#animations-integrations-6 {
	grid-column: 7/13;
	grid-row: 10/12;
}

#animations-integrations-7 {
	grid-column: 1/13;
	grid-row: 12/15;
}

/***********************************************/
/*********** Small Screens: 576px+ *************/
/***********************************************/

@media (min-width: 576px) {
	#animations-integrations {
		width: 90%;
		gap: 2vh;
		grid-template-rows: auto auto repeat(12, 60px);
	}	

	#anima-integra-icon1 {
		grid-column: 1/5;
		grid-row: 4/5;
		display: block;
		margin: 0 auto;
		width: 94%;
		align-self: center;
	}
	
	#anima-integra-icon2 {
	    grid-column: 5/9;
	    grid-row: 9/12;
	    display: block;
	    margin: 0 auto;
	    width: 55%;
	    align-self: center;
	}
	
	#animations-integrations-1 {
		grid-column: 5/13;
		grid-row: 3/6;
	}

	#animations-integrations-2 {
		grid-column: 1/9;
		grid-row: 6/9;
	}
	
	#animations-integrations-3 {
		grid-column: 9/13;
		grid-row: 6/10;
	}
	
	#animations-integrations-4 {
		grid-column: 1/5;
		grid-row: 9/13;
	}

	#animations-integrations-5 {
	grid-column: 1/5;
	grid-row: 13/15;
	}

	#animations-integrations-6 {
		grid-column: 9/13;
		grid-row: 10 / 12;
	}
	
	#animations-integrations-7 {
		grid-column: 5/13;
		grid-row: 12/15;
	}
}

/***********************************************/
/*********** Medium Screens: 768px+ ************/
/***********************************************/

@media (min-width: 768px){
	#animations-integrations {
		width: 100%;
		grid-template-rows: auto auto repeat(9, 60px);
	}

/*Contaiined in #animations-integrations Internal Grid*/

	#anima-integra-icon1 {
		grid-column: 10/13;
		grid-row: 9/13;
		width: clamp(153px,18vw, 166px);
		align-self: self-end;
		margin-bottom: 2vh;
	}
	
	#anima-integra-icon2 {
	    grid-column: 4/7;
	    grid-row: 3/6;
	    display: block;
	    margin: 0 auto;
	    width: clamp(105px, 12vw, 109px);
	    align-self: center;
	}
	
	#animations-integrations-1 {
		grid-column: 7/13;
		grid-row: 3/6;
	}

	#animations-integrations-2 {
		grid-column: 1/7;
		grid-row: 9/12;
	}
	
	#animations-integrations-3 {
		grid-column: 1/4;
		grid-row: 3/7;
	}
	
	#animations-integrations-4 {
		grid-column: 7/10;
		grid-row: 9/12;
	}

	#animations-integrations-5 {
	grid-column: 1/4;
	grid-row: 7/9;
	}

	#animations-integrations-6 {
		grid-column: 9/13;
		grid-row: 6 / 9;
	}
	
	#animations-integrations-7 {
		grid-column: 4/9;
		grid-row: 6/9;
	}
}

/***********************************************/
/*********** Regular Screens: 992px+ ***********/
/***********************************************/

@media (min-width: 992px) { 	
	#animations-integrations {
		width: 733px;	
	}
}

/*********************************************/
/******************* About *******************/
/*********************************************/

main.main-about {
	height: auto;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 3em;
	justify-content: center;
	font-family: var(--body-font);
	opacity: 0;
	animation: fadeIn 0.6s ease-in forwards;
	animation-delay: 0.9s;
	margin: 2rem auto;
	align-items: center;
}

h1.about-h1 {
	color: var(--primary-text);
	text-align: center;
	background: var(--box-color);
	margin: 0 auto;
	border: 1px solid var(--primary-text);
	padding: 1rem;
	width: clamp(269px, 69vw, 745px);
	font-size: clamp(1.5rem, 4vw, 3rem);
}

.about-p-styles {
	background: var(--box-color);
	color: var(--primary-text);
	border: var(--small-border);
	padding: 2em;
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 90%;
	opacity: 0;
	  transform: translateY(30px);
	  transition: opacity 0.6s ease, transform 0.6s ease;
}

.main-about h2 {
	font-style: italic;
	padding-bottom: 1em;
	text-decoration: underline;
}

.illus-container {
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
  width: 100%;
  margin: 0 auto;
}

.illustration {
  max-width: 100%;
  height: auto;
  display: block;
}

.illus-curly-left,
.illus-curly-right {
  width: 13vw;
  height: auto;
  flex-shrink: 0;
}

.illus-curly-left path,
.illus-curly-right path {
  fill: none;
  stroke: var(--primary-text);
  stroke-width: 8;
  stroke-linecap: round;
}

main.main-digimedi .illus-curly-left path {
    transform: translateX(-32px);
}

main.main-digimedi .illus-curly-right path {
    transform: translateX(32px);
}

.main-about p {
	font-size: 1.25rem;
	text-align: center;
	text-wrap: pretty;
	padding-bottom: 1em;
}

/**************************************************/
/************* Resume Button Controls *************/
/**************************************************/

.resume-download {
	display: flex;
	flex-direction: column;
	color: var(--primary-text);
}

#resume-heading {
	font-size: 1em;
	width: 80vw;
	margin: 0 auto;
}

/* Visually hidden but readable by screen readers */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.btn-download {
  display: inline-block;
  text-decoration: none;
  font-family: var(--alt-heading-font);
  color: var(--primary-text);
  font-size: 1em;
  font-weight: bolder;
  border: var(--small-border);
  border-radius: 10px;
  padding: .5rem;
  margin: 0 auto;
}

/***********************************************/
/*********** Small Screens: 576px+ *************/
/***********************************************/

@media (min-width: 576px) {
	.illus-curly-left,
	.illus-curly-right {
		width: clamp(88px, 13vw, 104px);
	}
}

/***********************************************/
/*********** Medium Screens: 768px+ ************/
/***********************************************/

@media (min-width: 768px) {

	.about-p-styles {
	  width: 75vw;
	}

	.illus-curly-left, .illus-curly-right {
	width: clamp(115px, 14vw, 130px);
	}
	
}

/***********************************************/
/*********** Regular Screens: 992px+ ***********/
/***********************************************/

@media (min-width: 992px) {
	main.main-about .illustration {
		width: 732px;
	}

	.about-p-styles {
		width: 900px;
	}
}

/***********************************************/
/************ Large Screens: 1200px+ ***********/
/***********************************************/

@media (min-width: 1200px) {

	.illus-container{
		width: 100%;
	}
}

.about-p-styles.in-view {
  opacity: 1;
  transform: translateY(0);
}

/***********************************************/
/******** Media Queries for iPads/Tablets ******/
/***********************************************/

@media (min-width: 1024px) and (max-width: 1180px) and (min-height: 768px) and (max-height: 820px) {

	main.main-about .illus-container {
		width: 75%;
	}
}

/**********************************************/
/*************** Contact Page *****************/
/**********************************************/


.contact-page {
    width: 95%;
    max-width: 730px;
    margin: 0 auto;
    padding: 2rem 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: auto;
    gap: 12px;
    color: var(--primary-text);
}

/* ===========================
   FIND ME SECTION
   =========================== */
.find-me-section {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 12px;
    width: 100%;
    margin: 0 auto;
    grid-column: 1/13;
    grid-row: 1/3;
}

.upper-title {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 12px;
    grid-column: 1/13;
    grid-row: 1/3;
    width: 100%;
    margin: 0 auto;
}

.find-word {
    grid-column: 1/13;
    grid-row: 1;
    width: 100%;
    height: auto;
    display: block;
}

.me-word {
    grid-column: 1/8;
    grid-row: 2;
    width: 100%;
    height: auto;
    display: block;
}

/*******************************************/
/************* CONTACT INFO ****************/
/*******************************************/
.contact-info {
    grid-column: 7 / 13;
    grid-row: 2;
    display: flex;  
    flex-direction: column;
    gap: 0;  
    font-family: var(--body-font);
    font-weight: 100;
    text-align: right;
    max-width: 100%;
    min-width: 0;  /* Critical: allows flex items to shrink below content size */
    overflow: hidden;  /* Prevents overflow */
    justify-content: flex-start;
    align-self: end;
}

.contact-name {
    color: var(--color-text-white);
    font-weight: 100;
    font-size: 1em;
}

a.contact-email {
	color: var(--digi-green);
}

a.contact-phone {
	writing-mode: vertical-rl;
    /* optional: control character orientation within the line */
	text-orientation: sideways;
	font-size: 1.5rem;
}

.contact-email,
.contact-phone {
    text-decoration: none;
    color: var(--color-accent);
    transition: opacity 0.3s ease;
    white-space: nowrap;
    /* overflow: hidden; */
}

.contact-name,
.contact-email,
.contact-phone {
    width: 100%;  /* Force to container width */
    min-width: 0;
    box-sizing: border-box;
      /* Tighter than 1 */
    margin: 0;
    padding: 0;  /* Remove any padding */
    
      /* Optically pull up */
}

.contact-email:hover,
.contact-email:focus,
.contact-phone:hover,
.contact-phone:focus {
    opacity: 0.7;
}

/***********************************************/
/*********** Small Screens: 576px+ *************/
/***********************************************/

@media (min-width: 576px) {
	.contact-info {
	    grid-column: 8 / 13;
	    grid-row: 2;
	}

	a.contact-phone {
	    font-size: clamp(2.25em, 6vw, 3em);
	    line-height: 1;
	}	

	.contact-name {
	    font-size: clamp(1.5em, 4vw, 2em);
	}
}

/***********************************************/
/*********** Medium Screens: 768px+ ************/
/***********************************************/

@media (min-width: 768px){
	
}

/* ===========================
   BICYCLE ANIMATION SECTION
   =========================== */
/* Animation container adjustments */
.bicycle-animation-container {
    grid-column: 1 / 13;
    grid-row: 4;
    /* margin: 4rem 0; */
    min-height: 150px;
    display: flex;
    align-items: baseline;
    position: relative;
    overflow: hidden;
}

.bicycle-animation-container::before {
    content: '';
    position: absolute;
    top: 0px;
    left: 0;
    width: 300%;
    height: 60px;
    opacity: 0.2;
    background: var(--primary-text);
    clip-path: polygon(
        /* First pattern (0-50%) - 4 mountains with good proportions */
        0% 100%, 8% 0%, 20% 100%,
        11% 100%, 22% 0%, 37% 100%,
        28% 100%, 36% 0%, 52% 100%,
        40% 100%, 48% 0%, 55% 100%,
        /* Exact duplicate shifted +50% (50-100%) */
        50% 100%, 58% 0%, 70% 100%,
        61% 100%, 72% 0%, 87% 100%,
        78% 100%, 86% 0%, 92% 100%,
        90% 100%, 98% 0%, 95% 100%
    );
    background-size: 100% 60px;
    z-index: -2;
}

@keyframes mountainScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.bicycle-animation::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 0;
    width: 300%;
    height: 50px;
    opacity: 0.20;
    background: radial-gradient(ellipse 26% 70px at 10% 50px, var(--primary-text) 50%, transparent 50%), 
    radial-gradient(ellipse 41% 98px at 30% 50px, var(--primary-text) 50%, transparent 50%), 
    radial-gradient(ellipse 35% 95px at 50% 50px, var(--primary-text) 50%, transparent 50%),                
    radial-gradient(ellipse 43% 85px at 70% 50px, var(--primary-text) 50%, transparent 50%),                
    radial-gradient(ellipse 27% 70px at 90% 50px, var(--primary-text) 50%, transparent 50%);
    background-size: 50% 50px;
    background-repeat: repeat-x;
    z-index: -1;
}

@keyframes hillsScroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);  
    }
}

.bicycle-animation-container::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 1%;
    background-image: repeating-linear-gradient(
        90deg,
        var(--primary-text) 0,
        var(--primary-text) 20px,    /* Fixed pixels */
        transparent 20px,
        transparent 40px             /* Pattern repeats every 40px */
    );
    background-size: 40px 100%;      /* Lock pattern size */
}

@keyframes dashScroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-400px);  /* Move exactly one pattern repeat */
    }
}

.bicycle-animation {
    width: 100%;
    height: 140px;
    position: relative;
}

/* Birds animations - birds swoop in from right, turn 180º, and exit right */

/* Bird wrapper */
.bird-wrapper {
    position: absolute;
    top: 30%;  /* Adjust vertical position as needed */
    right: 0;
    width: 100%;
    height: 100px;
    pointer-events: none;
    z-index: 10;
}

/* Bird 1 - enters first */
.bird1 {
    position: absolute;
    right: -200px;  /* Start off-screen right */
    width: 50px;
    height: auto;
    transform-origin: right center;
}

/* Bird 2 - enters 0.5s after bird1 */
.bird2 {
    position: absolute;
    right: -200px;  /* Start off-screen right */
    width: 50px;
    height: auto;
	transform-origin: right center;
}

/* Bird 1 animation - enter, flip, exit */
@keyframes bird1Flight {
    0% {
        right: -200px;
        transform: translateY(0) scaleX(1);
    }
    20% {
        right: 15%;
        transform: translateY(-30px) scaleX(1);  /* Swoop to position */
    }
    21% {
        right: 15%;
        transform: translateY(-30px) scaleX(1);  /* Hold position */
    }
    23% {
        right: 12%;
        transform: translateY(-30px) scaleX(-1);  /* Instant flip */
    }
    24% {
        right: 15%;
        transform: translateY(-30px) scaleX(-1);  /* Hold flipped */
    }
    27% {
        right: -200px;
        transform: translateY(0) scaleX(-1);  /* Swoop out */
    }
    28% {
        right: -200px;
        transform: translateY(0) scaleX(-1);
    }
	100% {
        right: -200px;
        transform: translateY(0) scaleX(-1);
    }
}

/* Bird 2 animation - same as bird1, 0.5s delay handled by animation-delay */
@keyframes bird2Flight {
    0% {
        right: -200px;
        transform: translateY(0) scaleX(1);
    }
    20% {
        right: 15%;
        transform: translateY(-30px) scaleX(1);  /* Swoop to position */
    }
    21% {
        right: 15%;
        transform: translateY(-30px) scaleX(1);  /* Hold position */
    }
    23% {
        right: 12%;
        transform: translateY(-30px) scaleX(-1);  /* Instant flip */
    }
    24% {
        right: 15%;
        transform: translateY(-30px) scaleX(-1);  /* Hold flipped */
    }
    30% {
        right: -200px;
        transform: translateY(0) scaleX(-1);  /* Swoop out */
    }
    32% {
        right: -200px;
        transform: translateY(0) scaleX(-1);
    }
	100% {
        right: -200px;
        transform: translateY(0) scaleX(-1);
    }
}

/* Tree animation - right to left, slower */
.tree-wrapper {
    position: absolute;
    top: 50%;
    margin-top: -40px;
    right: 0;
    width: 200%;  /* Extend to hold pattern */
    height: 60px;
    flex-shrink: 0;
    background-image: 
        /* Cluster 1 - three trees close together */
        url('../../assets/images/webp-illustrations/rain-tree(200x).webp'),
        url('../../assets/images/webp-illustrations/rain-tree(200x).webp'),
        url('../../assets/images/webp-illustrations/rain-tree(200x).webp'),
        /* Cluster 2 */
        url('../../assets/images/webp-illustrations/rain-tree(200x).webp'),
        url('../../assets/images/webp-illustrations/rain-tree(200x).webp'),
        url('../../assets/images/webp-illustrations/rain-tree(200x).webp'),
        /* Cluster 3 */
        url('../../assets/images/webp-illustrations/rain-tree(200x).webp'),
        url('../../assets/images/webp-illustrations/rain-tree(200x).webp'),
        url('../../assets/images/webp-illustrations/rain-tree(200x).webp');
    background-position: /* Cluster 1 at 10% */
        10% center, 15% center, 20% center,
        /* Cluster 2 at 40% */
        40% center, 45% center, 50% center,
        /* Cluster 3 at 70% */
        70% center, 75% center, 80% center;
    background-size: 30px auto;  /* Scale trees */
    background-repeat: no-repeat;
}

/* Hide the original <img> tag */
.tree {
    display: none;
}

@keyframes treeMove {
    0% {
        transform: translateX(100%);  /* Start off-screen right */
    }
    100% {
        transform: translateX(-100vw);  /* Exit off-screen left */
    }
}

/* Add rain pseudo-element on top of trees */
.tree-wrapper::after {
    content: '';
    position: absolute;
    top: -50px;
    left: 0;
    width: 100%;
    height: 122%;
    background-image: 
        /* Cluster 1: 10%-20% (14 drops) */
        linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.4) 20%, transparent 20%),
        linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.4) 15%, transparent 15%),
        linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.4) 18%, transparent 18%),
        linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.4) 22%, transparent 22%),
        linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.4) 16%, transparent 16%),
        linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.4) 19%, transparent 19%),
        linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.4) 17%, transparent 17%),
        linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.4) 21%, transparent 21%),
        linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.4) 15%, transparent 15%),
        linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.4) 18%, transparent 18%),
        linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.4) 20%, transparent 20%),
        linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.4) 16%, transparent 16%),
        linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.4) 22%, transparent 22%),
        linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.4) 17%, transparent 17%),
        /* Cluster 2: 40%-50% (14 drops) */
        linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.4) 18%, transparent 18%),
        linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.4) 21%, transparent 21%),
        linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.4) 16%, transparent 16%),
        linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.4) 19%, transparent 19%),
        linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.4) 20%, transparent 20%),
        linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.4) 15%, transparent 15%),
        linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.4) 22%, transparent 22%),
        linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.4) 17%, transparent 17%),
        linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.4) 18%, transparent 18%),
        linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.4) 16%, transparent 16%),
        linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.4) 21%, transparent 21%),
        linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.4) 19%, transparent 19%),
        linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.4) 20%, transparent 20%),
        linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.4) 15%, transparent 15%),
        /* Cluster 3: 70%-80% (14 drops) */
        linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.4) 22%, transparent 22%),
        linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.4) 17%, transparent 17%),
        linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.4) 19%, transparent 19%),
        linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.4) 16%, transparent 16%),
        linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.4) 20%, transparent 20%),
        linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.4) 18%, transparent 18%),
        linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.4) 15%, transparent 15%),
        linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.4) 21%, transparent 21%),
        linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.4) 17%, transparent 17%),
        linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.4) 19%, transparent 19%),
        linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.4) 16%, transparent 16%),
        linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.4) 22%, transparent 22%),
        linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.4) 18%, transparent 18%),
        linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.4) 20%, transparent 20%);
    background-position: 
        /* Cluster 1 positions 10%, 11%, 12%, 12.8%, 13.7%, 14.6%, 15.5%, 16.5%, 17.4%, 18.3%, 19.2%, 20.2%, 21.1%, 22% */
        10% 0, 11% 0, 12% 0, 12.8% 0, 13.7% 0, 14.6% 0, 15.5% 0, 16.5% 0, 17.4% 0, 18.3% 0, 19.2% 0, 20.2% 0, 21.1% 0, 22% 0,
        /* Cluster 2 positions */
        39% 0, 40.5% 0, 42% 0, 43% 0, 44% 0, 45% 0, 46% 0, 47% 0, 48% 0, 49% 0, 51% 0, 40.5% 0, 43.5% 0, 46.5% 0,
        /* Cluster 3 positions */
        69% 0, 71% 0, 72% 0, 73% 0, 74% 0, 75% 0, 76% 0, 77% 0, 78% 0, 79.5% 0, 81% 0, 70.5% 0, 73.5% 0, 76.5% 0;
    background-size: 
        /* Cluster 1 sizes */
        1px 25px, 1px 20px, 1px 22px, 1px 28px, 1px 20px, 1px 24px, 1px 21px, 1px 26px, 1px 19px, 1px 23px, 1px 25px, 1px 20px, 1px 27px, 1px 21px,
        /* Cluster 2 sizes */
        1px 23px, 1px 26px, 1px 20px, 1px 24px, 1px 25px, 1px 19px, 1px 27px, 1px 21px, 1px 23px, 1px 20px, 1px 26px, 1px 24px, 1px 25px, 1px 19px,
        /* Cluster 3 sizes */
        1px 27px, 1px 21px, 1px 24px, 1px 20px, 1px 25px, 1px 23px, 1px 19px, 1px 26px, 1px 21px, 1px 24px, 1px 20px, 1px 27px, 1px 23px, 1px 25px;
    background-repeat: repeat-y;
    animation: rainFall 1.2s linear infinite;
    pointer-events: none;
    z-index: 1;
    opacity: 1;
}

@keyframes rainFall {
    0% { 
        background-position: 
	        10% 0, 11% 0, 12% 0, 12.8% 0, 13.7% 0, 14.6% 0, 15.5% 0, 16.5% 0, 17.4% 0, 18.3% 0, 19.2% 0, 20.2% 0, 21.1% 0, 22% 0,
            39% 0, 40.5% 0, 42% 0, 43% 0, 44% 0, 45% 0, 46% 0, 47% 0, 48% 0, 49% 0, 51% 0, 40.5% 0, 43.5% 0, 46.5% 0,
            69% 0, 71% 0, 72% 0, 73% 0, 74% 0, 75% 0, 76% 0, 77% 0, 78% 0, 79.5% 0, 81% 0, 70.5% 0, 73.5% 0, 76.5% 0;
    }
    100% { 
        background-position: 
			10% 25px, 11% 20px, 12% 22px, 12.8% 28px, 13.7% 20px, 14.6% 24px, 15.5% 21px, 16.5% 26px, 17.4% 19px, 18.3% 23px, 19.2% 25px, 20.2% 20px, 21.1% 27px, 22% 21px,
            39% 23px, 40.5% 26px, 42% 20px, 43% 24px, 44% 25px, 45% 19px, 46% 27px, 47% 21px, 48% 23px, 49% 20px, 51% 26px, 40.5% 24px, 43.5% 25px, 46.5% 19px,
            69% 27px, 71% 21px, 72% 24px, 73% 20px, 74% 25px, 75% 23px, 76% 19px, 77% 26px, 78% 21px, 79.5% 24px, 81% 20px, 70.5% 27px, 73.5% 23px, 76.5% 25px;
    }
}

/* Bicycle wrapper - left to right, leisurely */
.bicycle-wrapper {
    position: absolute;
    top: 79%;
    margin-top: -26.5px;  /* Half of frame height (99px / 2) */
    left: 0;  /* Start at left edge */
      /* 25s duration, 2s delay */
    width: 489px;  /* Fixed width = frame width */
    height: 99px;  /* Fixed height = frame height */
    flex-shrink: 0;  /* Prevent shrinking */
}

@keyframes bicycleMove {
    0% {
        transform: translateX(-100%);  /* Start off-screen left */
    }
    100% {
        transform: translateX(100vw);  /* Exit off-screen right */
    }
}

/* Bicycle frame and wheel positioning */
.bicycle-frame {
    height: 72px;
    width: auto;
    bottom: 14px;
    display: block;
    position: relative;
      /* Move centering to the frame */
}

.wheel {
    position: absolute;
    height: 39px;
    width: 39px;
    animation: wheelSpin 1.5s linear infinite;
}

.wheel-left {
    bottom: 43px;
    left: 189px;
}

.wheel-right {
    bottom: 43px;
    left: 264px;
}

@keyframes wheelSpin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}



/* Initial state - everything hidden */
.upper-title,
.contact-phone,
.contact-info,
.bicycle-animation-container,
.bicycle-wrapper,
.tree-wrapper,
.bird1,
.bird2 {
    opacity: 0;
}

/* Fade-in sequence after nav */
.upper-title {
    animation: fadeIn 0.8s ease-out 1.2s forwards;  
}

.contact-info {
    animation: fadeIn 0.8s ease-out 2.0s forwards;
}

.contact-phone {
    animation: fadeIn 0.8s ease-out 2.8s forwards;
}


.lower-words {
    animation: slideInFromLeft 0.8s ease-out 3.6s forwards;
}

@keyframes slideInFromLeft {
    from {
        opacity: 0;
        transform: translateX(-100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.bicycle-animation-container {
    animation: fadeIn 0.5s ease-out 3.9s forwards;  
}

.bicycle-animation {
    animation: fadeIn 0.5s ease-out 3.9s forwards;  /* Container appears */
}

/* Mountains, hills, dashes start immediately when container animates */
.bicycle-animation-container::before {
    animation: mountainScroll 80s linear 3.9s infinite;
}

.bicycle-animation::before {
    animation: hillsScroll 30s linear 3.9s infinite;
}

.bicycle-animation-container::after {
    animation: dashScroll 10s linear 3.9s infinite;
}

/* Birds start 1.5s after container */
.bicycle-animation .bird1 {
	opacity: 1;
    animation: bird1Flight 15s ease-in-out 4.7s infinite;
}

.bicycle-animation .bird2 {
	opacity: 1;
    animation: bird2Flight 15s ease-in-out 5s infinite;
}

/* Bike and tree start 7.5s after container (after birds fly off) */
.bicycle-animation .bicycle-wrapper {
    animation: bicycleMove 12s linear 8.5s infinite,
               fadeIn 0.5s ease-out 8.5s forwards;
}

.bicycle-animation .tree-wrapper {
    animation: treeMove 15s linear 8.5s infinite,
               fadeIn 0.5s ease-out 8.5s forwards;
}

.bicycle-frame,
.tree,
.wheel {
    flex-shrink: 0;  /* Prevent any child from shrinking */
}

/* ===========================
   BETWEEN SECTION
   =========================== */
.lower-words {
    grid-column: 1/13;
    grid-row: 3;
    opacity: 0;
}

.little-title {
    font-family: var(--heading-font);
    font-size: clamp(2.95rem, 11vw, 5rem);
    font-weight: 400;
    line-height: 1.1;
    text-transform: capitalize;
}

.contact-email {
    position: relative;
    cursor: pointer;
}

.contact-email::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    background-color: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    font-size: 0.75rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 1000;
}

.contact-email:hover::after {
    opacity: 1;
}

.contact-email.tooltip-show::after {
    opacity: 1;
}

/***********************************************/
/*********** Small Screens: 576px+ *************/
/***********************************************/
@media (max-width: 575px) {
    .contact-email:hover::after {
        opacity: 0;  /* Disable hover tooltip on mobile */
    }
    
    .contact-email.tooltip-show::after {
        opacity: 1;  /* Only show when explicitly triggered */
    }
}

/************ TABLET STYLES (768px+)
   =========================== */
@media (min-width: 768px) {
    .contact-page {
        padding: 3rem 0;
    }

    .bicycle-animation-container {
        margin: 5rem 0;
        min-height: 200px;
    }

    .bicycle-animation {
        height: 200px;
    }
}

/* ===========================
   DESKTOP STYLES (992px+)
   =========================== */
@media (min-width: 992px) {
    .contact-page {
        padding: 4rem 0;
    }

    .contact-info {
        gap: 1rem;
    }

    .bicycle-animation-container {
        margin: 6rem 0;
        min-height: 250px;
    }

    .bicycle-animation {
        height: 250px;
    }
}

/* ===========================
   WIDE DESKTOP STYLES (1200px+)
   =========================== */
@media (min-width: 1200px) {
    .bicycle-animation-container {
        min-height: 300px;
    }

    .bicycle-animation {
        height: 300px;
    }
}

/*********************************************/
/************ Global Pages Animation *********/
/*********************************************/

@keyframes slideInFromTop {
	from {
		transform: translateY(-100%);
		opacity: 0;
	}

	to {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}
@keyframes upFromBottom {
	from {
		transform: translateY(100%);
		opacity: 0;
	}

	to {
		transform: translateY(0);
		opacity: 1;
	}
}