button {
  all: unset;
  cursor: pointer;
}
button * {
  pointer-events: none;
}

:not(dialog),
*::before,
*::after {
  box-sizing: border-box;
  position: relative;
  background-repeat: no-repeat;
  margin: 0;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
}

* {
  touch-action: manipulation;
}

html {
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  --dvh: 100dvh;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-bot: env(safe-area-inset-bottom, 0px);
  --color-none: transparent;
  --color-white: white;
  --color-white-translucent: rgb(255 255 255 / 0.3);
  --color-black: black;
  --color-light: #F1F1F1;
  --color-dark: #282828;
  --color-maersk: #41B0D5;
  --color-red: #E1000F;
  --color-warm-grey: #DED7D6;
  --background-image: url("../../shared/ico/card.png");
  --color-back: linear-gradient(-180deg, rgba(236, 109, 117, 1) 0%, rgba(225, 0, 15, 1) 85%);
  --color-text: var(--color-white);
  --color-card-shadow: rgb(0 0 0 / .10);
  --color-deck-shadow: rgb(0 0 0 / .30);
  --color-backdrop: #BDCDDA;
}

@font-face {
  font-family: "HenkelGTFlexa";
  src: url(../../shared/fonts/HenkelGTFlexa-300.woff2) format("woff2");
  font-weight: 300;
}
@font-face {
  font-family: "HenkelGTFlexa";
  src: url(../../shared/fonts/HenkelGTFlexa-400.woff2) format("woff2");
  font-weight: 400;
}
@font-face {
  font-family: "HenkelGTFlexa";
  src: url(../../shared/fonts/HenkelGTFlexa-500.woff2) format("woff2");
  font-weight: 500;
}
@font-face {
  font-family: "HenkelGTFlexa";
  src: url(../../shared/fonts/HenkelGTFlexa-700.woff2) format("woff2");
  font-weight: 700;
}
@font-face {
  font-family: "HenkelGTFlexa";
  src: url(../../shared/fonts/HenkelGTFlexa-800.woff2) format("woff2");
  font-weight: 800;
}
@font-face {
  font-family: "HenkelGTFlexa";
  src: url(../../shared/fonts/HenkelGTFlexa-900.woff2) format("woff2");
  font-weight: 900;
}
body {
  font-family: "HenkelGTFlexa", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

:is(h1, h2, h3, h4, button) {
  font-family: "HenkelGTFlexa";
  text-wrap: balance;
}

#headline {
  font-size: 4rem !important;
  font-weight: 300;
  font-style: italic !important;
  text-align: center;
  text-transform: uppercase;
  line-height: 4rem;
}

@media (max-width: 40rem) {
  #headline {
    font-size: 3rem !important;
    line-height: 3rem;
  }
}
#headline span {
  font-weight: 800 !important;
}

p {
  text-wrap: pretty;
}

sup {
  font-size: 0.5em;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: 2;
  content: "";
  display: block;
  pointer-events: none;
  background-color: var(--color-back);
  animation: cover-fade 2s forwards ease-in;
}

@keyframes cover-fade {
  to {
    opacity: 0;
  }
}
#app {
  height: var(--dvh);
  transition: background 0.6s ease-out;
  background: var(--color-back, var(--color-navy));
  color: var(--color-text, var(--color-white));
}

svg {
  transition: 0.6s ease-in-out;
}

