:root {
  --frame-height: 100dvh;
  --rail-width: clamp(44px, 3.75vw, 58px);
  --horizontal-peek: clamp(24px, 3vw, 48px);
  --portrait-width: 50vw;
  --hero-width: calc(50vw - var(--rail-width) - var(--horizontal-peek));
  --skills-width: clamp(320px, 25.4vw, 392px);
  --projects-width: clamp(850px, 63.9vw, 960px);
  --projects-expanded-width: calc(
    var(--projects-width) + clamp(160px, 14vw, 230px)
  );
  --contact-width: clamp(300px, 22.8vw, 348px);
  --unit: calc(var(--frame-height) / 900);
  --paper: #f0f8ff;
  --warm-paper: #f4efe6;
  --stone: #535353;
  --stone-deep: #1f1f1f;
  --taupe: #d7cfca;
  --gold: #b99a5b;
  --gold-soft: #c5ab77;
  --cream: #e3d3b4;
  --black: #111111;
  --page-bg: #e9edf1;
  --skill-rail-bg: #646464;
  --hero-text: #535353;
  --section-line: rgba(0, 0, 0, 0.35);
  --contact-line: rgba(227, 211, 180, 0.35);
  --portrait-progress:0;
  --logo-progress:0;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--page-bg);
  color: var(--stone);
  font-family: "Roboto", Arial, sans-serif;
  min-height: 100dvh;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
}

button,
a {
  color: inherit;
  font: inherit;
}

.stage {
  background: var(--paper);
  direction: ltr;
  display: flex;
  height: var(--frame-height);
  min-height: 620px;
  overflow: visible;
  transform-origin: left top;
  width: max-content;
}

.skill-rail,
.hero-panel,
.skills-panel,
.projects-panel,
.contact-panel {
  position: relative;
  z-index: 1;
  height: var(--frame-height);
  min-height: 620px;
}

.portrait-panel {
    flex: 0 0 calc(
        50vw - ((50vw - 500px) * var(--portrait-progress,0))
    );
  overflow: hidden;
   position: sticky;
    left: 0;
    z-index: 20;

    isolation: isolate;
    box-shadow:

    calc(18px * var(--glass-progress,0))

    0

    calc(40px * var(--glass-progress,0))

    rgba(0,0,0,.12);
}
.portrait-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;

  opacity: calc(var(--glass-progress, 0) *7);

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.10),
      rgba(255,255,255,.26)
    );

  transition: none;
}

.portrait-image {
  height: 100%;
  object-fit: cover;
  object-position: center center;
  position: absolute;
  top: 0;
  width: calc(
        100% + (220px * var(--portrait-progress,0))
    );

    left: calc(
        0px * var(--portrait-progress,0)
    );

    max-width: none;

  filter:
    saturate(calc(1 - (.25 * var(--glass-progress, 0))))
    brightness(calc(1 - (.06 * var(--glass-progress, 0))))
    contrast(calc(1 - (.04 * var(--glass-progress, 0))));
 transform: translateX(
    calc(-120px * var(--portrait-progress, 0))
  );

  will-change: transform, filter;
}

.brand-mark {
  position: absolute;
  width: 114px;
  height: 38px;
  left: calc(60px - (30px * var(--logo-progress, 0)));
  top: calc(50px - (18px * var(--logo-progress, 0)));

  transform:
    scale(calc(1 - (0.12 * var(--logo-progress, 0))))
    translateY(24px);

  transform-origin: left top;
  opacity: 0;
  filter: blur(8px);
  z-index: 25;

  animation:
    brandMarkReveal 1400ms
    cubic-bezier(0.22, 1, 0.36, 1)
    1500ms
    forwards;
}

.skill-rail {
  background: transparent;
  margin-left: 10px;
  flex: 0 0 var(--rail-width);
  height: 100vh;
  overflow: hidden;
  position: relative;
  border-left: #535353 1px solid;
  border-right: #535353 1px solid;
}

