/* ============================================
   CSS VARIABLES & RESET
   ============================================ */
:root {
    --bg-primary: #ffffff;
    --bg-secondary: #f8f8f8;
    --bg-card: #ffffff;
    --bg-card-hover: #fafafa;
    --text-primary: #0a0a0a;
    --text-secondary: #555555;
    --accent: #000000;
    --border: #e0e0e0;
    --shadow: rgba(0, 0, 0, 0.08);
    --shadow-hover: rgba(0, 0, 0, 0.15);
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
}

/* ============================================
   NAME REVEAL ANIMATION
   ============================================ */
@keyframes nameReveal {
    0% {
        opacity: 0;
        transform: translateY(30px);
        filter: blur(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

.name h1 {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    animation: nameReveal 1s ease-out forwards;
    opacity: 0;
}

/* ============================================
   HEADER / HERO SECTION
   ============================================ */
#hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 2rem 5%;
    position: relative;
}

.header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid var(--border);
}

.navbar ul {
    display: flex;
    list-style: none;
    gap: 2.5rem;
}

.navbar a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0.05em;
    transition: var(--transition);
    position: relative;
}

.navbar a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--accent);
    transition: var(--transition);
}

.navbar a:hover {
    color: var(--text-primary);
}

.navbar a:hover::after {
    width: 100%;
}

.header-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.header-actions a {
    opacity: 0.6;
    transition: var(--transition);
}

.header-actions a:hover {
    opacity: 1;
    transform: translateY(-2px);
}


/* Sets all top-right header icons to the exact same dimensions */
.header-actions img {
    width: 30px;       /* Adjust size as needed (e.g., 24px or 28px) */
    height: 30px;
    object-fit: contain; /* Keeps icon proportions clean without stretching */
}


/* Individual adjustments */
.resume-icon {
    width: 36px !important;
    height: 36px !important;
}

.github-icon {
    width: 30px;
    height: 30px;
}

.linkedin-icon {
    width: 30px;
    height: 30px;
}

.credly-icon {
    width: 36px !important;
    height: 36px !important;
}

.email-icon {
    width: 30px;
    height: 30px;
}

/* Hero Content */
.hero-content {
    display: flex;
    gap: 3rem;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 4rem 0;
}

/* CIRCULAR PROFILE PICTURE WITH COOL SHAPE */
.profile-card {
    position: relative;
    width: 280px;
    height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-card::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(135deg, #000000 0%, #333333 50%, #000000 100%);
    padding: 4px;
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.profile-card::after {
    content: '';
    position: absolute;
    width: 110%;
    height: 110%;
    border: 2px solid transparent;
    border-top-color: #000;
    border-right-color: #000;
    border-radius: 50%;
    animation: rotateRing 8s linear infinite;
}

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

.profile-card img {
    width: 260px;
    height: 260px;
    object-fit: cover;
    border-radius: 50%;
    object-position: center 35%;
    border: 4px solid var(--bg-primary);
    position: relative;
    z-index: 1;
}

.description-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 2rem;
    max-width: 500px;
    box-shadow: 0 4px 20px var(--shadow);
    transition: var(--transition);
}

.description-card h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    font-weight: 700;
}

.description-card p {
    color: var(--text-secondary);
    font-size: 1.125rem;
    line-height: 1.8;
}

.description-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px var(--shadow-hover);
}

/* ============================================
   SECTION STYLES
   ============================================ */
section {
    padding: 6rem 5%;
    max-width: 1400px;
    margin: 0 auto;
}

section h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 3rem;
    text-align: center;
    letter-spacing: -0.02em;
}

/* EXPERIENCE SECTION - SUBSECTIONS */
.experience-subsection,
.portfolio-section,
.education-section {
    margin-bottom: 4rem;
}

.experience-subsection h3,
.portfolio-section h3,
.education-section h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 2rem;
    color: var(--text-secondary);
    text-transform: none;
    letter-spacing: 0.1em;
}