main {
  height: 100%;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr min(80%, 24rem) 1fr;
  grid-template-rows: 1fr auto 1fr;
  grid-template-areas: "L T R" "L C R" "L B R";
}
main > * {
  grid-area: C;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

nav {
  position: fixed;
  top: var(--safe-top);
  left: var(--safe-left);
  right: var(--safe-right);
  padding: 1.5rem;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  transition: 0.6s cubic-bezier(0.68, -0.6, 0.32, 0.9);
  translate: 0 var(--nav-ty, 0);
}
nav h1 {
  line-height: 1;
  width: min(80%, 14rem);
  margin-inline-end: auto;
}
nav [aria-selected] {
  padding: 0.5rem;
  font-weight: 700;
  opacity: 0 !important;
  pointer-events: none !important;
}
nav [aria-selected=true] {
  text-decoration: underline;
}
nav [aria-selected=false] {
  opacity: 0.5;
}
nav .back {
  color: var(--color-dark);
  transition: 0.4s cubic-bezier(0.68, -0.6, 0.32, 0.9);
  translate: var(--button-back-tx, 0) 0;
  position: absolute;
  inset-inline-start: 1.5rem;
  inset-block-end: -1.5rem;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 1em;
}
nav .back svg {
  height: 2rem;
  width: 2rem;
  scale: -1 1;
}

section {
  grid-area: C;
  min-height: 30vh;
  transition: 0.6s ease-in-out;
  translate: 0 var(--ty, 100vh);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}
section button {
  width: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1ch;
  font-size: 1.1rem;
  padding-inline: 1.2em;
  padding-block: 0.8em;
  border-radius: 3.5rem;
  background-color: var(--color-transparent);
  color: var(--color-text);
  border: 1px solid var(--color-white);
  transition: 0.8s cubic-bezier(0.68, -0.6, 0.32, 1.6);
  transition-duration: var(--duration, 0s);
  translate: 0 var(--button-ty, 0);
  scale: var(--button-scale, 1);
  text-transform: uppercase;
  font-weight: 700;
  font-style: italic;
}
section button:nth-of-type(1) {
  --duration: 0.6s;
  background-color: var(--color-white);
  color: var(--color-red);
}
section button:nth-of-type(2) {
  --duration: 0.8s;
  background-color: var(--color-white);
  color: var(--color-red);
}
section button:nth-of-type(3) {
  --duration: 1.0s;
  background-color: var(--color-white);
  color: var(--color-red);
}
section button:nth-of-type(4) {
  --duration: 1.2s;
  background-color: var(--color-white);
  color: var(--color-red);
}
section button:nth-of-type(5) {
  --duration: 1.2s;
  background-color: var(--color-white);
  color: var(--color-red);
}
section button:only-of-type {
  transition: 0.8s cubic-bezier(0.9, -0.6, 0.32, 1.2);
}
section button svg {
  height: 1em;
}

[id=splash] {
  --ty: var(--view-splash-ty);
  --button-ty: var(--button-splash-ty);
  --button-scale: var(--button-splash-scale);
}
[id=splash] > svg {
  width: 10rem;
  --alpha-logo: 1;
}
[id=splash] picture {
  width: 100vw;
  align-self: center;
}
[id=splash] h3 {
  margin-block-end: 2.5rem;
  text-transform: uppercase;
  font-size: 1.4rem;
}
@media (max-width: 40rem) {
  [id=splash] h3 {
    margin-block-end: 0.5rem;
  }
}
[id=splash] button:nth-of-type(1) {
  --duration: 0.8s;
  background-color: var(--color-transparent) !important;
  color: var(--color-white) !important;
}

[id=start] {
  --ty: var(--view-start-ty);
  --button-ty: var(--button-start-ty);
  --button-scale: var(--button-start-scale);
}
[id=start] button:last-of-type {
  margin-block-start: 1rem;
  border: 1px solid var(--color-white);
  background: var(--color-none);
}

.hide {
  display: none;
}

@media (max-width: 40rem) {
  picture.hide {
    display: block;
  }
  [id=start] {
    margin-block-start: 3rem;
  }
}
[id=cards] {
  --ty: var(--view-cards-ty);
  aspect-ratio: 3/4;
}

.complete {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  opacity: 0;
}
.complete h2 {
  color: var(--color-card);
}
[data-view^=cards] .complete {
  opacity: 1;
  transition: 3s;
  transition-delay: 3s;
}

.complete button {
  background-color: var(--color-red) !important;
  color: var(--color-white) !important;
  border: none !important;
}

dialog {
  inline-size: min(90%, 44rem);
  border: 0;
  border-radius: 0.5rem;
  padding: 0;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  border-radius: 1rem;
}
@media (max-width: 40rem) {
  dialog {
    inline-size: min(90%, 24rem);
  }
}
dialog::backdrop {
  background-color: var(--color-backdrop, #BDCDDA);
}
dialog::before, dialog::after {
  content: "";
  height: 3rem;
  position: absolute;
  z-index: 1;
}
dialog::before {
  inset: 0 0 auto;
}
dialog::after {
  inset: auto 0 0;
}
dialog [data-t=help_text] {
  max-block-size: min(100svh - 10rem, 32rem);
  overflow-y: auto;
  padding: 3rem 1.5rem;
}
dialog h2 {
  color: var(--color-red);
  text-align: start;
  margin-block-end: 0 !important;
  font-weight: 800 !important;
  line-height: 2rem;
}
dialog .small {
  color: black !important;
  font-size: 1.2rem !important;
}
dialog small {
  font-size: 1rem;
}
dialog p {
  text-align: start;
  margin-block: 1em;
}
dialog :is(button, #bump) {
  overflow: visible !important;
  position: absolute;
  border-radius: 50%;
  top: 0.5rem;
  right: 0.5rem;
  padding: 0;
  margin: 0;
  z-index: 1;
  transform: none;
  translate: none;
  width: 3rem;
  height: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
  cursor: pointer;
}
dialog :is(button, #bump) svg {
  border-radius: 50%;
  width: 100%;
  height: 100%;
  background-color: var(--color-white);
}
dialog[open] {
  animation: modal-open 0.8s cubic-bezier(0.68, -0.6, 0.32, 1.4);
}
dialog[open=closing] {
  animation: modal-close 0.8s cubic-bezier(0.68, -0.6, 0.32, 1.4);
}
@keyframes modal-open {
  from {
    translate: 0 100vh;
  }
}
@keyframes modal-close {
  to {
    translate: 0 100vh;
  }
}

[id=card-deck] {
  pointer-events: none;
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  filter: drop-shadow(0 1rem 0.75rem var(--color-deck-shadow));
}

[data-card] {
  position: absolute;
  inset: 0;
  --card-z-index: calc(var(--card-count) - var(--card-index));
  --card-offset: calc(var(--card-index) * .125rem);
  --card-rotation: calc(var(--card-random) * 5deg);
  z-index: var(--card-z-index);
  top: var(--card-offset);
  rotate: var(--card-rotation);
  perspective: 1000px;
  /*
  &.un-flipped .content {
  	animation: .6s card-un-flip forwards cubic-bezier(0.2, 0.4, 0.6, .8);
  	@keyframes card-un-flip {
  		35% {
  			transform-origin: 50% 65%;
  			translate: 0 0 200px;
  		}
  		from { 
  			transform-origin: 50% 50%;		
  			translate: 0 0 0;		
  			transform: rotateX(180deg);
  		}
  	}
  }	
  */
}
[data-card] .content {
  pointer-events: auto;
  position: absolute;
  inset: 0;
  border-radius: 0.5rem;
  transform-style: preserve-3d;
  box-shadow: 0 1rem 1rem var(--color-card-shadow);
}
[data-card].flipped .content {
  animation: 0.6s card-flip forwards cubic-bezier(0.2, 0.4, 0.6, 0.8);
}
@keyframes card-flip {
  35% {
    transform-origin: 50% 65%;
    translate: 0 0 200px;
  }
  to {
    transform-origin: 50% 50%;
    translate: 0 0 0;
    transform: rotateX(-180deg);
  }
}
[data-card].discarded {
  pointer-events: none;
  animation: 0.1s 0.2s to-back forwards ease-in-out;
}
@keyframes to-back {
  to {
    z-index: -9999;
  }
}
[data-card].discarded .content {
  animation: 0.6s card-flip-discarded forwards ease-in-out;
}
@keyframes card-flip-discarded {
  from {
    transform-origin: 50% 50%;
    translate: 0 0 0;
    transform: rotateX(180deg);
  }
  65% {
    transform-origin: 50% 65%;
    translate: 0 -75% 200px;
  }
  to {
    translate: 0 0 0;
    transform: rotateX(360deg) translateZ(-100px) translateY(110vh);
  }
}
[data-card].un-discarded .content {
  animation: 0.6s card-flip-un-discarded both ease-in-out;
}
@keyframes card-flip-un-discarded {
  to {
    transform-origin: 50% 50%;
    translate: 0 0 0;
    transform: rotateX(180deg);
  }
  65% {
    transform-origin: 50% 65%;
    translate: 0 -75% 200px;
  }
  from {
    translate: 0 0 0;
    transform: rotateX(360deg) translateZ(-100px) translateY(110vh);
  }
}
[data-card] .front,
[data-card] .back {
  position: absolute;
  inset: 0;
  padding: 1.5rem;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  overflow: hidden;
  border-radius: 0.5rem;
  border: 1px solid var(--color-card-shadow);
  background: red;
}
[data-card] .front {
  cursor: pointer;
  display: grid;
  place-items: center;
  background-color: var(--color-red);
}
[data-card] .back {
  transform: rotateX(180deg) translateZ(1px);
  background-color: var(--color-white);
  color: var(--color-black);
  box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.25);
}
[data-card] .back[data-theme] {
  background-image: var(--background-image);
  background-size: cover;
  /* or contain, depending on your preference */
  background-repeat: no-repeat;
  background-color: var(--color-back);
}
[data-card] .next {
  display: block;
  font-size: 1.5rem;
  width: 1.5em;
  height: 1.5em;
  padding: 0;
  background-color: var(--color-none);
  --color-arrow: var(--color-red);
  border: none !important;
  position: absolute;
  inset-block-end: 1rem;
  inset-inline-end: 1rem;
}
[data-card] .back[data-theme] .next {
  --color-arrow: var(--color-red);
}
[data-card] .prev {
  display: none;
  font-size: 1.5rem;
  width: 1.5em;
  height: 1.5em;
  padding: 0;
  background-color: var(--color-none);
  --color-arrow: var(--color-back);
  position: absolute;
  inset-block-end: 1rem;
  inset-inline-start: 1rem;
  rotate: -180deg;
}
[data-card].flipped .next {
  animation: pulse 1.2s both;
  animation-direction: alternate-reverse;
  animation-iteration-count: 7;
}
@keyframes pulse {
  from {
    scale: 1;
  }
  to {
    scale: 1.4;
  }
}
[data-card] .title {
  font-size: 1.125rem;
  text-align: center;
  color: var(--color-red);
  margin-block-start: 2.5em;
}
@media (max-width: 40rem) {
  [data-card] .title {
    margin-block-start: 1.5em;
  }
}
[data-card] .text {
  position: absolute;
  inset: 1.3rem;
  font-size: 1.2rem;
  line-height: 1.35;
  text-align: center;
  color: var(--color-dark);
  margin-block-start: 130px;
}
@media (max-width: 40rem) {
  [data-card] .text {
    margin-block-start: 75px;
    font-size: 1.15rem;
  }
}
[data-card] .text p {
  margin-block: 1.5em;
}
[data-card] .text small {
  margin-block-start: 1.5em;
  font-style: italic;
}
[data-card] .card-id {
  font-family: "HenkelGTFlexa";
  font-size: 1.125rem;
  font-weight: 700;
  text-align: start;
  color: var(--color-red);
  position: absolute;
  z-index: 0;
  inset-block-start: 1.5rem;
  inset-inline-end: 1.5rem;
}
[data-card] svg {
  width: 300%;
  left: -3rem;
}
[data-card]:not(.discarded, .un-discarded) {
  transform: translate3d(var(--card-tx), var(--card-ty), 0) rotate(var(--card-rt)) scale(2.5);
  animation: shuffle 1.2s forwards cubic-bezier(0.5, 1.25, 0.5, 0.95);
  animation-delay: calc((var(--card-count) - var(--card-index)) * 30ms + 800ms);
}
[data-card]:not(.discarded, .un-discarded):nth-of-type(odd) {
  --card-rt: -45deg;
  --card-tx: calc(var(--card-index) * -5% + -300%);
  --card-ty: calc(var(--card-index) * -5% + 300%);
}
[data-card]:not(.discarded, .un-discarded):nth-of-type(even) {
  --card-rt: 45deg;
  --card-tx: calc(var(--card-index) * 5% - -300%);
  --card-ty: calc(var(--card-index) * -5% + 300%);
}
@keyframes shuffle {
  from {
    transform: translate3d(var(--card-tx), var(--card-ty), 0) rotate(var(--card-rt)) scale(2.5);
  }
  to {
    transform: translate3d(0, 0, 0) rotate(calc(var(--card-rotate) * 6deg)) scale(calc(1 - var(--card-index) / 100));
  }
}

html {
  --button-splash-ty: 100vh;
  --button-splash-scale: 1.2;
  --button-back-tx: -200%;
}

[data-view^=splash] {
  --view-splash-ty: 5vh;
  --button-splash-ty: none;
  --button-splash-scale: none;
  --button-start-ty: 100%;
  --button-start-scale: 1.2;
}

[data-view^=start] {
  --view-splash-ty: -100vh;
  --button-splash-ty: -100vh;
  --button-splash-scale: 1.2;
  --view-start-ty: none;
  --button-start-ty: 0;
  --button-start-scale: 1;
}

[data-view^=cards] {
  --button-back-tx: none;
  --view-splash-ty: -100vh;
  --button-splash-ty: -100vh;
  --button-splash-scale: 1.2;
  --view-start-ty: -100vh;
  --view-cards-ty: 7vh;
  --button-start-ty: -100%;
  --button-start-scale: 1.2;
}
@media (max-width: 40rem) {
  [data-view^=cards] {
    --view-cards-ty: 15vh;
  }
}

[data-view~=bond],
[data-theme=bond] {
  --color-card: var(--color-red);
}

[data-view~=inno],
[data-theme=inno] {
  --color-card: var(--color-red);
}

[data-view~=expert],
[data-theme=expert] {
  --color-card: var(--color-red);
}

[data-view~=partner],
[data-theme=partner] {
  --color-card: var(--color-red);
}

[data-view~=sustain],
[data-theme=sustain] {
  --color-card: var(--color-red);
}

[data-view^=cards] {
  --color-back: var(--color-warm-grey);
  --color-text: var(--color-black);
}