/*
Theme Name: Ramos
Description: Individually designed theme for Ramos
Author: Kolja
Author URI: http://www.
Source: http://www.
Theme URI: http://www.
Version: 1.0
Tags: light, one-column
License: GNU General Public License v2.0
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* @import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500&family=Roboto+Condensed:wght@600&display=swap');
@font-face {
    font-family: 'Hubba';
    src: url('./fonts/hubba/HubbaShadow-SemiBold.otf') format('opentype');
} */

@font-face {
    font-family: 'Caveat';
    src: url('./fonts/Caveat/static/Caveat-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Minerva';
    src: url('./fonts/Minerva-Bold/Minerva Bold.otf') format('opentype');
}
@font-face {
    font-family: 'Pricedown';
    src: url('./fonts/pricedown/pricedown bl.ttf') format('truetype');
}
:root {
    --frame-width: 1rem;
    --header-height: 5rem;
    --footer-height: 6rem;
    --main-height: calc(100vh - var(--header-height) - 2 * var(--frame-width));
    --yellow: #f8d20f;
    --orange: #c2662a;
    --red: #e7073d;
    --blue: #1485d5;
    --white: #cbe6de;
    --black: #020305;
    --logo-ramos-width: 10rem;
    --full-height: 100svh;
}

*::-webkit-scrollbar {
    display: none;
}
* {
    /* outline: 1px dotted var(--red); */
    -ms-overflow-style: none;
    scrollbar-width: none;
    scroll-behavior: smooth;
    box-sizing: border-box;
}

html {
    position: fixed;
    overflow: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height: var(--full-height);
    /* background: var(--black); */
    box-shadow: inset var(--frame-width) var(--frame-width) var(--red), inset calc(var(--frame-width) * -1) calc(var(--frame-width) * -1) var(--blue);
    z-index: 1;
    padding: var(--frame-width);
}
body {
    /* height: 100%;
    overflow: auto;
    font-family: system-ui, sans-serif;
    font-size: 1rem;
    color: var(--white);
    margin: 0;
    padding: 0;
    opacity: 0; */
    margin: 0;
    padding: 0;
    font-family: 'Roboto Condensed', sans-serif;
    background: var(--black);
    color: var(--white);
    height: var(--full-height);
    overflow: hidden;
    width: min(1000px, calc(100vw - 2rem));
    margin-inline: auto;
    /* animation: fadeIn 1s cubic-bezier(1, -0.01, 1, 0); */
    animation: fadeIn 1s linear;
    animation-fill-mode: forwards;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0.3;
    }
    100% {
        opacity: 1;
    }
}

a {
    color: var(--yellow);
    text-decoration: none;
    transition: color 0.3s;
}
a:hover {
    color: var(--orange);
}

h2 {
    font-family: 'Caveat', cursive;
    font-size: 3rem;
    padding: 1rem;
    padding-top: 0;
    margin: 0;
    margin-bottom: 1rem;
    margin-inline: -0.5rem;
    color: var(--yellow);
    text-shadow: 0 0 0.5rem var(--red);
    width: calc(100% + 1rem);
    background: var(--black);
    position: sticky;
    top: 0;
    z-index: 2;
    white-space: nowrap;
}
section.page {
    min-height: var(--full-height);
    position: relative;
    margin: 0;
    padding-top: 1rem;
    /* margin-top: 0; */
    padding-bottom: 2rem;
    background: var(--black);
    color: var(--white);
    font-size: 1.2rem;
    z-index: 2;
}
section.page:nth-of-type(1) {
    padding-top: 0;
}
section.page:last-child {
    margin-bottom: calc(var(--footer-height) + var(--frame-width) * 2);
}
section.page p,
section.page figure,
section.page img {
    /* padding: 1rem; */
    border-radius: 0.25rem;
}

/* REVEALING TEXT */

section.page p {
    padding: 1rem;
    background: var(--white);
    color: var(--black);
    font-size: 1.2rem;
    line-height: 1.5;
    text-align: justify;
    margin: 0;
    /* opacity: 0; */
}

section.page p.inview {
    opacity: 1;
    animation: textInview 1.75s ease-in-out;
    animation-fill-mode: forwards;
}
@keyframes textInview {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}

/* REVEALING IMAGES */
section.page figure img {
    width: 100% !important;
    height: auto;
    border: 0.5rem solid var(--yellow);
    box-shadow: 0 0 0.5rem var(--red);
    opacity: 1;
    transform: scale(0);
}
section.page figure img.inview {
    animation: imgInview 0.75s ease-in-out;
    animation-fill-mode: forwards;
    /* animation-delay: 0.5s; */
    /* opacity: 1; */
    /* transform: scale(1); */
}
@keyframes imgInview {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}

/* HIGHLIGHTING TEXT ELEMENTS */
section.page p strong {
    font-style: normal;
    font-weight: normal;
    background-repeat: no-repeat;
    will-change: background-size;
    --highlighted-duration: 1.3s;
    /* transition: background-size 1.3s cubic-bezier(0.645, 0.045, 0.355, 1); */
    transition: background-size var(--highlighted-duration) ease-in-out;
    padding: 0.1rem 0.3rem;
    border-radius: 0.2rem;
    background-image: linear-gradient(var(--yellow), var(--yellow));
    background-size: 0% 100%;
}
section.page p strong.highlighted {
    background-size: 100% 100%;
}

