@font-face {
    font-family: 'ToyotaType Semibold';
    src: url(../fonts/ToyotaType-Semibold.otf);
}
@font-face {
    font-family: 'ToyotaType Book';
    src: url(../fonts/ToyotaType-Book.otf);
}
@font-face {
    font-family: 'ToyotaType Light';
    src: url(../fonts/ToyotaType-Light.otf);
}

.spin { transform:rotate(2520deg);  transition: all 7.5s cubic-bezier(0.27, 0.95, 0.94, 0.95)}

:root {
    --clr-first: #22222c;
    --clr-second: #ff001d;
    --clr-white-first: #fff;
    --clr-text-second: rgba(255,255,255,.8);
    --ff-semibold: 'ToyotaType Semibold', sans-serif;
    --ff-book: 'ToyotaType Book', sans-serif;
    --ff-light: 'ToyotaType Light', sans-serif;
    
    --fs-body: 1.5rem;
    --fs-1: 45px;
    --fs-button: 32px;
    --fs-rad-option: 25px;
}

html {height: -webkit-fill-available;}
body {height: calc(var(--vh, 1vh) * 100); margin: 0; background: var(--clr-first); color: var(--clr-text-second); font-family: var(--ff-book); font-size: var(--fs-body); line-height: 1.4; overflow: hidden;}
body::before {content:""; position: absolute; inset: 0; background: url(../img/win-bg.webp) center/cover no-repeat; opacity: 0; transition: opacity 0.4s ease;}
body:has(.result-container.show)::before {opacity: 1;}

h1,h2,h3 {color: var(--clr-white-first);}
h1 {font-size: var(--fs-1); font-family: var(--ff-semibold); text-transform: uppercase; line-height: 1;}

