:root {
    --bg: #09080b;
    --card-bg: #191919;
    --status-dot: #76e6bd;
    --hd-text: #ffffff;
    --shd-text: #737373;
    --card-1-bg: #664194;
    --card-2-bg: #a1886c;
    --card-3-bg: #a05656;
    --card-4-bg: #5874aa;
    --card-5-bg: #649a73;
    --card-6-bg: #574672;

    --card-1: #8b5fc3;
    --card-2: #c3a889;
    --card-3: #bb6363;
    --card-4: #6d90d4;
    --card-5: #75b687;
    --card-6: #4b3c64;

    --card-1-hd: #5b3d80;
    --card-2-hd: #8a765f;
    --card-3-hd: #924d4d;
    --card-4-hd: #34588f;
    --card-5-hd: #5b8c69;
    --card-6-hd: #382d4a;

    --body-bg: #0009;
    --dv-bg: #f4f4f4;
    --dv-light: #ffffff99;
    --arrow-bg: #ffffff33;
    --lnk-hover-bg: #0000001a;

    --top-xs-neg: -0.375rem;
    --top-xs: 0.5rem;
    --top-md: 1rem;
    --top-lg: 2rem;
    --top-lg-neg: -2rem;

    --bottom-xs: 0.5rem;
    --bottom-md: 1rem;
    --bottom-xl: 3rem;
    --bottom-lg-neg: -2.75rem;

    --right-xs: 0.5rem;
    --right-xs-neg: -0.5rem;
    --right-md: 1rem;

    --left-xxs-neg: -0.3125rem;
    --left-lg-neg: -2rem;

    --padding-xxs: 0.25rem;
    --padding-xs: 0.5rem;
    --padding-md: 1rem;
    --padding-lg: 2rem;

    --margin-xxs-neg: -0.125rem;
    --margin-xs: 0.5rem;
    --margin-md: 1rem;

    --gap-xs: 0.5rem;
    --gap-sm: 0.75rem;
    --gap-md: 1rem;
    --gap-la: 1.5rem;
    --gap-lg: 2rem;

    --font-size-sm: 0.75rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.25rem;
    --font-size-la: 1.5rem;
    --font-size-hero: 7.5rem;

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-large: 700;

    --border-width-thin: 1px;
    --border-width-medium: 2px;

    --border-radius-xxs: 0.25rem;
    --border-radius-xs: 0.5rem;
    --border-radius-sm: 0.75rem;
    --border-radius-md: 1rem;
    --border-radius-xlg: 10rem;

    --translate-x-sm: 0.25rem;
    --translate-x-sm-neg: -0.25rem;
    --translate-x-md: 1rem;

    --translate-y-md: 1rem;

    --width-xs: 0.5rem;
    --width-xs-plus: 0.75rem;
    --width-sm: 1.5rem;
    --width-md: 2rem;
    --width-lg: 6rem;
    --width-lg-plus: 6.25rem;
    --width-xl: 7.5rem;
    --width-xxl: 11rem;
    --width-sm-max: 12.5rem;

    --height-xxs: 1px;
    --height-xxs-plus: 0.25rem;
    --height-xxs-advanced: 0.3rem;
    --height-xs: 0.5rem;
    --height-xs-plus: 0.75rem;
    --height-sm: 1.5rem;
    --height-sm-plus: 3rem;
    --height-md-minus: 5.5rem;
    --height-md-minus-advanced: 6rem;
    --height-md-minus-alt: 6.25rem;
    --height-md: 7.5rem;
    --height-xl: 14rem;
    --height-xxl: 16rem;

    --min-width-xs: 2rem;
    --min-width-md: 7.5rem;
    --min-height-md: 10rem;

    --max-width-xs: 12.5rem;
    --max-width-sm: 36rem;
    --max-width-md: 75rem;
    --max-width-lg: 85.375rem;
    --max-width-xl: 120rem;

    --line-height: 1.5;

    --size-fluid-sm: clamp(5rem, 18vw, 6.25rem);
}

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

body,
html {
    height: 100%;
    overflow-y: auto;
    background: var(--bg);
    color: var(--hd-text);
    font-family: "Segoe UI", sans-serif;
    transition: background-color 0.1s ease;
}

