/* Design Tokens */

:root {
    /* Core palette (light scheme) */
    --md-sys-color-primary: #6750A4;
    --md-sys-color-primary-container: #EADDFF;
    --md-sys-color-secondary-container: #E8DEF8;
    --md-sys-color-tertiary: #7D5260;
    --md-sys-color-tertiary-container: #FFD8E4;
    --md-sys-color-surface: #FEF7FF;
    --md-sys-color-surface-container-high: #ECE6F0;
    --md-sys-color-on-surface: #1D1B20;
    --md-sys-color-on-surface-variant: #49454F;
    --md-sys-color-outline: #79747E;
    --md-sys-color-outline-variant: #CAC4D0;

    /* Elevation overlays (tonal) */
    --md-sys-elevation-1: 0 1px 3px 1px rgba(0, 0, 0, .15), 0 1px 2px rgba(0, 0, 0, .3);
    --md-sys-elevation-2: 0 2px 6px 2px rgba(0, 0, 0, .15), 0 1px 2px rgba(0, 0, 0, .3);

    /* Shape */
    --md-sys-shape-corner-lg: 16px;
    --md-sys-shape-corner-xl: 28px;
    --md-sys-shape-corner-full: 9999px;

    /* Typography  */
    --md-sys-typescale-body-font: 'Google Sans', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --md-sys-typescale-body-size: 16px;
    --md-sys-typescale-body-line: 24px;
    --md-sys-typescale-body-weight: 400;
    --md-sys-typescale-body-tracking: 0.5px;

    --md-sys-typescale-display-large-size: 57px;

    --md-sys-typescale-label-large-size: 14px;
    --md-sys-typescale-label-large-weight: 500;
    --md-sys-typescale-label-large-tracking: 0.1px;

    /* Motion */
    --md-sys-motion-duration-short: 200ms;
    --md-sys-motion-duration-long: 600ms;
    --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
    --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);

    /* Layout */
    --content-max-width: 560px;
    --content-padding: 24px;
}

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

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--md-sys-typescale-body-font);
    font-size: var(--md-sys-typescale-body-size);
    font-weight: var(--md-sys-typescale-body-weight);
    line-height: var(--md-sys-typescale-body-line);
    letter-spacing: var(--md-sys-typescale-body-tracking);
    color: var(--md-sys-color-on-surface);
    background-color: var(--md-sys-color-surface);
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

button,
a {
    font: inherit;
    cursor: pointer;
    border: none;
    background: none;
    color: inherit;
}

a {
    text-decoration: none;
    color: inherit;
}

svg {
    display: block;
}

/* Animated backgroud */
.bg-canvas {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Gradient mesh */
.gradient-mesh {
    position: absolute;
    inset: -20%;
    width: 140%;
    height: 140%;
    background:
        radial-gradient(ellipse 600px 600px at 20% 30%, rgba(103, 80, 164, .12) 0%, transparent 70%),
        radial-gradient(ellipse 500px 500px at 75% 60%, rgba(125, 82, 96, .10) 0%, transparent 70%),
        radial-gradient(ellipse 400px 400px at 50% 80%, rgba(98, 91, 113, .08) 0%, transparent 70%),
        radial-gradient(ellipse 350px 350px at 80% 20%, rgba(234, 221, 255, .20) 0%, transparent 70%);
    animation: meshDrift 20s ease-in-out infinite alternate;
}

@keyframes meshDrift {
    0% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(-30px, 20px) scale(1.03);
    }

    66% {
        transform: translate(20px, -15px) scale(0.97);
    }

    100% {
        transform: translate(-10px, 10px) scale(1.01);
    }
}

/* Floating blobs */
.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .45;
    will-change: transform;
}

.blob--a {
    width: 320px;
    height: 320px;
    background: var(--md-sys-color-primary-container);
    top: 10%;
    left: -5%;
    animation: floatA 18s var(--md-sys-motion-easing-standard) infinite alternate;
}

.blob--b {
    width: 240px;
    height: 240px;
    background: var(--md-sys-color-tertiary-container);
    top: 55%;
    right: -8%;
    animation: floatB 22s var(--md-sys-motion-easing-standard) infinite alternate;
}

.blob--c {
    width: 180px;
    height: 180px;
    background: var(--md-sys-color-secondary-container);
    bottom: 5%;
    left: 30%;
    animation: floatC 16s var(--md-sys-motion-easing-standard) infinite alternate;
}

.blob--d {
    width: 140px;
    height: 140px;
    background: var(--md-sys-color-primary);
    opacity: .10;
    top: 35%;
    left: 60%;
    animation: floatD 24s var(--md-sys-motion-easing-standard) infinite alternate;
}

@keyframes floatA {
    0% {
        transform: translate(0, 0) scale(1);
    }

    100% {
        transform: translate(60px, 40px) scale(1.12);
    }
}

@keyframes floatB {
    0% {
        transform: translate(0, 0) scale(1);
    }

    100% {
        transform: translate(-50px, -30px) scale(1.08);
    }
}