.rail-list {
  position: absolute;
  left: 0;
  top: 0;

  width: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;

  color: #535353;
  font-size: 16px;
  font-weight: 400;
  font-family: "Roboto", sans-serif;
  white-space: nowrap;

  will-change: transform;
}

.rail-list span {
  position: relative;

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

  width: var(--rail-width);
  height: 150px;

  transform: rotate(-90deg);
  transform-origin: center;
}

.rail-list span::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;

  margin-right: 16px;
  flex: 0 0 auto;
}

.hero-panel {
  background: var(--paper);
  flex: 0 0 max(958px, var(--hero-width));
}

.top-controls {
  align-items: center;
  display: flex;
  gap: calc(70 * var(--unit));

  position: sticky;
  left: 0;
  top: 12px;

  width: 0;
  height: 0;

  z-index: 99999;
  pointer-events: none;
}

.language-toggle,
.mode-toggle,
.project-card {
  border: 0;
  cursor: pointer;
}


.moon {
  background: var(--black);
  border-radius: 50%;
  height: calc(30 * var(--unit));
  position: relative;
  width: calc(30 * var(--unit));
}

.moon::after {
  background: var(--paper);
  border-radius: 50%;
  content: "";
  height: calc(25 * var(--unit));
  position: absolute;
  right: calc(-2 * var(--unit));
  top: 0;
  width: calc(25 * var(--unit));
}

.switch {
  align-items: center;
  background: #cfcfcf;
  border-radius: 999px;
  display: flex;
  height: calc(22 * var(--unit));
  padding: calc(3 * var(--unit));
  width: calc(42 * var(--unit));
}

.switch span {
  background: var(--gold);
  border-radius: 50%;
  display: block;
  height: calc(16 * var(--unit));
  transition: transform 180ms ease;
  width: calc(16 * var(--unit));
}

.social-links {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: calc(36 * var(--unit));
  left: calc(56 * var(--unit));
  opacity: 0.7;
  position: absolute;
  top: calc(303 * var(--unit));
  width: calc(30 * var(--unit));
}

.social-links a {
  display: block;
  height: calc(30 * var(--unit));
  transition:
    opacity 160ms ease,
    transform 160ms ease;
  width: calc(30 * var(--unit));
}

.social-links img {
  display: block;
  height: 100%;
  width: 100%;
}

.social-links a:hover {
  opacity: 1;
  transform: translateY(-3px);
}

.project-card:hover {
  opacity: 1;
}

.hero-copy {
  left: 146px;
  position: absolute;
  top: calc(100 * var(--unit));
}

h1,
.surname,
.role,
h2 {
  margin: 0;
}

h1,
.surname,
.skills-panel h2,
.projects-panel h2,
.contact-panel h2 {
  font-family: "Playfair Display", Georgia, serif;
}

h1 {
  color: var(--hero-text);
  font-family: Playfair Display;
  font-size: 110px;
  font-weight: 600;
  line-height: 1.34;
  white-space: nowrap;
}

.surname {
  color: var(--hero-text);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 84px;
  font-weight: 400;
  line-height: 1.33;
  margin-left: 156px;
  white-space: nowrap;
}

.role {
  color: var(--gold);
  font-family: "roboto" sans-serif;
  font-size: 42px;
  font-weight: 500;
  line-height: 1.18;
  margin-top: 28px;
  margin-bottom: 30px;
  margin-left: 10px;
}

.accent-line {
  background: var(--gold);
  height: max(1px, calc(2 * var(--unit)));
  margin-left: 0;
  width: calc(213 * var(--unit));
}

.principles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: calc(80 * var(--unit));
  row-gap: calc(24 * var(--unit));

  color: var(--hero-text);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.18;

  margin-top: 72px;
  padding-left: 0px;
  width: min(900px, 100%);

  list-style-position: outside;
}

.principles li {
  margin: 0;
}

