* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Manrope', sans-serif;
}
:root {
  /* hsl (fallback color) */
  --bg-dark: hsl(336 0% 1%);
  --bg: hsl(300 0% 4%);
  --bg-light: hsl(0 0% 9%);
  --text: hsl(300 0% 95%);
  --text-muted: hsl(300 0% 69%);
  --highlight: hsl(330 0% 39%);
  --border: hsl(0 0% 28%);
  --border-muted: hsl(300 0% 18%);
  --primary: hsl(171 48% 57%);
  --secondary: hsl(344 62% 75%);
  --danger: hsl(9 26% 64%);
  --warning: hsl(52 19% 57%);
  --success: hsl(146 17% 59%);
  --info: hsl(217 28% 65%);
  /* oklch */
  --bg-dark: oklch(0.1 0 182);
  --bg: oklch(0.15 0 182);
  --bg-light: oklch(0.2 0 182);
  --text: oklch(0.96 0 182);
  --text-muted: oklch(0.76 0 182);
  --highlight: oklch(0.5 0 182);
  --border: oklch(0.4 0 182);
  --border-muted: oklch(0.3 0 182);
  --primary: oklch(0.76 0.1 182);
  --secondary: oklch(0.76 0.1 2);
  --danger: oklch(0.7 0.05 30);
  --warning: oklch(0.7 0.05 100);
  --success: oklch(0.7 0.05 160);
  --info: oklch(0.7 0.05 260);
  --transition: all 0.3s ease-in-out;
  --ff: 'Manrope', sans-serif;
  --h1: 700 1.5rem / 1.2em var(--ff);
  --h2: 700 1.25rem / 1.4em var(--ff);
  --h3: 700 1.125rem / 1.4em var(--ff);
  --h4: 700 1rem / 1.4em var(--ff);
  --p: 400 1rem / 1.6em var(--ff);
  --small: 400 0.75rem / 1.6em var(--ff);
  /* shadows */
  --shadow-s:
    inset 0 1px 2px #ffffff30, 0 1px 2px #00000030, 0 2px 4px #00000015;
  --shadow-m:
    inset 0 1px 2px #ffffff50, 0 2px 4px #00000030, 0 4px 8px #00000015;
  --gradient: linear-gradient(135deg, var(--primary), var(--secondary));
}
body.light {
  /* hsl (fallback color) */
  --bg-dark: hsl(0 0% 90%);
  --bg: hsl(300 0% 95%);
  --bg-light: hsl(300 50% 100%);
  --text: hsl(300 0% 4%);
  --text-muted: hsl(0 0% 28%);
  --highlight: hsl(300 50% 100%);
  --border: hsl(0% 0% 50%);
  --border-muted: hsl(340 0% 62%);
  --primary: hsl(174 100% 9%);
  --secondary: hsl(340 44% 31%);
  --danger: hsl(9 21% 41%);
  --warning: hsl(52 23% 34%);
  --success: hsl(147 19% 36%);
  --info: hsl(217 22% 41%);
  /* oklch */
  --bg-dark: oklch(0.92 0 182);
  --bg: oklch(0.96 0 182);
  --bg-light: oklch(1 0 182);
  --text: oklch(0.15 0 182);
  --text-muted: oklch(0.4 0 182);
  --highlight: oklch(1 0 182);
  --border: oklch(0.6 0 182);
  --border-muted: oklch(0.7 0 182);
  --primary: oklch(0.4 0.1 182);
  --secondary: oklch(0.4 0.1 2);
  --danger: oklch(0.5 0.05 30);
  --warning: oklch(0.5 0.05 100);
  --success: oklch(0.5 0.05 160);
  --info: oklch(0.5 0.05 260);
}

