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

html {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
}

img,
svg {
    max-width: 100%;
}

.header {
    padding: clamp(18px, 4vw, 30px) 16px;
}

.header h1 {
    font-size: clamp(1.8rem, 5vw, 3.5rem);
    line-height: 1.12;
    letter-spacing: clamp(1px, 0.4vw, 4px);
    overflow-wrap: anywhere;
}

.timeline-chart-container,
.interests-container,
.wishlist-container,
.tech-stack-container,
.scroll-box {
    width: min(100%, 980px);
}

.interests-container,
.wishlist-container {
    max-width: 860px;
}

.tech-stack-container {
    max-width: 760px;
}

.timeline-chart-container {
    max-width: 1000px;
}

.interests-title,
.wishlist-title,
.tech-stack-title,
.chart-title {
    font-size: clamp(1.55rem, 3vw, 2.2rem);
    line-height: 1.2;
}

@media screen and (min-width: 1024px) {
    .page-content {
        width: min(1180px, calc(100% - 64px));
    }

    .hero-section {
        grid-template-columns: minmax(0, 1.2fr) minmax(320px, 380px);
    }

    .social-media-card,
    .scroll-box,
    .interests-container,
    .wishlist-container,
    .tech-stack-container {
        border-radius: 20px;
    }
}

@media screen and (max-width: 900px) {
    .page-content {
        width: min(100%, calc(100% - 32px));
        padding: 28px 0 64px;
    }

    .hero-section {
        grid-template-columns: 1fr;
        gap: 28px;
        margin-bottom: 36px;
    }

    .hero-copy {
        order: 2;
    }

    .hero-card {
        order: 1;
    }

    .hero-title {
        font-size: clamp(2rem, 8vw, 3rem);
    }

    .hero-text {
        font-size: 1rem;
    }

    .profile-card-wrapper {
        width: min(340px, calc(100vw - 48px));
        height: min(340px, calc(100vw - 48px));
    }

    .profile-card {
        padding: clamp(20px, 6vw, 28px);
    }

    .profile-header h2 {
        font-size: clamp(1.45rem, 6vw, 2rem);
    }

    .profile-body .description {
        font-size: clamp(0.85rem, 3.2vw, 1rem);
    }

    .social-media-card,
    .scroll-box,
    .interests-container,
    .wishlist-container,
    .tech-stack-container,
    .timeline-chart-container {
        width: 100%;
        padding: clamp(18px, 5vw, 26px);
        margin-left: auto;
        margin-right: auto;
    }

    .card-inner {
        flex-direction: column;
        gap: 14px;
    }

    .platform {
        width: 100%;
        margin: 0;
        padding: 18px;
    }

    .scroll-box {
        overflow: hidden;
        margin-bottom: 36px;
    }

    .scroll-content {
        gap: 18px;
    }

    .card-container {
        gap: 14px;
        padding: 6px;
    }

    .card {
        min-width: 220px;
        max-width: 220px;
        padding: 16px;
        border-radius: 14px;
    }

    .timeline-chart {
        padding: 0;
    }

    .point-content {
        padding: 14px;
    }

    .interests-grid,
    .tech-stack-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 12px 0 0;
    }

    .interest-card,
    .wish-item {
        margin: 0;
        padding: 18px;
        border-radius: 14px;
    }

    .tech-category {
        margin: 0;
        padding: 12px 0;
    }

    .wish-description,
    .wish-progress {
        margin-left: 0;
    }

    .words {
        width: 100%;
        padding: 0 4px;
        font-size: clamp(1rem, 4vw, 1.25rem);
        line-height: 1.6;
    }

    .loader {
        top: 12px;
        right: 12px;
        transform: scale(0.34);
    }

    .stickman-container,
    .dinosaur-container {
        display: none;
    }
}

@media screen and (max-width: 520px) {
    .page-content {
        width: min(100%, calc(100% - 20px));
        padding: 18px 0 46px;
    }

    .header {
        padding: 16px 10px;
    }

    .header h1 {
        font-size: clamp(1.35rem, 8vw, 2rem);
        letter-spacing: 1px;
    }

    .hero-section {
        gap: 20px;
        margin-top: 0;
    }

    .hero-copy {
        gap: 14px;
    }

    .hero-kicker,
    .section-kicker {
        letter-spacing: 0.14em;
        font-size: 0.75rem;
    }

    .hero-title {
        font-size: clamp(1.85rem, 10vw, 2.35rem);
        line-height: 1.08;
    }

    .profile-card-wrapper {
        width: min(100%, 320px);
        height: min(320px, calc(100vw - 28px));
    }

    .orbit-container {
        display: none;
    }

    .social-media-card,
    .scroll-box,
    .interests-container,
    .wishlist-container,
    .tech-stack-container,
    .timeline-chart-container {
        padding: 16px;
        border-radius: 16px;
    }

    .platform-icon,
    .interest-icon {
        font-size: 2rem;
        margin-bottom: 10px;
    }

    .platform-name,
    .platform-id {
        overflow-wrap: anywhere;
    }

    .scroll-box-header h2,
    .interests-title,
    .wishlist-title,
    .tech-stack-title,
    .chart-title {
        font-size: 1.45rem;
        letter-spacing: 0;
    }

    .card {
        min-width: 196px;
        max-width: 196px;
        padding: 14px;
    }

    .card h3 {
        font-size: 1rem;
    }

    .card p {
        font-size: 0.86rem;
    }

    .interest-name,
    .wish-title,
    .category-title {
        font-size: 1rem;
        line-height: 1.35;
    }

    .interest-description,
    .wish-description,
    .description {
        font-size: 0.88rem;
    }

    .tech-info {
        gap: 12px;
    }

    .tech-name {
        overflow-wrap: anywhere;
    }

    .loader {
        display: none;
    }
}

@media (hover: none) {
    .profile-card:hover,
    .card:hover,
    .interest-card:hover,
    .wish-item:hover,
    .platform:hover {
        transform: none;
    }

    .interest-card:hover::after {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

@media screen and (max-width: 900px) {
    .resume-section .timeline-chart {
        padding-left: 22px;
    }

    .resume-section .chart-line {
        display: block;
        left: 8px;
    }

    .resume-section .point-content {
        padding: 18px;
    }
}

@media screen and (max-width: 520px) {
    .resume-section .timeline-chart {
        padding-left: 18px;
    }

    .resume-section .point-content {
        padding: 16px;
    }
}