* {
  box-sizing: border-box;
}

html,
body {
  cursor: url("customCursor/p3-medium.cur"), auto;
}

a,
button,
[role="button"],
input[type="button"],
input[type="submit"],
input[type="reset"],
label[for],
summary,
select {
  cursor: url("customCursor/p1-medium.cur"), pointer;
}

:root {
  --scene-width: 1949px;
  --scene-height: 1116px;
  --scene-scale: 1;
  --scene-offset-y: 24px;
  --projector-screen-left: 712px;
  --projector-screen-top: 118px;
  --projector-screen-width: 1371px;
  --projector-screen-scale-x: 1.4;
  --projector-screen-scale-y: 1;
  --projector-screen-rotate-x: 0deg;
  --projector-screen-rotate-y: 0deg;
  --projector-screen-rotate-z: 0deg;
  --projector-content-left: 1014px;
  --projector-content-top: 330px;
  --projector-content-width: 700px;
  --projector-content-scale-x: 1.09;
  --projector-content-scale-y: 1.03;
  --projector-content-rotate-x: 4.8deg;
  --projector-content-rotate-y: -10.9deg;
  --projector-content-rotate-z: -1.7deg;
  --cowboy-figure-left: 340px;
  --cowboy-figure-top: 430px;
  --cowboy-figure-width: 696px;
  --cowboy-figure-height: 686px;
  --cowboy-still-left: -6px;
  --cowboy-still-top: -103px;
  --cowboy-still-width: 400px;
  --cowboy-opening-left: -6px;
  --cowboy-opening-top: -103px;
  --cowboy-opening-width: 400px;
  --cowboy-hold-left: -6px;
  --cowboy-hold-top: -103px;
  --cowboy-hold-width: 400px;
  --cowboy-final-left: -6px;
  --cowboy-final-top: -103px;
  --cowboy-final-width: 400px;
  --cowboy-beams-left: -10px;
  --cowboy-beams-top: -4px;
  --cowboy-beams-width: 708px;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background-color: #000;
}

body {
  overflow: hidden;
  font-family: Georgia, serif;
  color: #fff;
}

.viewport {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  isolation: isolate;
  background-color: #000;
}

.viewport::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("homeAnimation/backgroundTile.png");
  background-position: top left;
  background-repeat: repeat;
  background-size: 108px 108px;
  opacity: 0.15;
  pointer-events: none;
  z-index: 0;
}

.site-info-toggle,
.site-info-panel {
  position: fixed;
  z-index: 40;
}

.site-info-toggle {
  right: clamp(0.8rem, 1.8vw, 1.4rem);
  bottom: clamp(0.65rem, 1.5vw, 1.2rem);
  padding: 0.48rem 0.78rem;
  border: none;
  border-radius: 0.4rem;
  background: rgba(26, 26, 26, 0.76);
  color: #f2f2f2;
  font-family: "Courier New", monospace;
  font-size: 0.88rem;
  line-height: 1;
  backdrop-filter: blur(8px);
  transition: transform 140ms ease, background-color 140ms ease, border-color 140ms ease;
}

.site-info-toggle:hover,
.site-info-toggle:focus-visible {
  background: rgba(42, 42, 42, 0.86);
  border-color: rgba(255, 255, 255, 0.28);
  transform: translateY(-1px);
}

.site-info-toggle:focus-visible,
.site-info-close:focus-visible,
.site-info-panel a:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.72);
  outline-offset: 3px;
}

.site-info-panel {
  top: auto;
  right: clamp(0.8rem, 1.6vw, 1.3rem);
  bottom: clamp(3.2rem, 5.5vw, 4.8rem);
  width: min(16.6rem, calc(100vw - 1.6rem));
  max-height: none;
  padding: 0.9rem 0.85rem 1rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 1rem;
  background: rgba(34, 34, 34, 0.82);
  color: #fafafa;
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.34);
  transform: none;
}

.site-info-panel[hidden] {
  display: none;
}

.site-info-panel h2,
.site-info-panel h3,
.site-info-panel p {
  margin: 0;
}

