@import "tailwindcss";
@import 'animate.css';
@plugin "daisyui";
@plugin "@tailwindcss/typography";

@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
@custom-variant light (&:where([data-theme=light], [data-theme=light] *));

@theme {
    --breakpoint-sm: 0px;
    --breakpoint-md: 1024px;
    --breakpoint-lg: 1280px;
    --page-scroll-bg: transparent;
    --animation-size: 1;

    --animate-wiggle: wiggle 0.3s ease-in-out 1;
    --animate-rotate-instant: rotate 0.3s ease-in-out 1;
    --animate-rotate: rotate 0.3s ease-in-out 1 200ms;
    --animate-rotate-small: rotate-small 0.3s ease-in-out 1 200ms;
    --animate-scale: scale 0.3s ease-in-out 1;
    --animate-slide-up: slide-up 0.2s ease-in-out 1;
    --animate-scale-delayed: scale 0.3s ease-in-out 1 100ms;
    --animate-scale-small: scale-small 0.3s ease-in-out 1;
    --animate-fade-out: fade-out 0.3s ease-out 1;
    --animate-fade-in: fade-out 0.6s ease-out 1 reverse forwards;
    --animate-bg-zoom: zoom-in-scale 0.6s ease-out 1 forwards;
    --animate-bg-zoom-big: zoom-in-scale-big 0.6s ease-out 1 forwards;
    --animate-bg-zoom-scroll: zoom-in-bg 0.6s ease-out 1 forwards;

    @keyframes zoom-in-scale-big {
        0% {
            scale: 150%;
            opacity: 0;
        }

        100% {
            scale: 100%;
            opacity: 1;
        }
    }

    @keyframes zoom-in-scale {
        0% {
            scale: 105%;
            opacity: 0;
        }

        100% {
            scale: 100%;
            opacity: 1;
        }
    }

    @keyframes slide-up {
        0% {
            opacity: 0;
            transform: translate(0, 10px)
        }

        100% {
            opacity: 1;
        }
    }

    @keyframes fade-out {
        0% {
            opacity: 1;
        }

        100% {
            opacity: 0;
        }
    }

    @keyframes scale-small {

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

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

    @keyframes scale {

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

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

    @keyframes rotate-small {

        0%,
        50%,
        100% {
            transform: rotate(0deg);
        }

        25% {
            transform: rotate(0.2deg);
        }

        75% {
            transform: rotate(-0.2deg);
        }
    }

    @keyframes rotate {

        0%,
        50%,
        100% {
            transform: rotate(0deg);
        }

        25% {
            transform: rotate(calc(1deg * var(--animation-size)));
        }

        75% {
            transform: rotate(calc(-1deg * var(--animation-size)));
        }
    }

    @keyframes wiggle {

        0%,
        100% {
            transform: perspective(400px) rotate3d(0, 1, 0, 2deg);
        }

        50% {
            transform: perspective(400px) rotate3d(0, 1, 0, -2deg);
        }
    }
}

@layer base {
    @variant sm {
        :root {
            --game-card-height: calc(var(--spacing) * 52);
            --game-card-height-safe: calc(var(--spacing) * 52);
            --game-card-width: calc(var(--spacing) * 33.28);
        }
    }

    @variant landscape {
        @keyframes zoom-in-bg {
            0% {
                background-size: 125% auto;
                background-color: var(--color-base-100);
            }

            100% {
                background-size: 120% auto;
                background-color: var(--color-base-300);
            }
        }
    }

    @variant portrait {
        @keyframes zoom-in-bg {
            0% {
                background-size: auto 125%;
                background-color: var(--color-base-100);
            }

            100% {
                background-size: auto 120%;
                background-color: var(--color-base-300);
            }
        }
    }

    @variant md {
        :root {
            --game-card-height: calc(var(--spacing) * 100);
            --game-card-height-safe: calc(var(--spacing) * 100 + 3.5rem);
            --game-card-width: calc(var(--spacing) * 64);
        }
    }
}

symbol path {
    fill: var(--color-base-content) !important;
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    background-color: var(--color-base-100);
}

body {
    font-family: 'Alan Sans', sans-serif;
}

@utility focusable-* {
    --focus-ring-color: --value(--color-*);
}

@utility hide-scrollbar {
    scrollbar-width: none;
}

@utility no-scrollbar {
    scrollbar-width: none;
}

@utility scrollbar-* {
    scrollbar-width: --value(integer);
    scrollbar-width: --value([integer]);
    scrollbar-width: --value("none");
}

@utility animation-size-* {
    --animation-size: --value(number);
}

@utility animation-delay-* {
    --tw-animation-delay: --value([*]);
    --tw-animation-delay: --value(integer)ms;
    animation-delay: var(--tw-animation-delay);
}

@custom-variant focused {

    &:where([data-active-control="gamepad"] &[data-focused=true]),
    &:where([data-active-control="keyboard"] &[data-focused=true]) {
        @slot;
    }
}

@custom-variant focused-child {

    &:where([data-active-control="gamepad"] &:has([data-focused=true])),
    &:where([data-active-control="keyboard"] &:has([data-focused=true])) {
        @slot;
    }
}

@custom-variant in-focused {

    &:where([data-active-control="gamepad"] [data-focused=true] *),
    &:where([data-active-control="keyboard"] [data-focused=true] *) {
        @slot;
    }
}

@custom-variant control-mouse (&:where([data-active-control="mouse"] *));
@custom-variant control-touch (&:where([data-active-control="touch"] *));
@custom-variant control-keyboard (&:where([data-active-control="keyboard"] *));
@custom-variant control-gamepad (&:where([data-active-control="gamepad"] *));
@custom-variant control-pointer (&:where([data-active-control="mouse"] *), &:where([data-active-control="touch"] *));
@custom-variant mobile (&:where([data-device="mobile"] *));

@container scroll-state(stuck: top) {
    .sticky-header {
        background-color: var(--color-base-100);
    }

}

@layer components {

    .focusable {
        --focus-ring-color: --value(--color-accent);
        @apply md:ring-14 sm:ring-8 ring-transparent transition-shadow;
    }

    [data-active-control="keyboard"] .group-focusable[data-focused="true"] .focusable,
    [data-active-control="gamepad"] .group-focusable[data-focused="true"] .focusable,
    [data-active-control="keyboard"] .focusable[data-focused=true],
    [data-active-control="gamepad"] .focusable[data-focused=true],
    [data-active-control="mouse"] .group-focusable:hover .focusable-hover,
    [data-active-control="mouse"] .focusable-hover:hover {
        @apply md:ring-7 sm:ring-4 ring-(--focus-ring-color);
    }

    .background {
        -webkit-backface-visibility: hidden;
        -webkit-perspective: 1000;
        -webkit-transform: translate3d(0, 0, 0);
        -webkit-transform: translateZ(0);
        backface-visibility: hidden;
        perspective: 1000;
        transform: translate3d(0, 0, 0);
        transform: translateZ(0);
    }

    .container-scroll {
        container-type: scroll-state;
    }

    .sticky-header {
        position: sticky;
        top: 0;
        left: 0;
        right: 0;
    }

    .game-card {
        @apply rounded-2xl;
    }

    .menu-icon svg {
        @apply sm:size-6 md:size-9 transition-all;
    }

    .menu-icon.focus svg {
        @apply sm:size-8 md:size-10;
    }

    .header-icon svg {
        @apply md:w-8 md:h-8 md:min-w-8 md:min-h-8 sm:w-5 sm:h-5 sm:min-w-5 sm:min-h-5;
    }

    .header-icon-small svg {
        @apply w-6 h-6 min-w-6 min-h-6;
    }

    .card-list {
        display: flex;
    }

    .test {
        display: grid;
        grid-template-columns: repeat(auto-fill, var(--game-card-width));
        grid-auto-rows: var(--game-card-height);
    }

    .card-grid {

        @apply grid pb-4;
    }

    .bg-gradient {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: -1;
        background-repeat: repeat;
        --bg-gradient-opacity: 15%;

        @variant dark {
            background:
                radial-gradient(at 10% 20%, rgb(from var(--color-error) r g b / var(--bg-gradient-opacity)), transparent 60%),
                radial-gradient(at 80% 30%, rgb(from var(--color-info) r g b / var(--bg-gradient-opacity)), transparent 60%),
                radial-gradient(at 40% 90%, rgb(from var(--color-success) r g b / var(--bg-gradient-opacity)), transparent 60%),
                radial-gradient(at 90% 80%, rgb(from var(--color-warning) r g b / var(--bg-gradient-opacity)), transparent 60%);
            background-color: var(--color-base-100);
        }

        @variant light {
            background-color: var(--color-base-300);
        }
    }

    .bg-noise {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
        background-image: url("https://momentsingraphics.de/Media/BlueNoise/BlueNoise470.png");
        mix-blend-mode: color-dodge;
        opacity: 0.1;
    }

    .bg-dots {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
        background-image: radial-gradient(var(--color-neutral) 0.1rem, transparent 0.1rem);
        background-size: 2rem 2rem;
        background-position: -1rem -1rem;

        @variant dark {
            opacity: 0.5;
            @apply mask-radial-at-center mask-radial-from-0 mask-radial-farthest-corner;
        }

        @variant light {
            opacity: 0.3;
            @apply mask-radial-at-center mask-radial-from-0 mask-radial-farthest-corner;
        }
    }

    .bg-gradient-back {

        --bg-opacity: 90%;
        background:
            radial-gradient(at 10% 20%, color-mix(in srgb, var(--color-secondary), transparent var(--bg-opacity)), transparent 60%),
            radial-gradient(at 80% 30%, color-mix(in srgb, var(--color-info), transparent var(--bg-opacity)), transparent 60%),
            radial-gradient(at 40% 90%, color-mix(in srgb, var(--color-success), transparent var(--bg-opacity)), transparent 60%),
            radial-gradient(at 90% 80%, color-mix(in srgb, var(--color-warning), transparent var(--bg-opacity)), transparent 60%);

        background-blend-mode: screen;
        background-repeat: repeat;
    }

    @keyframes scroll-bg {
        to {
            transform: translateY(800px);
        }
    }

    &::view-transition-old(.game-card),
    &::view-transition-new(.game-card) {
        height: 100%;
        width: 100%;
    }

    html:active-view-transition-type(slide-up) {

        &::view-transition-old(root) {
            animation: fade-out 200ms ease-in forwards;
        }

        &::view-transition-new(root) {
            animation: slide-up 200ms ease-out forwards;
        }
    }

    html:active-view-transition-type(zoom-in) {

        &::view-transition-old(root) {
            animation: fade-out 200ms ease-in forwards;
        }

        &::view-transition-new(root) {
            animation: zoom-in-fade-in 200ms ease-out forwards;
        }
    }

    html:active-view-transition-type(zoom-out) {

        &::view-transition-old(root) {
            animation: zoom-out-fade-out 200ms ease-out forwards;
        }

        &::view-transition-new(root) {
            animation: zoom-start-small-in-fade-in 200ms ease-out forwards;
        }
    }

    @keyframes fade-out {
        from {
            opacity: 1;
        }

        to {
            opacity: 0;
        }
    }

    @keyframes zoom-start-small-in-fade-in {
        from {
            scale: 95%;
            opacity: 0;
        }

        to {
            scale: 100%;
            opacity: 1;
        }
    }

    @keyframes zoom-in-fade-out {
        from {
            scale: 100%;
            opacity: 1;
        }

        to {
            scale: 105%;
            opacity: 0;
        }
    }

    @keyframes slide-up {
        from {
            transform: translateY(10vh);
            opacity: 0;
        }

        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    @keyframes zoom-in-fade-in {
        from {
            scale: 105%;
            opacity: 0;
        }

        to {
            scale: 100%;
            opacity: 1;
        }
    }
}


/* Background */
#container {
    position: relative;
    height: 100%;
    width: 100%;
    margin: 0px auto;
    padding: 0px auto;
}

#container-inside {
    position: relative;
    min-width: 960px;
    max-width: 1280px;
    height: auto;
    min-height: 100%;
    margin: 0px auto;
    padding: 0px auto;
    overflow: visible;
}

#circle-small {
    -webkit-animation: circle-small-scale 3s ease-in-out infinite alternate;
    animation: circle-small-scale 3s ease-in-out infinite alternate;
    animation-timing-function: cubic-bezier(.6, 0, .4, 1);
    animation-delay: 0s;
    position: absolute;
    top: 200px;
    left: -150px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    opacity: 0.2;
}

