@import "normalize.css";

@font-face {
  font-family: "Geist Sans";
  src: url("/GeistVF.ttf") format("truetype");
}

*,
*:after,
*:before {
	box-sizing: border-box;
}

:root {
  color-scheme: dark only;
	--line: color-mix(in lch, canvasText 15%, transparent);
}

:root[data-theme=light] {
	color-scheme: light only;
	--line: color-mix(in lch, canvasText 35%, transparent);
}

body {
	display: grid;
	place-items: center;
	min-height: 100vh;
	font-family:  "Geist Sans", sans-serif;
	font-weight: 80;
}

:root {
  --primary-bg: --primary;
}

[data-gradient=true] {
  --primary-bg: conic-gradient(from var(--angle, 180deg) at 50% 70%,hsla(0,0%,98%,1) 0deg,#eec32d 72.0000010728836deg,#ec4b4b 144.0000021457672deg,#709ab9 216.00000858306885deg,#4dffbf 288.0000042915344deg,hsla(0,0%,98%,1) 1turn);
}

h2 {
  font-weight: 120;
	line-height: 1.025;
  resize: both;
  overflow: hidden;
  width: 10ch;
  background:
    var(--primary-bg),
    linear-gradient(var(--secondary) 0 calc(var(--spread) * 1lh), transparent);
  background-repeat: no-repeat;
  background-size: 
    100% calc(var(--highlight) * 1lh),
    100% calc(100% - (var(--highlight) * 1lh));
 	background-position: 0 0, 0 calc(var(--highlight) * 1lh);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  text-wrap: balance;
  font-size: clamp(2rem, 1rem + 4vw, 12rem);
  display: inline-block;
  margin: 0;
}

.wrapper {
  padding: 2rem;
  background: var(--bg);
  position: relative;
}

@media(prefers-reduced-motion: no-preference) {
  @property --angle {
    inherits: true;
    initial-value: 180deg;
    syntax: '<angle>';
  }
  @-webkit-keyframes rotate {
    to { --angle: 540deg; }
  }
  @keyframes rotate {
    to { --angle: 540deg; }
  }
  [data-gradient=true][data-animate=true] {
    -webkit-animation: rotate 6s infinite linear;
            animation: rotate 6s infinite linear;
  }
}

.tp-dfwv {
    position: absolute;
	top: auto !important;
    bottom: 10px !important;
    right: 8px !important;
    width: 256px;
}

.bear-link {
	color: canvasText;
	position: fixed;
	bottom: -5px;
	left: 9px;
	width: 48px;
	aspect-ratio: 1;
	display: grid;
	place-items: center;
	opacity: 0.2;
	transition-duration: 0.3s;
}

:where(.x-link, .bear-link):is(:hover, :focus-visible) {
	opacity: 1;
}
.bear-link svg {
	width: 75%;
}

div.tp-dfwv {
	width: 300px;
}

::view-transition-group(root) {
	-webkit-animation-duration: 1.25s;
	        animation-duration: 1.25s;
}
::view-transition-new(root),
::view-transition-old(root) {
	mix-blend-mode: normal;
}

::view-transition-new(root) {
	-webkit-animation-name: reveal-light;
	        animation-name: reveal-light;
}

::view-transition-old(root) {
	-webkit-animation: none;
	        animation: none;
}

@-webkit-keyframes reveal-light {
	from {
		-webkit-clip-path: polygon(130% 0, 130% 0, 115% 100%, 110% 115%);
		        clip-path: polygon(130% 0, 130% 0, 115% 100%, 110% 115%);
	}
	to {
		-webkit-clip-path: polygon(130% 0, -30% 0, -15% 100%, 110% 115%);
		        clip-path: polygon(130% 0, -30% 0, -15% 100%, 110% 115%);
	}
}

@keyframes reveal-light {
	from {
		-webkit-clip-path: polygon(130% 0, 130% 0, 115% 100%, 110% 115%);
		        clip-path: polygon(130% 0, 130% 0, 115% 100%, 110% 115%);
	}
	to {
		-webkit-clip-path: polygon(130% 0, -30% 0, -15% 100%, 110% 115%);
		        clip-path: polygon(130% 0, -30% 0, -15% 100%, 110% 115%);
	}
}