/* =========================================================
   TITLE SCREEN (shown first; the Enter button plays the ribbon
   and reveals the homepage underneath)
   Colours come from css/variables.css (--color-title-*).
   ========================================================= */

.title-screen {
  position: fixed;
  inset: 0;
  z-index: 2000;                 /* above everything, incl. the thread editor (1000) */

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

  padding: calc(24px + env(safe-area-inset-top, 0px)) 24px calc(24px + env(safe-area-inset-bottom, 0px));

  background-color: var(--color-title-bg);

  /* Same dot grid as the homepage (.dots in css/home.css), so the dots line up when the title goes away */
  background-image: radial-gradient(
    circle at calc(var(--dot-size) / 2) calc(var(--dot-size) / 2),
    var(--color-dot) calc(var(--dot-size) / 2),
    transparent calc(var(--dot-size) / 2 + 0.5px)
  );
  background-size: var(--dot-gap) var(--dot-gap);

  color: var(--color-title-text);
  font-family: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  cursor: var(--cursor-figma);   /* Figma-style arrow, also over the Enter button */
}

.title-screen[hidden] {
  display: none;
}

/* The page behind cannot scroll while the title screen is showing */
html:has(.title-screen:not([hidden])) {
  overflow: hidden;
}

.title-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title-sub {
  max-width: 35rem;
  margin: 0;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.65;
}

.title-enter {
  position: relative;
  width: min(190px, 86vw);
  height: 90px;
  margin: var(--title-button-gap) 0 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: var(--cursor-figma);
  color: var(--color-title-button-line);
  font: 400 24px/1 "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: .01em;
  -webkit-tap-highlight-color: transparent;
}

/* The two pills: the key top and the lip showing underneath it */
.title-enter__top,
.title-enter__lip {
  position: absolute;
  left: 0;
  right: 0;
  height: 78px;
  border: 2.5px solid var(--color-title-button-line);  /* border thickness */
  border-radius: 999px;
  box-sizing: border-box;
}

.title-enter__lip {
  top: 12px;
  background: var(--color-title-button-bg);
  transition: background-color .15s ease;
}

.title-enter__top {
  top: 0;
  display: grid;
  place-items: center;
  background: var(--color-title-button-bg);
  transition: transform .08s ease;
}

.title-enter__label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.title-enter svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.title-enter:hover .title-enter__lip {
  background: var(--color-title-button-hover-lip);
}

.title-enter:active .title-enter__top {
  transform: translateY(8px);      /* the key is pressed down */
}

.title-enter:focus-visible {
  outline: 3px dashed var(--color-title-button-line);
  outline-offset: 10px;
  border-radius: 999px;
}

.title-enter:disabled {
  cursor: var(--cursor-figma);
}

@media (prefers-reduced-motion: reduce) {
  .title-enter__top,
  .title-enter__lip {
    transition: none;
  }
}

/* Click burst: after Enter is clicked, short rays flash out on the left and right of the button
   (like the click icon). Added by js/title/main.js via the .is-clicked class. */