body {
  margin: 1rem auto;
  max-width: min(90vw, 1200px);
  background: var(--bg-dark);
  color: var(--text-muted);
}
h1 {
  font: var(--h1);
  margin-bottom: 0.5rem;
  color: var(--text);
}
h2 {
  font: var(--h2);
  margin-bottom: 0.4rem;
  color: var(--text);
}
h3 {
  font: var(--h3);
  margin-bottom: 0.25rem;
  color: var(--text);
}
h4 {
  font: var(--h4);
  color: var(--text);
}
p {
  font: var(--p);
  color: var(--text-muted);
  max-width: 80ch;
}
.small,
small {
  font: var(--small);
  letter-spacing: 0.1rem;
}
ul {
  padding-left: 2rem;
}
button,
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--bg);
  border: none;
  border-radius: 0.5rem;
  padding: 0.75rem 1.25rem;
  box-shadow: var(--shadow-s);
  cursor: pointer;
  font: var(--p);
  color: var(--text);
  transition: var(--transition);
}
button:focus {
  outline: none;
}
button:hover,
.btn:hover,
.card:hover {
  background: var(--bg-light);
  box-shadow: var(--shadow-m);
  transition: var(--transition);
}

a {
  text-decoration: none;
  color: var(--text);
  transition: var(--transition);
}
a:hover {
  color: var(--primary);
  transition: var(--transition);
}
.tag {
  font: var(--small);
  padding: 0.1rem 0.4rem;
}

.flex {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
}
.grid-items {
  background: var(--bg-light);
  padding: 1rem 1.25rem;
  border-radius: 1rem;
  box-shadow: var(--shadow-s);
}

.highlight {
  position: relative;
  display: inline-block;
  margin-bottom: 0.5rem 8px;
  color: var(--text);
  padding: 0.1rem 0.25rem;
}
.highlight::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--secondary);
  opacity: 0.1;
}
/* global theme end here */

/* header */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
main {
  flex-grow: 1;
  margin-bottom: 10rem;
}

footer {
  margin: auto auto 10rem auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
footer a {
  padding: 1rem;
}
footer .social-icon {
  font-size: 2rem;
  transition: var(--transition);
}
footer .social-icon:hover {
  color: var(--primary);
  filter: drop-shadow(var(--shadow-s));
}

.logo {
  width: 4.5rem;
}

.theme-btn {
  background: var(--bg-light);
  padding: 0.3rem 0.6rem;
  border-radius: 0.4rem;
}
.fa {
  color: var(--text);
  font-size: 1.2rem;
}

/* main container */
.container {
  margin-top: 2rem;
  display: flex;
  gap: 1rem;
}

/* sidebar */
.sidebar-nav {
  display: flex;
  width: max-content;
  opacity: 1;
  transition: var(--transition);
}

.links-lines-x {
  flex-direction: column;
  gap: 1rem;
}
.sidebar-container {
  display: flex;
  gap: 1rem;
  position: fixed;
  right: -15rem;
  top: 6rem;
  align-self: flex-start;
  width: 15rem;
  overflow: hidden;
  transition: var(--transition);
}
.sidebar-container.sidebar-mobile {
  background: var(--bg-light);
  padding: 0.5rem;
  padding-left: 1rem;
  border-radius: 1rem;
  box-shadow: var(--shadow-s);
  width: 12rem;
  right: 5vw;
  z-index: 98;
}

.sidebar-container.sidebar-collapse {
  width: 2rem;
}
.sidebar-container.sidebar-collapse .sidebar-links {
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
}
.sidebar-icon {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 0;
  z-index: 2;
}

.sidebar-icon-mobile {
  position: fixed;
  font-size: 1.1rem;
  top: 5rem;
  right: 5vw;
  background: var(--bg-light);
  box-shadow: var(--shadow-s);
  padding: 0.7rem;
  border-radius: 50%;
  z-index: 99;
}

.sidebar-icon:hover {
  cursor: pointer;
}

.sidebar-links {
  position: relative;
  padding-left: 1rem;
  transition: var(--transition);
}
.sidebar-links:hover {
  position: relative;
  transform: translateX(0.5rem);
}
.sidebar-links::after {
  position: absolute;
  content: '';
  width: 0.5rem;
  height: 0.1rem;
  top: 50%;
  left: 0;
  background: var(--text);
  transition: var(--transition);
}

.sidebar-links:hover::after {
  width: 1rem;
  left: -0.5rem;
}

/* section */
section {
  box-shadow: var(--shadow-s);
  margin: 3rem 0px;
  background: var(--bg);
  padding: 1.5rem;
  border-radius: 1.5rem;
}
#linear {
  overflow: hidden;
}
.codepen-link {
  padding: 0.2rem 1rem;
  margin: 0.5rem 0px;
  box-shadow: var(--shadow-s);
}