.skills-panel {
  background: var(--taupe);
  color: var(--black);
  flex: 0 0 297px;
  overflow: hidden;
  padding-top: 32px;
  padding-left: 64px;
}

.section-watermark {
  color: var(--taupe);
  font-size: clamp(90px, calc(128 * var(--unit)), 128px);
  font-weight: 600;
  letter-spacing: calc(8.96 * var(--unit));
  line-height: 1.18;
  margin: 0;
  opacity: 0.3;
  pointer-events: none;
  position: absolute;
  white-space: nowrap;
}

.section-watermark.vertical {
  color: var(--warm-paper);
  right: -130px;
  top: 172px;
  transform: rotate(90deg);
  transform-origin: center;
}

.skill-group,
.tool-group {
  position: relative;
  z-index: 1;
}

.skill-group {
  margin-bottom: calc(31 * var(--unit));
}

.skill-group.compact {
  margin-bottom: calc(31 * var(--unit));
}

.skill-group h2,
.tool-group h2,
.projects-panel h2,
.contact-panel h2 {
  border-bottom: 1px solid var(--section-line);
  font-size: clamp(18px, calc(24 * var(--unit)), 24px);
  font-weight: 600;
  letter-spacing: calc(1.68 * var(--unit));
  line-height: 1.34;
  padding: 0 0 calc(8 * var(--unit)) calc(12 * var(--unit));
  width: calc(235 * var(--unit));
}

.skill-group ul {
  font-size: clamp(12px, calc(16 * var(--unit)), 16px);
  font-weight: 300;
  line-height: 1.2;
  margin: calc(14 * var(--unit)) 0 0;
  padding-left: calc(24 * var(--unit));
}

.skill-group li + li {
  margin-top: calc(6 * var(--unit));
}

.tool-icons {
  display: flex;
  gap: calc(24 * var(--unit));
  margin-top: calc(20 * var(--unit));
}

.tool-icons img {
  height: calc(30 * var(--unit));
  width: calc(30 * var(--unit));
}

.projects-panel {
  background: var(--warm-paper);
  flex: 0 0 980px;
  box-sizing: border-box;
  overflow: hidden;
  padding: 32px 46px 30px 80px;
  position: relative;
}

/* دیگر پنل هنگام هاور بزرگ نمی‌شود */
.projects-panel:has(.project-card:hover),
.projects-panel.is-expanding {
  flex-basis: 980px;
  padding: 32px 46px 30px 80px;
}

.projects-panel h2 {
  color: var(--black);
  position: relative;
  z-index: 3;
}

.projects-panel .section-watermark {
  right: -260px;
  font-size: 128px;
  top: 300px;
  z-index: 0;
  transform: rotate(90deg) scale(1);
  opacity: 0.3;
  transform: rotate(90deg) scale(1);

  transition:
    opacity 1s ease,
    transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);

  will-change: opacity, transform;
}
.projects-panel:has(.project-card:hover) .section-watermark,
.projects-panel:has(.project-card:focus-visible) .section-watermark {
  opacity: 0;
  transform: rotate(90deg) scale(0.68);
}

.project-grid {
  display: flex;
  gap: calc(40 * var(--unit));
  position: absolute;
  left: calc(150 * var(--unit));
  top: calc(170 * var(--unit));
  width: max-content;
  z-index: 2;
}

.project-card {
  background: var(--stone-deep);
  color: #ffffff;
  height: calc(650 * var(--unit));
  width: 200px;
  overflow: hidden;
  padding: 0;
  position: relative;
  flex: 0 0 auto;
  cursor: pointer;

  transition:
    width 1300ms cubic-bezier(0.19, 1, 0.22, 1),
    filter 800ms ease,
    opacity 800ms ease;
}

.project-card:hover,
.project-card:focus-visible {
  width: 380px;
  filter: brightness(1);
}

/* بقیه کارت‌ها هنگام هاور تاریک‌تر می‌شوند */
.project-grid:hover .project-card:not(:hover) {
  filter: brightness(0.55);
}

