* {
    touch-action: pan-x pan-y;
}
html {
    overflow: hidden;
}

.titlebar { position: fixed; width: 100%; height: 20px; border-bottom: solid 2px #fff4; outline: solid 2px #0004; z-index: 999999; }
.titlebar.hidden { display: none; }

.palette { position: fixed; bottom: 0; left: 0; width: 25vw; height: auto; display: grid; grid-template-columns: repeat(7, 5vh); grid-template-rows: repeat(2, 5vh); z-index: 999999; }
.palette.hidden { display: none; }

.crosshair { position: fixed; width: 100vw; height: 100vh; display: grid; pointer-events: none; }
.crosshair.horizontal { grid-template-rows: 1fr 2px 1fr; }
.crosshair.vertical { grid-template-columns: 1fr 2px 1fr; }
.crosshairSpace { width: 100%; height: 100%; }
.crosshairStroke { width: 100%; height: 100%; }
.crosshairStroke.red { background-color: #f00; }
.crosshairStroke.blue { background-color: #00f; }
.crosshairs.hidden {display: none;}

/* Background */
.backgroundContainer {
    position: fixed;
    width: 0px;
    height: 0px;
}
.background {
    position: absolute;
    width: 100vw;
    height: 100vh;

    transform-origin: center;
    transform:
        translateX(50vw)
        translateY(50vh)
        translateX(-50%)
        translateY(-50%)
    ;

    background-color: #000;
    border-radius: 0px;
    filter: brightness(0);
    
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    overflow: hidden;
    
    transition:
        filter var(--transition-duration-long) var(--transition-timing-function-long),
        scale var(--transition-duration) var(--transition-timing-function),
        background-color var(--transition-duration) var(--transition-timing-function);
    will-change: filter, scale, background-color;
}
.background.dimmed {
    filter: var(--dimAmount) !important;
    scale: 0.5 0.75;
    border-radius: var(--unit);
}
.backgroundContainer.dimmed .backgroundGridTitleText,
.backgroundContainer.dimmed .backgroundGridSubtitleText,
.backgroundGridSubtitle:hover > .backgroundGridSubtitleText {
    --animationState: paused;
}
.backgroundGridContainer {
    position: absolute;
    width: 100vw;
    height: 100vh;
    padding: var(--unit);

    transition-property: width, height;
    will-change: width, height;
    transition-duration: var(--transition-duration);
    transition-timing-function: var(--transition-timing-function);
}
.backgroundGrid {
    width: 100%;
    height: 100%;
    padding: var(--strokeWidth);
        
    display: grid;
    grid-template-columns: var(--unit) 1fr var(--unit);
    /* grid-template-rows: auto 1fr var(--buttonSizeLarge); */
    grid-template-rows: auto 1fr auto;
    gap: var(--strokeWidth);
}
.backgroundGrid > div {
    background-color: #000;

    transition-property: background-color;
    will-change: background-color;
    transition-duration: var(--transition-duration);
    transition-timing-function: var(--transition-timing-function);
}

.backgroundGridTitle,
.backgroundGridSubtitle {
    width: 100%;
    height: 100%;
    padding: var(--unitTiny) 0;

    grid-column: 1 / 4;

    display: flex;
    justify-content: start;
    align-items: center;

    overflow: hidden;
}
.backgroundGridSubtitle {
    min-height: var(--buttonSizeLarge);
}
.backgroundGridTitleText,
.backgroundGridSubtitleText {
    display: flex;
    justify-content: center;
    align-items: center;
}
.backgroundGridTitleText h1 {
    width: var(--titleMarqueeDistance);
    text-transform: uppercase;
    text-wrap: nowrap;

    animation: backgroundGridTitleTextMarquee linear 30s infinite;
    animation-play-state: var(--animationState);
}
.backgroundGridSubtitleText p {
    width: var(--subtitleMarqueeDistance);
    text-transform: uppercase;
    text-wrap: nowrap;

    animation: backgroundGridSubtitleTextMarquee linear 20s infinite;
    animation-play-state: var(--animationState);
}
.backgroundGridSubtitleText a { font-stretch: 100%; }
@keyframes backgroundGridTitleTextMarquee {
    from { transform: translate(0px, 0px); }
    to { transform: translate(calc(var(--titleMarqueeDistance) * -1), 0px); }
}
/* @keyframes backgroundGridSubtitleTextMarquee {
    from { transform: translate(0px, 0px); }
    to { transform: translate(calc(var(--subtitleMarqueeDistance) * -1), 0px); }
} */
@keyframes backgroundGridSubtitleTextMarquee {
    from { transform: translate(calc(var(--subtitleMarqueeDistance) * -1), 0px); }
    to { transform: translate(0px, 0px); }
}
.backgroundGridCenter {
    display: flex;
    justify-content: center;
    align-items: end;
}
.tcLayoutPageControls {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--unitSmall);

    opacity: 1;
    pointer-events: all;
}
.tcLayoutPageControls.hidden {
    opacity: 0;
    pointer-events: none;
}
.tcLayoutPageButtonContainer {
    width: auto;
    height: auto;

    display: flex;
    align-items: center;
}
.tcLayoutPageButtonContainer.hidden {
    visibility: hidden;
}
.tcLayoutPageButton {
    min-width: var(--buttonSizeLarge);
    min-height: var(--buttonSizeLarge);
    border-radius: var(--unitSmall);
    
    display: flex;
    justify-content: center;
    align-items: center;
    
    cursor: pointer;

    transition-property: opacity;
    transition-duration: var(--transition-duration-short);
    transition-timing-function: var(--transition-timing-function-short);
}
.tcLayoutPages {
    display: flex;
    justify-content: center;
    align-items: center;
}
.tcLayoutPage {
    width: var(--unitLarge);
    height: var(--unitLarge);
    border-radius: 50%;
    
    display: flex;
    justify-content: center;
    align-items: center;
    
    cursor: pointer;
    
    z-index: 1;
}
.tcLayoutPage::after {
    content: "";
    width: var(--unit);
    height: var(--unit);
    border-radius: 50%;
}
.tcLayoutPage.hidden { display: none; }

body.themeContrast .tcLayoutPageControls { gap: var(--unitSmall); }
body.themeContrast .tcLayoutPageButton { border: solid var(--strokeWidth) var(--accent); }
body.themeContrast .tcLayoutPage::after { border: solid var(--strokeWidth) var(--accent); }

/* Tarot Cards */
.tcContainer {
    position: fixed;
    width: 0px;
    height: 0px;
}
.tcContainerClickBackdrop {
    position: fixed;
    width: 100%;
    height: 100%;
}
.tc {
    position: absolute;

    transform-origin: 0% 0%;
    transform:
        translateX(50vw)
        translateY(50vh)
        translateX(-50%)
        translateY(-50%)
    ;
    perspective: 2500px;

    pointer-events: none;
    touch-action: none;

    transition:
        filter var(--transition-duration-long) var(--transition-timing-function-long),
        transform var(--transition-duration) var(--transition-timing-function),
        width var(--transition-duration) var(--transition-timing-function),
        height var(--transition-duration) var(--transition-timing-function);
    will-change: filter, transform, width, height;
}
.tc.visible { pointer-events: all; touch-action: all; }
.tc.shortTransition { --transition-duration: var(--transition-duration-short); }
.tc.drag { transition-property: none; }
.tc.dimmed { filter: var(--dimAmount); pointer-events: none; }
.tc.buffering { animation: bufferingAnimation ease 0.5s infinite; animation-delay: 0.2s; }
body.tcAnimationPause .tc { --transition-duration: 0s; --transition-duration-short: 0s; --transition-duration-long: 0s; }
@keyframes bufferingAnimation { 0% { filter: brightness(0.8); } 50% { filter: brightness(0.6); } 100% { filter: brightness(0.8); } }

/* Tarot Card Cover */
.tcCover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: scale(0.001);

    display: flex;
    justify-content: center;
    align-items: center;

    backface-visibility: hidden;
    cursor: grab;
    touch-action: pan-x pan-y;

    transition: transform var(--transition-duration) var(--transition-timing-function);
    will-change: transform;
}
.tcCover > * { user-select: none; -webkit-user-select: none; }
.tcCover:active { cursor: grabbing; }

.tcCoverContent {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: var(--tcGap);

    display: flex;
    justify-content: center;
    align-items: center;

    background-color: var(--backgroundPrimary);
    box-shadow: var(--boxShadowCard);
    border-radius: calc(var(--tcGap) * 0.75);
    outline: var(--outlineContrast2);
}
.tcCoverContentGrid {
    width: 100%;
    height: 100%;
    padding: var(--strokeWidth);
    
    display: grid;
    grid-template-columns: var(--tcGap) calc(100% - var(--tcGap) * 2 - var(--strokeWidth) * 2) var(--tcGap);
    grid-template-rows: var(--tcGap) calc(100% - var(--tcGap) * 2 - var(--strokeWidth) * 2) var(--tcGap);
    gap: var(--strokeWidth);
    
    background-color: var(--accent);
    
    overflow: hidden;
}
body.themeContrast .tcCoverContentGrid {
    grid-template-columns: 0px calc(100% - var(--strokeWidth) * 2) 0px;
    grid-template-rows: 0px calc(100% - var(--strokeWidth) * 2) 0px;
    --strokeWidth: 1px;
}
body.themeContrast.textWeight .tcCoverContentGrid { --strokeWidth: 2px; }
.tcCoverContent {
    transition-property: padding;
    will-change: padding;
    transition-duration: var(--transition-duration);
    transition-timing-function: var(--transition-timing-function);
}
.tcCoverContentGrid > div { background-color: var(--backgroundPrimary); }
.tcCoverContentGrid.project > div:not(:nth-child(5)) { background-color: var(--backgroundPrimary); }
.tcCoverContentGrid.project > div:nth-child(5) { background-color: var(--backgroundPrimary); }
.tcCoverImage {
    position: relative;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}
.tcCoverLabel {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: var(--unitSmall);

    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.tcCoverContentGrid.project .tcCoverLabel { top: -100%; }
.tcCoverLabelTitle {
    font-size: var(--typeCoverTitle);
    font-stretch: 80%;
    text-transform: uppercase;
}
.tcCoverLabelSubtitle {
    font-size: var(--typeCoverSubtitle);
}
.tcCoverLabelTitle { --typeCoverTitle: 1.5em; }
.tcCoverLabelSubtitle { --typeCoverSubtitle: 1em; }
body.coverCondensed .tcCoverLabelTitle { --typeCoverTitle: 1.2em; }
body.coverCondensed .tcCoverLabelSubtitle { --typeCoverSubtitle: 0.8em; }

.tcCoverContentGrid.project .tcCoverImage,
.tcCoverContentGrid.project .tcCoverLabel {
    transition-property: opacity;
    transition-duration: var(--transition-duration-short);
    transition-timing-function: var(--transition-timing-function-short);
}
.tcCoverContentGrid.info .tcCoverLabelTitle {
    transition-property: scale;
    transition-duration: var(--transition-duration-short);
    transition-timing-function: var(--transition-timing-function-short);
}
.tcCoverContentGrid.project .tcCoverLabel { opacity: 0; }
.tcCover:hover .tcCoverContentGrid.project .tcCoverLabel { opacity: 1; }
.tcCover:hover .tcCoverContentGrid.project .tcCoverImage { opacity: 0.05;}
.tcCover:hover .tcCoverContentGrid.info .tcCoverLabelTitle { scale: 1.1; }

/* Tarot Card Content */
.tcContentContainer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    height: 100%;
    margin-left: auto;
    margin-right: auto;
}
.tcContent {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    display: flex;
    justify-content: center;
    align-items: start;

    background-color: var(--backgroundPrimary);
    box-shadow: var(--boxShadowHeavy);

    border-style: solid;
    border-width: 0;
    border-radius: 0;
    
    transform: rotateY(180deg);
    backface-visibility: hidden;
    overflow: hidden;

    transition-property: transform, background-color;
    will-change: transform, background-color;
    transition-duration: var(--transition-duration);
    transition-timing-function: var(--transition-timing-function);
}
body.contentSplitView .tcContent {
    border-width: var(--strokeWidth);
    border-radius: 0;
    box-shadow: none;
}
body.contentModal .tcContent {
    border-width: var(--strokeWidth);
    border-radius: var(--unit);
}

/* Buttons */
.tcButtons {
    position: absolute;
    height: auto;

    transform: translateX(50vw) translateX(-50%);

    display: flex;
    justify-content: space-between;
    align-items: center;

    transition-property: transform, width, height, opacity;
    will-change: transform, width, height, opacity;
    transition-duration: var(--transition-duration);
    transition-timing-function: var(--transition-timing-function);
    
    opacity: 0;
    z-index: 999;
    pointer-events: none;
    touch-action: none;
}
.tcButtons.enabled { opacity: 1; }
.tcButtons.enabled .tcButton { pointer-events: all; }
.tcButton {
    min-width: var(--buttonSizeLarge);
    min-height: var(--buttonSizeLarge);
    
    display: flex;
    justify-content: center;
    align-items: center;
    
    background-color: var(--backgroundPrimary);
    border: solid var(--strokeWidth);
    border-radius: var(--unitSmall);
    box-shadow: var(--boxShadowLight);
    
    pointer-events: none;
    cursor: pointer;
}
.tcButtonsLeft,
.tcButtonsRight {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--unitSmall);
}
.tcButton:hover { background-color: var(--backgroundSecondary); }
.tcButton:active { background-color: var(--backgroundTertiary); }

body.private .backgroundGridTitleText,
body.private .backgroundGridSubtitleText { visibility: hidden; }
body.private .backgroundGridTitle,
body.private .backgroundGridSubtitle { padding: 0; }
body.private .backgroundGrid {
    grid-template-rows: var(--tcGap) auto var(--tcGap);
}