section.page p strong.highlighted:nth-of-type(1) {
    transition-delay: 1s;
}
section.page p strong.highlighted:nth-of-type(2) {
    transition-delay: 5s;
}
section.page p strong.highlighted:nth-of-type(3) {
    transition-delay: 10s;
}
section.page p strong.highlighted:nth-of-type(4) {
    transition-delay: 20s;
}

/* COLORBEAM */

.colorbeam {
    --colorbeam-opacity: 0;
    /* --background-size: calc(var(--colorbeam-opacity) -0.1 * 110%); */
    --background-size: calc((var(--colorbeam-opacity) - 0.1) * 110%);
    position: absolute;
    bottom: -2rem;
    left: -2rem;
    width: calc(100% + 4rem);
    height: 0.5rem;
    background-color: var(--blue);
    margin-block: 2rem;
}
.colorbeam::after {
    content: '';
    position: absolute;
    bottom: 0;
    background-color: var(--red);
    height: 100%;
    /* width: 100%; */
    /* opacity: var(--colorbeam-opacity); */
    width: var(--background-size);
}

section:last-child .colorbeam {
    display: none;
}

.wp-block-columns {
    gap: 1rem;
}

/* DIALOG */

:root {
    --dialog-bg-speed: 0.21s;
    --dialog-speed: 0.5s;
    --dialog-scale-up-curve: cubic-bezier(0, 0, 0.58, 1);
    --dialog-scale-down-curve: cubic-bezier(0.25, 0.45, 0.45, 0.95);
}

dialog {
    position: fixed;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 2rem 1fr 1rem;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        'header'
        'main'
        'footer';
    max-width: min(90vw, 800px);
    max-height: calc(var(--full-height) - 2 * var(--frame-width) - 2rem);
    /* max-height: min(90vh, 600px); */
    margin: auto;
    margin-inline: auto;
    margin-top: calc(var(--frame-width) + 1rem);
    inset: 0;
    padding-inline: 1rem;
    padding-block: 0.5rem;
    background: var(--black);
    box-shadow: 0 0 1rem var(--red), 0 0 1rem var(--yellow);
    border-radius: 0.5rem;
}

dialog:not([open], [inert]) {
    animation: var(--dialog-speed) scaleDown var(--dialog-scale-down-curve), var(--dialog-speed) fadeOut linear;
    transition: transform-origin 2s ease-in-out;
    transform: scale(0);
    opacity: 0;
    will-change: transform, transform-origin, opacity;
}
dialog:not([inert]) {
    z-index: 9999;
}
dialog[open] {
    animation: var(--dialog-speed) scaleUp var(--dialog-scale-up-curve), var(--dialog-speed) linear;
    transition: transform-origin 2s ease-in-out;
    transform: scale(1);
    opacity: 1;
    will-change: transform, transform-origin, opacity;
}
@keyframes scaleUp {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}

@keyframes scaleDown {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(0);
    }
}

dialog::backdrop {
    background: rgba(0, 0, 0, 0);
}

.dialogBackdrop {
    position: fixed;
    background: rgba(0, 0, 0, 0.25);
    inset: 0;
    user-select: none;
    animation: var(--dialog-bg-speed) fadeOut;
    animation-fill-mode: forwards;
    /* animation-delay: var(--dialog-speed); */
    pointer-events: none;
}
dialog[open] ~ .dialogBackdrop {
    animation: var(--dialog-bg-speed) fadeIn;
    z-index: 9998;
}
:where(dialog, .dialogBackdrop):is([inert]) {
    display: none;
    pointer-events: none;
    z-index: -1;
}
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.dialogHeader {
    grid-area: header;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    position: sticky;
    top: 0;
    padding-bottom: 1rem;
    padding: 0;
    background: inherit;
}
.dialogTitle {
    font-size: 3rem;
    /* font-weight: 600; */
    color: var(--white);
    padding-right: 2rem;
}
.dialogCloseButton {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.5rem;
    padding: 0;
    position: absolute;
    top: 0rem;
    right: -0.5rem;
    display: inline-block;
    margin: 0;
    transition: transform 0.2s ease;
}
.dialogCloseButton:hover {
    transform: scale(1.1);
}
.dialogCloseButton:focus {
    outline: none;
}
.dialogCloseButton svg {
    width: 2rem;
    height: 2rem;
    color: var(--red);
}

/* .dialogCloseButton {
    display: inline-block;
    width: 1.2rem;
    height: 1.2rem;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1.5'%3E%3Cpath stroke-dasharray='60' stroke-dashoffset='60' d='M12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3Z'%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' dur='1s' values='60;0'/%3E%3C/path%3E%3Cpath stroke-dasharray='8' stroke-dashoffset='8' d='M12 12L16 16M12 12L8 8M12 12L8 16M12 12L16 8'%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' begin='1.2s' dur='0.4s' values='8;0'/%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
} */

.dialogContent {
    grid-area: main;
    overflow: auto;
    padding: 0;
}
.dialogContent > *:not(h2) {
    color: var(--white);
}
.dialogContent p {
    margin-bottom: 1rem;
    color: var(--white);
    font-size: 1.2rem;
    line-height: 1.5;
    background: var(--black);
}

.dialogFooter {
    grid-area: footer;
    padding-block: 1rem;
    background: inherit;
}
.dialogFooter:empty {
    display: none;
}