@font-face {
  font-family: "Block2";
  src: url("./fonts/block2.ttf") format("truetype");
  font-weight: 1 768; /* Variable weight axis range */
  font-style: normal;
  font-display: swap; /* Improves accessibility + performance */
}
html{
	font-size: 16.666vw;
	font-family: Block2;
}
body{
	background: #dedede;
	color: black;
	padding: 0;
	margin: 0;
	line-height: 1em;
	font-weight: 220;
}
h1{
	font-size: 1rem;
	font-weight: 400;
	margin: 0;
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
h1:before{
	content:"";
	top: 0.115rem;
	bottom: 0.115rem;
	left: 0;
	right: 0;
	width: 100%;
	position: absolute;
	border: 1px solid black;
}

h1 span{
	border: 1px solid;
	margin: -0.5px;
	position: relative;
}
h1 span:after{
	content:"";
	border-left: 1px solid;
	border-right: 1px solid;
	position: absolute;
	top: 0rem;
	left: 0.115rem;
	right: 0.115rem;
	bottom: 0rem;
}
p{
	font-size: 0.125rem;
	margin: 0;
	line-height: 1em;
	  overflow-wrap: anywhere!important;
  word-break: break-all!important;
  border: 1px solid;
  margin: -0.5px;
  padding: 0.1rem;
}

.giantblock{
	background: black;
	color: white;
}




/* GIANTBLOCK – sequentielle Variable-Font-Animation */
.giantblockwrap{
	height: 100vh;
	width: 100%;
}
/* GIANTBLOCK – sequentielle Variable-Font-Weight-Animation ohne Fade */
.giantblock {
  position: relative;
  width: 100%;
  height: 100%;
  background: black;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* Alle Buchstaben übereinander zentriert, nur einer sichtbar */
.giantblock span {
  position: absolute;
  font-variation-settings: "wght" 1;
  font-size: clamp(1rem, 80vw, 80vh);
  line-height: 1em;
  visibility: hidden; /* harte Umschaltung */
}

/* Animation nur bei normaler Bewegungspräferenz */
@media (prefers-reduced-motion: no-preference) {
  @keyframes weightPulse {
    0%   { font-variation-settings: "wght" 1; }
    100%  { font-variation-settings: "wght" 768; }

  }

  .animate-letter {
    visibility: visible !important; /* Buchstabe wird angezeigt */
    animation: weightPulse 1.6s ease-in-out forwards;
  }
}