.title-enter__burst {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.title-enter__ray {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;                    /* ray length */
  height: 2.5px;                 /* ray thickness */
  margin: -1.25px 0 0 -4px;
  border-radius: 999px;
  background: var(--color-title-button-line);
  opacity: 0;
}

.title-enter__ray:nth-child(1) { --x: 95.8px; --y: -38.4px; --r: -21.8deg; }
.title-enter__ray:nth-child(2) { --x: 117.0px; --y: 0.0px; --r: 0.0deg; }
.title-enter__ray:nth-child(3) { --x: 95.8px; --y: 38.4px; --r: 21.8deg; }
.title-enter__ray:nth-child(4) { --x: -95.8px; --y: 38.4px; --r: 158.2deg; }
.title-enter__ray:nth-child(5) { --x: -117.0px; --y: 0.0px; --r: 180.0deg; }
.title-enter__ray:nth-child(6) { --x: -95.8px; --y: -38.4px; --r: -158.2deg; }

.title-enter.is-clicked .title-enter__ray {
  animation: title-ray-burst .6s cubic-bezier(.2, .8, .2, 1) forwards;
}

@keyframes title-ray-burst {
  from {
    opacity: 0;
    transform: translate(var(--x), var(--y)) rotate(var(--r)) translateX(-6px) scaleX(.3);
  }
  25% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate(var(--x), var(--y)) rotate(var(--r)) translateX(12px) scaleX(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .title-enter.is-clicked .title-enter__ray {
    animation: none;
  }
}

/* Click burst on the empty space: rays flash out around the cursor, then go.
   Created by js/title/click-burst.js. Rays sit around the cursor tip like the click icon: top, top-left, top-right, left and right (the bottom is left free for the cursor arrow). */
.title-click {
  position: fixed;
  width: 0;
  height: 0;
  pointer-events: none;
  transform: rotate(-36deg);     /* tilt the whole burst to match the cursor arrow, whose body points down-right at ~54deg (not straight down) */
  transform-origin: 0 0;         /* the cursor tip */
}

.title-click__ray {
  position: absolute;
  left: 0;
  top: 0;
  width: 8px;                    /* ray length */
  height: 2.5px;                 /* ray thickness */
  margin: -1.25px 0 0 -4px;
  border-radius: 999px;
  background: var(--color-title-button-line);
  opacity: 0;
  animation: title-click-ray-burst .6s cubic-bezier(.2, .8, .2, 1) forwards;
}

.title-click__ray:nth-child(1) { --x: 0.0px; --y: -12.0px; --r: -90deg; }
.title-click__ray:nth-child(2) { --x: 8.5px; --y: -8.5px; --r: -45deg; }
.title-click__ray:nth-child(3) { --x: 12.0px; --y: 0.0px; --r: 0deg; }
.title-click__ray:nth-child(4) { --x: -8.5px; --y: -8.5px; --r: -135deg; }
.title-click__ray:nth-child(5) { --x: -12.0px; --y: 0.0px; --r: 180deg; }

@keyframes title-click-ray-burst {
  from {
    opacity: 0;
    transform: translate(var(--x), var(--y)) rotate(var(--r)) translateX(-2px) scaleX(.3);
  }
  25% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate(var(--x), var(--y)) rotate(var(--r)) translateX(6px) scaleX(1);
  }
}

/* The ribbon that sweeps across the screen */
.title-ribbon {
  position: fixed;
  inset: 0;
  z-index: 2100;                 /* above the title screen */
  pointer-events: none;
}

.title-ribbon[hidden] {
  display: none;
}

.title-ribbon svg {
  display: block;
}


/* =========================================================
   ENTRANCE OF THE HOMEPAGE
   Starts once the ribbon animation has finished completely.
   Order: the header links, the two text lines, then the folder assets (front cover first,
   then inside page 1, 2, 3, and the back cover last). Each one starts
   --entrance-layer-stagger after the one before.
   `backwards` means nothing is left on the elements afterwards,
   so the folder's hover / open animations are not affected.
   ========================================================= */

/* Hidden while the ribbon is playing */
html:has(.title-ribbon:not([hidden])) .resume-link,
html:has(.title-ribbon:not([hidden])) .intro p,
html:has(.title-ribbon:not([hidden])) .folder {
  opacity: 0;
}

.intro-line {
  display: inline-block;
}

.site-header .resume-link:nth-of-type(1) { --i: 0; }
.site-header .resume-link:nth-of-type(2) { --i: 1; }
.site-header .resume-link:nth-of-type(3) { --i: 2; }

.intro .intro-line:nth-of-type(1) { --i: 3; }
.intro .intro-line:nth-of-type(2) { --i: 4; }

.folder .lc { --i: 5; }
.folder .l1 { --i: 6; }
.folder .l2 { --i: 7; }
.folder .l3 { --i: 8; }
.folder .lb { --i: 9; }

html:not(:has(.title-screen:not([hidden]))):not(:has(.title-ribbon:not([hidden]))) .resume-link,
html:not(:has(.title-screen:not([hidden]))):not(:has(.title-ribbon:not([hidden]))) .intro-line {
  animation: home-heading-in var(--entrance-duration) cubic-bezier(.2, .8, .2, 1) calc(var(--entrance-delay) + var(--i, 0) * var(--entrance-layer-stagger)) backwards;
}

html:not(:has(.title-screen:not([hidden]))):not(:has(.title-ribbon:not([hidden]))) .folder .layer {
  animation: home-folder-in calc(var(--entrance-duration) * 1.1) cubic-bezier(.2, .8, .2, 1) calc(var(--entrance-delay) + var(--i, 0) * var(--entrance-layer-stagger)) backwards;
}

@keyframes home-heading-in {
  from {
    opacity: 0;
    transform: translateY(48px);
  }
}

@keyframes home-folder-in {
  from {
    opacity: 0;
    transform: translateY(96px) scale(.94);
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not(:has(.title-screen:not([hidden]))):not(:has(.title-ribbon:not([hidden]))) .resume-link,
  html:not(:has(.title-screen:not([hidden]))):not(:has(.title-ribbon:not([hidden]))) .intro-line,
  html:not(:has(.title-screen:not([hidden]))):not(:has(.title-ribbon:not([hidden]))) .folder .layer {
    animation: none;
  }
}