* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 body {
     margin: 0;
     padding: 0;
     overflow-x: hidden;
     overflow-y: auto;
     cursor: none;
 }

 /* SITE CURSOR */

 .site-cursor {
     position: fixed;
     top: 0;
     left: 0;

     width: 32px;
     height: 32px;

     background: url('../img/bow_logo.png') no-repeat center;
     background-size: contain;

     pointer-events: none;
     transform: translate(-50%, -50%);
     z-index: 9999;
 }

 /* GLOW TRAIL FOR SITE CURSOR */
 #trail-canvas {
     position: fixed;
     inset: 0;
     width: 100%;
     height: 100%;
     z-index: 9997;
     pointer-events: none;
 }

 #trail-canvas,
 .site-cursor {
     display: none;
 }

 /* LOADING PAGE STYLES */

 #page-loader {
     position: fixed;
     inset: 0;
     background: #fff;

     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;

     z-index: 9999;

     opacity: 1;
     visibility: visible;

     transition: opacity 0.6s ease, visibility 0.6s ease;
 }

 #page-loader img {
     width: 120px;
     height: auto;
     animation: pulse 1.5s infinite ease-in-out;
 }


 @keyframes pulse {

     0%,
     100% {
         transform: scale(1);
         opacity: 1;
     }

     50% {
         transform: scale(1.05);
         opacity: 0.85;
     }
 }

 #loader-text {
     font-family: "Nunito", sans-serif;
     margin-top: 8px;
     color: #000;
     font-size: 15px;
     opacity: 0.75;
     letter-spacing: 0.3px;
 }

 /* hidden state */
 #page-loader.hidden {
     opacity: 0;
     visibility: hidden;
     pointer-events: none;
 }


 /* HOME PAGE STYLES */

 .hero {
     position: fixed;
     top: 0;
     left: 0;

     width: 100%;
     height: 100%;

     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;

     text-align: center;

     z-index: 1;
     color: #fff;
     z-index: 1;

 }

 .hero__static {
     font-size: clamp(1.8rem, 4vw, 3rem);
     font-weight: 400;
     color: #fff;
     margin-bottom: 0.4rem;
 }

 /* The line that types and deletes */
 .hero__dynamic {
     font-size: clamp(2rem, 5vw, 4rem);
     font-family: Georgia, serif;
     font-weight: 550;
     min-height: 1.2em;
     display: inline-block;
     color: hsl(330, 40%, 88%);
     text-shadow:
         0 0 6px rgba(255, 200, 220, 0.9),
         0 0 18px rgba(255, 200, 220, 0.6),
         0 0 30px rgba(255, 200, 220, 0.3);
 }


 /* Blinking cursor */
 .cursor {
     display: inline-block;
     width: 3px;
     height: 2.5em;
     background: #eb76b6;
     margin-left: 4px;

     vertical-align: text-bottom;
     position: relative;
     top: -0.05em;

     animation: blink 0.7s step-end infinite;
 }

 @keyframes blink {

     0%,
     100% {
         opacity: 1;
     }

     50% {
         opacity: 0;
     }
 }

 #bg-video {
     position: fixed;
     inset: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     z-index: -2;
 }

 .container {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;

     display: flex;
     justify-content: center;
     align-items: center;

     z-index: 1;
 }

 #typewriter {
     margin: 0;
     color: #ffe9f3;
     font-size: 38px;
     text-align: center;
 }

 .overlay {
     position: fixed;
     inset: 0;

     background: linear-gradient(to top,
             rgba(244, 153, 226, 0.40),
             rgba(244, 153, 226, 0.15),
             rgba(0, 0, 0, 0.65));

     z-index: 0;
 }

 /* NAV BAR STYLES */

 nav {
     cursor: none;
     position: fixed;
     top: 20px;
     left: 50%;
     transform: translateX(-50%);

     display: flex;
     align-items: center;
     gap: 30px;

     padding: 12px 26px;

     background: rgba(235, 118, 182, 0.25);
     border: 1px solid rgba(235, 118, 182, 0.4);
     border-radius: 999px;

     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);

     z-index: 10;
 }

 .menu-item {
     transition: all 0.3s ease;
 }

 .menu-item.active {
     color: #fff;

     text-shadow:
         0 0 6px rgba(255, 200, 220, 0.9),
         0 0 14px rgba(235, 118, 182, 0.6),
         0 0 24px rgba(235, 118, 182, 0.4);
 }

 .menu-item:not(.active):hover {
     color: #eb75b6;

     text-shadow:
         0 0 6px rgba(235, 118, 182, 0.9),
         0 0 14px rgba(235, 118, 182, 0.7),
         0 0 24px rgba(235, 118, 182, 0.5);
 }

 .human-skills nav {
     background: rgba(0, 0, 0, 0.55);
     backdrop-filter: blur(14px);
     -webkit-backdrop-filter: blur(14px);
     border-bottom: 1px solid rgba(255, 255, 255, 0.08);
 }

 .ai-skills nav {
     background: rgba(0, 0, 0, 0.55);
     backdrop-filter: blur(14px);
     -webkit-backdrop-filter: blur(14px);
     border-bottom: 1px solid rgba(255, 255, 255, 0.08);
 }

 .about nav {
     cursor: none;
     position: fixed;
     top: 20px;
     left: 50%;
     transform: translateX(-50%);

     display: flex;
     align-items: center;
     gap: 30px;

     padding: 12px 26px;

     background: rgba(235, 118, 182, 0.25);
     border: 1px solid rgba(235, 118, 182, 0.4);
     border-radius: 999px;

     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);

     z-index: 10;
 }


 /* HAMBURGER (VISIBLE ON MOBILE) */

 .hamburger {
     display: flex;
     align-items: center;
     cursor: pointer;
 }

 .hamburger img {
     height: 40px;
     display: block;
     transform: translateY(-px);
 }

 /* DESKTOP MENU HIDDEN ON MOBILE */
 .desktop-menu {
     display: none;
 }

 .desktop-menu {
     display: none;
 }

 /* MOBILE MENU (HIDDEN UNTIL CLICKED) */
 .mobile-menu {
     display: none;
     position: absolute;
     top: 70px;
     right: 20px;

     flex-direction: column;

     background: rgba(235, 118, 182, 0.9);
     padding: 15px;
     border-radius: 10px;
 }

 .mobile-menu a {
     font-size: 24px;
     font-weight: 500;
     color: white;
     text-decoration: none;
     margin-bottom: 10px;
 }


 /* TOGGLE */

 #menu-toggle:checked~.mobile-menu {
     display: flex;
     flex-direction: column;
 }

 #menu-toggle {
     display: none;
 }

 /* LOGO STYLES */

 #logo {
     height: 40px;
 }

 /* HUMAN SKILLS PAGE STYLES */

 body {
     background-color: #eb76b6c9;
 }

 .glass-tile {
     position: relative;

     width: 100%;
     min-height: 75vh;

     margin: auto;

     background: rgba(0, 0, 0, 0.55);

     border: 1px solid rgba(255, 255, 255, 0.06);

     backdrop-filter: blur(22px);
     -webkit-backdrop-filter: blur(22px);

     border-radius: 25px;

     overflow: hidden;

     box-shadow:
         0 25px 70px rgba(0, 0, 0, 0.65),
         inset 0 1px 0 rgba(255, 255, 255, 0.04);

     padding: 20px;
 }

 .tile-note {
     align-self: flex-start;

     margin-top: 20px;

     font-size: 12px;
     color: rgba(255, 255, 255, 0.6);

     background: rgba(0, 0, 0, 0.35);
     padding: 6px 10px;
     margin-top: 10px;

     border-radius: 10px;

     text-align: center;
 }

 .mobile-break {
     display: block;
 }

 body.human-skills {
     padding-top: 110px;
 }

 .skills-carousel {
     display: flex;
     overflow-x: auto;
     scroll-snap-type: x mandatory;
     scroll-behavior: smooth;

     gap: 16px;
     padding: 25px 10vw 60px;

     align-items: center;

     height: auto;

     transform: none;
 }

 .skill-card {
     flex: 0 0 92%;
     scroll-snap-align: center;

     transform: scale(0.85);
     opacity: 0.4;

     transition: all 0.5s ease;
 }

 .skill-card.active {
     transform: scale(1);
     opacity: 1;
 }

 .skill-center h1 {
     font-family: Georgia, serif;
     font-size: clamp(24px, 10vw, 30px);
     color: #ffe9f3;
     text-shadow: 0 0 6px rgba(255, 233, 243, 0.35),
         0 0 18px rgba(255, 233, 243, 0.2),
         0 0 30px rgba(255, 233, 243, 0.1);
 }

 .skill-center h2 {
     font-family: Georgia, serif;
     font-size: clamp(14px, 2vw, 18px);
     margin-top: 5px;

 }

 .skill-center p {
     font-family: "Nunito", sans-serif;
     font-size: clamp(12px, 1vw, 16px);
     margin-top: 15px;
 }

 /* centered content stays stable */
 .skill-center {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -55%);
     text-align: center;
     color: #ffffff;
     z-index: 2;
     width: 77%;
     max-width: none;
 }

 /* base floating image style */
 .float-msg {
     position: absolute;
     width: 120px;
     border-radius: 12px;
     opacity: 0.85;

     animation: floaty 7s ease-in-out infinite;
     filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.25));
 }

 /* 4-image layout (balanced corners + depth) */

 .msg1,
 .msg2,
 .msg3,
 .msg4 {
     width: 175px;
 }

 .msg1 {
     top: 1%;
     left: 8%;
 }

 .msg2 {
     top: 10%;
     right: 7%;
 }

 .msg3 {
     bottom: 12%;
     left: 7%;
 }

 .msg4 {
     bottom: 0%;
     right: 3%;
 }

 /* floating motion */

 .msg1 {
     --rotate: -3deg;
 }

 .msg2 {
     --rotate: 2deg;
 }

 .msg3 {
     --rotate: 3deg;
 }

 .msg4 {
     --rotate: -2deg;
 }

 @keyframes floaty {
     0% {
         transform: translateY(0px) translateX(0px) rotate(var(--rotate, 0deg));
     }

     50% {
         transform: translateY(-6px) translateX(3px) rotate(var(--rotate, 0deg));
     }

     100% {
         transform: translateY(0px) translateX(0px) rotate(var(--rotate, 0deg));
     }
 }

 /* ADVENTUROUS CARD STYLES */

 .float-polaroid {
     position: absolute;
     width: 180px;

     border-radius: 14px;
     opacity: 0.9;

     filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.3));

     animation: floaty 8s ease-in-out infinite;
 }

 /* 4-image layout (balanced corners + depth) */

 .polaroid1,
 .polaroid2,
 .polaroid3,
 .polaroid4 {
     width: 110px;
 }

 .polaroid1 {
     top: 5%;
     left: 8%;
 }

 .polaroid2 {
     top: 10%;
     right: 7%;
 }

 .polaroid3 {
     bottom: 12%;
     left: 7%;
 }

 .polaroid4 {
     bottom: 7%;
     right: 7%;
 }

 /* COLLABORATIVE CARD STYLES */

 .float-collab {
     position: absolute;
     width: 180px;

     border-radius: 14px;
     opacity: 0.9;

     filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.3));

     animation: floaty 8s ease-in-out infinite;
 }

 /* 4-image layout (balanced corners + depth) */

 .collab1,
 .collab2,
 .collab3,
 .collab4 {
     width: 110px;
 }

 .collab1 {
     top: 5%;
     left: 8%;
 }

 .collab2 {
     top: 10%;
     right: 7%;
 }

 .collab3 {
     bottom: 12%;
     left: 7%;
 }

 .collab4 {
     bottom: 7%;
     right: 7%;
 }


 /* AI SKILLS PAGE STYLES */

 .ai-page {
     padding: 120px 10vw 80px;
     color: #fff;
 }

 .ai-title {
     text-align: center;
     max-width: 850px;
     margin: 0 auto 60px;
 }

 .ai-title h3 {
     margin-top: 15px;
     font-family: Georgia, serif;
     font-size: clamp(24px, 2vw, 42px);
     line-height: 1.15;

     color: #fff;

     text-shadow:
         0 6px 16px rgba(0, 0, 0, 0.7),
         0 12px 32px rgba(0, 0, 0, 0.5);
 }

 .ai-hero {
     text-align: center;
     max-width: 850px;
     margin: 0 auto 60px;
 }

 .ai-hero h2 {
     margin-top: 15px;
     font-family: Georgia, serif;
     font-size: clamp(24px, 2.5vw, 42px);
     line-height: 1.15;

     color: #fff;

     text-shadow:
         0 6px 16px rgba(0, 0, 0, 0.7),
         0 12px 32px rgba(0, 0, 0, 0.5);
 }

 .ai-hero h1 {
     margin-top: 5px;
     font-family: Georgia, serif;
     font-size: clamp(32px, 4.5vw, 54px);
     line-height: 1.1;

     color: #fff;

     text-shadow:
         0 6px 16px rgba(0, 0, 0, 0.7),
         0 12px 32px rgba(0, 0, 0, 0.5);
 }

 .ai-hero p {
     margin-top: 40px;
     text-align: left;
     font-family: "Nunito", sans-serif;

     background: rgba(0, 0, 0, 0.35);
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);

     padding: 25px 32px;
     border-radius: 14px;

     line-height: 1.3;
 }

 .ai-cards {
     display: flex;
     flex-direction: column;

     gap: 25px;

     margin-top: 60px;
 }

 .ai-card {
     width: 100%;

     padding: 35px;

     background: rgba(0, 0, 0, 0.55);

     border: 1px solid rgba(255, 255, 255, 0.12);

     backdrop-filter: blur(16px);
     -webkit-backdrop-filter: blur(16px);

     border-radius: 20px;

     box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
 }

 .ai-card h2 {
     font-family: Georgia, serif;
     font-size: clamp(20px, 7vw, 28px);
     color: #ffe9f3;
     text-shadow: 0 0 6px rgba(255, 233, 243, 0.35),
         0 0 18px rgba(255, 233, 243, 0.2),
         0 0 30px rgba(255, 233, 243, 0.1);
 }

 .ai-card p {
     font-family: "Nunito", sans-serif;
     font-size: clamp(12px, 4vw, 16px);
     margin-top: 25px;
 }

 /* ABOUT PAGE STYLES */

 #bg-blur-circles {
     position: fixed;
     inset: 0;
     width: 100%;
     height: 100%;

     z-index: 0;
     pointer-events: none;
     opacity: 1;
 }

 .about {
     background-image: url("../img/about_bg.png");

     background-size: cover;
     background-position: 80% center;
     background-repeat: no-repeat;

     min-height: 100vh;
     position: relative;
     z-index: 0;
 }

 .about::before {
     content: "";
     position: fixed;
     inset: 0;

     background: rgba(0, 0, 0, 0.6);

     pointer-events: none;
     z-index: 1;
 }

 .about-content {
     padding: 140px 10vw 80px;
     color: #fff;

     max-width: 700px;
     position: relative;
     z-index: 2;
 }

 .about-heading {
     font-family: Georgia, serif;
     font-size: clamp(30px, 4vw, 48px);
     line-height: 1.2;

     margin-bottom: 40px;

     text-shadow:
         0 0 6px rgba(255, 200, 220, 0.9),
         0 0 18px rgba(235, 118, 182, 0.6),
         0 0 32px rgba(235, 118, 182, 0.3);
 }

 .about-bio {
     font-family: "Nunito", sans-serif;
     font-size: 16px;
     line-height: 1.7;

     opacity: 0.95;
 }

 .about-bio p {
     margin-bottom: 18px;
 }

 /* CONTACT PAGE STYLES */

 .contact-title {
     text-align: center;
     font-family: Georgia, serif;
     font-size: clamp(32px, 4vw, 52px);

     margin-top: 120px;

     color: #fff;

     text-shadow:
         0 6px 16px rgba(0, 0, 0, 0.7),
         0 12px 32px rgba(0, 0, 0, 0.5);
 }

 .contact-sub {
     text-align: center;
     font-family: Nunito, sans-serif;
     font-size: clamp(18px, 2vw, 24px);

     max-width: 320px;
     margin: 20px auto 10px;

     color: #fff;

     text-shadow:
         0 6px 16px rgba(0, 0, 0, 0.7),
         0 12px 32px rgba(0, 0, 0, 0.5);
 }

 .contact-grid {
     display: flex;
     flex-direction: column;
     gap: 25px;

     padding: 30px 10vw 80px;
 }

 .contact-card {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;

     text-decoration: none;
     color: #fff;

     padding: 35px;

     background: rgba(0, 0, 0, 0.45);
     border: 1px solid rgba(255, 255, 255, 0.12);

     backdrop-filter: blur(16px);
     -webkit-backdrop-filter: blur(16px);

     border-radius: 20px;

     transition: all 0.3s ease;
 }

 .contact-card img {
     width: 70px;
     height: 70px;

     transition: transform 0.3s ease;
 }

 .contact-card h2 {
     font-family: "Nunito", sans-serif;
     margin-top: 12px;
     font-size: 24px;
 }

 /* ADJUSTMENTS FOR DESKTOP */

 @media screen and (min-width: 1000px) {

     .desktop-menu {
         display: flex;
         align-items: center;
         justify-content: flex-end;

         flex-wrap: nowrap;
         white-space: nowrap;
         gap: 30px;
     }

     .mobile-menu,
     .hamburger,
     #menu-toggle {
         display: none;
     }

     #logo {
         height: 50px;
     }

     .desktop-menu a {
         font-size: 30px;
         font-weight: 500;
         color: white;
         text-decoration: none;
     }

     #typewriter {
         font-size: 48px;
     }


     #trail-canvas,
     .site-cursor {
         display: block;
     }


     /* HUMAN SKILLS PAGE */

     .tile-note {
         align-self: auto;
         margin-top: 20px;
         font-size: 14px;
     }

     .mobile-break {
         display: inline;
     }

     body.human-skills {
         padding-top: 0;
     }

     .skills-carousel {
         height: 100vh;
         display: flex;
         align-items: center;

         padding: 0 6vw;

         transform: translateY(40px);

         scroll-behavior: smooth;
         -webkit-overflow-scrolling: touch;
     }

     .skill-card {
         flex: 0 0 60%;
     }

     .skill-card.active {
         transform: scale(1);
         opacity: 1;
         z-index: 2;
     }


     .skill-center h1 {
         font-size: 40px;
     }

     .skill-center {
         width: 65%;
         max-width: 750px;
     }

     /* text messages */

     .msg1,
     .msg2,
     .msg3 {
         width: 350px;
     }

     .msg4 {
         width: 300px;
     }

     .msg1 {
         top: 0%;
         left: 5%;
     }

     .msg2 {
         top: 5%;
         right: 4%;
     }

     .msg3 {
         bottom: 3%;
         left: 5%;
     }

     .msg4 {
         bottom: 5%;
         right: 5%;
     }

     /* polaroid pictures */

     .polaroid1,
     .polaroid2,
     .polaroid3,
     .polaroid4 {
         width: 200px;
     }


     .polaroid1 {
         top: 7%;
         left: 5%;
     }

     .polaroid2 {
         top: 5%;
         right: 5%;
     }

     .polaroid3 {
         bottom: 3%;
         left: 5%;
     }

     .polaroid4 {
         bottom: 5%;
         right: 5%;
     }

     /* notes and office supplies */

     .collab1,
     .collab2,
     .collab3,
     .collab4 {
         width: 175px;
     }

     .collab1 {
         top: 2%;
         left: 5%;
     }

     .collab2 {
         top: 5%;
         right: 5%;
     }

     .collab3 {
         bottom: 4%;
         left: 5%;
     }

     .collab4 {
         bottom: 1%;
         right: 5%;
     }

     /* AI SKILLS PAGE */

     .ai-hero h2 {
         margin-top: 35px;
     }

     .ai-hero p {
         margin-top: 45px;
     }

     .ai-title {
         width: 100%;
         max-width: 1100px;
         margin: 0 auto;
     }

     .ai-cards {
         flex-direction: row;
         justify-content: center;
         gap: 40px;
     }

     .ai-card {
         flex: 1;
         max-width: 500px;
     }

     /* ABOUT PAGE STYLES */

     .about-content {
         padding: 180px 8vw 100px;
         max-width: 1025px;
     }

     .about-heading {
         font-size: 48px;
         margin-top: 20px;
     }

     .about-bio {
         font-size: 18px;
     }

     /* CONTACT PAGE STYLES */

     .contact-title {
         margin-top: 175px;
     }

     .contact-sub {
         margin-bottom: 85px;
         max-width: 950px;
     }

     .contact-grid {
         display: flex;
         flex-direction: row;
         justify-content: center;
         align-items: center;

         flex-wrap: wrap;
         gap: 30px;

         padding: 0;
         margin: 0 auto;

         margin-top: 30px;
         min-height: auto;
     }

     .contact-card {
         width: 220px;
         height: 220px;
     }

     .contact-card:hover {
         background: rgba(94, 6, 54, 0.28);

         transform: translateY(-6px);

         border: 1px solid rgba(255, 200, 220, 0.35);

         box-shadow:
             0 0 10px rgba(235, 118, 182, 0.6),
             0 0 22px rgba(235, 118, 182, 0.45),
             0 0 40px rgba(235, 118, 182, 0.25);
         backdrop-filter: blur(18px);
     }

     .contact-card:hover img {
         transform: scale(1.15);
     }

 }