/* grid items */
.grid-items {
  box-shadow: var(--shadow-s);
  background: var(--bg-light);
  padding: 1rem 1.25rem;
  border-radius: 1rem;
}

/* move part */
.primary-block {
  width: 2rem;
  aspect-ratio: 16 / 9;
  background-color: var(--primary);
  margin: 1rem 0px 0.5rem;
  border-radius: 0.25rem;
}

.primary-circle {
  width: 1rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--primary);
  animation: timing-animation 6s linear infinite;
}

/* Timing Functions */
.timing-path {
  width: 18rem;
  margin: 1rem 0;
  background: var(--bg-light);
  border-radius: 1rem;
}
.cubic-bezier-svg {
  width: 18rem;
  height: 18rem;
  stroke-width: 5;
  margin: 1rem 0px;
  background: var(--bg-dark);
}
/* links hover */
.links-example {
  width: fit-content;
  display: flex;
  background: var(--bg-light);
  box-shadow: var(--shadow-s);
  padding: 0.5rem 1.25rem;
  border-radius: 1rem;
  gap: 1.5rem;
  margin: 1rem 0px 2rem;
  overflow: hidden;
}
.links-translate a:hover {
  transform: translateY(-0.25rem);
  transition: transform 0.3s ease-in-out;
}

.links-lines a {
  position: relative;
  padding-bottom: 0.25rem;
}
.links-lines a::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 0.1rem;
  bottom: 0;
  left: 0;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: var(--transition);
}
.links-lines a:hover::after {
  transform: scaleX(1);
  transition: var(--transition);
}

.links-morph a {
  position: relative;
}
.links-morph a::after,
.links-morph a::before {
  content: '';
  position: absolute;
  width: 0%;
  background: var(--gradient);
  transition: var(--transition);
}
.links-morph a::after {
  height: 0.15rem;
  top: 0;
  left: 0;
}
.links-morph a::before {
  height: 0.08rem;
  bottom: 0;
  right: 0;
}
.links-morph a:hover::after,
.links-morph a:hover::before {
  width: 100%;
}
.links-box {
  width: fit-content;
  margin: 1.5rem 0px 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.links-icon-box {
  width: 3.5rem;
  aspect-ratio: 1;
  background: var(--bg-light);
  box-shadow: var(--shadow-s);
  border-radius: 50%;
  position: relative;
}
.links-icon-box::after {
  content: '';
  width: 3.5rem;
  aspect-ratio: 1;
  background: var(--primary);
  box-shadow: var(--shadow-s);
  border-radius: 50%;
  position: absolute;
  transform: scale(0);
  transition: var(--transition);
  cursor: pointer;
}

.links-icon-box:hover::after {
  transform: scale(1);
}

.links-icon-box a {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: 1;
}
.links-scaling-icon {
  font-size: 1.2rem;
  color: var(--text);
}

.cos-box {
  position: relative;
  width: 3.5rem;
  height: 3.5rem;
  background: var(--bg-light);
  box-shadow: var(--shadow-s);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: var(--transition);
  overflow: hidden;
}
.cos-box::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, var(--i), var(--j));
  filter: blur(20px);
  z-index: -1;
}
.cos-box::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, var(--i), var(--j));
  opacity: 0;
  transition: 0.5s;
}
.cos-box i {
  font-size: 1.2em;
  transition: var(--transition);
}
.cos-box span {
  position: absolute;
}
.cos-title {
  color: var(--text);
  font-size: 1.1em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transform: scale(0);
  transition: 0.5s;
  transition-delay: 0s;
  z-index: 2;
}

.cos-box:hover {
  width: 6.5rem;
  border-radius: 1rem;
}
.cos-box:hover i {
  scale: 0;
}
.cos-box:hover span {
  transform: scale(1);
}
.cos-box:hover::before {
  z-index: 1;
}
.cos-box:hover::after {
  opacity: 0.33;
}