body.paused *, 
body.paused *::before, 
body.paused *::after {
  animation-play-state: paused !important;
  transition: none !important;
}

body.paused::before {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--body-bg);
  z-index: 9998;
  pointer-events: none;
}

.container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    align-content: flex-start;
    justify-content: center;
    overflow: visible;
    position: relative;
    gap: var(--gap-md);
    height: min-content;
    padding: 0;
}

.wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    align-content: flex-start;
    justify-content: flex-start;
    position: relative;
    overflow: visible;
    flex: none;
    width: 100%;
    max-width: var(--max-width-xl);
    height: min-content;
    gap: var(--gap-lg);
    padding: var(--padding-lg);
    margin: 0 auto;
}

/* Sidebar */
.sidebar {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    align-content: flex-start;
    justify-content: flex-end;
    position: relative;
    overflow: visible;
    align-self: stretch;
    flex: none;
    z-index: 1;
    width: 30%;
    max-width: var(--max-width-sm);
    height: auto;
}

.sidebar-inner {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    align-content: flex-start;
    justify-content: flex-start;
    align-self: stretch;
    position: sticky;
    bottom: var(--bottom-xl);
    overflow: hidden;
    z-index: 1;
    flex: none;
    width: 100%;
    height: min-content;
    gap: var(--gap-md);
    padding: 0;
    opacity: 1;
    will-change: transform;
    transform: none;
}

.sidebar img {
    display: block;
    width: var(--width-xl);
    height: auto;
    margin: 0 0 var(--margin-md);
}

.social-media {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap-xs);
}

.social-media a {
    font-weight: var(--font-weight-medium);
    color: var(--hd-text);
    text-decoration: none;
    transition: color 0.3s ease;
}

.social-media a:hover {
    color: var(--dv-light);
}

.social-media a:not(:last-child)::after {
    content: "/";
    color: var(--hd-text);
    margin-left: var(--margin-xs);
}

.availability {
    display: flex;
    align-items: center;
    gap: var(--gap-md);
}

.status-dot {
    width: var(--width-xs);
    height: var(--height-xs);
    background-color: var(--status-dot);
    border-radius: var(--border-radius-xs);
    animation: smooth-blink 1.5s infinite;
}

.status-text {
    font-size: var(--font-size-md);
}

@keyframes smooth-blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

a {
    color: var(--hd-text);
    text-decoration: underline;
}

h4 {
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height);
}

.copyright-section {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
}

.scroll-indicator {
    margin-top: var(--margin-md);
    width: var(--width-md);
    height: var(--height-sm-plus);
    position: relative;
    border: var(--border-width-medium) solid var(--dv-light);
    border-radius: var(--border-radius-md);
}

.scroll-indicator::after {
    content: "";
    position: absolute;
    top: var(--top-xs);
    left: 50%;
    transform: translateX(-50%);
    width: var(--width-xs);
    height: var(--height-xs);
    background: var(--hd-text);
    border-radius: var(--border-radius-xs);
    animation: scroll 2s infinite;
}

@keyframes scroll {
    0% {
        top: var(--top-xs);
        opacity: 1;
    }

    100% {
        top: var(--top-lg);
        opacity: 0;
    }
}

/* Grid */
.grid {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    position: relative;
    gap: var(--gap-md);
    max-width: var(--max-width-lg);
    height: min-content;
    overflow: visible;
    flex: 1 0 0;
}

.row {
    display: flex;
    flex-shrink: 0;
    transition: all 0.3s ease;
    gap: var(--gap-md);
    height: var(--height-xxl);
    opacity: 0;
    animation: fade-in-row 0.6s ease forwards;
}

.row:nth-child(1) {
    animation-delay: 0.1s;
}

.row:nth-child(2) {
    animation-delay: 0.2s;
}

.row:nth-child(3) {
    animation-delay: 0.3s;
}

.row:nth-child(4) {
    animation-delay: 0.4s;
}

.row:nth-child(5) {
    animation-delay: 0.5s;
}

