/* Outsides — digital zine. Typeface: Theinhardt (same as the rest of the site).
 * Layout values (text cards, nav position, sound bars, slide-ins) are taken from the original app. */
@font-face {
  font-family: "Theinhardt";
  font-style: normal;
  font-weight: normal;
  font-display: swap;
  src: url("../../assets/fonts/Theinhardt-SemiExtended-Bold.woff2") format("woff2"), url("../../assets/fonts/Theinhardt-SemiExtended-Bold.woff") format("woff");
}
@font-face {
  font-family: "Theinhardt";
  font-style: italic;
  font-weight: normal;
  font-display: swap;
  src: url("../../assets/fonts/Theinhardt-SemiExtended-Bold-Italic.woff2") format("woff2"), url("../../assets/fonts/Theinhardt-SemiExtended-Bold-Italic.woff") format("woff");
}

*, *::before, *::after { box-sizing: border-box; }
/* no shadows on any text, anywhere in the zine */
.zine, .zine * { text-shadow: none !important; }
html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #141414;
  color: #fdfdfd;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
body {
  font-family: "Theinhardt", Helvetica, Arial, sans-serif;
  font-weight: normal;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}

.zine { position: fixed; inset: 0; cursor: pointer; overflow: hidden; background: #141414; transition: opacity .2s ease; }
.zine.is-leaving { opacity: 0; }

/* the split-screen canvas: slightly dimmed while the cover waits to be opened */
.zine-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 1; transition: opacity 1s cubic-bezier(.25, .46, .45, .94); }
.zine.is-intro .zine-canvas { opacity: .85; transition-duration: 2s; }
.zine-media { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }

/* The two lines of text — one card per half of the screen, text left-aligned inside it (as in the original) */
.zine-side {
  position: absolute;
  top: 0;
  height: 100%;
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 24px;
  font-size: 16px;
  letter-spacing: .02em;
  text-align: left;
  pointer-events: none;
  text-shadow: none;
  mix-blend-mode: difference;
}
.zine-side span { display: block; }
.zine-side-a { left: 0; }
.zine-side-b { left: 50%; }
.zine.is-intro .zine-side { visibility: hidden; }
@media (orientation: portrait) {
  .zine-side { width: 100%; height: 50%; line-height: 1.1111; }
  .zine-side-a { left: 0; top: 0; }
  .zine-side-b { left: 0; top: 50%; }
}
.left-anim  { animation: left-slide-in 1.5s cubic-bezier(.19, 1, .22, 1); }
.right-anim { animation: right-slide-in 1.5s cubic-bezier(.19, 1, .22, 1); }
@media (orientation: portrait) {
  .left-anim  { animation-name: top-slide-in; }
  .right-anim { animation-name: bottom-slide-in; }
}
@keyframes left-slide-in   { 0% { transform: translate(0, -100%); } 100% { transform: translate(0, 0); } }
@keyframes right-slide-in  { 0% { transform: translate(0, 100%); }  100% { transform: translate(0, 0); } }
@keyframes top-slide-in    { 0% { transform: translate(100%, 0); }  100% { transform: translate(0, 0); } }
@keyframes bottom-slide-in { 0% { transform: translate(-100%, 0); } 100% { transform: translate(0, 0); } }

/* Still hover areas over each line of text (the texts themselves move while peeking) */
.zine-zone { position: absolute; z-index: 2; display: none; }
.zine.is-open .zine-zone.has { display: block; }

/* Small images scattered over the screen (not part of the original app) */
.zine-notes { position: absolute; inset: 0; pointer-events: none; }   /* no overflow / transform here: either one stops mix-blend-mode on mobile Safari */
.zine-notes img {
  position: absolute;
  display: block;
  height: auto;
  max-width: none;
  mix-blend-mode: difference;
}
.zine.is-intro .zine-notes { visibility: hidden; }

/* The cover's "click to begin" line, sitting on the split line like the original's lever.
 * After the zine is opened the line disappears but its spot stays hoverable (the "peek"). */