.row {display: flex;}
.button {background-color: #fff; max-width: fit-content; display: flex; justify-content: center; align-items: center; text-decoration: none; color: var(--clr-second); text-transform: uppercase; font-family: var(--ff-semibold); font-size: var(--fs-button); padding: 2px 2rem 3px; border-radius: .5rem;}
.button span {transform: translateY(-2px);}
.button::after {transform: translateY(1px)}

.main-container {--padding-x: 4rem;--padding-y: 4rem;padding: calc(var(--padding-y) / 2) var(--padding-x) var(--padding-y);height: calc(100dvh - (var(--padding-y) * 1.5));min-height: -webkit-fill-available;display: flex;flex-direction: column;justify-content: center;position: relative;}

.intro-logo {margin-bottom: 2.5rem; max-height: 45vh; text-align: center; filter:drop-shadow(0px 0px 15px rgba(0,0,0,.6))}
.intro-logo img {max-width: 90%;}
.container {display: flex; flex-direction: column}
.container h1 {margin-bottom: 2.5rem; margin-top: 0;}
.container p {margin-block: 0 3rem;}
.rad-options {flex-grow: 1; display: flex; gap: 1.5rem;}
.rad-options .inner {width: 100%;}
.rad-options a {position: relative; height: fit-content; display: flex; flex-direction: column; align-items: center; width: 100%; border: 1px solid var(--clr-text-second); border-radius: 8px; text-decoration: none; display: flex; justify-content: center; padding: 1rem;}
.rad-options a::before {content: ""; position: absolute; z-index: 0; top: 1rem; left: 0; width: 100%; height: 70%; background: url(../img/wheel-pointer.svg) top/65% no-repeat;}
.rad-options a::after {content: ""; display: flex; background: url(../img/pijl.svg) center/contain no-repeat; width: 60%; height: 20px; margin-top: 1rem;}
.rad-options a span {position: relative; z-index: 1; display: grid; place-content: center; margin-top: 40%; margin-inline: auto; background-color: #fff; color: var(--clr-second); text-transform: uppercase; font-size: var(--fs-rad-option); max-width: 85%; padding: 1rem; font-family: var(--ff-semibold); border-radius: 1rem;}

.interaction {display: flex; flex-direction: column;}
.interaction .row {position: relative}
.interaction ul {list-style: none; margin-block: 0; position: relative; padding-inline-start: 20px;}
.interaction ul::before {content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 1px; background-color: var(--clr-white-first);}
.interaction .button:not(.spinner .button) {position: absolute; bottom: 0; right: 0;}
.interaction .button:not(.spinner .button)::after {content: ""; display: inline-flex; margin-left: 1rem; height: 50px; width: 50px; background: url(../img/pijl-rood.svg) center/contain no-repeat}

.back-icon {position: absolute; top: 1.5rem; right: 1.5rem; z-index: 20; width: 60px; height: 60px;} 
.back-icon :is(img, a) {display: block; width: 100%; height: 100%;}

.rad-container {position: relative; margin-top: -15%; z-index: 0; filter: drop-shadow(0px 0px 15px rgba(0,0,0,.6))}
.rad-container::before {--pointer-height: 25%; content: ""; position: absolute; z-index: 10; left: 50%; top: calc(var(--pointer-height) * -.02); aspect-ratio: .5; height: var(--pointer-height); transform: translateX(-50%); background: url(../img/pointer.svg) center/contain no-repeat}

.result-container {display:none}
.result-container.show {display:flex; flex-direction: column; align-items: center;}
.prize-result {text-align: center; text-transform: uppercase; font-size: var(--fs-1); color: var(--clr-white-first); line-height: 1.1; margin-bottom: 2rem;}
.prize-result span {display: block;}
.prize-result span:first-child {font-family: var(--ff-light);}
.prize-result span:last-child {font-family: var(--ff-semibold);}

.spinner-result {min-height: 210px;}
.rad-image img {width: 100%;}
.spinner .intro-logo img {width: 100%;}
.spinner .interaction {padding-inline: 8%;}
.spinner .button {margin-inline: auto; margin-top: 32px;}
.spinner .reset-button a {position: relative; font-family: var(--ff-semibold); color: var(--clr-white-first); text-transform: uppercase; display: flex; align-items: center; text-decoration: none; border-radius: .5rem; border: 2px solid var(--clr-white-first); width: fit-content; padding: .5rem 4rem; font-size: var(--fs-button);}
.spinner .reset-button a::after {content: ""; display: inline-flex; width: 40px; height: 40px; background: url(../img/pijl-wit.svg) center/contain no-repeat; margin-left: 1rem;}
.spinner .reset-button span {transform: translateY(-2px);}

@media (max-width: 768px) {
    .main-container {--padding-x: 2rem}
    .spinner .interaction {padding-inline: 12%}
}
@media (max-width: 576px) {
    :root {--fs-1: 2rem;--fs-body: 1rem;--fs-button: 1.5rem;--fs-rad-option: 1.125rem;}
    .button::after {width: 40px!important; height: 40px!important;}
    .main-container {--padding-x: 1rem;}
    .container :is(p, h1) {margin-bottom: 1rem;}
    .rad-options a {padding: .5rem;}
    .rad-options a::before {height: 60%;}
    .rad-options a::after {margin-top: .5rem;}
}
@media (min-width: 1200px) {
    .main-container {max-width: 800px; margin-inline: auto}
    .intro-logo:not(.spinner .intro-logo) {max-height: 40vh;}
    .intro-logo img{width: 100%; height: 100%; object-fit: contain;}
    .spinner .interaction {padding-inline: 20%;}
    .spinner .reset-button a {padding-bottom: 11px;}
}
@media (orientation: landscape) {
    :root {
        --fs-1: 2rem;
        --fs-body: 1rem
    }
    .main-container {max-width: 600px; margin-inline: auto}
    .intro-logo {max-height: 30vh;}
    .intro-logo img {height: 100%}
    .rad-options a span {font-size: 20px;}
    .spinner .interaction {padding-inline: 20%;}
}