#circle-medium {
    -webkit-animation: circle-small-scale 3s ease-in-out infinite alternate;
    animation: circle-small-scale 3s ease-in-out infinite alternate;
    animation-timing-function: cubic-bezier(.6, 0, .4, 1);
    animation-delay: 0.3s;
    position: absolute;
    top: 50px;
    left: -300px;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    opacity: 0.15;
}

#circle-large {
    -webkit-animation: circle-small-scale 3s ease-in-out infinite alternate;
    animation: circle-small-scale 3s ease-in-out infinite alternate;
    animation-timing-function: cubic-bezier(.6, 0, .4, 1);
    animation-delay: 0.6s;
    position: absolute;
    top: -100px;
    left: -450px;
    width: 900px;
    height: 900px;
    border-radius: 50%;
    opacity: 0.1;
}

#circle-xlarge {
    -webkit-animation: circle-small-scale 3s ease-in-out infinite alternate;
    animation: circle-small-scale 3s ease-in-out infinite alternate;
    animation-timing-function: cubic-bezier(.6, 0, .4, 1);
    animation-delay: 0.9s;
    position: absolute;
    top: -250px;
    left: -600px;
    width: 1200px;
    height: 1200px;
    border-radius: 50%;
    opacity: 0.05;
}

#circle-xxlarge {
    -webkit-animation: circle-small-scale 3s ease-in-out infinite alternate;
    animation: circle-small-scale 3s ease-in-out infinite alternate;
    animation-timing-function: cubic-bezier(.6, 0, .4, 1);
    animation-delay: 1.2s;
    position: absolute;
    top: -400px;
    left: -750px;
    width: 1500px;
    height: 1500px;
    border-radius: 50%;
    opacity: 0.025;
}

@-webkit-keyframes circle-small-scale {
    0% {
        -webkit-transform: scale(1.0);
    }

    100% {
        -webkit-transform: scale(1.1);
    }
}

@keyframes circle-small-scale {
    0% {
        transform: scale(1.0);
    }

    100% {
        transform: scale(1.1);
    }
}