@keyframes floatC {
    0% {
        transform: translate(0, 0) scale(1);
    }

    100% {
        transform: translate(40px, -50px) scale(1.15);
    }
}

@keyframes floatD {
    0% {
        transform: translate(0, 0) scale(1);
    }

    100% {
        transform: translate(-30px, 60px) scale(1.20);
    }
}

/* Morphing shape */
.morph-shape {
    position: absolute;
    width: 420px;
    height: 420px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: .12;
    will-change: transform;
    animation: morphRotate 40s linear infinite;
}

.morph-path {
    animation: morphBlob 12s ease-in-out infinite alternate;
}

@keyframes morphRotate {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes morphBlob {
    0% {
        d: path("M250,80 C350,80 430,170 430,250 C430,330 350,420 250,420 C150,420 70,330 70,250 C70,170 150,80 250,80Z");
    }

    25% {
        d: path("M280,90 C370,110 420,190 400,280 C380,370 300,410 220,390 C140,370 80,290 90,210 C100,130 190,70 280,90Z");
    }

    50% {
        d: path("M230,70 C330,60 440,150 440,260 C440,370 330,430 230,420 C130,410 60,320 70,220 C80,120 130,80 230,70Z");
    }

    75% {
        d: path("M260,100 C340,90 430,160 420,260 C410,360 320,430 230,410 C140,390 70,310 80,210 C90,110 180,110 260,100Z");
    }

    100% {
        d: path("M250,80 C350,80 430,170 430,250 C430,330 350,420 250,420 C150,420 70,330 70,250 C70,170 150,80 250,80Z");
    }
}

/* Main Content */

.content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: var(--content-padding);
}

.card {
    width: 100%;
    max-width: var(--content-max-width);
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-xl);
    padding: 48px 32px 40px;
    box-shadow: var(--md-sys-elevation-2);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

/* Card Icon  */

.card__icon-wrap {
    width: 72px;
    height: 72px;
    border-radius: var(--md-sys-shape-corner-lg);
    background: var(--md-sys-color-primary-container);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    animation: iconPulse 3s ease-in-out infinite;
}

.card__icon {
    width: 40px;
    height: 40px;
}

@keyframes iconPulse {

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

    50% {
        transform: scale(1.06);
    }
}

/* Typography */

.card__title {
    font-size: var(--md-sys-typescale-display-large-size);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--md-sys-color-on-surface);
}

.card__body {
    font-size: var(--md-sys-typescale-body-size);
    line-height: 1.7;
    color: var(--md-sys-color-on-surface-variant);
    max-width: 420px;
}

/* Progress Indicator */
.progress {
    width: 100%;
    max-width: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.progress__track {
    width: 100%;
    height: 6px;
    background: var(--md-sys-color-surface-container-high);
    border-radius: var(--md-sys-shape-corner-full);
    overflow: hidden;
    position: relative;
}

.progress__fill {
    position: absolute;
    inset: 0;
    width: 0%;
    background: linear-gradient(90deg,
            var(--md-sys-color-primary),
            var(--md-sys-color-tertiary));
    border-radius: var(--md-sys-shape-corner-full);
    transition: width 80ms linear;
    background-size: 200% 100%;
    animation: shimmer 2s linear infinite;
}

@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.progress__dots {
    display: flex;
    gap: 8px;
}

.progress__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--md-sys-color-outline-variant);
    transition:
        background var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard),
        transform var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}

.progress__dot.active {
    background: var(--md-sys-color-primary);
    transform: scale(1.3);
}

/* Buttons */

.card__cta {
    display: flex;
    justify-content: center;
    margin-top: 8px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 48px;
    padding: 0 28px;
    border-radius: var(--md-sys-shape-corner-full);
    font-size: var(--md-sys-typescale-label-large-size);
    font-weight: var(--md-sys-typescale-label-large-weight);
    letter-spacing: var(--md-sys-typescale-label-large-tracking);
    position: relative;
    overflow: hidden;
    transition:
        background var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard),
        box-shadow var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard),
        transform var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
    text-decoration: none;
}

/* Ripple layer */
.btn::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle, rgba(255, 255, 255, .25) 10%, transparent 10.01%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(10);
    opacity: 0;
    transition: transform .5s, opacity 1s;
    pointer-events: none;
}

.btn:active::after {
    transform: scale(0);
    opacity: .3;
    transition: 0s;
}

/* Linkedin button */
.btn--linkedin {
    background: #0A66C2;
    color: #FFFFFF;
    box-shadow: var(--md-sys-elevation-1);
}

/* Hover */
.btn--linkedin:hover {
    background: #004182;
    box-shadow: var(--md-sys-elevation-2);
}

/* Focus */
.btn--linkedin:focus-visible {
    outline: 2px solid var(--md-sys-color-primary);
    outline-offset: 3px;
}

/* Pressed — subtle scale-down */
.btn--linkedin:active {
    background: #083D6B;
    transform: scale(0.97);
}

