:root {
    --color-primary-base: 0.55 0.16 250;
    --color-bg-base: 0.24 0 0;
    --color-surface-base: 0.28 0 0;
    --color-text-base: 1 0 0;
    --bg-main: oklch(var(--color-bg-base));
    --bg-surface: oklch(var(--color-surface-base));
    --bg-surface-hover: oklch(from var(--bg-surface) calc(l + 0.05) c h);
    --bg-surface-active: oklch(from var(--text-main) l c h / 50%); 
    --text-main: oklch(var(--color-text-base));
    --text-muted: oklch(from var(--text-main) calc(l - 0.15) c h);
    --interactive-base: oklch(var(--color-primary-base));
    --shadow-main: oklch(0% 0 0deg / 35%);
    --glow-primary: oklch(from var(--text-main) l c h / 12%);
    --glow-secondary: oklch(from var(--text-main) l c h / 2%);
    --glow-border: oklch(from var(--text-main) l c h / 40%);
    --layout-padding: 50px;
    --tile-gap: 10px;
    --group-gap: 40px;
    --color-grad-1: #ee7752;
    --color-grad-2: #e73c7e;
    --color-grad-3: #23a6d5;
    --color-grad-4: #23d5ab;
}

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

.start-button, .start-menu, .tile, .error-page, .rolling-wall {
    user-select: none;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100dvh;
    font-family: "Segoe UI", Arial, sans-serif;
    background-color: var(--bg-main);
    color: var(--text-main);
    overflow: clip; 
}

#app-root, #router-outlet, app-home {
    display: block;
    width: 100%;
    height: 100%;
}

.skip-link {
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--bg-surface);
    color: var(--text-main);
    padding: 8px 16px;
    text-decoration: none;
    z-index: 100;
    border-radius: 0 0 4px;
    transform: translateY(-100%);
    transition: transform 0.2s ease;
}
.skip-link:focus { transform: translateY(0); }

.bg-gradient-animated {
    background: linear-gradient(-45deg, var(--color-grad-1), var(--color-grad-2), var(--color-grad-3), var(--color-grad-4));
    background-size: 600% 600%;
    animation: home-bg-move 20s ease infinite;
}

.home {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    overflow: hidden;
}