.project-card img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;

  transition:
    transform 1300ms cubic-bezier(0.19, 1, 0.22, 1),
    filter 800ms ease;
}

.project-card:hover img,
.project-card:focus-visible img {
  transform: scale(1.04);
}

.project-card::after {
  background: linear-gradient(
    to bottom,
    rgba(31, 31, 31, 0) 60%,
    var(--stone-deep) 100%
  );
  content: "";
  inset: 0;
  position: absolute;
  z-index: 1;
}

.project-card span {
  border-top: 1px solid rgba(255, 255, 255, 0.85);
  bottom: calc(22 * var(--unit));
  font-size: clamp(12px, calc(16 * var(--unit)), 16px);
  font-weight: 300;
  width: 100px;
  left: 50%;
  letter-spacing: calc(1.12 * var(--unit));
  padding-top: calc(5 * var(--unit));
  position: absolute;
  transform: translateX(-50%);
  z-index: 2;
}

.contact-panel {
  background: var(--stone);
  color: var(--cream);
  flex: 0 0 230;
  padding: calc(30 * var(--unit)) calc(20 * var(--unit)) 0;
}

.contact-panel h2 {
  border-color: var(--contact-line);
  color: var(--cream);
  margin-left: 20px;
  width: calc(288 * var(--unit));
}

.availability {
  border-bottom: 1px solid var(--contact-line);
  width: 210px;
  color: var(--cream);
  font-size: clamp(15px, calc(20 * var(--unit)), 20px);
  font-weight: 300;
  letter-spacing: calc(1.4 * var(--unit));
  line-height: calc(28 * var(--unit));
  margin-top: 26px;
  margin-left: 20px;
  margin-right: 20px;
  padding: 0 0 calc(20 * var(--unit)) calc(51 * var(--unit));
}

.contact-list {
  border-bottom: 1px solid var(--contact-line);
  display: flex;
  width: 210px;
  flex-direction: column;
  font-style: normal;
  gap: calc(20 * var(--unit));
  margin-top: 26px;
  padding-left: 18px;
  padding-bottom: 22px;
  margin-left: 20px;
}

.contact-list a {
  align-items: center;
  color: var(--cream);
  display: inline-flex;
  width: fit-content;
  font-size: 14px;
  font-weight: 300;
  gap: calc(12 * var(--unit));
  letter-spacing: calc(0.14 * var(--unit));
  text-decoration: none;
}

.contact-list img {
  height: calc(22 * var(--unit));
  object-fit: contain;
  width: calc(22 * var(--unit));
}

.quote {
  color: var(--gold-soft);
  width: fit-content;
  font-size: clamp(12px, calc(16 * var(--unit)), 16px);
  letter-spacing: calc(1.12 * var(--unit));
  line-height: calc(28 * var(--unit));
  margin-top: 40px;
  margin-bottom: 40px;
  margin-left: 40px;
}

.contact-brand {
  align-items: center;
  bottom: calc(85 * var(--unit));
  display: flex;
  flex-direction: column;
  gap: calc(22 * var(--unit));
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
}

.contact-brand img {
  height: calc(52 * var(--unit));
  width: calc(156 * var(--unit));
}

.contact-brand span {
  color: var(--cream);
  font-size: clamp(11px, calc(14 * var(--unit)), 14px);
  font-weight: 300;
  letter-spacing: calc(0.98 * var(--unit));
}