/* ============================================
   CARDS
   ============================================ */
.cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    align-items: stretch;
}

/* Force the 4th card to start on a new row so it doesn't get squished beside the first three */
.cards-container .card:nth-child(4) {
    grid-column-start: 1;
    grid-row-start: 2;
}

/* While any card in this row is expanded, stop stretching every card to
   match the tallest one. That forced stretch was making not-yet-expanded
   siblings artificially tall, and since their summary text has flex:1,
   it would grow to fill the extra space -- pushing it down inside the
   card instead of sitting in its normal spot right under the heading. */
.cards-container:has(.card.expanded) {
    align-items: start;
}

.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 1.5rem;
    position: relative;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    min-height: 200px;
    overflow: hidden;
    box-shadow: 0 4px 20px var(--shadow);
}

/* Fixed-size icon container ensures all cards reserve the same vertical space */
.card-icon {
    width: 100%;
    min-height: 0;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 0.75rem;
    font-size: 2rem;
}

/* Base icon sizing: all portfolio card icons use this as the standard */
.card-icon img {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

/* Images placed inside cards should fit within the card */
.card-image {
    width: 100%;
    max-width: 100%;
    height: auto;
    /* Allow the full image to be visible without cropping. Use contain to
       scale the image to fit the available width while preserving aspect
       ratio. Remove strict max-height so images aren't clipped from top/bottom. */
    max-height: none;
    object-fit: contain;
    object-position: center;
    display: block;
    border-radius: 12px;
    margin-top: 1rem;
    margin-bottom: 1.5rem;
}

/* Round the merit award SVG in the 4th card to remove sharp corners */
.cards-container .card:nth-child(4) img[src$="meritawardblack.svg"] {
    border-radius: 30px;
    overflow: hidden;
    display: block;
    object-fit: cover;
    transform: translateX(-2px);
}

/* Shift the award SVG 10px to the left */
img[src="assets/icons/award.svg"] {
    transform: translateX(-12px);
}


img[src="assets/icons/flag1.svg"] {
    transform: translateX(-9px);
}


img[src="assets/icons/sensor-svgrepo-com.svg"] {
    transform: translateX(-5px);
}

img[src="assets/icons/temperature-high-svgrepo-com.svg"] {
    transform: translateX(5px);
}

/* Skills Canada medals photo: kept upright, capped smaller so it sits
   comfortably inside the card instead of stretching edge-to-edge.
   Rotated 180 degrees (two 90-degree turns to the left) per request. */
.medals-image {
    width: 350px;
    height: 350px;
    object-fit: contain;
    margin: 1.5rem auto 0.5rem;
    transform: rotate(-90deg);
}

.card img {
    max-width: 100%;
}

.card h4 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
}

.card > p {
    color: var(--text-secondary);
    font-size: 0.9375rem;
    line-height: 1.8;
    margin-bottom: 1rem;
    flex: 1;
}

/* Only limit the visible summary */
.card > p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
}

.card-content p {
    display: block;
}

/* "View full poster" style links inside expanded card content */
.card-content a {
    color: var(--text-primary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: var(--transition);
}

.card-content a:hover {
    color: var(--accent);
}


/* FLOATING ANIMATION ON HOVER */
.card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px var(--shadow-hover);
    background: var(--bg-card-hover);
}

/* EXPAND BUTTON */
.expand-button {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-top: 1rem;
    align-self: center;
    font-size: 1.25rem;
    transition: var(--transition);
    order: 3;
}

.expand-button:hover {
    background: #333333;
    border-color: #333333;
    transform: rotate(180deg);
}

.expand-button:hover .chevron-icon {
    filter: invert(1);
}

/* EXPANDABLE CONTENT (hidden by default) */
.card-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
    order: 2;
}

.card:not(.expanded) .card-content {
    display: none;
}

