/*
  © 2026 TP, Switzerland
  All rights reserved.

  copy.lu — final cleaned style.css
  Scope:
  - keeps visual identity
  - removes repeated override history
  - preserves mobile stars + WhatsApp link
  - footer shader starts from bottom viewport edge
  - keeps Android/Samsung touch safety
*/

/* Reset */
html, body, div, applet, object, iframe,
h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  background: #fff;
  font-family: 'Raleway', sans-serif;
  color: #fff;
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
}

h1 {
  line-height: 1;
  font-size: 6vh;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Canvas */
canvas {
  pointer-events: none;
}

/* Text input */
textarea {
  position: absolute;
  width: 100%;
  height: 100%;
  max-height: 100%;

  overflow-y: auto;
  overflow-x: hidden;
  resize: none;

  padding: 8vh 8vw 24vh 8vw;

  border: 2px solid #fff;
  border-radius: 4px;

  box-sizing: border-box;

  color: #fff;
  background: #e0e0e0;
  opacity: .8;

  font-family: 'Raleway', sans-serif;
  font-size: 3vh;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .015em;
  font-variant: normal;
  text-decoration: none;

  transition: all .4s;
}

textarea:hover {
  color: #558f4c;
  background: #fff;
  border-color: #558f4c;
}

textarea::-webkit-scrollbar {
  width: 4px;
}

textarea::-webkit-scrollbar-track {
  background: transparent;
}

textarea::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.12);
  border-radius: 4px;
}

textarea::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,.2);
}

/* Progress bar */
#starter {
  position: absolute;
  top: 8vh;
  left: 8vw;
  right: 8vw;

  height: 3vh;
  width: auto;

  background: #ddd;
  border-radius: 1vh;
  overflow: hidden;
  text-decoration: none;
}

#swissBar {
  height: 100%;
  width: 0%;
  transition: width .5s ease;
  background: #d52b1e;
}

/* Footer */
#footer {
  position: absolute;
  left: 8vw;
  bottom: 8vh;

  z-index: 2147483000;

  max-width: 88vw;

  color: #888;
  font-family: 'Raleway', sans-serif;
  font-size: 2vh;
  line-height: 1.1em;
  text-align: left;
  text-decoration: none;

  padding: 0;
  margin: 0;
  background: transparent;
}

/* White footer shader:
   anchored below footer by 8vh, so visually it starts at viewport bottom,
   not at text height. */
#footer::before {
  content: "";
  position: fixed;

  left: -18vw;
  bottom: -16vh;

  width: min(118vw, 72em);
  height: min(72vh, 38em);

  z-index: -1;
  pointer-events: none;

  background: radial-gradient(
    ellipse at 18vw calc(100% - 16vh),
    rgba(255,255,255,.94) 0%,
    rgba(255,255,255,.82) 18%,
    rgba(255,255,255,.52) 36%,
    rgba(255,255,255,.24) 54%,
    rgba(255,255,255,.08) 70%,
    rgba(255,255,255,0) 88%
  );

  filter: blur(10px);
  transform: translateZ(0);
}


#footer h1,
#footer p,
#result,
#footer a {
  position: relative;
  z-index: 1;
}

/* Links / icons */
.fa {
  color: #888;
  text-decoration: none;
}

.fa:hover {
  color: #eee;
  text-decoration: none;
  cursor: pointer;
}

/* Stars */
#stars {
  text-shadow: -.06em 0 red, .06em 0 cyan;
}

#stars span {
  display: inline-block;
  transform: scale(1);
  transition: transform 2s cubic-bezier(0, 1, 0, 1);
  animation: stars-animation 3s 50 ease-in-out;
}

#stars span:active {
  text-shadow: none;
}

#stars span:nth-child(1),
#stars span:nth-child(5) {
  font-size: .3em;
  animation-delay: .2s;
}

#stars span:nth-child(2),
#stars span:nth-child(4) {
  font-size: .5em;
  animation-delay: .1s;
}

#stars span:nth-child(3) {
  font-size: .8em;
  animation-delay: 0s;
}

#stars:hover span {
  animation: none;
}

@-webkit-keyframes stars-animation {
  0% { transform: scale(1); }
  90% { transform: scale(1); }
  95% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

@keyframes stars-animation {
  0% { transform: scale(1); }
  90% { transform: scale(1); }
  95% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* Result */
#result {
  opacity: .92;
  text-shadow:
    0 0 14px rgba(255,255,255,1),
    0 0 5px rgba(255,255,255,.95);

  transition:
    opacity .4s ease,
    transform .4s ease,
    letter-spacing .4s ease;
}

#result.pulse {
  transform: translateY(-.05em);
  letter-spacing: .015em;
}

#resultHint {
  display: block;
  margin-top: .55em;
  max-width: 12em;

  font-size: .32em;
  line-height: 1.15;
  letter-spacing: .04em;
  opacity: .58;
}

/* Clear button */
#clearText {
  position: fixed;
  top: calc(8vh - 2.25em);
  right: 8vw;
  bottom: auto;

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

  width: 1.55em;
  height: 1.55em;

  z-index: 2147483647;

  color: #777;
  background: rgba(255,255,255,.72);
  border-radius: 50%;

  font-family: Arial, sans-serif;
  font-size: 2vh;
  font-weight: 200;
  text-decoration: none;
  line-height: 1;

  opacity: .42;

  cursor: pointer;
  user-select: none;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;

  transition:
    opacity .22s ease,
    transform .22s ease,
    background .22s ease;
}