/* buttons */
#buttons {
  background: var(--bg);
  padding: 1.5rem;
  border-radius: 1rem;
}
/* buttons section */
.btn-ex {
  margin: 1rem 0 2rem 0;
}

/* 911 */
.nine11-wrapper {
  position: relative;
  width: 15rem;
  height: 15rem;
  border-radius: 1rem;
  background: var(--bg-dark);
}
.nine11 {
  width: fit-content;
  aspect-ratio: 1;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  font: var(--h2);
  z-index: 1;
}
.police,
.fire,
.medical {
  position: absolute;
  top: 45%;
  left: 40%;
  transform: translateY(-50%) translateX(-50%);
  transition: var(--transition);
  scale: 0.5;
}
.nine11-wrapper.active .nine11 {
  left: 10%;
  transform: translateY(-50%) translateX(0);
  transition: var(--transition);
}
.nine11-wrapper.active .police {
  top: 10%;
  left: 50%;
  scale: 1;
  transform: translateY(0) translateX(0);
  transition: var(--transition);
}
.nine11-wrapper.active .fire {
  scale: 1;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(0);
  transition: var(--transition);
}
.nine11-wrapper.active .medical {
  scale: 1;
  left: 50%;
  top: 70%;
  transform: translateY(0) translateX(0);
  transition: var(--transition);
}

/* heart love */
.heart-love {
  background: var(--bg-dark);
  padding: 4rem;
  border-radius: 1rem;
  width: fit-content;
}

.heart-love-icon {
  width: 3rem;
  height: 3rem;
  stroke: var(--text-muted);
  stroke-width: 1;
  cursor: pointer;
  transition: var(--transition);
  border-radius: 50%;
  background: transparent;
}
.heart-love-icon:hover {
  stroke: var(--text);
  transition: var(--transition);
}

.heart-love-icon.heart-filled {
  fill: var(--primary);
  stroke: var(--primary);
  animation: heart-filled 0.6s ease-in-out;
}

/* shiny button */
.shiny-button {
  margin-top: 1rem;
  position: relative;
  overflow: hidden;
  background: var(--bg-light);
}
.shiny-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  opacity: 0.1;
  background: linear-gradient(
    to right,
    #ffffff00 0%,
    var(--primary) 50%,
    #ffffff00 100%
  );
  transform: skewX(-20deg);
  transition: var(--transition);
}

.shiny-button:hover::before {
  left: 100%;
}

/* 3d button */
.p-button-container {
  margin-top: 1rem;
  position: relative;
  width: 150px;
  height: 50px;
  transition: 4s;
  transform-style: preserve-3d;
  transform: perspective(1000px) rotateX(0deg);
}
.p-button-container:hover {
  transform: perspective(1000px) rotateX(360deg);
  box-shadow: var(--shadow-s);
}
.a3d-btn {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.5s;
  border: 1px solid var(--text);
}
.a3d-btn:hover {
  opacity: 0.8;
}

.a3d-btn:nth-child(1) {
  transform: rotateX(360deg) translateZ(25px);
}

.a3d-btn:nth-child(2) {
  transform: rotateX(270deg) translateZ(25px);
}
.a3d-btn:nth-child(3) {
  transform: rotateX(180deg) translateZ(25px);
}
.a3d-btn:nth-child(4) {
  transform: rotateX(90deg) translateZ(25px);
}

/* btn color */
.btn-color-container {
  width: fit-content;
  position: relative;
  padding: 2.5rem;
}
.btn-color {
  margin-top: 1rem;
  width: 8rem;
  background: var(--bg-light);
  box-shadow:
    inset 0 1px 0 #ffffff30,
    0 7px 0 var(--bg);
  position: absolute;
  z-index: 9;
  top: 5px;
  left: 0;
}
.btn-color:hover {
  transition: 0.1s;
  box-shadow:
    inset 0 1px 0 #ffffff30,
    0 7px 0 var(--bg);
}
.btn-color:active {
  top: 10px;
  background: var(--bg);
  box-shadow:
    inset 0 1px 0 #ffffff30,
    0 2px 0 var(--bg);
}
.btn-color-ghost {
  position: absolute;
  top: 27px;
  left: -0.15rem;
  height: 3.3rem;
  width: 8.3rem;
  background: var(--text);
  border-radius: 0.5rem;
  z-index: 1;
}

