:root{
  --bg:#E6D2C3;
  --stone-shadow:#B99A84;
  --stone-light:#F7EBDD;
  --stone-ink:#7A5F4D;
  --button:#FFF7ED;
  --button-edge:#B99A84;
  --armenia-red:#D90012;
  --armenia-blue:#0033A0;
  --armenia-orange:#F2A800;
}

*{
  box-sizing:border-box;
}

body{
  position:relative;
  margin:0;
  min-height:100vh;
  background:
    linear-gradient(145deg, rgba(255,255,255,.34), rgba(255,255,255,0) 38%),
    repeating-linear-gradient(
      168deg,
      rgba(122,95,77,.055) 0,
      rgba(122,95,77,.055) 1px,
      transparent 1px,
      transparent 18px
    ),
    linear-gradient(180deg, var(--stone-light), var(--bg) 52%, #D9BFAE);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}

body::before{
  content:var(--armenian-bg-letters, "Ա Բ Գ Դ Ե Զ Է Ը Թ Ժ Լ Խ Ծ Կ Հ Ձ Ղ Ճ Մ Յ Ն Շ Ո Չ Պ Ջ Ռ Ս Վ Տ Ր Ց Ա Բ Գ Դ Ե Զ Է Ը Թ Ժ Լ Խ Ծ Կ Հ Ձ Ղ Ճ Մ Յ Ն Շ Ո Չ Պ Ջ Ռ Ս Վ Տ Ր Ց");
  position:fixed;
  inset:-10vh -8vw;
  color:var(--stone-ink);
  font-family:'Noto Serif Armenian', Georgia, 'Times New Roman', serif;
  font-size:clamp(2.7rem,7vw,6.8rem);
  font-weight:700;
  line-height:1.45;
  letter-spacing:.32em;
  opacity:.07;
  overflow:hidden;
  pointer-events:none;
  transform:rotate(-8deg);
  white-space:normal;
}

body::after{
  content:"";
  position:fixed;
  inset:14px;
  border:1px solid rgba(122,95,77,.34);
  background:
    linear-gradient(45deg, transparent 46%, rgba(122,95,77,.22) 47%, rgba(122,95,77,.22) 53%, transparent 54%) top left / 22px 22px repeat-x,
    linear-gradient(45deg, transparent 46%, rgba(122,95,77,.22) 47%, rgba(122,95,77,.22) 53%, transparent 54%) bottom left / 22px 22px repeat-x,
    linear-gradient(135deg, transparent 46%, rgba(122,95,77,.2) 47%, rgba(122,95,77,.2) 53%, transparent 54%) top left / 22px 22px repeat-y,
    linear-gradient(135deg, transparent 46%, rgba(122,95,77,.2) 47%, rgba(122,95,77,.2) 53%, transparent 54%) top right / 22px 22px repeat-y;
  background-repeat:repeat-x, repeat-x, repeat-y, repeat-y;
  pointer-events:none;
}

.stage{
  position:relative;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:16px;
  overflow:hidden;
  isolation:isolate;
  z-index:1;
}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.bubble{
  position:relative;
  display:inline-flex;
  justify-content:center;
  align-items:center;

  border:none;
  cursor:pointer;

  color:#1F2937;
  font-weight:600;
  text-align:center;
  white-space:nowrap;

  background:var(--button);

  border:1px solid rgba(122,95,77,.28);
  border-radius:clamp(16px,4vw,24px);

  padding:
    clamp(0.9rem,2vw,1.2rem)
    clamp(1.5rem,5vw,2.2rem);

  font-size:clamp(1.25rem,3vw,1.75rem);

  box-shadow:
    0 14px 32px rgba(96,68,48,.18),
    0 6px 14px rgba(96,68,48,.12),
    inset 0 0 0 1px rgba(255,255,255,.72);

  overflow:visible;
  user-select:none;

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.bubble:hover{
  transform:translateY(-2px);
  box-shadow:
    0 18px 38px rgba(96,68,48,.22),
    0 8px 18px rgba(96,68,48,.14),
    inset 0 0 0 1px rgba(255,255,255,.82);
}

.bubble:active{
  transform:translateY(1px) scale(.98);
}

.bubble:focus-visible{
  outline:3px solid #0033A0;
  outline-offset:4px;
}

.noscript-message{
  margin:16px 0 0;
  color:#1F2937;
  font-size:1rem;
  font-weight:600;
}

#text{
  display:inline-block;
}

@media (max-width: 767px){
  .stage{
    justify-content:center;
    padding:20px;
  }

  body::before{
    inset:-8vh -20vw;
    font-size:clamp(2.35rem,13vw,4.8rem);
    letter-spacing:.24em;
    opacity:.055;
  }

  body::after{
    inset:10px;
    background-size:18px 18px;
  }

  .bubble{
    width:auto;
    max-width:90%;
    padding:1rem 2rem;
    font-size:clamp(1.5rem,5vw,2rem);
  }
}

.char{
  position:relative;
  display:inline-block;

  transform-origin:center center;

  will-change:
    transform,
    filter,
    opacity;
}

.char::before{
  content:"";

  position:absolute;
  left:50%;
  top:50%;

  width:180%;
  height:180%;

  border-radius:10px;

  pointer-events:none;

  transform:
    translate(-50%,-50%)
    scale(.6);

  background:
    radial-gradient(
      closest-side,
      rgba(255,255,255,.36),
      rgba(255,255,255,.06) 40%,
      rgba(255,255,255,0) 60%
    );

  filter:blur(10px);

  opacity:0;

  will-change:
    transform,
    opacity;
}

.char.bloom::before{
  animation:
    letterBloom
    900ms
    cubic-bezier(.2,.9,.2,1)
    forwards;
}

.char.bloom{
  animation:
    letterPop
    900ms
    cubic-bezier(.2,.9,.2,1)
    forwards;
}

@keyframes letterBloom{
  0%{
    transform:
      translate(-50%,-50%)
      scale(.6);
    opacity:0;
  }

  35%{
    transform:
      translate(-50%,-50%)
      scale(1.08);
    opacity:.9;
  }

  100%{
    transform:
      translate(-50%,-50%)
      scale(1.22);
    opacity:0;
  }
}

@keyframes letterPop{
  0%{
    transform:translateY(0) scale(1);
    filter:brightness(1);
  }

  28%{
    transform:translateY(-8px) scale(1.12);
    filter:brightness(1.08);
  }

  100%{
    transform:translateY(0) scale(1);
    filter:brightness(1);
  }
}

@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation:none !important;
    transition:none !important;
  }
}