.site-info-header {
  position: relative;
  min-height: 1.6rem;
  padding-left: 1.45rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.site-info-panel h2 {
  font-family: Georgia, serif;
  font-size: clamp(0.94rem, 1.25vw, 1.22rem);
  font-weight: 400;
  line-height: 1.05;
  text-align: right;
  white-space: normal;
}

.site-info-section {
  margin-top: 0.58rem;
  text-align: right;
}

.site-info-section h3 {
  font-family: "Courier New", monospace;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.15;
}

.site-info-section p {
  margin-top: 0.08rem;
  font-family: "Courier New", monospace;
  font-size: 0.72rem;
  line-height: 1.14;
}

.site-info-panel a {
  color: #fafafa;
  text-decoration: underline;
  text-underline-offset: 0.14em;
  text-decoration-thickness: 1px;
}

.site-info-panel a:hover {
  color: #ffffff;
}

.site-info-close {
  position: absolute;
  top: 50%;
  left: 0;
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  padding: 0;
  border: none;
  background: transparent;
  color: #fff;
  font-family: Georgia, serif;
  font-size: 1.55rem;
  line-height: 1;
  transform: translateY(-50%);
}

.stage {
  position: absolute;
  top: calc(50% + var(--scene-offset-y));
  left: 50%;
  width: var(--scene-width);
  height: var(--scene-height);
  transform: translate(-50%, -50%) scale(var(--scene-scale));
  transform-origin: center center;
  overflow: hidden;
  z-index: 1;
}

.avatar,
.hamster-wheel,
.screen {
  position: absolute;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.screen {
  z-index: 0;
}

.screen-content {
  z-index: 1;
}

.cowboy-figure {
  z-index: 2;
}

.screen-content {
  position: absolute;
  left: var(--projector-content-left);
  top: var(--projector-content-top);
  width: var(--projector-content-width);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform-origin: top center;
  transform:
    perspective(1200px)
    rotateX(var(--projector-content-rotate-x))
    rotateY(var(--projector-content-rotate-y))
    rotateZ(var(--projector-content-rotate-z))
    scaleX(var(--projector-content-scale-x))
    scaleY(var(--projector-content-scale-y));
  transition: opacity 35ms linear;
}

.screen-content.is-projecting {
  visibility: visible;
  pointer-events: auto;
}

.screen-content-image {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

.screen-status-box {
  position: absolute;
  left: 31.5%;
  top: 23.9%;
  width: 36.7%;
  height: 9.8%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  pointer-events: none;
}

.screen-status-track {
  --status-scroll-width: 0px;
  display: flex;
  align-items: center;
  width: max-content;
  animation: screen-status-scroll 24s linear infinite;
  will-change: transform;
}

.screen-status-text {
  color: #fff;
  font-family: "Courier New", monospace;
  font-size: 34px;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  flex: 0 0 auto;
}

@keyframes screen-status-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(-1 * var(--status-scroll-width)));
  }
}

.screen-hotspots {
  position: absolute;
  inset: 0;
}

.screen-hotspot {
  --screen-row-fill: rgb(73 73 73);
  --screen-bar-thickness: 4px;
  --screen-bar-shift: 22px;
  --screen-mask-height: 10px;
  --screen-mask-bleed-x: 7px;
  --screen-left-start: 11.844%;
  --screen-left-end: 37.894%;
  --screen-right-start: 62.219%;
  --screen-right-end: 89.318%;
  --screen-line-y: 50%;
  position: absolute;
  left: 0;
  width: 100%;
  border-radius: 999px;
  color: transparent;
  text-decoration: none;
  outline: none;
  overflow: visible;
}

.screen-hotspot-mask,
.screen-hotspot-bar {
  position: absolute;
  top: var(--screen-line-y);
  pointer-events: none;
}

.screen-hotspot-mask {
  height: var(--screen-mask-height);
  background: var(--screen-row-fill);
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity 170ms ease;
  z-index: 1;
}

.screen-hotspot-bar {
  height: var(--screen-bar-thickness);
  background: #fff;
  transform: translateY(-50%) translateX(0);
  transition: transform 170ms ease;
  z-index: 2;
}

.screen-hotspot-mask--left {
  left: calc(var(--screen-left-start) - var(--screen-mask-bleed-x));
  width: calc(var(--screen-left-end) - var(--screen-left-start) + (var(--screen-mask-bleed-x) * 2));
}

.screen-hotspot-mask--right {
  left: calc(var(--screen-right-start) - var(--screen-mask-bleed-x));
  width: calc(var(--screen-right-end) - var(--screen-right-start) + (var(--screen-mask-bleed-x) * 2));
}