/* card flip */
.card-flip-container {
  margin-top: 1rem;
  width: 18rem;
  height: 16rem;
  position: relative;
  cursor: pointer;
  perspective: 1000px;
  transform-style: preserve-3d;
  overflow: hidden;
}

.card-flip {
  width: 18rem;
  aspect-ratio: 16/9;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transform-style: preserve-3d;
}

.card-flip.flipped {
  transform: rotateY(180deg);
}

.card-flip-front,
.card-flip-back {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(60deg, var(--bg), var(--bg-light));
  border-radius: 0.5rem;
  box-shadow: var(--shadow-m);
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
.card-flip-back {
  transform: rotateY(180deg);
}

.card-flip-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  transform-style: preserve-3d;
}
.line-numbers {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0.5rem 1rem;
  border-right: 2px solid var(--success);
  background: var(--bg-dark);
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
  box-shadow: var(--shadow-m);
  backface-visibility: hidden;
}
.code {
  font-size: 0.6rem;
  margin-left: 1.5rem;
  transform: translateZ(60px);
  backface-visibility: hidden;
}
.line-numbers span,
code * {
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-muted);
}

.line-numbers span {
  font-size: 0.337rem;
  color: var(--border-muted);
}

.indent {
  padding-left: 10px;
}
.indent-2 {
  padding-left: 20px;
}
.operator {
  color: var(--primary);
}
.string {
  color: var(--success);
}
.variable {
  color: var(--secondary);
}
.property {
  color: var(--danger);
}
.method {
  color: var(--primary);
}
.function {
  color: var(--warning);
}
.boolean {
  color: var(--primary);
}

/* add to files */
#atc-container {
  margin-top: 1rem;
  background: var(--bg-light);
  border-radius: 1rem;
  padding: 1rem;
}

.atc-header {
  display: flex;
  justify-content: space-between;
  position: relative;
}
.files-count {
  position: absolute;
  top: -6px;
  right: 10px;
  background: var(--bg-dark);
  border-radius: 50%;
  font-size: 12px;
}

.atc-content {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, 10rem);
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 10px;
}
.atc-files {
  box-shadow: var(--shadow-s);
  border-radius: 0.5rem;
  width: 10rem;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.atc-files:hover {
  scale: 0.95;
}

.atc-files:nth-child(1) {
  background: var(--primary);
}
.atc-files:nth-child(2) {
  background: var(--info);
}
.atc-files:nth-child(3) {
  background: var(--secondary);
}
.atc-files i {
  font-size: 2.5rem;
}
.atc-files p {
  margin-top: 0.2rem;
  color: var(--bg-dark);
}

/* offset path */
.offset-path-ex > * {
  margin-top: 0.5rem;
}
.offset-path-ex-sub {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

#offset-path-container {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.offset-path-box {
  width: 8rem;
  height: 8rem;
  border: 2px dashed var(--primary);
}
.offset-element {
  width: 1rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--secondary);
  offset-path: content-box;
  offset-distance: 0%;
  animation: circuitous-offset 6s linear infinite;
}
.circle {
  border-radius: 50%;
}

.polygon {
  background: var(--bg-light);
  clip-path: polygon(
    50% 2.4%,
    34.5% 33.8%,
    0% 38.8%,
    25% 63.1%,
    19.1% 97.6%,
    50% 81.3%,
    80.9% 97.6%,
    75% 63.1%,
    100% 38.8%,
    65.5% 33.8%
  );
}
.polygon .offset-element {
  offset-path: polygon(
    50% 2.4%,
    34.5% 33.8%,
    0% 38.8%,
    25% 63.1%,
    19.1% 97.6%,
    50% 81.3%,
    80.9% 97.6%,
    75% 63.1%,
    100% 38.8%,
    65.5% 33.8%
  );
}
.half-circle {
  background: var(--bg-light);
  clip-path: path('M 16,78.4 A 51.2,51.2 0,0,1 115.2,38.4 z');
}