@keyframes home-bg-move {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes rolling-wall-fade {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes center-box-swoosh {
    0% {
        transform: translate(-50%, 40vh) scale(0.8);
        opacity: 0;
        filter: blur(20px);
    }

    70% {
        transform: translate(-50%, -55%) scale(1.05);
        opacity: 1;
        filter: blur(0);
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
        filter: blur(0);
        opacity: 1;
    }
}

.rolling-wall {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 150vw;
    height: 150vh;
    transform: translate(-50%, -50%) rotate(-6deg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 15px;
    font-family: 'Barlow Condensed', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-style: italic;
    font-weight: 800;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0;
    animation: rolling-wall-fade 2.5s ease 50ms forwards;

    --box-padding-x: 10px;
    --box-padding-y: 8px;
    --word-width: 250px;
    --active-width: calc(var(--word-width) + var(--box-padding-x) * 2);
    --word-font-size: clamp(2rem, 9vw, 5rem);
}

.rolling-row-container {
    width: 100%;
    height: calc(var(--word-font-size) * 1.2);
    position: relative;
}

.rolling-row {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(0, -50%);
    display: flex;
    gap: 20px;
    width: max-content;
    will-change: transform;
    contain: layout paint;
}

.rolling-word {
    font-size: var(--word-font-size);
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: var(--stroke-width, 2px) var(--stroke-color, rgb(255 255 255 / 35%));
    user-select: none;
    cursor: pointer;
    transition: opacity 0.3s ease, color 0.3s ease, -webkit-text-stroke 0.3s ease, transform 0.3s ease;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    font-family: inherit;
    font-style: italic;
    font-weight: inherit;
    text-transform: inherit;
}

.rolling-word:focus-visible {
    outline: 2px solid var(--interactive-base);
    outline-offset: 4px;
    border-radius: 4px;
}

.rolling-word:not(.rolling-word--solid):hover {
    opacity: 1;
    color: rgb(255 255 255 / 15%);
    -webkit-text-stroke: calc(var(--stroke-width, 2px) + 1px) rgb(255 255 255 / 90%);
}

.rolling-word--solid {
    color: white;
    -webkit-text-stroke: var(--stroke-width, 2px) white;
    cursor: default;
}

.rolling-center-box {
    --box-padding-x: 10px;
    --box-padding-y: 8px;
    --active-width: calc(var(--word-width) + var(--box-padding-x) * 2);
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--active-width);
    height: calc(var(--word-font-size) + var(--box-padding-y) * 2);
    transform: translate(-50%, -50%);
    z-index: 30;
    opacity: 0;
    margin: 0;
    font-weight: inherit;
    animation: center-box-swoosh 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 400ms forwards;
    transition: width 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.rolling-center-box__prefix {
    position: absolute;
    bottom: 100%;
    left: 0;
    background-color: oklch(24% 0 0deg);
    padding: 2px 10px;
    margin-bottom: -1px;
    font-size: clamp(0.85rem, 2.5vw, 1.1rem);
    color: white;
    font-weight: lighter;
    z-index: 20;
    text-transform: none;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.rolling-center-track-wrapper {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: oklch(24% 0 0deg);
    overflow: hidden;
    display: block;
}

.rolling-row--center {
    left: 50%;
    top: 50%;
}

.start-button {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--bg-surface);
    color: var(--text-main);
    font-size: 1rem;
    padding: 10px 20px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    transition: box-shadow 0.3s, background-color 0.3s;
    z-index: 1000;
}

.start-button:hover, .start-button:focus-visible {
    background-color: var(--bg-surface-hover);
    box-shadow: 0 4px 12px var(--shadow-main);
}

.start-button:active {
    background-color: var(--bg-surface-active);
}

.start-menu {
    position: fixed;
    inset: auto 0 0;
    margin: 0 auto;
    width: max-content;
    background-color: oklch(from var(--bg-main) calc(l - 0.05) c h / 95%);
    padding: var(--layout-padding);
    overflow-y: auto;
    box-shadow: 0 -4px 20px var(--shadow-main);
    transform: translateY(150%);
    transition: transform 0.5s cubic-bezier(0.4, 1.4, 0.6, 1);
    z-index: 999;
}

.start-menu--active {
    transform: translateY(-120px);
}

.start-menu__back {
    display: none;
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: var(--bg-surface);
    color: var(--text-main);
    border: none;
    padding: 14px;
    cursor: pointer;
    border-radius: 4px;
    box-shadow: 0 2px 6px var(--shadow-main);
    transition: background-color 0.3s;
}

.start-menu__back:hover, .start-menu__back:focus-visible {
    background-color: var(--bg-surface-hover);
}

.start-menu__back:active {
    background-color: var(--bg-surface-active);
    transform: scale(0.98);
}

.start-menu__groups {
    display: flex;
    gap: var(--group-gap) 8px;
    flex-wrap: wrap;
    max-width: 518px;
}

.tile-group {
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateX(40px) scale(0.8);
    transition: opacity 0.5s cubic-bezier(0.4, 2, 0.6, 1), transform 0.5s cubic-bezier(0.4, 2, 0.6, 1);
}

.tile-group--animated {
    opacity: 1;
    transform: translateX(0) scale(1);
}
.tile-group:nth-child(3n) { flex-basis: 100%; }

.tile-group__title {
    color: var(--text-main);
    font-size: 1.2rem;
    margin: 0 0 20px;
    font-weight: 400;
    transition: font-weight 0.3s ease;
}
.tile-group:hover .tile-group__title { font-weight: 700; }

.tile-group__grid {
    display: grid;
    gap: var(--tile-gap);
    list-style: none;
    padding: 0;
    margin: 0;
}
.tile-group__grid--medium-vertical { grid-template-columns: repeat(2, 122px); }
.tile-group__grid--wide { grid-template-columns: 254px; }

.tile-group__grid--social {
    grid-template-columns: repeat(4, 122px);
    justify-items: center;
}

.tile {
    background-color: var(--bg-surface);
    color: var(--text-main);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    opacity: 0;
    transform: translateX(40px) scale(0.8);
    transition: opacity 0.5s cubic-bezier(0.4, 2, 0.6, 1), transform 0.5s cubic-bezier(0.4, 2, 0.6, 1), background-color 0.2s, box-shadow 0.2s;
    text-decoration: none;
    border: none;
    padding: 0;
    border-radius: 4px;
}

.tile--animated {
    opacity: 1;
    transform: translateX(0) scale(1);
}

.tile:hover, .tile:focus-visible {
    background-color: var(--bg-surface-hover);
    box-shadow: 0 4px 20px var(--shadow-main);
    transform: scale(1.05);
}

.tile:active {
    background-color: var(--bg-surface-active);
    box-shadow: none;
    transform: scale(1.01);
}

.tile--medium {
    width: 122px;
    height: 122px;
}

.tile--wide {
    width: 254px;
    height: 122px;
}

.tile__icon {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s ease;
}

.tile__icon img, .tile__icon svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.tile__text {
    position: absolute;
    bottom: 5px;
    left: 5px;
    font-size: 0.9rem;
    text-align: center;
    color: var(--text-muted);
    text-shadow: 0 1px 2px var(--shadow-main);
    transform: translateY(30px);
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.4s ease;
}

.tile:hover .tile__text, .tile:focus-visible .tile__text {
    opacity: 1;
    transform: translateY(0);
}

.tile--glow {
    --glow-x: 50%;
    --glow-y: 50%;
}

.tile--glow::before, .tile--glow::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.tile--glow::before {
    background: radial-gradient(circle 60px at var(--glow-x) var(--glow-y), var(--glow-primary) 0%, var(--glow-secondary) 60%, transparent 100%);
    z-index: 1;
}

.tile--glow::after {
    border: 2px solid var(--glow-border);
    mask-image: radial-gradient(circle 60px at var(--glow-x) var(--glow-y), black 0%, black 40%, transparent 100%);
    z-index: 2;
}

@media (width <= 600px) {
    .start-menu {
        inset: 0;
        width: 100%;
        height: 100%;
        padding: 20px;
        transform: translateY(100%);
        border-radius: 0;
        border: none;
    }
    .start-menu--active { transform: translateY(0); }

    .start-menu__groups { 
        flex-direction: column; 
        align-items: center; 
        width: 100%;
        padding: 60px 20px 20px;
        height: max-content;
    }

    .tile-group {
        width: 100%;
    }

    .tile-group__grid {
        display: grid;
        height: auto;
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 120px;
    }

    .tile--medium, .tile--wide {
        width: 100%;
        height: 100%;
    }

    .tile--wide {
        grid-column: span 2;
    }
    
    .start-menu__back { display: block; }
}



.error-page {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100%;
    width: 100%;
    position: absolute;
    inset: 0;
    font-family: sans-serif;
    font-weight: 600;
}

.app-error__message {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    color: red;
    font-size: 24px;
    font-family: sans-serif;
}

.error-page__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--text-main);
    opacity: 0;
    animation: error-page-fade-in 2s ease 500ms 1 normal forwards;
    gap: 20px;
    z-index: 2;
    contain: paint layout;
}

.error-page__content--403,
.error-page__content--404 {
    font-size: 36px;
}

.error-page__pic {
    width: 300px;
    height: 300px;
    object-fit: cover;
    border-radius: 20px;
}

.error-page__link {
    color: var(--text-main);
    background-color: rgb(0 0 0 / 20%);
    transition: 0.5s;
    padding: 10px 15px;
    border-radius: 50px;
    text-decoration: none;
    font-size: 24px;
}

.error-page__link:hover {
    background-color: rgb(0 0 0 / 100%);
    padding: 10px 50px;
    color: #bb004e;
}

@keyframes error-page-fade-in {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }

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

.icon {
    font-family: 'Material Symbols Rounded', sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    overflow-wrap: normal;
    white-space: nowrap;
    direction: ltr;
}

svg.icon {
    width: 1em;
    height: 1em;
    fill: currentcolor;
}

.icon-fill {
    font-variation-settings: 'FILL' 1;
}