.screen-hotspot-bar--left {
  left: var(--screen-left-start);
  width: calc(var(--screen-left-end) - var(--screen-left-start));
}

.screen-hotspot-bar--right {
  left: var(--screen-right-start);
  width: calc(var(--screen-right-end) - var(--screen-right-start));
}

.screen-hotspot--about {
  --screen-left-start: 11.844%;
  --screen-left-end: 37.894%;
  --screen-right-start: 62.219%;
  --screen-right-end: 89.318%;
  --screen-line-y: 77.542%;
  top: 37%;
  height: 9.6%;
}

.screen-hotspot--gallery {
  --screen-left-start: 11.844%;
  --screen-left-end: 27.549%;
  --screen-right-start: 72.414%;
  --screen-right-end: 89.318%;
  --screen-line-y: 65.7%;
  top: 51.2%;
  height: 11%;
}

.screen-hotspot--projects {
  --screen-left-start: 11.844%;
  --screen-left-end: 26.799%;
  --screen-right-start: 73.163%;
  --screen-right-end: 89.318%;
  --screen-line-y: 60.082%;
  top: 65.8%;
  height: 11%;
}

.screen-hotspot--education {
  --screen-left-start: 11.844%;
  --screen-left-end: 36.094%;
  --screen-right-start: 64.018%;
  --screen-right-end: 89.318%;
  --screen-line-y: 59.92%;
  top: 80.4%;
  height: 10%;
}

.screen-hotspot:hover .screen-hotspot-mask,
.screen-hotspot:focus-visible .screen-hotspot-mask {
  opacity: 1;
}

.screen-hotspot:hover .screen-hotspot-bar--left,
.screen-hotspot:focus-visible .screen-hotspot-bar--left {
  transform: translateY(-50%) translateX(calc(var(--screen-bar-shift) * -1));
}

.screen-hotspot:hover .screen-hotspot-bar--right,
.screen-hotspot:focus-visible .screen-hotspot-bar--right {
  transform: translateY(-50%) translateX(var(--screen-bar-shift));
}

.cowboy-figure {
  position: absolute;
  left: var(--cowboy-figure-left);
  top: var(--cowboy-figure-top);
  width: var(--cowboy-figure-width);
  height: var(--cowboy-figure-height);
}

.cowboy-layer {
  position: absolute;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.cowboy-body,
.cowboy-beams {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cowboy-body {
  z-index: 1;
}

.cowboy-head {
  opacity: 0;
  z-index: 2;
}

.cowboy-head.is-active {
  opacity: 1;
}

.cowboy-head--still,
.cowboy-head--opening,
.cowboy-head--hold {
  height: auto;
}

.cowboy-head--still {
  left: var(--cowboy-still-left);
  top: var(--cowboy-still-top);
  width: var(--cowboy-still-width);
}

.cowboy-head--opening {
  left: var(--cowboy-opening-left);
  top: var(--cowboy-opening-top);
  width: var(--cowboy-opening-width);
}

.cowboy-head--hold {
  left: var(--cowboy-hold-left);
  top: var(--cowboy-hold-top);
  width: var(--cowboy-hold-width);
}

.cowboy-head--final {
  left: var(--cowboy-final-left);
  top: var(--cowboy-final-top);
  width: var(--cowboy-final-width);
  height: auto;
}

.cowboy-beams {
  left: var(--cowboy-beams-left);
  top: var(--cowboy-beams-top);
  width: var(--cowboy-beams-width);
  height: auto;
  z-index: 3;
  opacity: 0;
  filter: brightness(1.08);
  transition: opacity 35ms linear;
}

.screen {
  left: var(--projector-screen-left);
  top: var(--projector-screen-top);
  width: var(--projector-screen-width);
  height: auto;
  transform-origin: center center;
  transform:
    perspective(1400px)
    rotateX(var(--projector-screen-rotate-x))
    rotateY(var(--projector-screen-rotate-y))
    rotateZ(var(--projector-screen-rotate-z))
    scaleX(var(--projector-screen-scale-x))
    scaleY(var(--projector-screen-scale-y));
}

@media (max-width: 760px) {
  .site-info-panel {
    right: 0.8rem;
    left: 0.8rem;
    width: auto;
  }
}