#clearText.hasText {
  opacity: .48;
}

#clearText:hover {
  opacity: .82;
  transform: scale(1.04);
  background: rgba(255,255,255,.9);
}

/* About layer */
#aboutBtn {
  cursor: pointer;
}

#aboutLayer {
  position: fixed;
  inset: 0;

  z-index: 2147483647;

  background: rgba(255,255,255,.88);

  opacity: 0;
  pointer-events: none;

  transition: opacity .35s ease;

  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
}

#aboutLayer.open {
  opacity: 1;
  pointer-events: auto;
}

#aboutText {
  position: absolute;
  left: 8vw;
  bottom: 8vh;

  z-index: 2147483647;

  max-width: 29em;

  color: #888;
  font-family: 'Raleway', sans-serif;
  font-size: 2.1vh;
  line-height: 1.35;
}

#aboutText h2 {
  margin: 0 0 .6em 0;

  color: #888;
  font-size: 6vh;
  line-height: 1;
  font-weight: 200;
  text-transform: lowercase;
}

#aboutText p {
  margin: 0 0 .86em 0;
}

#aboutText .aboutLead {
  color: #666;
  font-size: 1.08em;
}

#aboutText a {
  color: #888;
  text-decoration: none;
}

#aboutText a:hover {
  color: #558f4c;
}

#aboutWhatsapp {
  margin-top: 2.1em;
  opacity: .58;
}

#aboutWhatsapp .fa {
  font-size: 1.05em;
}

#aboutClose {
  position: fixed;
  top: calc(8vh - 2.25em);
  right: 8vw;

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

  width: 1.55em;
  height: 1.55em;

  z-index: 2147483647;

  color: #777;
  background: rgba(255,255,255,.72);
  border-radius: 50%;

  font-family: Arial, sans-serif;
  font-size: 2vh;
  font-weight: 200;
  line-height: 1;
  text-decoration: none;

  opacity: .42;

  cursor: pointer;
  user-select: none;

  transition:
    opacity .22s ease,
    transform .22s ease,
    background .22s ease;
}

#aboutClose:hover {
  opacity: .82;
  transform: scale(1.04);
  background: rgba(255,255,255,.9);
}

#aboutGif {
  position: absolute;
  top: 50%;
  right: 8vw;

  z-index: 2147483647;

  width: min(28vw, 340px);

  transform: translateY(-50%);

  opacity: .16;
  filter: grayscale(1) contrast(1.05);
  pointer-events: none;
  mix-blend-mode: multiply;
}

/* Hide footer while about layer is open.
   JS class alternative avoids relying only on :has support. */
#aboutLayer.open ~ #footer,
body:has(#aboutLayer.open) #footer {
  opacity: 0;
  pointer-events: none;
}

/* Desktop layout */
@media screen and (min-width: 769px) {
  #starter {
    position: fixed;
    top: 8vh;
    right: 8vw;
    left: auto;

    display: block;

    width: 3vh;
    height: 84vh;

    z-index: 9999;
  }

  #swissBar {
    position: absolute;
    bottom: 0;

    width: 100%;
    height: 0%;

    transition: height .5s ease;
  }

  textarea {
    padding-right: 12vw;
  }
}

/* Mobile layout */
@media screen and (max-width: 768px) {
  h1 {
    font-size: 5vh;
  }

  textarea {
    padding: 14vh 8vw 30vh 8vw;
  }

  #starter {
    top: 8vh;
    left: 8vw;
    right: 8vw;
  }

  #footer {
    left: 8vw;
    bottom: 8vh;
    max-width: 84vw;
    border: none;
  }

  #footer::before {
    left: -22vw;
    bottom: -15vh;

    width: 128vw;
    height: 64vh;

    background: radial-gradient(
      ellipse at 22vw calc(100% - 15vh),
      rgba(255,255,255,.94) 0%,
      rgba(255,255,255,.82) 18%,
      rgba(255,255,255,.52) 36%,
      rgba(255,255,255,.24) 54%,
      rgba(255,255,255,.08) 70%,
      rgba(255,255,255,0) 88%
    );
  }

  /* Keep stars + WhatsApp visible on mobile */
  #stars {
    display: inline-block;
    opacity: 1;
    visibility: visible;
  }

  #footer span {
    display: inline;
  }

  #aboutWhatsapp {
    display: inline-block;
    opacity: .58;
    visibility: visible;
  }

  #clearText {
    top: calc(8vh - 2.15em);
    right: 8vw;

    font-size: 2.6vh;
    transform: none;
  }

  #clearText:hover {
    transform: scale(1.04);
  }

  #aboutClose {
    top: calc(8vh - 2.15em);
    right: 8vw;

    font-size: 2.6vh;
  }

  #aboutGif {
    top: 50%;
    right: 7vw;

    width: 52vw;
    max-width: 240px;
    height: auto;

    transform: translateY(-50%);

    opacity: .22;
    filter: grayscale(1) contrast(1.08);
    mix-blend-mode: multiply;
  }

  #aboutText {
    z-index: 2147483647;
  }
}


/* RESTORE STAR BOUNCE — keep mobile footer visible without killing transforms */
#stars span{
  display:inline-block !important;
  transform:scale(1);
  animation:stars-animation 3s 50 ease-in-out;
  will-change:transform;
}

#stars:hover span{
  animation:none;
}

@media screen and (max-width:768px){

  #footer span{
    display:inline;
  }

  #footer #stars span{
    display:inline-block !important;
  }
}