.toast {
  background: rgba(17, 17, 17, 0.84);
  border-radius: 4px;
  bottom: 24px;
  color: #ffffff;
  font-size: 14px;
  left: 50%;
  letter-spacing: 0.2px;
  opacity: 0;
  padding: 12px 16px;
  pointer-events: none;
  position: fixed;
  transform: translate(-50%, 12px);
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

body.dark {
  --paper: #171d21;
  --warm-paper: #221f1b;
  --stone: #2f3438;
  --stone-deep: #0f1113;
  --taupe: #302b28;
  --gold: #d1ad62;
  --gold-soft: #dfbd76;
  --cream: #f0dfbd;
  --black: #f2ede5;
  --page-bg: #0f1214;
  --skill-rail-bg: #252a2d;
  --hero-text: #e8e1d8;
  --section-line: rgba(240, 223, 189, 0.38);
  --contact-line: rgba(240, 223, 189, 0.32);
}

body.dark .switch span {
  transform: translateX(14px);
}

body.dark .mode-toggle {
  color: #ffffff;
}

body.dark .skills-panel,
body.dark .projects-panel {
  color: var(--cream);
}

body.dark .projects-panel h2,
body.dark .skills-panel h2,
body.dark .tool-group h2 {
  color: var(--cream);
}

body.dark .section-watermark {
  color: #867866;
  opacity: 0.22;
}

body.dark .section-watermark.vertical {
  color: #6f6254;
  opacity: 0.28;
}
body.dark .rail-list {
  color: #e8e1d8;
}
body.dark .skill-rail {
  border-left: #e8e1d8 1px solid;
  border-right: #e8e1d8 1px solid;
}

body.dark .language-toggle,
body.dark .principles,
body.dark h1,
body.dark .surname {
  color: var(--hero-text);
}

body.dark .switch {
  background: #4a5054;
}

body.dark .project-card::after {
  background: linear-gradient(
    to bottom,
    rgba(15, 17, 19, 0) 55%,
    rgba(15, 17, 19, 0.98) 100%
  );
}
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-old(root) {
  z-index: 1;
}

::view-transition-new(root) {
  z-index: 2;
}


.mode-toggle {
  align-items: center;
  background: transparent;
  color: #111111;
  transition: color 300ms ease;
  display: flex;
  gap: calc(16 * var(--unit));
  height: calc(30 * var(--unit));
  padding: 0;
  width: calc(96 * var(--unit));

  position: absolute;

  left: calc(
    50vw + var(--rail-width) + 45px -
    ((50vw + var(--rail-width) + 45px - 400px) * var(--portrait-progress, 0))
  );

  top: calc(30px - (2px * var(--portrait-progress, 0)));

  z-index: 99999;
  pointer-events: auto;
}

.stage.is-scrolled .portrait-mode-toggle {
  pointer-events: auto;
}
/* ---------- HERO INTRO ANIMATION ---------- */

.hero-copy h1 {
  opacity: 0;
  animation: mostafaLoad 1260ms cubic-bezier(0.22, 1, 0.36, 1) 280ms forwards;
}

.surname {
  opacity: 0;
  animation: surnameLoad 1260ms cubic-bezier(0.22, 1, 0.36, 1) 560ms forwards;
}

.role {
  opacity: 0;
  animation: roleLoad 1190ms cubic-bezier(0.22, 1, 0.36, 1) 840ms forwards;
}

.top-controls {
  opacity: 0;
  animation: toggleLoad 980ms ease 1080ms forwards;
}

.skill-rail {
  opacity: 0;
  transform: translateX(-120px);
  animation: railLoad 1330ms cubic-bezier(0.22, 1, 0.36, 1) 920ms forwards;
}


/* ---------- KEYFRAMES ---------- */

@keyframes mostafaLoad {
  from {
    opacity: 0;
    transform: translateY(-60px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes surnameLoad {
  from {
    opacity: 0;
    transform: translateY(60px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes roleLoad {
  from {
    opacity: 0;
    transform: translateX(-70px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes toggleLoad {
  from {
    opacity: 0;
    transform: scale(.85);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes railLoad {
  from {
    opacity: 0;
    transform: translateX(-120px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}.social-links a {
  opacity: 0;
  transform: translateY(45px);

  animation: socialReveal 850ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.social-links a:nth-child(1) {
  animation-delay: 1000ms;
}

.social-links a:nth-child(2) {
  animation-delay: 1200ms;
}

.social-links a:nth-child(3) {
  animation-delay: 1400ms;
}

.social-links a:nth-child(4) {
  animation-delay: 1600ms;
}

.social-links a:nth-child(5) {
  animation-delay: 1800ms;
}
@keyframes socialReveal {
  from {
    opacity: 0;
    transform: translateY(45px);
  }

  to {
    opacity: 0.7;
    transform: translateY(0);
  }
}
.section-scroll-nav {
  position: absolute;
  left: 50%;
  bottom: calc(42 * var(--unit));
  z-index: 35;

  width: 400px;
  transform: translateX(-50%);

  pointer-events: auto;
}

.section-scroll-items {
  display: grid;
  grid-template-columns: repeat(4, 100px);
  align-items: end;
  margin-bottom: 14px;
}

.section-scroll-items button {
  border: 0;
  background: transparent;
  padding: 0;
  color: #A47619;
  cursor: pointer;
  text-align: center;
  transition: color 450ms cubic-bezier(0.22, 1, 0.36, 1);
}

.section-scroll-items button span {
  display: block;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
}

.section-scroll-items button strong {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  font-weight: 400;
  line-height: 1;
}

.section-scroll-items button.is-active {
  color: #b99a5b;
}

.section-scroll-track {
  position: relative;
  width: 400px;
  height: 2px;
  background: rgba(185, 154, 91, 0.32);
  border-radius: 999px;
  overflow: hidden;
}

.section-scroll-thumb {
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  height: 2px;
  background: #b99a5b;
  border-radius: 999px;
  transform: translateX(0);
  transition: transform 120ms linear;
}
html,
body {
  scrollbar-width: none;
}

body::-webkit-scrollbar {
  display: none;
}
.section-scroll-thumb {
  cursor: grab;
  touch-action: none;
}

.section-scroll-thumb:active {
  cursor: grabbing;
}

body.is-dragging-scroll {
  user-select: none;
}
.section-scroll-track,
.section-scroll-thumb {
  transition:
    height 420ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 120ms linear,
    background-color 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.section-scroll-nav:hover .section-scroll-track,
.section-scroll-nav:hover .section-scroll-thumb {
  height: 4px;
}
.section-scroll-nav {
  opacity: 0;
  transform: translateX(-50%) translateY(28px);
  animation: scrollNavEnter 1400ms cubic-bezier(0.22, 1, 0.36, 1) 1300ms forwards;
}

.section-scroll-items button {
  opacity: 0;
  transform: translateY(14px);
  animation: scrollNavItemEnter 900ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.section-scroll-items button:nth-child(1) {
  animation-delay: 1650ms;
}

.section-scroll-items button:nth-child(2) {
  animation-delay: 1780ms;
}

.section-scroll-items button:nth-child(3) {
  animation-delay: 1910ms;
}

.section-scroll-items button:nth-child(4) {
  animation-delay: 2040ms;
}

.section-scroll-track {
  transform-origin: left center;
  transform: scaleX(0);
  animation: scrollTrackReveal 1200ms cubic-bezier(0.22, 1, 0.36, 1) 1450ms forwards;
}

@keyframes scrollNavEnter {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(28px);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes scrollNavItemEnter {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scrollTrackReveal {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

@keyframes scrollThumbReveal {
  from {
    opacity: 0;
    transform: translateX(0) scaleX(0.35);
  }

  to {
    opacity: 1;
    transform: translateX(0) scaleX(1);
  }
}
@keyframes brandMarkReveal {
  from {
    opacity: 0;
    filter: blur(8px);

    transform:
      scale(calc(1 - (0.12 * var(--logo-progress, 0))))
      translateY(24px);
  }

  to {
    opacity: 1;
    filter: blur(0);

    transform:
      scale(calc(1 - (0.12 * var(--logo-progress, 0))))
      translateY(0);
  }
}