.card.expanded .card-content {
    max-height: 5000px;
    padding-top: 1.5rem;
    margin-top: 1rem;
    border-top: 1px solid var(--border);
    display: block;
    overflow: visible;
}

.card.expanded .expand-button {
    transform: rotate(180deg);
}

.card.expanded {
    overflow: visible;
}

/* Force the SVG icon inside expand buttons to remain small */
.expand-button img {
    width: 16px !important;
    height: 16px !important;
    object-fit: contain;
    pointer-events: none; /* Prevents image from blocking button clicks */
}

/* ============================================
   CONTACT SECTION
   ============================================ */
#contact {
    background: var(--bg-secondary);
    border-radius: 24px;
    margin: 2rem 5%;
    max-width: none;
}

.contact-container {
    max-width: 600px;
    margin: 0 auto;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

.contact-form input,
.contact-form textarea {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    color: var(--text-primary);
    font-size: 1rem;
    transition: var(--transition);
    font-family: inherit;
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}

.contact-form textarea {
    min-height: 150px;
    resize: vertical;
}

.contact-form button {
    background: var(--accent);
    color: var(--bg-primary);
    border: none;
    padding: 1rem 2rem;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.contact-form button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px var(--shadow-hover);
}

.contact-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

/* Improved email display with copy button (keeps markup unchanged) */
.contact-meta .contact-email {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin: 0;
}

.contact-meta .contact-email strong {
    color: var(--text-primary);
    margin-right: 0.5rem;
    font-weight: 600;
}

.contact-meta .email-image {
    width: auto;
    height: 1.25rem; /* match surrounding text */
    display: block;
}

.contact-meta .copy-email {
    background: var(--accent);
    color: var(--bg-primary);
    border: none;
    padding: 0.35rem 0.6rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.contact-meta .copy-email:hover {
    transform: translateY(-2px);
}

.contact-meta .copy-email:focus {
    outline: 3px solid rgba(0,0,0,0.06);
    outline-offset: 2px;
}

@media (max-width: 640px) {
    .contact-meta {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }

    .contact-meta .contact-email {
        justify-content: center;
        gap: 0.5rem;
    }
}

.resume-btn {
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    transition: var(--transition);
}

.resume-btn:hover {
    background: var(--accent);
    color: var(--bg-primary);
    border-color: var(--accent);
}

.contact-email {
    color: var(--text-secondary);
}

.social-links {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.scroll-top-container {
    display: flex;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.scroll-top-btn {
    display: inline-block;
    padding: 0.55rem 1rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: var(--transition);
}

.scroll-top-btn:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
    transform: translateY(-2px);
}

.social-links a {
    opacity: 0.6;
    transition: var(--transition);
    display: flex;
    align-items: center;
}

.social-links a:hover {
    opacity: 1;
    transform: translateY(-2px);
}


/* Same sizing as header icons */
.social-links img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}


/* Match your custom header sizes */
.social-links .credly-icon {
    width: 36px;
    height: 36px;
}

.resume-icon {
    margin-right: -0.27rem;
}

.email-icon {
    margin-left: -0.2rem;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */
@media (max-width: 968px) {
    .header-row {
        flex-direction: column;
        gap: 1.5rem;
        text-align: center;
    }

    .navbar ul {
        gap: 1.5rem;
    }

    .hero-content {
        flex-direction: column;
        text-align: center;
    }

    .profile-card {
        width: 240px;
        height: 240px;
    }

    .profile-card img {
        width: 220px;
        height: 220px;
    }

    .description-card {
        max-width: 100%;
    }

    .cards-container {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .navbar ul {
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
    }

    .navbar a {
        font-size: 0.75rem;
    }

    section h2 {
        font-size: 2rem;
    }

    .contact-meta {
        flex-direction: column;
        text-align: center;
    }
}


.uoft-logobig {
    /* Treat the logo as an icon inside cards (top-left aligned like other icons) */
    width: 300px !important;      /* match .card-icon img size */
    height: 120px !important;     /* crop top and bottom */
    max-width: none;
    object-fit: cover;            /* crop the image */
    object-position: left center; /* center vertically to crop top and bottom equally */
    display: block;               /* make margins behave predictably */
    margin: 0 0 0 -2px;           /* pull the logo left (adjust -20px as needed) */
    padding: 0;                   /* remove extra space around image */
    vertical-align: middle;
}

.temperature-icon {
    width: 50px !important;
    height: 50px !important;
    object-fit: contain;
    margin-left: -8px; /* Adjust this value as needed */
}


/* Nudges the chemistry test tube icon slightly to the left */
.testtube-icon {
    width: 75px !important;
    height: 75px !important;
    margin-left: -30px; 
}

.turbineicon {
    width: 65px !important;
    height: 65px !important;
    margin-left: -7px; 
}

/* Smaller display size helps mask the image's low native resolution,
   and it's left-aligned to match the card's text flow.
   Reduced further and kept left-aligned per request. */
.pytemppic {
    width: 100% !important;
    max-width: 350px !important;
    height: auto !important;
    display: block;
    margin: 0;
}

/* ============================================
   SPICE & EXTRA ANIMATIONS
   ============================================ */

/* 1. SMOOTH PAGE LOAD SEQUENCE */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Staggered entrance for sections */
section {
    animation: fadeInUp 0.8s ease-out forwards;
    opacity: 0;
}

section:nth-child(1) { animation-delay: 0.1s; }
section:nth-child(2) { animation-delay: 0.2s; }
section:nth-child(3) { animation-delay: 0.3s; }
section:nth-child(4) { animation-delay: 0.4s; }
section:nth-child(5) { animation-delay: 0.5s; }

/* 2. PULSE GLOW ON PROFILE PICTURE */
@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1);
    }
    50% {
        box-shadow: 0 0 30px 10px rgba(0, 0, 0, 0.05);
    }
}

.profile-card:hover::before {
    animation: pulseGlow 2s ease-in-out infinite;
}

/* 3. FLOATING ANIMATION FOR HERO CONTENT */
@keyframes gentleFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.hero-content {
    animation: gentleFloat 6s ease-in-out infinite;
}

/* 4. CARD ENTRANCE ANIMATION */
@keyframes cardSlideIn {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.card {
    animation: cardSlideIn 0.5s ease-out forwards;
    opacity: 0;
}

/* Stagger cards within each container */
.cards-container .card:nth-child(1) { animation-delay: 0.1s; }
.cards-container .card:nth-child(2) { animation-delay: 0.15s; }
.cards-container .card:nth-child(3) { animation-delay: 0.2s; }
.cards-container .card:nth-child(4) { animation-delay: 0.25s; }

/* 5. SHIMMER EFFECT ON SECTION HEADERS */
@keyframes shimmer {
    0% {
        background-position: -200% center;
    }
    100% {
        background-position: 200% center;
    }
}

section h2 {
    background: linear-gradient(
        90deg,
        var(--text-primary) 0%,
        var(--text-secondary) 25%,
        var(--text-primary) 50%,
        var(--text-secondary) 75%,
        var(--text-primary) 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 4s linear infinite;
}

/* 6. MAGNETIC HOVER EFFECT FOR NAV LINKS */
.navbar a {
    transition: transform 0.2s ease;
}

.navbar a:hover {
    transform: scale(1.05);
}

/* 7. RIPPLE EFFECT ON BUTTONS */
@keyframes ripple {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(4);
        opacity: 0;
    }
}

.contact-form button,
.resume-btn,
.expand-button {
    position: relative;
    overflow: hidden;
}

.contact-form button::after,
.resume-btn::after,
.expand-button::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    opacity: 0;
    transition: none;
}

.contact-form button:active::after,
.resume-btn:active::after,
.expand-button:active::after {
    animation: ripple 0.6s ease-out;
}

/* 8. TYPING CURSOR EFFECT FOR DESCRIPTION */
@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

.description-card p::after {
    content: '|';
    animation: blink 1s step-end infinite;
    margin-left: 2px;
    color: var(--text-secondary);
}

/* 9. BORDER DRAW ANIMATION FOR CARDS */
@keyframes borderDraw {
    0% {
        clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    }
    25% {
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    }
    50% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
    75% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
    100% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
}

/* Decorative gradient border overlay for cards. pointer-events: none is
   critical here -- without it this full-card overlay silently intercepts
   all mouse events (clicks, hovers, text selection, drag-to-select) even
   though it's visually just a thin masked border. */
.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 16px;
    padding: 2px;
    background: linear-gradient(135deg, #000 0%, transparent 50%, #000 100%);
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.card:hover::before {
    opacity: 1;
}

/* 10. ICON BOUNCE ON CARD HOVER */
@keyframes iconBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.card:hover .card-icon {
    animation: iconBounce 0.5s ease;
}


/* 12. GLOWING UNDERLINE FOR ACTIVE NAV */
.navbar a.active::after {
    width: 100%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

/* 13. PARALLAX SCROLL EFFECT SETUP */
#hero {
    background-attachment: fixed;
    background-image: 
        radial-gradient(circle at 20% 80%, rgba(0,0,0,0.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(0,0,0,0.03) 0%, transparent 50%);
}

/* 14. SCROLL PROGRESS BAR */
@keyframes progressBar {
    from { width: 0%; }
    to { width: 100%; }
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, #000 0%, #333 100%);
    z-index: 9999;
    animation: progressBar linear;
    animation-timeline: scroll();
}

/* 15. SUBTLE GRAIN TEXTURE OVERLAY */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.02;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    z-index: 9998;
}

/* 16. CONTACT FORM INPUT FOCUS GLOW */
.contact-form input:focus,
.contact-form textarea:focus {
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1), 0 0 20px rgba(0, 0, 0, 0.05);
}

/* 17. ROTATING DECORATION ELEMENTS */
@keyframes slowRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Add decorative rotating elements to sections. pointer-events: none keeps
   this purely visual mark from intercepting clicks/hover under the corner
   of each section. */
section::before {
    content: '◆';
    position: absolute;
    font-size: 1rem;
    color: var(--border);
    opacity: 0.3;
    animation: slowRotate 20s linear infinite;
    pointer-events: none;
}

section:nth-child(odd)::before {
    top: 2rem;
    right: 5%;
}

section:nth-child(even)::before {
    bottom: 2rem;
    left: 5%;
}

/* 18. CARD STACK EFFECT */
.cards-container {
    perspective: 1000px;
}

.card {
    transform-style: preserve-3d;
}

.card:hover {
    transform: translateY(-8px) rotateX(2deg);
}

/* 19. SCROLL SNAP (removed)
   scroll-snap-type on html + scroll-snap-align on section fought with
   the expandable cards: whenever a card's height changed (expanding or
   collapsing), the browser re-evaluated the nearest snap point and could
   jump the viewport to a section boundary -- the "teleport" behavior. */

/* 20. LOADING SKELETON ANIMATION (for dynamic content) */
@keyframes skeleton {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton 1.5s ease-in-out infinite;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS FOR ANIMATIONS
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media (max-width: 968px) {
    .hero-content {
        animation: none; /* Disable float on mobile */
    }
    
    section::before {
        display: none; /* Hide decorations on mobile */
    }
}

/* When a card is expanded allow images to grow and remove the fixed min-height
   so the full image can be shown. Increase max-height of .card-image in expanded
   state to accommodate larger images. */
.card.expanded {
    min-height: auto;
}

.card-image {
    transition: max-height 0.4s ease;
}

.card.expanded .card-image {
    /* When expanded allow the image to grow naturally and remain fully visible */
    max-height: none;
    object-position: center;
}