.zine-lever {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 50%;
  min-width: 251px;
  transform: translate(-50%, 0);
  text-align: center;
  font-size: 16px;
  letter-spacing: .02em;
  opacity: 0;
  mix-blend-mode: difference;
  transition: opacity .3s cubic-bezier(.25, .46, .45, .94);
}
.zine.is-ready .zine-lever { opacity: 1; transition-delay: 1.1s; }
/* mobile only: the cover typewriter is anchored to the right edge, so the line grows leftward as it types */
@media (max-width: 750px) {
  .zine-lever, .zine-lever .zine-tw-live { text-align: right; }
}
/* desktop only: the cover typewriter and the two lines of text are 35% larger (16px -> 21.6px) */
@media (min-width: 751px) {
  .zine-side, .zine-lever { font-size: 21.6px; }
  .zine-lever { min-width: 339px; }
}
.zine-begin { opacity: 0; transition: opacity 1s ease; }
/* typewriter: the invisible full line holds the layout; the typed text is centred over it and grows outward from the middle; the blinking cursor takes no room */
.zine-begin { position: relative; }
.zine-tw-rest { visibility: hidden; }
.zine-tw-live { position: absolute; left: 0; right: 0; top: 0; text-align: center; }
.zine-tw-cursor { display: none; margin-left: 1px; }
.zine-tw-cursor::after { content: "|"; }
.zine-tw-cursor.is-on { display: inline-block; position: absolute; width: 0; overflow: visible; white-space: nowrap; animation: zine-cursor 1s infinite; }
@keyframes zine-cursor { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .zine-tw-cursor.is-on { animation: none; } }
.zine.is-ready.is-intro .zine-begin { opacity: 1; transition-delay: 1.6s; }
.zine:not(.is-intro) .zine-begin { opacity: 0; transition: opacity .5s ease; transition-delay: 0s; }
@media (orientation: portrait) {
  .zine-lever { left: auto; right: 0; transform: none; min-width: 0; max-width: 100%; padding: 0 32px 32px 0; }
}

/* Sound bars + "outsides" link: on the split line at the right edge, shown only once the zine is opened */
.zine-bar {
  position: absolute;
  z-index: 3;
  left: 0;
  bottom: 50%;
  width: 100%;
  height: 57px;
  padding-right: 32px;
  display: flex;
  justify-content: flex-end;
  align-items: baseline;   /* the link's baseline sits on the bottom edge of the equalizer bars */
  font-size: 16px;
  letter-spacing: 0;
  mix-blend-mode: difference;
  cursor: default;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
}
.zine.is-intro .zine-bar { display: none; }
.zine.is-open .zine-bar { visibility: visible; opacity: 1; animation: zine-bar-in 2s ease .6s backwards; }
@keyframes zine-bar-in { from { opacity: 0; } to { opacity: 1; } }
/* mobile: link + equalizer in the top-right corner (bars 16px from the top and right edges) */
@media (max-width: 750px) {
  .zine-bar { top: 0; bottom: auto; height: auto; padding: 6.4px 6.4px 0 0; }
}
/* desktop: link + equalizer sit in the bottom-right corner of the screen */
@media (min-width: 751px) {
  .zine-bar { bottom: 0; height: auto; padding: 0 22.4px 22.6px 0; }
}
.zine-issue {
  pointer-events: auto;
  display: block;
  line-height: 1;
  padding: 8px 0;
  margin: -8px 0;          /* bigger tap area without moving the baseline */
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.zine-issue:hover, .zine-issue:focus-visible { opacity: .75; }
.zine-sound {
  pointer-events: auto;
  appearance: none;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  width: 33px;
  height: 33px;
  padding: 9.6px;
  display: flex;           /* its baseline = bottom of the bars inside */
  align-items: flex-start;
  opacity: .9;
  cursor: pointer;
}
.zine-sound:hover, .zine-sound:focus-visible { opacity: 1; }
.zine-issue:focus-visible, .zine-sound:focus-visible { outline: 1px solid rgba(255, 255, 255, .6); outline-offset: 2px; }
.zine-bars { display: block; width: 14px; height: 14px; overflow: hidden; }
.zine-bar-line {
  float: left;
  width: 3px;
  height: 100%;
  margin-left: 2px;
  background: #fdfdfd;
  animation: zine-bars .83s linear infinite alternate;
  transition: transform .25s ease-out;
  transform: translateY(4%);
}
.zine-bar-line:first-child { margin-left: 0; transform: translateY(40%); animation-duration: .7s; }
.zine-bar-line:nth-child(2) { transform: translateY(15%); animation-duration: 765ms; }
.zine-bar-line:nth-child(4) { transform: translateY(40%); animation-duration: 895ms; }
.zine-sound.is-muted .zine-bar-line { transform: translateY(75%); animation: none; }
@keyframes zine-bars { 0% { transform: translateY(75%); } to { transform: translateY(4%); } }

@media (prefers-reduced-motion: reduce) {
  .zine-bar-line { animation: none; }
  .left-anim, .right-anim { animation-duration: .01s; }
}