.row:nth-child(6) {
    animation-delay: 0.6s;
}

@keyframes fade-in-row {
    from {
        opacity: 0;
        transform: translateY(var(--translate-y-md));
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card-wrapper {
    display: flex;
    overflow: hidden;
    pointer-events: none;
    height: 100%;
    transition: flex 0.3s ease;
}

.card-wrapper.card-small {
    flex: 1;
}

.card-wrapper.card-large {
    flex: 2;
}

.card {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    position: relative;
    overflow: hidden;
    pointer-events: auto;
    cursor: pointer;
    width: 100%;
    height: 100%;
    padding: var(--padding-md);
    color: var(--hd-text);
    font-size: var(--font-size-md);
    background: var(--card-bg);
    border-radius: var(--border-radius-md);
    transition: background-color 0.3s ease;
}

.row.hovered .card-small,
.row.hovered .card-large {
    flex: 1 !important;
}

.card-wrapper.card-large .card::before {
    content: attr(data-id);
    position: absolute;
    pointer-events: none;
    z-index: 1;
    font-size: var(--font-size-hero);
    color: var(--shd-text);
    bottom: var(--bottom-lg-neg);
    left: var(--left-lg-neg);
    transform: scale(1) translateX(0);
    transition: transform 0.3s ease;
}

.arrow-wrapper {
    position: absolute;
    top: var(--top-md);
    right: var(--right-md);
    width: var(--width-sm);
    height: var(--height-sm);
    opacity: 0;
    background-color: var(--card-bg);
    border-radius: var(--border-radius-xxs);
    transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease;
}

.arrow-wrapper svg {
    width: 100%;
    height: 100%;
}

.row.hovered .arrow-wrapper {
    opacity: 1;
    transform: scale(1.2);
}

.card.large[data-id="01"] {
    background: url("../img/background/about.jpg");
    background-color: var(--card-bg);
}

.card.large[data-id="02"] {
    background: url("../img/background/precision.jpg");
    background-color: var(--card-bg);
}

.card.large[data-id="03"] {
    background: url("../img/background/learning.jpg");
    background-color: var(--card-bg);
}

.card.large[data-id="04"] {
    background: url("../img/background/showcase.jpg");
    background-color: var(--card-bg);
}

.card.large[data-id="05"] {
    background: url("../img/background/stories.jpg");
    background-color: var(--card-bg);
}

.card.large[data-id="06"] {
    background: url("../img/background/touch.jpg");
    background-color: var(--card-bg);
}

.small-text {
    display: none;
    position: absolute;
    pointer-events: none;
    white-space: pre-line;
    color: var(--hd-text);
    font-size: var(--font-size-md);
}

article p {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: flex-start;
    align-items: flex-start;
    gap: var(--gap-md);
}

.row:nth-child(1):hover .card-wrapper.card-small .card {
    background-color: var(--card-1);
}

.row:nth-child(1).hovered .arrow-wrapper {
    color: var(--card-1);
}

.row:nth-child(2):hover .card-wrapper.card-small .card {
    background-color: var(--card-2);
}

.row:nth-child(2).hovered .arrow-wrapper {
    color: var(--card-2);
}

.row:nth-child(3):hover .card-wrapper.card-small .card {
    background-color: var(--card-3);
}

.row:nth-child(3).hovered .arrow-wrapper {
    color: var(--card-3);
}

.row:nth-child(4):hover .card-wrapper.card-small .card {
    background-color: var(--card-4);
}

.row:nth-child(4).hovered .arrow-wrapper {
    color: var(--card-4);
}

.row:nth-child(5):hover .card-wrapper.card-small .card {
    background-color: var(--card-5);
}

.row:nth-child(5).hovered .arrow-wrapper {
    color: var(--card-5);
}

.row:nth-child(6):hover .card-wrapper.card-small .card {
    background-color: var(--card-6);
}

.row:nth-child(6).hovered .arrow-wrapper {
    color: var(--card-6);
}

.row:nth-child(odd):hover .card-wrapper.card-small .card p {
    position: absolute;
    right: var(--right-md);
    bottom: var(--bottom-md);
    left: auto;
    transform: none;
    text-align: right;
    transition: all 0.3s ease;
}

.detail-view {
    position: relative;
    height: auto;
    width: 100%;
    color: var(--hd-text);
    overflow: visible;
    z-index: 1;
    border-radius: var(--border-radius-md);
    display: block;
}

.years-of-experience {
    font-weight: var(--font-weight-medium);
    text-decoration: underline;
    text-decoration-thickness: var(--border-width-thin);
    text-decoration-style: dotted;
}

.detail-card-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
    height: 100%;
}

.detail-card-wrapper .card {
    padding: var(--padding-lg);
}

.detail-view.hidden {
    display: none;
}

.detail-view .card {
    height: auto;
    cursor: pointer;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.detail-view .close-card {
    justify-content: flex-start;
    overflow: visible;
    font-family: inherit;
    border: none;
}

.detail-view .content-card {
    flex: 1;
    color: var(--hd-text);
    overflow: visible;
    height: auto;
    cursor: auto;
}

.detail-view.row-1 .content-card,
.detail-view.row-1 .close-card {
    background: var(--card-1);
}

.detail-view.row-2 .content-card,
.detail-view.row-2 .close-card {
    background: var(--card-2);
}

.detail-view.row-3 .content-card,
.detail-view.row-3 .close-card {
    background: var(--card-3);
}

.detail-view.row-4 .content-card,
.detail-view.row-4 .close-card {
    background: var(--card-4);
}

.detail-view.row-5 .content-card,
.detail-view.row-5 .close-card {
    background: var(--card-5);
}

.detail-view.row-6 .content-card,
.detail-view.row-6 .close-card {
    background: var(--card-6);
}

.detail-view.row-1 .line-animated,
.detail-view.row-1 .section-title {
    background: var(--card-1-hd);
}

.detail-view.row-2 .line-animated,
.detail-view.row-2 .section-title {
    background: var(--card-2-hd);
}

.detail-view.row-3 .line-animated,
.detail-view.row-3 .section-title {
    background: var(--card-3-hd);
}

.detail-view.row-4 .line-animated,
.detail-view.row-4 .section-title {
    background: var(--card-4-hd);
}

.detail-view.row-5 .line-animated,
.detail-view.row-5 .section-title {
    background: var(--card-5-hd);
}

.detail-view.row-6 .line-animated,
.detail-view.row-6 .section-title {
    background: var(--card-6-hd);
}

.separator {
    display: block;
    height: var(--height-xxs);
    background-color: var(--dv-light);
    width: 100%;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--gap-md);
    opacity: 0;
    animation: fade-in-up 1s ease forwards;
}

.section-title {
    display: inline-block;
    padding: var(--padding-xs) var(--padding-md);
    border-radius: var(--border-radius-xs);
    flex-shrink: 0;
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
}

.line-wrapper {
    position: relative;
    width: 100%;
    height: var(--height-xs);
    overflow: hidden;
}

.line-base {
    position: absolute;
    height: var(--height-xxs);
    width: 100%;
    background: var(--dv-bg);
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

.line-animated {
    position: absolute;
    height: var(--height-xxs-plus);
    width: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    animation: grow-line 1s ease-in-out forwards;
}

.back-button {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
}

.btn-text,
.icon-back-arrow {
    transition: transform 0.3s ease;
    display: inline-flex;
    align-items: center;
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
}

.back-button:hover .btn-text {
    transform: translateX(var(--translate-x-sm));
}

.back-button:hover .icon-back-arrow {
    transform: translateX(var(--translate-x-sm-neg));
}

[data-title] {
    position: relative;
    cursor: pointer;
}

[data-title]:hover::before {
    content: attr(data-title);
    position: absolute;
    top: var(--top-lg-neg);
    font-size: var(--font-size-sm);
    white-space: nowrap;
    left: 57%;
    display: inline-block;
    padding: var(--padding-xs);
    border-radius: var(--border-radius-xs);
    color: var(--hd-text);
    background: var(--card-bg);
    transform: translateX(-50%);
}

.inactivity-message {
    position: fixed;
    bottom: var(--bottom-md);
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg);
    border: var(--border-width-thin) solid var(--dv-light);
    border-radius: var(--border-radius-xs);
    padding: var(--padding-lg);
    line-height: var(--line-height);;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
    max-width: 90%;
    width: 75%;
    text-align: start;
    z-index: 9999;
}

.inactivity-message.show {
    opacity: 1;
    pointer-events: auto;
}

.inactivity-message strong {
    font-weight: var(--font-weight-large);
}

@media (min-width: 600px) and (max-width: 991px) {
    .inactivity-message {
        padding: var(--padding-lg);
        width: 95%;
    }
}

@keyframes grow-line {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

@media (max-width: 768px) {

    html,
    body {
        height: auto;
        overflow-y: auto;
    }

    .wrapper {
        flex-direction: column;
        height: auto;
        max-width: none;
        margin: 0;
        padding: var(--padding-md);
    }

    .sidebar {
        width: 100%;
        height: auto;
        position: relative;
        overflow: visible;
        max-width: none;
    }

    .grid {
        margin-left: 0;
        width: 100%;
        height: auto;
        overflow-y: visible;
    }

    .detail-view,
    .detail-view.active {
        position: relative;
        width: 100%;
        height: auto;
        padding: 0;
        overflow-y: visible;
    }

    .scroll-indicator {
        display: none !important;
    }

    .row {
        flex-direction: column;
        height: var(--height-xl);
        gap: var(--gap-md);
    }

    .card-wrapper.card-small {
        display: none;
    }

    .card-wrapper.card-large {
        flex: none;
        width: 100%;
        height: var(--height-xl);
        position: relative;
    }

    .card.large {
        justify-content: flex-start;
        align-items: flex-end;
    }

    .card-wrapper.card-large .card::before {
        left: auto;
        right: var(--right-xs-neg);
    }

    .small-text {
        display: block;
        white-space: normal;
    }
}

@media only screen and (min-width: 769px) and (max-width: 1024px),
(max-width: 1365px) and (min-width: 810px) {

    html,
    body {
        height: auto;
        overflow-y: auto;
    }

    .wrapper {
        flex-direction: column;
        height: auto;
        max-width: none;
        margin: 0;
        padding: var(--padding-md);
    }

    .sidebar {
        width: 100%;
        height: auto;
        display: flex;
        align-items: flex-start;
        position: relative;
        overflow: visible;
        max-width: none;
    }

    .grid {
        width: 100%;
        margin-left: 0;
        height: auto;
        overflow-y: visible;
        position: relative;
        z-index: 1;
    }

    .detail-view,
    .detail-view.active {
        position: relative;
        width: 100%;
        height: auto;
        padding: 0;
        overflow-y: visible;
    }

    .scroll-indicator {
        display: none !important;
    }

    .row {
        flex-direction: row;
        gap: var(--gap-md);
        height: var(--height-xl);
        flex-wrap: nowrap;
    }

    .card-wrapper.card-small {
        flex: 1;
        height: 100%;
    }

    .card-wrapper.card-large {
        flex: 2;
        height: 100%;
    }

    .card {
        justify-content: flex-start;
        align-items: flex-end;
    }

    .small-text {
        display: none !important;
    }

    .row.hovered .card-small,
    .row.hovered .card-large {
        flex: 1 !important;
    }
}

@media (min-width: 768px) {
    .row:nth-child(1):hover .card-wrapper.card-large .card::before {
        color: var(--card-1);
    }

    .row:nth-child(2):hover .card-wrapper.card-large .card::before {
        color: var(--card-2);
    }

    .row:nth-child(3):hover .card-wrapper.card-large .card::before {
        color: var(--card-3);
    }

    .row:nth-child(4):hover .card-wrapper.card-large .card::before {
        color: var(--card-4);
    }

    .row:nth-child(5):hover .card-wrapper.card-large .card::before {
        color: var(--card-5);
    }

    .row:nth-child(6):hover .card-wrapper.card-large .card::before {
        color: var(--card-6);
    }

    .row:hover .card-wrapper.card-large .card::before {
        transform: scale(1.5) translateX(var(--translate-x-md));
    }
}