.half-circle .offset-element {
  offset-path: path('M 16,78.4 A 51.2,51.2 0,0,1 115.2,38.4 z');
}

/* follow path */

.custom-svg-path {
  width: 10rem;
  height: 10rem;
  stroke-width: 8;
  stroke: var(--primary);
  /* stroke-dasharray: 30 30; */
}

/* auth */
.auth {
  width: 18rem;
  aspect-ratio: 1;
  border-radius: 0.5rem;
  margin-top: 1rem;
  background: var(--gradient);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.auth::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: var(--bg-dark);
  filter: blur(1px);
  opacity: 0.9;
  transition: width 1s ease-in-out;
}
.auth::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background: var(--bg-dark);
  filter: blur(1px);
  opacity: 0.9;
  transition: width 1s ease-in-out;
}
.auth:hover::before,
.auth:hover::after {
  width: 0;
  transition: width 1s ease-in-out;
  transition-delay: 1s;
}
.fingerprint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  width: 4rem;
  height: 4rem;
  fill: none;
  stroke: var(--bg-dark);
  stroke-width: 1;
  background: var(--bg-light);
  border-radius: 3rem;
  padding: 0.25rem;
  box-shadow: 0 0 4px 2px var(--bg);
  z-index: 1;
  transition: var(--transition);
}
.auth:hover .fingerprint {
  animation: border-glow 6s ease-in-out infinite;
  animation-delay: 0.6s;
  transition: var(--transition);
}

.fingerprint-animate {
  stroke: var(--primary);
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1s ease-in-out;
}
.auth:hover .fingerprint-animate {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s ease-in-out;
  transition-delay: 0.3s;
}
.shiny-card {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 100%;
  height: 100%;
  opacity: 0.05;
  background: linear-gradient(
    to right,
    #ffffff00 0%,
    var(--primary) 50%,
    #ffffff00 100%
  );
  transform: skew(145deg);
  z-index: 2;
  transition: var(--transition);
}

.auth:hover .shiny-card {
  left: 120%;
  transition: var(--transition);
}

/* pin auth */
.pin-auth {
  width: 18rem;
  aspect-ratio: 1;
  border-radius: 0.5rem;
  margin-top: 1rem;
  background: var(--gradient);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
.pin-auth::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: var(--bg-dark);
  filter: blur(1px);
  opacity: 0.9;
  transition: width 1s ease-in-out;
}
.pin-auth::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background: var(--bg-dark);
  filter: blur(1px);
  opacity: 0.9;
  transition: width 1s ease-in-out;
}
.pin-boxes {
  background: var(--bg-light);
  padding: 0.5rem;
  border-radius: 0.5rem;
  display: flex;
  gap: 0.5rem;
  z-index: 1;
  box-shadow: 0 0 4px 2px var(--bg);
}
.auth-failure {
  animation: auth-failure 0.3s ease-in-out 2;
}
.pin {
  width: 2.5rem;
  aspect-ratio: 1;
  border-radius: 0.25rem;
  border: none;
  background: var(--bg-dark);
  color: var(--text);
  text-align: center;
  font: var(--h2);
  transition: color 0.3s ease;
}
.pin:focus {
  outline: none;
  outline: 2px solid var(--primary);
}

/* success */
.pin-auth.success::before,
.pin-auth.success::after {
  width: 0;
  transition: width 1s ease-in-out;
  transition-delay: 1s;
}
.border-glow {
  animation: border-glow 6s ease-in-out infinite;
  animation-delay: 0.6s;
  transition: var(--transition);
}

/* morph svg */
#morph-svg {
  position: relative;
  height: 500px;
  overflow: hidden;
}