/* Visited state */
.btn--linkedin:visited {
    color: #FFFFFF;
}

.btn__icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    transition: transform var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}

.btn__icon--linkedin {
    width: 20px;
    height: 20px;
}

.btn--linkedin:hover .btn__icon {
    transform: scale(1.1);
}

.btn--linkedin:active .btn__icon {
    transform: scale(0.95);
}

/* Footer */

.footer {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 16px var(--content-padding);
    flex-shrink: 0;
}

.footer__copy {
    font-size: 12px;
    color: var(--md-sys-color-outline);
    letter-spacing: 0.4px;
}


/* Reveal animation */

.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity var(--md-sys-motion-duration-long) var(--md-sys-motion-easing-emphasized),
        transform var(--md-sys-motion-duration-long) var(--md-sys-motion-easing-emphasized);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered delays */
.reveal--delay-1 {
    transition-delay: 80ms;
}

.reveal--delay-2 {
    transition-delay: 180ms;
}

.reveal--delay-3 {
    transition-delay: 300ms;
}

.reveal--delay-4 {
    transition-delay: 420ms;
}

.reveal--delay-5 {
    transition-delay: 540ms;
}

/* Reduced motions */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }

    .morph-shape {
        display: none;
    }
}

@media (max-width: 359px) {
    :root {
        --content-padding: 16px;
        --md-sys-typescale-display-large-size: 36px;
    }

    .card {
        padding: 28px 20px 24px;
        gap: 14px;
        border-radius: var(--md-sys-shape-corner-lg);
    }

    .card__icon-wrap {
        width: 56px;
        height: 56px;
    }

    .card__icon {
        width: 32px;
        height: 32px;
    }

    .card__body {
        font-size: 14px;
        line-height: 1.6;
    }

    .progress {
        max-width: 200px;
        gap: 10px;
    }

    .btn {
        height: 44px;
        padding: 0 22px;
        font-size: 13px;
        gap: 8px;
    }

    .btn__icon--linkedin {
        width: 17px;
        height: 17px;
    }

    .footer {
        padding: 12px var(--content-padding);
    }
}

/* Tablet */
@media (min-width: 600px) {
    :root {
        --content-padding: 40px;
        --md-sys-typescale-display-large-size: 48px;
    }

    .card {
        padding: 56px 48px 48px;
        gap: 24px;
    }

    .card__icon-wrap {
        width: 80px;
        height: 80px;
    }

    .card__icon {
        width: 44px;
        height: 44px;
    }

    .card__body {
        max-width: 440px;
    }

    .blob--a {
        width: 400px;
        height: 400px;
    }

    .blob--b {
        width: 300px;
        height: 300px;
    }

    .blob--c {
        width: 220px;
        height: 220px;
    }

    .morph-shape {
        width: 520px;
        height: 520px;
    }
}

/* Laptop/Desktop screen */
@media (min-width: 840px) {
    :root {
        --md-sys-typescale-display-large-size: 64px;
        --content-padding: 48px;
    }

    .card {
        padding: 64px 56px 52px;
        gap: 28px;
    }

    .progress {
        max-width: 320px;
    }

    .progress__track {
        height: 8px;
    }

    .progress__dot {
        width: 10px;
        height: 10px;
    }

    .btn {
        height: 52px;
        padding: 0 32px;
        font-size: 15px;
    }

    .blob--a {
        width: 480px;
        height: 480px;
        filter: blur(80px);
    }

    .blob--b {
        width: 360px;
        height: 360px;
        filter: blur(80px);
    }

    .blob--c {
        width: 260px;
        height: 260px;
        filter: blur(80px);
    }

    .morph-shape {
        width: 640px;
        height: 640px;
    }
}

/* Large desktop */
@media (min-width: 1200px) {
    :root {
        --md-sys-typescale-display-large-size: 72px;
        --content-max-width: 600px;
    }
}

/* Ultrawide */
@media (min-width: 1600px) {
    :root {
        --md-sys-typescale-display-large-size: 80px;
        --content-max-width: 640px;
    }

    .card {
        padding: 72px 64px 60px;
        gap: 32px;
    }

    .card__body {
        max-width: 480px;
        font-size: 17px;
    }

    .btn {
        height: 56px;
        padding: 0 36px;
        font-size: 16px;
    }

    .btn__icon--linkedin {
        width: 22px;
        height: 22px;
    }
}

/* Safe-area insets */
@supports (padding: env(safe-area-inset-bottom)) {
    .footer {
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
    }
}

/* Landscape orientation lock */
@media (max-height: 420px) and (orientation: landscape) {
    .content {
        align-items: flex-start;
        padding: 32px var(--content-padding) var(--content-padding);
    }

    .card {
        padding: 24px 32px 20px;
        gap: 12px;
    }

    .card__icon-wrap {
        width: 48px;
        height: 48px;
    }

    .card__icon {
        width: 28px;
        height: 28px;
    }

    :root {
        --md-sys-typescale-display-large-size: 32px;
    }

    .card__body {
        font-size: 14px;
    }
}