.morph-container {
  position: absolute;
  top: 60%;
  left: 50%;
  translate: -50% -50%; /* Standard centering */
  width: 300px; /* Adjusted to match aspect ratio of viewbox */
  height: 300px;
  transition: top 0.6s cubic-bezier(0.3, 0.8, 0.2, 1.3);
  /* Flex to help center text overlay */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Moves the whole container up */
.morph-container.trigger {
  top: 50%;
}

.morph-svg {
  width: 20rem;
  height: 20rem;
  overflow: visible;
  fill: none;
  stroke: var(--primary);
  filter: drop-shadow(0 0 8px var(--primary));
  cursor: pointer;
}

.morph-shape {
  /* Default State (Pill) */
  d: path(
    'M 70 130  L 130 130  C 130 135 130 150 130 150  L 70 150  C 70 150 70 135 70 135 Z'
  );
}

/* TEXT STYLES */
.text-overlay {
  position: absolute;
  text-align: center;
  color: var(--text);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  margin: 0;
  width: 100%;
}

.svg-text-close {
  top: 67%;
  left: 0;
  opacity: 1;
}

.svg-text-open {
  top: 40%;
  transform: translateY(-50%);
  font-size: 24px;
  width: 80%;
}
.svg-text-open.cat-text-move {
  top: 50%;
  transition: top 0.6s cubic-bezier(0.3, 0.8, 0.2, 1.3) 0.6s;
}
#cat-svg {
  width: 5rem;
  height: 5rem;
  stroke: var(--primary);
  stroke-width: 0.6;
  fill: none;
  filter: drop-shadow(0 0 8px var(--primary));
  scale: 0;
  translate: 0 -40px;
}
#cat-svg.cat-jump {
  scale: 1;
  translate: 0 0px;
  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.6s;
}
#cat-path.morph-cat {
  animation: morph-cat 1.5s ease-in-out 1.5s;
}
@keyframes morph-cat {
  0%,
  20%,
  100% {
    d: path(
      'M 12 5 C 12.223 5 12.448 5.01 12.672 5.03 C 12.896 5.049 13.12 5.079 13.341 5.117 C 13.563 5.156 13.783 5.203 14 5.26 C 15.78 3.26 19.03 2.42 20.42 3 C 21.12 3.29 21.015 5.04 20.735 6.718 C 20.455 8.395 20 10 20 10 C 20.57 11.07 21 12.24 21 13.44 C 21 14.927 20.552 16.262 19.771 17.382 C 18.99 18.502 17.876 19.407 16.542 20.031 C 15.209 20.656 13.657 21 12 21 C 9.515 21 7.265 20.25 5.636 18.93 C 4.008 17.61 3 15.72 3 13.44 C 3 12.19 3.5 11.04 4 10 C 4 10 3.527 8.395 3.229 6.718 C 2.93 5.04 2.805 3.29 3.5 3 C 4.89 2.42 8.22 3.23 10 5.23 C 10.656 5.079 11.327 5.002 12 5 C 12 5 12 5 12 5 M 8 14.5 L 8 14 M 16 14.5 L 16 14'
    );
  }
  50%,
  70% {
    d: path(
      'M 11.849 5.981 C 11.948 6.008 12.052 6.008 12.151 5.981 C 12.25 5.953 12.339 5.899 12.409 5.824 C 13.15 4.991 14.128 4.403 15.212 4.14 C 16.295 3.876 17.434 3.948 18.475 4.347 C 19.516 4.747 20.411 5.454 21.041 6.374 C 21.671 7.294 22.005 8.385 22 9.5 C 22 11.79 20.5 13.5 19 15 C 17.169 16.771 15.339 18.542 13.508 20.313 C 13.259 20.599 12.933 20.809 12.57 20.917 C 12.206 21.025 11.819 21.027 11.454 20.924 C 11.089 20.82 10.761 20.615 10.508 20.332 C 8.672 18.555 6.836 16.777 5 15 C 3.5 13.5 2 11.8 2 9.5 C 2 8.387 2.338 7.3 2.968 6.384 C 3.599 5.467 4.493 4.763 5.532 4.364 C 6.571 3.966 7.706 3.892 8.788 4.153 C 9.87 4.414 10.847 4.996 11.591 5.824 C 11.661 5.899 11.75 5.953 11.849 5.981 M 8 14 L 8 14 M 16 14 L 16 14'
    );
  }
}